連載  /  

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

BY 公開

Illustrator CC (2014年06月公開) 対応

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

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

テンプレートを用意する

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

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

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

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

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

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

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

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

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

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

  • ダブルクリックで開く
  • Adobe Illustratorアプリケーションが置いてあるフォルダ/Cool Extras/ja_JP/テンプレート/  にコピーし、「ファイル」→「テンプレートから新規…」で選択

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

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

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

スウォッチ

スウォッチパレット

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

  • 各種グラデーション
  • 白からグレー、グレーから黒までのグレースケールカラー
  • コメント用のグローバルカラー

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

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

グローバルカラーに変更する
スウォッチオプションダイアログ

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

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

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

グローバルカラー編集前
グローバルカラー編集後

シンボル

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

シンボルパレット

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

  • 提出時に使用する自社のロゴ
  • 仮画像用ダミーオブジェクト3色

グラフィックスタイル

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

グラフィックスタイル

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

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

レイヤーとアートボード

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

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

レイヤーパレット
アートボードパレット

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

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

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

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

文字スタイル

文字スタイルパレット

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

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

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

合成フォント

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

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

合成フォントダイアログ
合成フォントを使用した例

わたしたちは、

  • OS XのネイティブアプリケーションやWebアプリケーション用
    → 「OSX Regular」 =  ヒラギノ角ゴ ProN W3 と Lucida Grande Regular
    → 「OSX Bold」 =  ヒラギノ角ゴ ProN W6 と Lucida Grande Bold
  • iOSネイティブアプリケーションやWebアプリケーション、OS X Yosemite用
    → 「iOS Light」 =  ヒラギノ角ゴ StdN W1 と Helvetica Neue Light
    → 「iOS Regular」 =  ヒラギノ角ゴ ProN W3 と Helvetica Neue Regular
    → 「iOS Bold」 =  ヒラギノ角ゴ ProN W6 と Helvetica Neue Bold

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

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

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

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

ウェブ用のテンプレート

ウェブ用テンプレート
  • ブラウザの枠
    ブラウザのウィンドウ画像を配置しておけば、ブラウザで表示したイメージが把握しやすくなります
  • ブラウザやヘッダーなどを含めたプレビュー用アートボード
    デザイン確認のためにクライアントに送る用です
  • デザイン範囲のアートボード
    デザインした部分だけを書き出す用です

UI 用のテンプレート

UI用テンプレート
  • デバイスの枠
  • デバイスやヘッダーなどを含めたプレビュー用アートボード
  • デバイス表示範囲のアートボード
  • 頻繁に使うシンボル
    OSのボタンアイコンやステータスバー画像をあらかじめシンボル化して登録しておくと便利です

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

アイコン用テンプレート
  • 全アイコンとヘッダーなどを含めたプレビュー用アートボード
  • 各アイコンサイズのアートボード
    完成したアイコンを書き出す用です
  • 確認用マスクレイヤー
    デザイン作業中には必要だけど、書き出し時には不要になるマスクオブジェクトを置いたレイヤーです

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヘッダーのデザイン

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

シンボルオプション

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

9 スライスのガイド

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

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

伸縮自在

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

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

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

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

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

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

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

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

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

シンボル

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

光彩(内側)を指定
光彩(内側)を適用したシンボル

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

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

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

  TAGS

  AUTHOR

3flab

株式会社三階ラボ / 代表取締役デザイナーと取締役デザイナー / 作業環境・効率・キーボードショートカットオタクの2人組。グラフィックデザイン、ユーザーインターフェイスデザイン、キャラクターデザイン、CI/VI、パッケージデザイン、モーショングラフィックデザイン、ウェブデザイン、アートディレクション等の業務を行っている。