Sketchで効率よくデザインするために

ダミーの写真や文章の流し込みが面倒くさくて地味に時間が取られる。

Pluginで解決しよう。

「Content-generator-sketch-plugin」っていうSketch.appのPluginは、
いろんなダミー素材を、半自動でランダムにオブジェクトに組み込むことができてすごく便利。

本番に近い状態でUIを評価したい

雰囲気大事、このPluginのいいとろこはカスタマイズできて日本語もいけちゃうってとこ。日本語ってのが大事。

住所、氏名、説明文、もろもろ

使えるデータ

文章

• 人名
• 長文
• 住所
• 日付
• 電話番号 etc...

写真

• 人物男女
• 自然
• アーティスト etc...

※よく使うものが数種類用意されています。
※Plugin 以下のカスタマイズで追加も可能

導入方法（2015/7/29）

SketchのPlugin Manager、sketchToolboxで、検索してダウンロード＆インストールした場合は日本語対応版入らないので。手動で入れましょう。

1.日本語対応版をダウンロード

↓で日本語対応版が公開されているのでありがたく使わせてもらう。
https://github.com/riszw/Content-generator-sketch-plugin

Github よりDownload ZIP

スクショ右下　「Download ZIP」 をクリック

2.Pluginをぶっこむ

ダウンロードして解凍した「Content-generator-sketch-plugin-master」は指定のディレクトリに設置する必要がある。

名前が「Content-generator-sketch-plugin-master」だとPluginとして表示されるnameも同上になるので、好みでファイル名を変更しておこう。

階層

Library / Containers / com.bohemiancoding.sketch3 / Data / Library / Application Support / com.bohemiancoding.sketch3 / Plugins

大分階層が深いので、Sketchアプリ立ち上げ後のメニュー[Plugin]から開いたほうが効率がいい。設置後は要再起動。

3.使ってみる

ダミーの写真を配置する場合

Plugins > Content-generator-sketch-plugin > Photo [任意項目]

ランダムで配置したい場合はシンボル化を解除する（同じ写真になってしまう）

ダミーテキストを配置する場合

Plugins > Content-generator-sketch-plugin > [任意項目]

xxxx_jaとなっているのが日本語対応。

いろいろ試してみると面白い。

長文テキストデータは青空文庫より

• kumonoito_ja.js 芥川龍之介 蜘蛛の糸
• yodakanohoshi_ja.js 宮沢賢治 よだかの星
• gongitsune_ja.js 新美南吉 ごん狐

住所は都道府県庁所在地 json データが利用されている。

注意としてはテキストを編集する前に、必ずテキストが入る領域を決めること。
元の文字数より多いと、最初のテキスト領域の横幅に合わせて改行されてしまうため、編集した後で横幅を変更すると、xとyの位置がズレてしまい、余計に手間がかかる。

まとめ

デザイナーが後回しにしがちな、環境setupの部類にはいる作業。面倒臭いが確実に時短につながると思われる。

ダミーデータ侮る無かれ。

最近は個人的にカンボジアのサイト作成とかが多いので、クメール語対応版とかつくってPULLリクしてみようかと企んでみる。

早々、実現したいところ。