Illustrator入門 | Webデザイン編 第4回 画像・配色・テキストを調整してデザインを作り込もう
IllustratorでWebデザインをはじめよう！
ここからは、前回までに作成したワイヤーフレーム（基本のレイアウト）に装飾を加えて、デザインを作り上げていきます。今回は、Illustratorを使って、全体の色味の調整、ロゴや写真の配置、テキストの調整を行います。
最初にロゴとメインビジュアルを配置する
装飾作業ではまず、ロゴやメインビジュアルなど、そのWebサイトのトーンを大きく左右するようなビジュアルを配置します。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 17.1.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
今回、ロゴとメインビジュアル（イラスト）は、どちらもIllustratorで作成したデータを利用します。これらのデータは、サンプルファイルのvol4_logo.aiに用意してあるので、ワイヤーフレームにコピー＆ペーストしましょう。
サンプルファイルのvol4_logo.aiとillustrator-web-design-04-sample-before.ai（前回作成したワイヤーフレーム）を開いてください。
vol4_logo.ai上でロゴマークを選択した状態で、［編集］メニュー→［コピー］を選び、データをコピーします。コピーは、command（Ctrl）＋Cでも行えます。
ワイヤーフレームに戻り、［編集］メニュー→［ペースト］を選択してロゴマークを貼り付け、ドラッグして、ロゴマークのアタリとして仮置きしていた四角形のあたりまで移動させます。貼り付けは、command（Ctrl）＋Vでも行えます。
大きさを調整するには、バウンディングボックスの四隅にある□をShiftを押しながらクリック＆ドラッグして、適宜サイズを変更します（Shiftを押しながらバウンディングボックスを操作することで、オブジェクトの縦横の比率を保ったままサイズを変えることができます）。
※バウンディングボックスが表示されていない場合は、［表示］メニュー→［バウンディングボックスを表示］を選択してください。また、command（Ctrl）＋shift＋Bでも表示させることができます。
ロゴタイプ（ロゴの中での文字列部分に当たるもの）やイラストも同様の操作で配置して、サイズを調整します。
アタリ用に配置していたオブジェクトは、このタイミングで削除しておきます。
全体の配色を決める
続いて、全体を大まかに配色していきながら、サイトに使う色を決めます。Webサイトをデザインする際は、利用する色をある程度の数で統一した方が、ページのまとまりがよくなります。
キーカラーを設定する
まず、いちばんメインにしたい色（キーカラー）を設定します。ドキュメント上でオブジェクトを選択していない状態で、［スウォッチ］パネルにある［新規スウォッチを作成］をクリックして、［新規スウォッチ］ダイアログボックスを開きます。
スライダーを調整して任意の色を作成し、［OK］をクリックしてください。すると、［スウォッチ］パネルに作成した色のアイテムが追加されます。今回は、デザインするWebサイトのメインにしたい色を作ってください。
［カラーガイド］パネルで色の組み合わせを選ぶ
次に、キーカラーの他にどの色を使うかを決めます。色の組み合わせを検討する際は、［カラーガイド］パネルを利用すると便利です（あらかじめ色の組み合わせを決めている場合は、必ずしも利用する必要はありません）。
まず、［スウォッチ］パネルで先ほど作成したキーカラーのスウォッチを選択しておき、［カラーガイド］パネルに移ります。［カラーガイド］パネルは、色を選択する際に参考となるツールです。選択している色と調和する色の組み合わせや、そのバリエーションを提案してくれます。
［カラーガイド］パネルの上部には、現在選択している色と、「ハーモニールール」に則った色の組み合わせ（カラーグループ）が表示されます。下部には、その色の組み合わせを元にしたカラーバリエーションが表示されます。
「ハーモニールール」には様々な色の組み合わせルールがあるので、デザインするWebサイトのトーンに合わせてハーモニールールを選びます。今回は、全体的に近い系統の色味でまとめたいので、「類似色 2」を選択します。
また、バリエーションはデフォルトで表示されている「淡彩・低明度」を利用します（バリエーションには他のタイプもあり、パネルメニューから変更可能です）。
選択したカラーグループは、［カラーガイド］パネルの右下にある［カラーグループをスウォッチパネルに保存］をクリックすると、［スウォッチ］パネルに保存しておくことができます。カラーグループの色は選択中の色によって変化するので、スウォッチに保存して、後からも参照できる形にしておくとよいでしょう。
［カラーガイド］パネルに表示されている色を使って、ワイヤーフレームの領域や文字の色を付けていきます。オブジェクトを選択した状態で、［カラーガイド］パネルのバリエーション上のカラーをクリックすると、その色が適用されます。「塗り」または「線」のどちらに適用されるかは、［カラー］パネルなどでどちらが選択状態になっているかを確認してください（第3回参照）。
背景になる領域は淡彩寄り、ボタンなどの目立たせたい箇所やアクセントにしたい箇所は中央寄りのカラーにするなど、全体のバランスや情報を強調したい順位を意識して配色していきます。文字は可読性を保てるように、中央から低明度寄りを選びます（ボタンなどで背景色に濃い色味を使用している場合は、逆に白や白に近い淡彩の文字色にして、コントラストを高めます）。
※背景を横幅いっぱいに敷きたい箇所は、背景用のオブジェクトの大きさを適宜調整してください。
写真を配置し、クリッピングマスクで円形に切り抜く
次に、メニューの写真画像を配置してトリミングします。今回は、円形に切り抜いた見た目を作ります。
使用する画像はPhotoshopなどであらかじめレタッチし、画像を配置するエリアに表示しやすい大きさにリサイズしておきます。今回は、サンプルファイルとしてvol4_photo1.jpg～vol4_photo4.jpg（リサイズ済み）を用意しているので、こちらを使用します
画像を配置する
写真をドキュメントに配置するには、［ファイル］メニュー→［配置…］を選択して、対象のファイルを選択します。配置は、command（Ctrl）＋shift＋Pでも行えます。
ファイルは複数選択することも可能です。4つの画像ファイルをまとめて選択して［配置］をクリックします。
カーソルの右下に、選択した画像のサムネイルが表示されます。複数の画像を選択した場合は、表示されているサムネイルが、次に配置できる画像です。
置きたい場所をクリックすると、画像が配置されます。アタリとして作成していたオブジェクトの左上の位置に合わせて、順番にクリックしていきます。
すべての画像を配置できました。配置した位置がズレてしまった場合は、位置を整えておきます。
円形のオブジェクトを作成し、クリッピングマスクを作成する
クリッピングマスクを利用すると、任意の形でオブジェクトをマスク（不要な部分を見えなく）して、切り抜いたような見た目を作ることができます。
作成するにはまず、マスクする形のオブジェクトを作成して、マスクしたいオブジェクトの上に重ねます。［ツール］パネルの［長方形ツール］を長押しすると表示される矩形ツールの一覧から、［楕円形ツール］を選択します（ショートカットはL）。［楕円形ツール］は、［長方形ツール］と同じ操作で楕円形を描画できます（［長方形ツール］の操作については、第2回、第3回を参照）。
先ほど配置した画像の上に、［楕円形ツール］で横幅200px、縦幅200pxの円を作成し、中央に揃えます。作成した円とその下の画像を選択し、［オブジェクト］メニュー→［クリッピングマスク］→［作成］を選択すると、画像がマスクされて円形に切り抜かれたような見た目になります。クリッピングマスクの作成は、command（Ctrl）＋7でも行えます。
※クリッピングマスクを取り消したい場合は、［オブジェクト］メニュー→［クリッピングマスク］→［解除］を選択します。また、command（Ctrl）＋option（Alt）＋7でも解除できます。
残りの3つの画像も同じように円形でクリッピングマスクを作成します。あわせて、もともと配置していたアタリ用の四角形のオブジェクトを削除します。
テキストを整える
テキスト部分を調整します。Webサイトで用いるテキストには、画像化する部分と、HTMLにテキストを流し込む部分（デバイステキスト）があり、それぞれを区別します。
デバイステキストを区別する
Webサイトのデザインカンプを作成する際、デバイステキストにする箇所はフォントのアンチエイリアスをなくして、一見して区別できるようにしておくことが多いです。
Windowsのブラウザーでは通常のサイズのデバイステキストにアンチエイリアスがかからないため、これを考慮したものであると同時に、他の人にHTMLコーディングをお願いする場合に、画像化するテキストとデバイステキストを区別して作業してもらうための申し送りのような役割も担います。
テキストのアンチエイリアス設定は、［文字］パネルで変更できます（アンチエイリアスの設定箇所が表示されていない場合は、パネルメニューから［オプションを表示］を選択します）。
また、リンクさせるデバイステキスト部分に下線を追加します。対象になるテキストを選んだ状態で、［文字］パネルの［下線］オプションを選択してください。
画像化するテキストを整える
画像化するテキストは、デザインのトーンに合わせたフォントを使い、文字の間隔を細かく調整するなどして、より読みやすく美しく見えるように調整します。
フォントは［文字］パネルで任意のものを選択してください。また、アンチエイリアスは「強く」にしておきます。
文字の間隔を整えるのには2つの方法があります。1つめ目は「トラッキング」といい、選択した文字列全体で文字の間隔を変更できます。2つ目は「カーニング」といい、文字間ごとに間隔を調整できます。
これを踏まえて、メインのキャッチコピー部分を調整してみましょう。このままでももちろん読めますが、全体的に文字間隔が少し詰まった印象があります。また、2行目の「おうち」の「う」の前後は、後続の文字列と比べて間隔が広いように見えます。
詰まって見えるのを緩和するために、まずトラッキングを調整します。該当するテキストオブジェクトを選択し、［文字］パネルの［トラッキング］のフィールドの数値を調整します。右側の三角印をクリックすると、大まかな数値が出てきます。この数値は大きいほど間隔が広くなり、小さいほど間隔が狭くなります。ここでは「50」としておきます。
次に、カーニングを調整します。テキスト編集のカーソルを「お」と「う」の間に合わせ、［文字］パネルの［カーニング］のフィールドの数値を調整します。トラッキングと同様に、フィールドの右側の三角印から、大まかな数字を選択できます。
さらに細かく指定したい場合は、フィールドの左側にある上下の三角印をクリックすると数値を増減できます。また、フィールドに直接数値を入力することも可能です。全体のバランスを見ながら、他の箇所のカーニングも調整していき、きれいに見えるように整えます。
※トラッキングとカーニングのショートカットは同じもので、基本はoption（Alt）と矢印キー（←または→）を用います。複数の文字を選択していたり、テキストオブジェクトを丸ごと選択している場合はトラッキング、文字間にテキスト編集のカーソルがある場合はカーニングが変更されます。option（Alt）＋←（または→）で、フィールドの数値が「20」ずつ増減します。また、command（Crtl）＋option（Alt）＋←（または→）だと、変更される数値の大きさが100になります。
その他の画像化するテキストの箇所も、同じようにフォントの種類や文字の間隔を整えます。これまでの作業を行ったファイルが、サンプルファイルのillustrator-web-design-04-sample-after.aiです。
第5回「デザインを作り込もう パーツの装飾編」では、細かい部分を装飾して、デザインを完成させます。