Illustrator入門 | Webデザイン編 第2回 新規ドキュメントを設定しよう
IllustratorでWebデザインをはじめよう！
前回、Illustratorの作業環境をWebデザイン用に設定しました。本記事では、Webデザイン向けに新規ドキュメントを作成し、［ピクセルプレビュー］、定規、グリッドといった表示設定を行う方法、さらに、Webサイト用にアートボードを追加する方法を解説します。
Webデザイン用の設定、アートボードの追加
今回から、いよいよWebデザインの制作に取りかかります。この連載では、はじめに必要なコンテンツを配置して大まかなページ構成（ワイヤーフレーム）を作成したあと、細かいデザインを作り込んでいく、という流れで紹介します。例として、カフェのサイトを想定して、PC向けのトップページのデザインを作っていきます。
第2回ではまず、Webデザイン向けに新規ドキュメントを作成し、表示設定やアートボードの追加を行います。
※Illustratorは最新版を使用してください（執筆時のバージョンはCC 17.1.0）。記事ではMac OS Xでの操作を基本に解説します。ショートカットは「command（Ctrl）」のように、Windowsの場合の操作を括弧内で並記しています。
新規ドキュメントを作成し、表示設定を行う
［ファイル］メニュー→［新規…］を選択して［新規ドキュメント］ダイアログボックスを開きます。［新規ドキュメント］ダイアログボックスは、command（Ctrl）+Nでも開きます。
［新規ドキュメント］ダイアログボックスで以下のように設定し、［OK］をクリックすると、新しいドキュメントが作成されます。
- ［プロファイル］で「Web」を選択する（カラー設定などの諸条件がWeb向けになります）。
- ［サイズ］のオプションで［幅］を「1280px」、［高さ］を「1500px」にする（最初にできるアートボードのサイズが決まります）。
- ［新規オブジェクトをピクセルグリッドに整合］のチェックを外す。
※［プロファイル］で「Web」を選んでも、その後に［サイズ］などのその他の情報を変更すると［カスタム］という表記になりますが、Web向けの基本の設定セットは保持されるので、必ず一度「Web」を選択してください。
※この連載では、［新規オブジェクトをピクセルグリッドに整合］オプションを利用せずにデザインします。このオプションはWebデザインを補助するためのものですが、条件によってはオブジェクトの境界線と描画にずれが発生することがあり、取り扱いに注意が必要です。そのため、初心者向けの本連載では利用しません。その代わり、この後に解説する［ピクセルプレビュー］モードで作業することで、基本的にピクセルへの整合はできるため、心配はありません。
これで、幅1280px、高さ1500pxのアートボードを持つドキュメントが作成されました。この幅1280pxは、標準的なPCのモニタの解像度に合わせたサイズです。作成するWebサイト両端の余白も含めた、閲覧するブラウザーの画面全体と考えてください。
続いて、ドキュメントの表示に関する以下の設定を変更します。
ピクセルプレビューにする
［表示］メニュー→［ピクセルプレビュー］を選択すると、実際のWebサイトとして閲覧する時に近いイメージで作業できるようになります。［ピクセルプレビュー］への切り替えは、command（Ctrl）＋option＋Yでも行えます。
例えば次の図のように、通常のビューでは左側の状態のものが、［ピクセルプレビュー］だと右側のようにラスタライズされた表示になります。
また、［ピクセルプレビュー］モードにしておくことで、新規に作成するオブジェクトの座標やサイズ、さらにドラッグ移動した際の座標が、基本的にピクセルに整合するようになるため、Webデザインに便利です。
定規やグリッドを表示する
定規やグリッドを表示させておくと、ドキュメント上のオブジェクトの位置やサイズを把握しやすくなります。Webデザインでは、最終的にHTMLなどを起こす際にレイアウト情報を数値で指定することも多いため、数値的にキリがよく、整った配置やサイズを意識しておく必要があります。
定規の表示／非表示は、［表示］メニュー→［定規］→［定規を表示／定規を隠す］で切り替えられます。定規の表示／非表示のショートカットは、command（Ctrl）＋Rです。
また、グリッドの表示／非表示は、［表示］メニュー→［グリッドを表示／グリッドを隠す］で切り替えられます。グリッドの表示／非表示ショートカットは、command（Ctrl）＋¥です。
ドキュメントの上端および左端に表示されるの目盛りが「定規」、ドキュメント全体に表示される格子が「グリッド」です。
Illustratorでは、ピクセル単位の定規の目盛りが72px基準のため直感的に把握しづらく、これを補うために10px／5px単位で分割したグリッドを併用します（グリッドの分割単位、指定方法については 第1回 を参照してください）。
グリッドを常に表示させておくとデザインを確認する際に少し邪魔になるため、表示／非表示を適宜切り替えながら作業してください。
サイト幅のアートボードを追加する
続いて、制作するWebサイトの幅（960px）に合わせたアートボードを追加します。このアートボードを作成しておくことで、ガイド的な役割を果たすだけでなく、オブジェクトの配置を数値的に確認したり操作するのに便利になります。
まず、［ツール］パネルから ［長方形ツール］を選び（ショートカットはM）、ドキュメント上をクリックします。［長方形］ダイアログボックスが表示されたら、［幅］に960px、［高さ］に1500pxを入力して［OK］をクリックすると、長方形のオブジェクトが作成されます。
そのまま作成した長方形が選択された状態で、［変形］パネルで位置を変更します。［変形］パネルでは、選択中のオブジェクトの座標（X,Y）、座標の基準点（座標の左側にあるマーク）、オブジェクトのサイズ（W,H）を変更できます。
基準点（■のところ）が左上になっているのを確認したら、［X］に「160px」（「(1280px – 960px) ÷ 2」で片側の余白部分を計算した結果）、［Y］に「0px」と入力して、長方形がアートボードの中心になるように移動させます。
引き続き、長方形を選択状態にしたまま［オブジェクト］メニュー→［アートボード］→［アートボードに変換］を選択すると、この長方形がアートボードに変換されます。
これで、作成した長方形がアートボードに変換されました。［アートボード］パネルでも、新たにアートボードが追加されたことがわかります。
アクティブになっているアートボードは境界を示す黒い罫線が濃くなります。特定のアートボードをアクティブにするには、そのエリア内をクリックするか、［アートボード］パネルから任意のアートボードを選択してください。
定規の表示方法を「アートボード定規」にする
［表示］メニュー→［定規］→［アートボード定規に変更／ウィンドウ定規に変更］を選択すると、利用する定規のタイプを切り替えることができます。アートボード定規にすると、選択されているアートボードの左上が定規の基準点になります（ウィンドウ定規にすると、ペーストボードの中心点が定規の基準点になります）。
変換されたアートボードのエリアをクリックしてアクティブにすると、定規の基準点がアートボードに合わせて変化しているのがわかります。これで、サイト幅に合わせたオブジェクトの配置の計算がしやすくなります。複数のアートボードを扱う場合は、基本的にアートボード定規にしておくとよいでしょう。
定規の基準点は、定規の目盛りの交差地点からクリック＆ドラッグすることで移動させることも可能ですが、Webデザインでは基本的にこの操作は行わないでください（定規のずれが起こることで、データ作成の際にピクセルに整合しなくなってしまう場合があります）。
第3回「コンテンツを配置してワイヤーフレームを作ろう」では、今回作成したアートボードにWebページのコンテンツを配置して、ワイヤーフレームを作ります。