昨今、マルチデバイス化にともなってデジタルメディアのデザインでもベクターデータの需要が上がってきました。それにともないIllustratorやSketchでUIデザインを制作する機会も増えてきたと思います。
そんな中、流行りものが好きでミーハーな私は「イラレでUI作るといいらしいよ…」という噂を聞き、早速やってみることにしました。
約半年間のナレッジを「環境設定、管理、効率化」という章に分けてご紹介します。
環境設定編
「株式会社三階ラボ」さんの記事を一読して、やってる間に慣れます。
こちらの本も大変参考になります！
Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術
管理編
文字、色、パーツをしっかり管理して複数人作業、作業効率化、うっかり反映漏れを防ぎます。
汎用パーツのシンボル管理
- できるだけ最小単位でシンボル化する
- パーツを組み合わせる際は、シンボル同士を組み合わせる
- すべてのパーツはつくったその場でシンボル化する（後回しにするといつの間にか大量に使用していることが…）
- 伸縮パーツは「9スライスの拡大・縮小用ガイドを有効」にする（例：button、slider、pop-up）
- 拡大縮小、回転などは使わない（見た目の数値は正しくてもIllustrator仕様で小数点が出やすくボケの原因になります）
スウォッチの管理
- 区別方法はbackground、border、text、icon、button、指示書き用など
- カラーコードを書く（後のガイドラインまたは指示書をつくるときに役立ちます）
文字は「段落スタイル」で管理する
影はPSDでつくってリンク配置する（最後に一斉埋め込み）
- Illustratorで効果をつけてグラフィックスタイルに登録しても良いです
- Illustratorで効果をつける際は重くなるので、作業中はアピアランスメニューで表示をオフにする
シンボル、スウォッチの管理について
新規でパーツや色をつくった際は必ずマスターデータ*1 に移して管理します。 シンボル化、グローバルスウォッチ化はこのマスターデータで行いましょう。
シンボル、スウォッチはライブラリとして書き出して作業者のプリセットに格納しましょう。 これで複数作業者で共通のライブラリが使えます。
格納場所《アプリケーション＞Adobe Illustrator XX＞プリセット＞ja_JP＞シンボルorスウォッチ》
書き出し方法
- シンボル《パネルオプション＞シンボルライブラリを保存》
- スウォッチ《パネルオプション＞スウォッチライブラリをIllustratorとして保存》
*1 マスターデータ
汎用的につかうパーツや色を管理するデータです。
例）text style、icon、button、background
効率化編
より早く、よりきれいにデザインデータを作ります。
- グラデーションまたは塗りと線の組み合わせはグラフィックスタイルをつかう
- ざっくりアートボードに名前をつける
- どんどん増やせるのでどこにあるのか探すのに時間が掛かります
- どんどん増やせるのでどこにあるのか探すのに時間が掛かります
オススメScript
「株式会社三階ラボ」さんのScriptです。
テキスト編集ダイアログ
データが軽い場合は直接編集しても問題ないが、重くなってくるとこのScriptは軽く便利！
アートボード書き出しダイアログ
カンプやアイコンをアートボードごとに一括で書き出してくれます。
命名方法も細かく設定できるので、便利！
選択したアイテムを中心に100%表示
Illustratorの仕様上、アートボードを中心に100%表示されてしまうので、Photoshopをよく使う人はこれがあると違和感なくイラレでUI作れます。
アートボード作成
アイコンや画面など一気に書き出したり、簡単にアートボードの位置を調整したりできるのでUI制作の強い味方です。
Scriptの管理とショートカットキーの制御
「ものかの」さんのアプリケーションを使っています。
アウトラインモードでキレイに配置する
⌘+yで線のみのアウトラインモードになり、パーツがきれいに配置されているか確認できます。その他に⌘+alt+yでピクセルプレビューモードにもできます（ボケがないか確認）
保存の際「PDF互換ファイルを作成」のチェックを外す
劇的データがに軽くなります。
以上です。
制作時、なにか参考になれば幸いです！
ありがとうございました。
