Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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リクしてみようかと企んでみる。

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

norinity1103
毎日がサバイバル。DMM.com 複業デザイナー。Dappsの開発を少々。旅好きの飲み好きのプロの酔っ払いです。
https://note.mu/norinity1103
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした