Illustrator入門 | Webデザイン編 第5回 パーツを装飾してデザインを作り込もう
IllustratorでWebデザインをはじめよう！
前回は、全体の色味の調整、ロゴや写真の配置、テキストの調整、といった基本的な装飾作業を行いました。今回は、Illustratorの［アピアランス］パネルやグラフィックスタイル、シンボルを活用したパーツの装飾の一例を紹介しながらデザインを仕上げます。
効果を利用してボタンを装飾する
サンプルファイルのillustrator-web-design-05-sample-before.aiを開いてください。これは、前回作成したデザインです。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 17.1.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
まずは、こちらのボタンの下地になる長方形のオブジェクトとテキストを装飾します。今回は、フラットに近いイメージを残しつつ、「押せる」雰囲気を少しだけ追加します。
ボタンの角を丸くする
下地の長方形オブジェクトを選択した状態で、［アピアランス］パネルの ボタン（新規効果を追加）をクリックして、［スタイライズ］→［角を丸くする…］を選択し、［角を丸くする］ダイアログボックスで角丸の半径を設定します。
※効果の追加は、［アピアランス］パネルで「塗り」や「線」を個別に選択していない状態で行ってください。「塗り」や「線」が個別に選択されている状態で効果を追加すると、オブジェクト全体でなく、個別に効果が適用されます。
立体感を少し加える
さらに、同じく［アピアランス］パネルの ボタンをクリックして、［スタイライズ］→［ドロップシャドウ…］を選択します。
［ドロップシャドウ］ダイアログボックスが表示されたら、オフセット値（元のオブジェクトからずらす方向と距離）をY軸方向のみに設定し、不透明でぼかしのないシャドウを設定します。また、シャドウの色はボタンの地色から少し彩度を落としたものにします。これで、盛り上がっているボタンの側面のような見た目ができます。
次に、ボタン上のテキストを選択し、同様に［アピアランス］パネルからドロップシャドウを加えます。テキストは、Y軸のオフセット値をマイナスにした影を作ることで、ボタンに文字が彫り込まれたような雰囲気を作ります。
これらの装飾をしたボタンは下図の左のようになります。
オブジェクトに効果を追加する際は、［効果］メニューからも同じように選択できます。効果については［アピアランス］パネルを常に確認しながら進めた方が装飾の状態を理解しやすいため、今回は［アピアランス］パネルからの操作を紹介しました。Illustratorではこのように、各パネルなどからメニューと同じ操作ができることが多く、自分にとってより使いやすいアプローチを選ぶとよいでしょう。
グラフィックスタイルに登録して、アピアランスを使い回す
同じ見た目にしたいボタンがあと3つ残っていますが、これら一つひとつに同じ操作を繰り返すのは骨が折れます。そこで、「グラフィックスタイル」を活用して同じ装飾を使い回せるようにします。［グラフィックスタイル］パネルでは、アピアランス属性のセットを登録して保存したり、そのセットをオブジェクトに適用させることができます。
まず、先ほど装飾したボタンの長方形オブジェクトを選択した状態で、［グラフィックスタイル］パネルの［新規グラフィックスタイル］ボタンをクリックします。すると、パネルにアピアランス属性のセットが追加されます。
同じ装飾を加えたいオブジェクトを選択し、［グラフィックスタイル］パネルで登録したグラフィックスタイルをクリックすると、同じアピアランス属性が適用されます。
ボタン上のテキストについても同じように、［グラフィックスタイル］パネルでグラフィックスタイルを作成して、その他の箇所に適用します。
パーツをシンボル化して、使い回す
続いて、もう1種類のボタンを装飾します。下地になる長方形オブジェクトには、先ほどと同じように［アピアランス］パネルで角丸やドロップシャドウを付けておきます。さらに、［楕円形ツール］で作った小さな円を四隅に配置します。
このように複数のオブジェクトから成り立っているパーツを使い回したい場合には、「シンボル」を活用します。
使い回したいオブジェクト（この場合は長方形オブジェクトと、四隅に配置した円形のオブジェクト）を選択し、［シンボル］パネルの［新規シンボル］ボタンをクリックします（または F8 キー）。
［シンボルオプション］ダイアログボックスが表示されるので、［9スライスの拡大・縮小用ガイドを有効にする］と［ピクセルグリッドに整合］の両方にチェックを入れ、基準点を左上に合わせてください。［OK］をクリックすると、選択したオブジェクトが新規のシンボルとして［シンボル］パネルに追加されます。
［シンボル］パネルに登録したシンボルは、ドキュメントにドラッグして配置できます。ドキュメントに配置したシンボルは、「インスタンス」と呼びます。インスタンスは、自由にサイズを変更することができます。
9スライスで、四隅の形状を保ちつつサイズ変更できるボタンにする
［シンボル］パネルで、登録したシンボルをダブルクリックすると、シンボルの編集画面に移ります。9スライスオプションを有効にしたシンボルでは、縦横2本ずつ、合計4本のガイド（破線）が表示されます。シンボルはこのガイドによって9つのセクションに分割されます。
ドキュメントに配置したインスタンスのサイズを変更する際、この四隅にあたるセクションの形状は常に固定され、それ以外のセクションは拡大・縮小に合わせて伸縮するようになります。
9スライスのガイドはドラッグして位置を変更できるので、形状を固定したい領域と伸縮する領域を調整します。編集が完了したら、ドキュメントウィンドウ左上の「←」アイコン、またはescキーで元のドキュメントの画面に戻ります。
このボタンのシンボルを使用したい箇所に配置したら、大きさを適宜整えます。もともと配置していた長方形オブジェクトは、不要なので削除してください。
※シンボルを編集すると、編集内容がそのシンボルのすべてのインスタンスに反映されます。
パターンスウォッチを作成して背景にパターンを敷く
［アピアランス］パネルを活用すると、1つのオブジェクトに複数の塗りや線を重ねることができます。今回はパターンのスウォッチを作成して塗りで重ね、背景に模様を敷いてみます。
パターンのスウォッチを作成する
まず、楕円形ツールを使用して、ドキュメント上の適当な場所に直径6pxの正円を作ります（線はなし、塗りはいったん黒色にしておいてください）。作った円を［スウォッチ］パネルにドラッグすると、黒い円のサムネイルが追加されます。［スウォッチ］パネルに登録されたことを確認したら、ドキュメント上の元のオブジェクトは削除しておきます。
登録したスウォッチをダブルクリックすると、［パターンオプション］ダイアログボックスが表示され、パターンの編集画面に移動します。ダイアログボックスで ［タイルの種類］（パターンの並べかた）やオフセット値（レンガ状に並べる時のズレの量）を設定します。［幅］および［高さ］では、タイルのサイズを設定して、パターンを並べた時の隙間の量を調整できます。
パターンオプションが設定できたら、黒にしていたオブジェクトの塗りを白に変更し、編集画面上部の「完了」をクリックして、パターンスウォッチの編集を完了します。
※色は黒から白に変更しなくても構いませんし、用途に合わせて適宜好きな色や表現を作成してください。
オブジェクトにパターンの塗りを重ねる
作成したパターンを適用したいオブジェクトを選択し、［アピアランス］パネル上で ［新規塗りを追加］ボタンをクリックすると、塗りが上部に追加され、レイヤーのように重なった状態になります。
2つになった塗りのうち、上にある方のカラーのサムネイルをクリックします。その場でスウォッチが表示されるので、先ほど作成したパターンのスウォッチを選択してください。
塗りや線はそれぞれ個別に透明度や描画モードを選択したり、効果を設定できます。［アピアランス］パネルでそれぞれの行頭の三角マークをクリックすると、設定状態の表示／非表示を切り替えて確認できます。
パターンを設定した塗りの設定を表示させ、［不透明度］から透明度の設定を変更して、背景色に馴染むようにパターンの透過状態を調整します。
この連載で解説する装飾の例は以上です。その他、全体のバランスを確認しながら、情報を見分けやすいようにアイコンを付加したり、見出しにアクセントを加え、デザインを完成させます（細かいところについては個別の解説を省きますので、サンプルファイルのillustrator-web-design-05-sample-after.aiで確認してください）。
※窮屈に感じる／余白があり過ぎるといった場合は、適宜全体のスペースを調整し、必要に応じてアートボードのサイズを変更してください（［アートボード］パネルから該当のアートボードの右端のボタンをクリックすると、アートボードオプションのダイアログボックスを表示できます）。
今回紹介した装飾はごく一部に過ぎません。応用してみたり、Webで公開されているTips情報や書籍などもぜひ参考にしてみてください。
次回は完成したデザインからの画像の書き出しについて解説します。