Illustratorで調整に強いアイコン、ロゴ、UIづくり 第3回：テンプレートの用意と流用しやすいデータづくり

連載

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

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

今回は、Illustrator のテンプレートやシンボルなどを使用した、管理・流用しやすいデータづくりについて紹 介します。

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

テンプレートを用意する

Illustratorでは、あらかじめ好みに設定した独自のドキュメントを用意し、それを新規ドキュメントとして開くことができるテンプレートというものがあります。

作業の種類に応じたテンプレートを用意しておくことにより、作業にあった、使いやすい新規ドキュメントをすぐに開くことが出来るようになります。Webデザイン時にはWebデザイン用に用意したテンプレートを、UIデザイン時にはUIデザイン用に用意したテンプレートを新規ドキュメントして開く、といった案配です。

まずはベースとなるプレーンなテンプレートを準備してみましょう。

「ファイル」 → 「新規…」 で新規ドキュメントを作成します。

新規ドキュメントダイアログ

このダイアログの説明は入門記事を参照ください。

作成されたドキュメントには、サンプルとしてスウォッチやシンボル、グラフィックスタイル、ブラシなどが登録されていると思います。これらのサンプルは実際に使用することはなく、作業の邪魔になったり無駄にデータが重くなってしまうので削除してしまいましょう。

（不要なものを削除するだけで、ファイルサイズを1/5程度に減らすことができます。）

一通りの設定が終わったら、テンプレートファイルとして保存しましょう。「ファイル」→「保存…」→ファイル形式: Illustrator Template (ait) を選択し保存します。

以後、新規にドキュメントを作成する場合は、先ほど作成したテンプレートファイル（.ait）を

のどちらかを実行することで、先ほど設定した状態の新規ドキュメントが作成されます。

汎用性の高いテンプレートを用意する

次に、わたしたちが普段使っているテンプレートを例に、頻繁に使用するモノの設定等を行っていきます。

スウォッチ

スウォッチパレット

使う色はデザインするものによって異なります。なのでカラフルなスウォッチは登録せず、グレースケールカラーやグラデーションのみを登録しています。

グローバルカラーの管理方法

登録したスウォッチをダブルクリックすると、「スウォッチオプション」というダイアログが表示されます。

グローバルカラーに変更する

スウォッチオプションダイアログ

こちらの「グローバル」という項目にチェックを入れると、以降このスウォッチカラーを適用したオブジェクトの色を一括で変更できるようになります。

変更する場合は、該当するスウォッチのスウォッチオプションを開き、色味を変更します。

登録するスウォッチには名前をつけておきましょう。どこで使用する色なのかが後から把握しやすくなります。

グローバルカラー編集前

グローバルカラー編集後

シンボル

頻繁に使い、ダミー画像のような流用しやすいオブジェクトを登録しています。

シンボルパレット

無意味に登録しすぎるとIllustratorの処理が遅くなるので気をつけてください。

グラフィックスタイル

頻繁に使う、好みのアピアランスを登録します。

グラフィックスタイル

オブジェクトにグラフィックスタイルを適用する際、通常のクリックのみだとアピアランスが置き換わってしまいますが、Optionキーを押しながらクリックすることで、そのグラフィックスタイルを「追加」することができます。

判別しやすいように、アピアランスを追加させるためのグラフィックスタイルには先頭に「+」や「add」を入れたスタイル名にしておくと、アピアランス全体を置き換えてしまうグラフィックスタイルとの判別がつきやすくなります。

レイヤーとアートボード

レイヤーには描いたものを置くためのレイヤーと、アートボードサイズのオブジェクトを置くための背景用レイヤーを用意しておくと便利です。

背景用レイヤーはその名の通り背景ですので、一番下に用意して置きましょう。

レイヤーパレット

アートボードパレット

アートボードはあらかじめ複数用意してしまうと、後から大きさや位置を変えなければならないときに不便に なりますので、最初はひとつだけにし、その都度必要なサイズのものを追加していく方が効率的です。

アートボードサイズを後から変更したい場合、アートボードサイズのオブジェクトを目的のサイズに変更し、 選択したままの状態で、「オブジェクト」→「アートボード」→「選択オブジェクトに合わせる」で簡単に変 更できます。

アートボードを新たに追加するときは、アートボードサイズのオブジェクトを目的の位置にコピーし、「オブ ジェクト」→「アートボード」→「アートボードに変換」で楽にアートボードを追加することができます。

また「表示」→「定規」→「アートボード定規に変更」にしておくと、ドキュメント全体で統一された定規か らアートボード毎の定規に変更されます。こうしておくと、アートボード毎の数値が把握しやすくなります。

文字スタイル

文字スタイルパレット

文字スタイルパレットを表示し、 [標準文字スタイル] をダブルクリックすると、ドキュメントを開いたときの、デフォルトの文字スタイルが設定できるダイアログが表示されます。

ドキュメントを開いたときの「文字パレット」の初期値が気に入らない場合はここをカスタマイズしましょう。

文字スタイルオプションダイアログ

合成フォント

テンプレートとは直接関係ありませんが、Illustratorには「合成フォント」という超便利な機能があります。

合成フォントは、それぞれフォントやサイズ比率などを指定した和文や欧文、約物などの組み合わせを保存したものです。例えばiOS用のUIやWebデザイン用に、和文には「ヒラギノ角ゴ ProN W3」、欧文は「Helvetica Neue Regular」という感じです。

合成フォントダイアログ

合成フォントを使用した例

わたしたちは、

という合成フォントを作成し、使用しています。

上で説明した「文字スタイル」には合成フォントを指定できますので合わせて設定しておくとよいでしょう。

作業に合わせたオリジナルのテンプレートを用意する

先に解説した汎用性の高いテンプレートと同じ方法で、作業内容に特化したオリジナルテンプレートを用意してみましょう。わたしたちが主に使用するテンプレートの内の３つを紹介します。

ウェブ用のテンプレート

ウェブ用テンプレート

UI 用のテンプレート

UI用テンプレート

アイコン用のテンプレート

アイコン用テンプレート

以上、テンプレートを使用することで、作業ごとに発生する面倒な「データの下準備」というタスクをスキップすることができます。

使用したことのない人はぜひIllustratorのテンプレートを試してみてください。

アイコンやシンボルのサイズを管理する

アイコンのサイズを管理する

ヘッダーやナビゲーションのような高さが制限された場所に、同種のアイコン（ボタン）を等間隔で配置する際、位置調整のために「整列」を使って配置を整えますよね。

このとき、アイコンの「絵柄」だけで整列してしまうと、アイコンデザインの形状や重心によっては気持ちよく整列できない場合があります。

また、意図しないアンチエイリアスが入ってしまうこともあるので、その都度微調整をしなければなりません。

絵柄に水平方向中央に分布を実行した例

このような状況を回避するために、統一されたサイズの不透明度を0にした矩形オブジェクトをアイコンの背面に配置し、グループ化しておきます。

矩形オブジェクトを背面に敷き、グループ化した場合

矩形オブジェクトを背面に敷き、グループ化した場合

グループ化することでサイズが統一化されるので、後からの位置整列が簡単になります。

頻繁に使うアイコンであるならそのグループ化したオブジェクトをシンボル化してしまいましょう。シンボル化するときも、この矩形オブジェクトがシンボルのサイズになるので管理しやすくなります。

グループの背面オブジェクトのポイント

背面の矩形オブジェクトは、絵柄で使用する色と同じ塗りを指定すると便利です。

塗りと線をなしにする方法が一般的だと思いますが、塗りと線なしだと選択できる範囲が狭くなる上、グループを選択した状態で色の変更ができなくなってしまいます。

背面オブジェクトの塗りを半透明に

背面オブジェクトの塗りを半透明に

塗りを指定しておけば、アイコンのデザインをしている間は、先に矩形オブジェクトを配置しうっすら見える程度の不透明度にしておき、絵柄がその矩形の中央にあるかどうか確認しながら作成することができます。

デザインが完成してから背面の矩形オブジェクトの不透明度を0にしグループ化しましょう。

アイコン以外のサイズも管理する

アイコンだけでなく、複数の画面で配置される共通のヘッダーやフッター、リスト表示なども同じように管理することをオススメします。

ヘッダーのデザイン

上の図のように、LOGOが左に、アイコン群が右側に配置されたヘッダーをシンボル化する場合、横幅固定ならこのままシンボル化してしまえばよいですが、もし横幅可変に対応させたいなら、シンボルを登録するときに「9 スライスの拡大・縮小用ガイドを有効にする」をチェックしましょう。

シンボルオプション

そして登録されたシンボルをダブルクリックをし、ガイドの位置を調整します。

9 スライスのガイド

4本のガイドで囲まれた範囲が自動でリサイズされる可変領域になります。

シンボル編集モードから戻ると、可変部分だけがリサイズされるようになります。

伸縮自在

テキストを含むシンボルの注意点

テキストを含んだオブジェクト群をシンボル化する場合、フォントによっては目的の枠より下に隙間ができてしまう場合があります。

シンボルに隙間が出てしまう

また、9スライスを適用した場合、可変部分に含まれてない状態でも、テキストがリサイズされてしまいます。

テキストがリサイズしてしまう

これらの問題は、シンボル内のテキストに効果メニュー → 「パス」→ 「オブジェクトのアウトライン」を適用すれば回避できます。

シンボルに着色をする裏技

単色アイコンシンボルを違う色で使いまわしたいときってありますよね。ですが、IllustratorにはFlashのようなシンボルに着色する機能がまだ搭載されていません。そこで、シンボルに疑似的に着色する方法を紹介します。

とりあえず白か黒でアイコンを作って、シンボル化します。。

シンボル

そのシンボルにに効果メニューの「スタイライズ」 → 「光彩（内側）」で描画モード: 通常、不透明度:100%、ぼかし: 0px、境界線、カラーピッカーで好みの色を指定すると、シンボルの色を強引に変更することができます。

光彩（内側）を指定

光彩（内側）を適用したシンボル

指定する色を、あらかじめスウォッチに登録しておくとさらに楽です。

Illustrator上の描画はガビガビしてしまいますが、「ファイル」 → 「Web 用に保存…」や、「ファイル」 →「書き出し…」 → PNG (png) → アンチエイリアス: アートに最適を選んで書き出せば、キレイに書き出されます。

以上、第３回: テンプレートの用意と流用しやすいデータづくり でした。