Illustrator入門 | Webデザイン編 第3回 要素を配置してワイヤーフレームを作ろう
IllustratorでWebデザインをはじめよう！
本記事では、前回作成したアートボードに、Webページのワイヤーフレームを作成する方法を解説します。Illustratorを使ってWebページに必要なコンテンツを配置して、基本のレイアウトを行います。
コンテンツを配置する
今回は、Webページに必要なコンテンツを配置して、基本のレイアウトを行い、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 17.1.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
作成するWebページでは、以下のコンテンツ要素を配置します。Webサイトとしての体裁や、情報の優先順位などを考えて、配置場所を考えながらレイアウトしていきます。
- ヘッダー（サイトの名前やロゴ、目印になるものなど）
- サイトの名前・ロゴ
- タグライン
- グローバルナビゲーション
- メインのコンテンツ（見る人に伝えたいサイトの中身）
- アイキャッチ画像
- カフェの特徴の簡単な紹介と詳細へのリンク
- メニューの一例（写真つきで数点）と詳細へのリンク
- お知らせ（営業時間のお知らせなど）の新着リスト数点
- 補助的なコンテンツ（補助的な情報や関連サイトの紹介など）
- 営業時間・住所と詳細なアクセス方法へのリンク
- ソーシャルアカウントへのリンク など
- フッター（サイトの連絡先、著作権情報など）
- コピーライト
まずは、おおまかにコンテンツ要素を配置して、次の図のような状態のものを作ります。
サンプルファイルのillustrator-web-design-03-sample-before.aiを開いてください。これは、第2回で作成したドキュメントで、表示設定やアートボード追加を行った状態です。
長方形ツールで画像エリアや領域を作成する
写真やイラスト、ピクトグラムなどの画像を用いたい箇所や、ヘッダーやフッターなどの領域をはっきりと区分けしたい箇所を、［長方形ツール］を使って描きます。［長方形ツール］では、クリック＆ドラッグして、好きなサイズの長方形を描くことも可能です。
※アートボードの境界付近にクリック＆ドラッグで描画すると、オブジェクトがピクセルに整合しない場合があります。アートボード境界付近にオブジェクトを配置したい場合は、いったん境界から少し離れたところで描き、後から境界付近に移動させるのがオススメです。
ヘッダーやフッターなどの領域を区分けしたい箇所については、あまり目立たない色に変更しておきます。長方形を選択した状態で、［カラー］パネルから色を変更します。
［カラー］パネルでは、左端のマークがオブジェクトの［塗り］（左上の四角形）と［線］（右下の四角形）の色を表しており、選択されいてる方が上に重なります。それぞれを選択して、［塗り］をグレー、［線］を「なし」にしておきます。カラーを「なし」にする場合は、塗りと線の表示の下にある赤い斜線のマークをクリックします。
［カラー］パネルのカラーモード
［カラー］パネルで表示される色のスライダーの種類（カラーモード）は、パネルメニューから任意のものに変更できます。Webデザインの場合は、基本的にRGBまたはHSBを利用して作業するとやりやすいと思います。
テキストを配置する
テキストを配置する場合は、［ツール］パネルで［文字ツール］を選択し（ショートカットはT）、アートボード上でだいたい配置したい場所をクリックして、テキストを打ち込み（または原稿からコピー＆ペースト）します。
打ち込んだテキストは、いったん［フォントサイズ］を「16px」、［行送り］を「24px」としておきます。これらの値は、ブラウザーで閲覧する際のテキストの標準的なサイズと、日本語フォントで可読性が保てる行間の標準的な数値です。後ほど見出しや本文などの用途によってそれぞれ調整します。
幅などが決まったエリアにテキストを流し込む場合は、エリア内文字にします。［文字ツール］を選んでドキュメントをクリック＆ドラッグすると、ドラッグした範囲にテキストを流し込める「エリア内文字」のフォーマットになります。入力を確定させた後で、エリアのサイズを変更することも可能です。
サイズや位置の体裁を整えて、ベースを完成させる
Webページの要素を一通り配置したら、次はページ全体のバランスを見ながら体裁を整えます。
見出しなどのフォントサイズを調整する
見出しやキャッチコピーなど、目立たせたい要素のフォントサイズを変更していきます。最初に文字サイズを入力したときと同じように、［文字］パネルで数値を入力して変更します。
この時点で厳密にサイズを確定する必要はありませんが、目立たせたい優先順位や、前後に配置されているテキストとのバランスを考えて変更します。
バランスを確認する際は、実際にブラウザーで見る場合を考えて、ズームが100%の状態でも必ず確認します。表示の拡大・縮小は ［ツール］パネルの［ズームツール］や、ドキュメントウィンドウ左下の縮尺表示で変更できます。また、command（Ctrl）＋1でも100%表示に切り替えることができます。
画像エリアや領域のサイズ・配置を整える
画像エリアや領域のサイズ・配置は、［変形］パネルで数値を入力して整えます。ページ全体を整然と配置するために、画面内を分割する数に合わせて1列当たりの幅や余白を計算した上で、それに合わせて入力していくようにします。
例えば、カフェのおすすめメニューを紹介する箇所では、サイトの全体幅を4分割してレイアウトしています。サイトの幅が960pxなので、220px幅のカラム（列）を4つと、それぞれの両側に10pxの余白（マージン）を作りました（カラムとカラムの間は10px＋10pxで、20pxのマージンができます）。
上図で後ろに敷かれている薄い水色の背景は、サンプルファイルの「*guide」レイヤーに作成してあります。このように、長方形オブジェクトを規則正しい列にして配置しておくと、整然としたグリッドレイアウトを作成する際にわかりやすく便利です。作成手順の解説は省きますが、今回解説しているワイヤーフレームの作成手順を応用すれば作ることができるので、挑戦してみてください。
［整列］パネルで要素の列びを均等に整える
要素の配置を整える際には［整列］も役に立ちます。［整列］パネルは、［ウィンドウ］メニューから表示させることができます。または、shift＋F7でも表示できます。
複数のオブジェクトを選択してからこのパネルの各ボタンをクリックすることで、上下左右の揃えや、複数のオブジェクトを等間隔に配置できます。
次の例では、複数のテキストを選び、［水平方向左に整列］で左揃え、および［垂直方向上に分布］で上下の間隔を均等に揃えています。整列の際は、オブジェクトを複数選択してから、その中で基準にしたいオブジェクトをもう一度クリックすると、そのオブジェクトを基準に整列・分布できます。
全体のバランスを見ながら各パーツでサイズや配置の調整を行ってください。全体的に整って、見やすく、情報が伝わりやすい体裁になったら、ワイヤーフレームは完成です。これまでの作業を行ったファイルが、サンプルファイルのillustrator-web-design-03-sample-after.aiです。
第4回「デザインを作り込もう 画像・配色・テキスト編」では、このワイヤーフレームを用いて装飾を加えて、デザインを作り込んでいきます。