Two hats

Design + technologies

illustratorでUIデザイン:設定編

f:id:two-hats:20140814084537j:plain
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。

Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。

ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。

今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のillustratorはCS6なので、CCにはより最適な設定があるかもしれません。


1.新規ドキュメントのプロファイルを「Web」にする。併せて「新規オブジェクトのピクセルグリッドに整合」のチェックを外す。

illustratorの新規ドキュメントのデフォルトは印刷物に最適な設定になっています。
Webを選ぶことによって、ある程度画面に表示するものに最適な設定に変わります。
「ピクセルグリッドに整合」は後述しますが、座標が整数にならなくなってしまうため外しておいて下さい。
※ピクセルグリッドに整合のチェックを外すと、プロファイルは「カスタム」と表示されます。
f:id:two-hats:20140814084746j:plain


2.「表示>ピクセルプレビュー」にチェックを入れる。

illustratorベクター形式のデータで、どこまでもズームしていってもキレイに表示できるという特徴があります。ただ、UIなどピクセルベースのものをデザインする際にはディテールを確認したいがためズームしたときにキレイに表示されてしまうと、実際の見栄えと異なってしまうので少し厄介です。
このオプションを入れることによって拡大してもピクセルの粗さはそのままになります。

3.上記の設定の後、「表示>ピクセルにスナップ」をチェックする。

このオプションにチェックを入れると、新しいオブジェクトを作るときに整数のピクセルにスナップされるようになります。UIの座標系では小数点まで指定することはほぼないので、このチェックは忘れずに入れるようにしましょう。
f:id:two-hats:20140814084933g:plain

f:id:two-hats:20140814090339j:plain


4.変形パネルの「ピクセルグリッドに整合」のチェックを外す。

illustratorの線デフォルトは、「内側」でも「外側」でもなく「中央」です。その状態でピクセルピッタリに見えるようにするオプションです。但し、線の太さ1px+中央でピクセルピッタリにするために、座標が「 〜.5px」という中途半端な数値になってしまいます。
座標指示するときに少々厄介になるのでこのオプションは外して、線は「内側」にしておいてください。
f:id:two-hats:20140814090432g:plain


5.アピアランスパネルのオプションで「新規アートに基本アピアランスを適用」のチェックを外す。

このチェックが入っていると新しい図形を描くたびに、デフォルトの塗り白+黒線のアピアランスになってしまいます。ここで厄介なのが、線が「中央」に戻ってしまうことです。
(毎回毎回内側の線にするのが億劫で・・・)
このチェックを外しておくことによって、直前のアピアランスを保持したまま新しい図形が描け、作業の効率化につながります。
f:id:two-hats:20140814090708j:plain


6.「環境設定>一般>キー入力」を「1px」にする。

この設定を1pxにしておくと、オブジェクトを選択して上下左右キーを押した時に、それぞれの方向へ1pxずつ動くようになります。Shiftキーを押しながらだと10pxずつになります。
f:id:two-hats:20140814090741j:plain


7.「環境設定>単位」で単位をピクセルにする。

座標系の単位がピクセルになります。文字はピクセルにするかポイントにするかは、開発対象のシステムごとに変更したほうが良いと思いますが、illustratorのドキュメントには解像度の概念が無いはずなので「ピクセルの大きさ=ポイントの大きさ」になります。
f:id:two-hats:20140814090803g:plain


8.「環境設定>グリッド・ガイド」でグリッドのサイズを変更する。

開発対象のシステムごとに最適なグリッドにします。例えばAndroidの場合は6の倍数ごとがよいので「グリッド6px、分割数6」、Windows8の場合は10の倍数ごとがよいので「グリッド10px、分割数10」などに設定します。
f:id:two-hats:20140905222828g:plain


9.「アートボード」のサイズを画面サイズに合わせる。

「プリセット」または「幅・高さ」を指定してアートボードのサイズを変更することができます。
f:id:two-hats:20140814090907g:plain


10.「表示>定規>ビデオ定規を表示」でアートボードごとに表示される定規を設定する。

この定規はアクティブなアートボードだけにしか表示されないので、現在どのアートボードが選択されているかがわかりやすくなります。
f:id:two-hats:20140814090941g:plain


11.開発対象のシステムで使用するフォントをシンボルに設定しておく。

よく使うフォントをシンボルとしてあらかじめ登録しておくと、いちいちフォントの種類を選ぶという手間が省けるようになります。
f:id:two-hats:20140814091004g:plain


12.上記の設定を再利用できるよう「テンプレートに保存」をしておく。

11番までで下ごしらえはほぼ終わりなのですが、毎度毎度設定するのは手間です。
そこでテンプレートとして保存しておくと、次回から上記の設定を行っている新規ドキュメントを作成できるようになります。
また、11番で設定したシンボルの設定も引き継ぐので11番は必ず行っておいたほうが良いと思います。

さらによく使う画面サイズごとにテンプレートを数種類用意しておくとよいでしょう。
f:id:two-hats:20140814091039g:plain

私が作成したテンプレートをダウンロードできるようにしました。
illustratorのtempletes

これらの設定を行うと、とりあえずUIデザイン用のファイルを作れる下準備ができたことになります。次は実際にデザインをしていく際のTIPSを紹介したいと思います。