LoginSignup
7
7

More than 5 years have passed since last update.

【Sketch.app】ダミーの写真や文章入りUIをサクッと用意する方法

Last updated at Posted at 2015-07-29

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」 をクリック
スクリーンショット 2015-07-29 午後1.18.34.png

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]から開いたほうが効率がいい。設置後は要再起動。

スクリーンショット 2015-07-29 午後0.38.38.png

3.使ってみる

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

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

スクリーンショット 2015-07-29 午後1.03.27.png

ランダムで配置したい場合はシンボル化を解除する(同じ写真になってしまう)
スクリーンショット 2015-07-29 午後1.03.47.png

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

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

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

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

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

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

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

スクリーンショット 2015-07-29 午後1.09.30.png

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

まとめ

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

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

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

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

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7