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

Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。

サイトのキャプチャ

Speed Design with Illustrator

Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。

時短でボタンをつくる

チュートリアルのアニメーション

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

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

チュートリアルのアニメーション

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

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

チュートリアルのアニメーション

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

モジュール式のデザイン

チュートリアルのアニメーション

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

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

チュートリアルのアニメーション

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

グリッドの設計

チュートリアルのアニメーション

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

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

チュートリアルのアニメーション

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

アートボードの活用

チュートリアルのアニメーション

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

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

チュートリアルのアニメーション

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

Photoshop無しで画像を切り取る

チュートリアルのアニメーション

画像を切り取るためだけに、Photoshopを起動する必要はありません。Illustratorのマスク機能を使い、画像の表示する部分を選択しマスクボタンをクリックします。矩形でも円でも楕円でもどんなベクトルの形でもマスクとして利用できます。

テンプレートを用意しておく

チュートリアルのアニメーション

Illustratorでテンプレートを作成しておくと、新しいプロジェクトを始める時に非常に便利です。テンプレートにはよく使うガイド、グリッド、ズームレベル、シンボル、スタイルなどを用意しておきます。

ボタンやナビゲーションやパネルを素早くデザイン

チュートリアルのアニメーション

ボタン、ナビゲーション、パネルなどのデザインにはグラフィック スタイルを使うと非常に効率的です。こういった複数配置されるオブジェクトは、一つのデザインを変更するだけで、全てに適用されます。速くて、しかも一貫しています。

テキストの回り込み

チュートリアルのアニメーション

inDesignやQuarkXpressのような最強のテキストレイアウトソフトと同じように、Illustratorでも画像の周りにテキストを配置することができます。テキストは自動的に画像のサイズ変化に応じて、余白を定義します。

四隅の角丸を個別にデザイン

チュートリアルのアニメーション

Illustrator CCでは、四隅の角丸を簡単に個別にデザインできます。これはライブコーナーという機能で、角丸(内側)、角丸(外側)、面取りを定義し、パスやシェイプの各コーナーを個別にデザインできます。

top of page

©2017 coliss