これから先は、ひとつのアートボードの上に、作成した素材をWebで閲覧している画面のイメージでレイアウトします。あらかじめ、手書きのラフ画などを準備しておくとよいでしょう。背景は「コーディング」作業中に1枚絵( または繰り返し配置)を挿入できますので、別途画像を作成・保存しておき、レイアウト作業の際は仮置きで済ませて大丈夫です。

まず、「ヘッダー」の幅(980px)と同じ幅の新規ドキュメントを作成します。アートボードのサイズはあとから変更することができるので、「高さ」はbody要素の内容量をイメージして想定した、おおよその数値で構いません。単位は「ピクセル」にしましょう。この時、「新規オブジェクトをピクセルに整合」にチェックを入れ、「OK」をクリックします。

レイアウト用に新規ドキュメントを作成

いよいよレイアウト作業に移ります。作業環境を整えるため、次の準備を行ってください。

(1)メニューバーの「表示」の中の「スマートガイド」にチェックを入れ表示させる
(Ctrl(command) + U)
(2)「表示」の中の「定規」、その中の「定規を表示」にチェックを入れ表示させる
(Ctrl(command) + R)
(3)「ウィンドウ」の中の「変形パネル」と「整列」パネルにチェックを入れ表示させる
(4)すべての素材のサイズが整数値か「変形」パネルで確認する

素材の配置

準備が整ったところで、画像ファイルを配置していきます。メニューバーの「ファイル」から「配置」を選択します。ウィンドウが表示されたら作成した「ヘッダー(EPS形式で保存したもの)」を選択し、「リンク」のチェックを外して「配置」をクリックします。

レイアウト完成図

それから、この連載の第2回で行ったように、配置された「ヘッダー」上のすべてオブジェクトを一括して移動できる様に、グループ化しましょう。

グループ化できたら、「選択ツール」で「ヘッダー」をアートボードの上部に配置します。この時、ドラッグ中に「スマートガイド」を表示しておくと、定規を当てているような感覚で導いてくれますので便利です。「スマートガイド」は「表示」メニューから表示/非表示の切り替えができます。

「ヘッダー」の配置が完了したら、「ボタン」と「地図」も同様に配置します。冒頭でボタンを複製したIllustrator(ai)ファイルからすべての「ボタン」を一括選択し、コピー＆ペーストすると円滑です。グループ化もお忘れなく！

パートごとにグループ化