Illustratorで調整に強いアイコン、ロゴ、UIづくり 第4回：UIデザインのワークフロー

連載

Illustratorで調整に強いアイコン、ロゴ、UIづくり

Illustrator CC （2014年10月公開） 対応

今回はIllustrator を使用した管理・流用しやすいUI デザインのワークフローについて紹介します。

Illustrator CC の体験版をダウンロード

題材として、この連載の第２回で扱った「IdeaGrid」というアプリのUI デザインのワークフローを見てみましょ
う。

このアプリはいわゆるメモ帳アプリです。ブック内の1 ページだけのノートが基本単位で、ノートに付箋を貼
る形でアイデアを書き留めます。付箋はまとめて階層化することもできる新しいタイプのアプリです。

デザインの依頼を受ける段階ですでに手書きの画面仕様書や実際に動作するモックアップがあり、モックアッ
プはiOS とOS X 用の2 種類が開発されていました。

モックアップを触りながら、UI の改善点を見つけ、デザインに落とし込んでいきます。

手書きの画面仕様書の一部

モックアップのスクリーンショット

複数アートボードで各画面デザインを管理する

まず、最初に画面遷移を配置して、個々の画面デザインを行います。

テンプレートから新規ファイルを作成して、必要な画面毎にアートボードを作ります。メインの機種がiPhone5s でしたので、640x1136px のサイズでアートボードを増やしていきます。

第2 回: ロゴデザインのワークフローでは、ひとつのIllustrator ファイルでアートボードによるバージョン管理を紹介しましたが、画面毎にバージョン管理するとなると、Illustrator で扱えるアートボード数の上限（100 個）をすぐに超えてしまいます。

そのためUI デザインではバージョンを上げるたびにファイルを複製し、ファイル名に「-v01」といった数字を付加して管理しています。

画面遷移をアートボードに

ワークフローとしては、モックアップと同じ画面をそれぞれのアートボード上に再現しつつ、各要素のデザインやレイアウトを少しずつ詰めていきます。

開発途中でフラット化の流れが来て、デザインテイストの大幅な見直しもありましたが、最終的にこんな感じのUI ができあがりました。

完成したUIデザイン

異なる画面サイズも一緒にデザインする

主要な画面については、あらかじめ複数の画面サイズでデザイン案を作成します。画面の高さ違いによってボタンの配置や大きさの調整が必要になるので、同時に進行した方が効率的です。

下は起動した後に表示されるブック画面と呼ばれる画面です。

サイズ違いのブック画面

それぞれのパーツは作る度にシンボル化やグループ化してサイズ違いのデザインである隣のアートボードにペーストして配置し直しています。

その際、編集メニューの「同じ位置にペースト」をうまく活用すると位置調整が楽になります。

同じ位置にペースト

「同じ位置にペースト」は各アートボードの左上基準の座標でペーストされるので、アートボードのサイズが異なっていても、上部にある「IdeaGrid」のロゴや歯車ボタンなどは座標を意識することなく同じ位置に配置できます。

主要画面についてはMac 版も同じファイル内で用意しました。iOS 版で作ったオブジェクトを複製して、アイコンの大きさやレイアウトを調整します。

レイアウトはモニターやウインドウのサイズで多少左右されますが、MacBook Air の11 インチの画面サイズ(1366x768px) でのフルスクリーン表示を想定して作成しています。

Mac版の主要画面

画面間で共有するパーツは使い回せるようにこのようにシンボル化しています。

シンボル一覧

またレイヤー構造はとてもシンプルにしています。

一つのファイル内に多様なオブジェクトがあるので、レイヤーも複雑になりそうですが、おおまかな分け方しかしていません。

レイヤー構造

上の図のレイヤー構造は、

です。

ほとんどのオブジェクトは「objects」レイヤーに置いていて、デザインをしている時はこのレイヤー以外をロックして作業することが多いです。「//」が入っているレイヤーは画像を書き出す際に非表示にするようにルール付けしています。

書き出す素材も同じファイルで管理

デザイン案にOK をもらった後は各アイコンを素材として書き出す必要があります。

同じIllustrator ファイル内に素材一覧用の大きめのアートボードを一つ作って、画面デザインの段階で作った沢山のシンボルやオブジェクトを並べて、スライス名とスライスする枠も一緒に書き込みます。いざアイコンの修正が入っても、画面デザインも素材一覧も一括で変更できるので、変更漏れやミスを減らすことができます。

書き出す際は、このアートボードの背景を透明にしてスライスツールなどを使ってスライスします。( 現在はもう少し別の手法を取っていますが、ここでは割愛させていただきます。)

また、このアートボード自体も画像として書き出し、素材一覧としてクライアントへ提出するようにしています。これも素材の提出し忘れを防ぐのに役立っています。

書き出す素材一覧

すべてのアートボードを覆う大きなアートボードを作って、サイトマップとして書き出す

必要な画面デザインすべてをアートボードとして並べて管理できるのが、Illustrator の利点ですが、さらにすべてのアートボードを覆うようなアートボードを作り、画面遷移の矢印を書き込んだレイヤーを作れば、あっという間に簡易的なサイトマップも完成します。

この手法もクライアントとの理解の行き違いを無くすのに役立っています。

大きなアートボードで簡易サイトマップ

一つのファイルに拘りすぎず別のファイルでも管理もします

IdeaGrid のブックデザインは色や質感、テキスタイルのバリエーションについてのやり取りが多かったので、別のIllustrator ファイルを作成しました。無理に一つのファイルで作成することに拘らずに、効率よく進められそうな方法を模索しながら進めています。

このファイルでは左のアートボードでデザイン案を作成。右のアートボードで書き出すパターン素材を整理しています。これらのパーツはグリッド画面の背景としても流用するので、縦横にループする模様とループしない大きな柄は別々に書き出せるように配置されています。

別ファイルで作ったブックデザイン

複数人で作業しても最新のファイルは一つ

「三階ラボの二人の役割分担は?」とよく質問されるのですが、「特にありません…」 という返答しています。基本的に同じIllustrator ファイルを交互に開いて、デザイン作業をしています。同時に分担して作業する場合は一旦ファイルを複製して、その日の作業が終わり次第、一つのファイルに統合するというやり方を取っています。

「どちらかが担当しても常に最新のファイルは一つ」という状態を保てるルールを決めているので、特に混乱することはありません。このルールでやっていけるのも、一つのファイルで完結できるIllustrator だからこそ可能になる「管理・流用しやすいワークフロー」だと考えています。

ざっくりとした紹介ではありましたが、他の案件においてもおおよそ同じようなワークフローで進めています。この連載では伝えきれなかったIllustrator の小技やワークフローなどは、三階ラボのサイトでのんびり紹介していく予定ですので、今後ともよろしくお願いいたします。

以上、第4 回: UI デザインのワークフローでした。お付き合いいただきありがとうございました。

※「IdeaGrid」に興味のある方はこちら(http://ideagrid.me) をご覧ください。