ワイヤーフレームとして仕上げる
要素を配置し終わったら、次にその要素を更に細分化してワイヤーフレームを作成します。ワイヤーフレームに基づいてデザイン作業を進めます。
階層化したレイヤーグループ（フォルダの中のフォルダ）
「鈴木智子のホームページのアクセスアップ講座」では、ヘッダー部分は、サイトID、プライマリーナビ、検索窓の3要素で構成されています。
先ほど作成した、[ヘッダー]レイヤーグループの中にこれら3要素を整理するためのグループを3つ作成します。
[レイヤー]→[新規]→[グループ]をクリックします。
任意のグループ名を設定します。ここでは、[サイトID]と入力します。
作られたレイヤーグループ（フォルダ）を[ヘッダー]レイヤーグループ
にドラック＆ドロップします。
実データに基づいたデータの流し込み
「鈴木智子のホームページのアクセスアップ講座」のサイトID部分には、シンボルマークとテキストを配置します。
シンボルマークはIllustratorで作成予定なので、楕円形で代用しておきます。
テキストは、それっぽく配置します。
では、実際にやってみましょう。
楕円形を配置する
作業をしやすくするために、[虫眼鏡ツール]を選択してサイトIDを配置する周辺を拡大します。
作業画面をもう少し広く使用したい場合は、[レイヤーウィンドウ]をドラッグ＆ドロップして移動します。
シンボルマークの場所はガイドではない場所にスナップさせたいので、グリッド幅の調整を行います。
［ビュー］→［表示］→［グリッド］をクリックして、グリッドをチェックします。
[編集]→[環境設定]→[ガイド・グリッド・スライス・カウント]をクリックします。
グリッド線を1pixelにします。
［ビュー］→［スナップ先］→［グリッド］をクリックして、グリッドをチェックします。
楕円形ツールを選択します。
フリーハンドでサイトIDの円を配置します。
楕円形の中の色を変えるには、レイヤーサムネイルをダブルクリックします。
任意の色を選択します。ここでは、999999（グレー）を直接入力します。
楕円形の境界線を変えるには、レイヤーサムネイルを右クリックして、レイヤーの効果をクリックします。
境界線をチェックして、任意の構造や塗りつぶしタイプを設定します。ここでは、サイズ1px、カラーeeeeeeとしました。
レイヤーグループ（サイトIDフォルダ）にレイヤーをドラック＆ドロップします。
この時、サイトIDフォルダがheaderフォルダの下に設置されていると、headerフォルダ内の他レイヤーの下に移動してしまう為、楕円が表示されなくなってしまいます。
フォルダを移動します。
移動したレイヤーが最上部として表示されました。
テキストを配置する
[テキストツール]を選択して、外側の余白スペースをクリックします。
テキストを入力します。
テキストのフォントやサイズ、色などを設定します。ここでは、MSゴシック、18pt、黒とします。
移動ツールを選択し、配置位置を調整します。
不要なレイヤーの削除
このようにしてワイヤーフレームの制作を進めて行くと不要なレイヤーが出てきます。
作業しながら要らないレイヤーは削除しましょう。
不要レイヤーにマウスを合せて右クリックし、「レイヤーを削除を」クリックします。
[はい]をクリックして削除します。
レイヤーウィンドウの目玉アイコンをクリックすると、表示・非表示が切り替わります。これは、グループ（フォルダ）単位でも有効です。
表示・非表示機能を上手く使って作業する事が、作業効率の向上につながります。
「鈴木智子のホームページのアクセスアップ講座」のワイヤーフレーム
ラフを元に、テキストなどをバランスよく配置しましょう。
データをこちらに上げていますので、解凍してご覧ください。
それでは次に、「共通要素をデザインする」に進みましょう。
