【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ

サイト構築 -デザイン

Post on:2014年3月12日

時短でボタンをつくる

Illustratorの「グラフィックスタイル」を使うと驚くほど簡単にボタンを作成できます。テキストにスタイルを適用し、あとはラベルを加えるだけで、ボタンのサイズはテキストの量に合わせて拡張されます。

1クリックでテキストをデザイン

Illustratorの「段落スタイル」にテキストのスタイルを定義しておきます。あとは見出しでも本文でも1クリックでそれらのスタイルが適用されます。CSSと同じようにタイポグラフィが一貫しているかを確認することもできます。

カラー変更の強い味方「グローバルカラー」

これはあまり知られていないテクニックかもしれませんが、Illustratorの強力な特長です。グローバルカラーはスウォッチパネルにあり、カラー変更をデザイン全体に適用し、カラーに一貫性をもたせます。グローバルカラーを変更すると、すべてのオブジェクトが更新されます。

モジュール式のデザイン

Illustratorではシンボルパネルを使って、モジュール式のコンポーネントを作成することができます。これはウェブサイト全体にわたって要素を再利用でき、もちろん修正も可能です。時短だけでなく、デザインの一覧性も保証するでしょう。ヘッダを修正する時も1ページを修正するだけで、すべてのページに修正が反映されます。

アイコンフォントを簡単に扱う方法

最近はアイコンフォントを利用する機会が増えてきました。このアイコンフォントをIllustrator上で簡単に扱う方法です。フォントをOSにインストールすると、Illustratorの字形パネルからアイコンフォントを利用できます。

グリッドの設計

IllustratorでCSSのフレームワークに基づいたグリッドを定義することもできます。ベースとなるのはBootstrapの幅940pxの12カラムです。グリッドはレイヤーにして表示・非表示を切り替えて利用すると便利です。

グリッドにスナップさせる

レイアウトをする時に、5pxの小さなグリッドを作成しておくと便利です。10pxのグリッドをユニットとし、100pxごとにガイドラインを配置します。そしてグリッドにスナップさせると、要素を配置する時にグリッドにぴったり沿い、レイアウトを構成する時間を節約するでしょう。

アートボードの活用

複数のアートボードを利用することで、デザインした全てのページの確認が同時に行えます。テキストスタイルの変更やフッタのカラー変更など、コンポーネント全てがスクリーンに適用されます。これはファイルサイズが小さいから可能なことです、Illustratorのベクターフォーマットにありがとうを言いたいです。

サイズ変更時にデザインを崩さない

ボタンやタブのサイズを変更する時に、角丸の部分が伸びたりしませんか？そんな時には「9スライス」です。これはオブジェクトのどの部分を拡大・縮小可能か定義するもので、角丸のボタンなどは直線の部分のみを拡大・縮小可能にすることができます。そしてこのオブジェクトをシンボルとして保存しておくと、再利用可能なコンポーネントの完成です。