要素を配置する
具体的に、コンテンツ要素を配置する作業を始めましょう。
どの部分に何を配置するかを示すワイヤーフレームを作り上げていく作業です。
要素を表す四角形を配置していきます。
Photoshopでの作図には、ワードやエクセル、Illustratorにある「線」と「塗り」という概念がありません。（画像処理を目的に作成されたアプリケーションなので）
ワードやエクセル、Illustratorに慣れている人は、この部分で戸惑うかもしれませんが、慣れてしまえば、どーって事ないです。
四角形を描く
［長方形ツール］を選択します。
四角形の作図は、長方形オプションで高さと幅を指定する方法と、フリーハンドで描く二つの方法があります。
まず、長方形オプションで［固定］にしてWとHを指定する方法を説明します。
WとHに入れられる単位は、cm、mm、pt(point)、px(pixel)、in(inch)、%、picaです。
「ホームページの幅を決める」で、ホームページの幅を1000pxに決めました。
作業中のPhotoshopファイルは、両端に50pxずつ余白を取り、1100px幅となっています。
今回のデザインでは、メインシート部分の左右にグラデーション処理を入れるつもりです。
一般的なネットブックのモニターサイズ（横1024ｘ縦600px）の画面ユーザーでも横スクロールが出ないようにするには、左右に20pxずつ余白を取らなければなりません。
ヘッダー部分の幅は960px。
高さは60pxとしようと思いますので、Wに960px、Hに60pxを入力します。
次に描画領域をクリックすると960px×60pxのレイヤーとシェイプが作成されます。
スナップ先をガイドに合せて作業を進めます。ガイドの境界線にぴったり合わせて配置する作業です。
［ビュー］→［スナップ先］→［ガイド］を選択。
移動ツールを選択し、ガイドにスナップさせて、配置位置を調整します。
慣れてきたら、スナップ機能を使いながらフリーハンドで描いていくと早いです。
では、フリーハンドで描いていく方法を説明します。
［長方形ツール］を選択します。
長方形ツールオプションで［制約なし］にしてガイドに合せて作成していきます。
四角形の色を変える
四角形の中の色を変えるには、レイヤーサムネイルをダブルクリックします。
任意の色を選択します。カラーピッカーを利用してもよいですし、RGBや色番号を指定してもよいです。ここでは、cccccc（グレー）を直接入力します。
四角形の境界線を変える
四角形の境界線を変えるには、レイヤーサムネイルを右クリックして、レイヤーの効果をクリックします。
境界線をチェックして、構造や塗りつぶしタイプを設定してください。
ここでは、境界線のサイズ（太さ）を1pxとし、四角の外側に境界線を配置、通常の描画モードで、不透明度100％とします。
また、塗りつぶしタイプは、カラー：の隣の色の四角をクリックし、カラーにeeeeeeを入力しました。
レイヤーグループ（フォルダ）で整理する
要素を配置するだけでもとても沢山のレイヤーを作ることになりす。あまりにも数が多すぎるので、このままでは訳が判りません。
そこで、レイヤーグループ（フォルダ）とテキストを使って作成済みのレイヤーを整理します。
[レイヤー]→[新規]→[グループ]をクリックします。
グループ名を設定します。後から分かりやすいグループ名が良いです。ここでは、ヘッダーを入力します。
作られたレイヤーグループ（フォルダ）にレイヤーをドラック＆ドロップします。
テキストを入力する
テキストツールを選択して、描画領域をクリックします。
テキストを入力します。
フォントや文字サイズなどを調整します。
移動ツールを選択し、テキストの位置を調整します。
レイヤーグループ（フォルダ）にレイヤーをドラック＆ドロップします。
レイヤーとは、仮想的な透明フィルムの事です。これを重ねることで、複雑な合成を可能にしているものです。
原則的に個々のレイヤーは独立して操作されるため、他のレイヤーの画像に影響を与えることがありません。
よって、レイヤーの順番が変わると、当然、隠れて見えなくなる場合もあります。レイヤーの概念を理解して、操作すると作業がスムーズにゆきます。
各要素の説明
さて、上図は一見、要素がぽんぽんと置いてあるだけに見えるかもしれません。
しかし、配置の順番には意味があります。
各ページ共通で配置される共通要素を除くと、一番上に配置されているのがキービジュアルです。
キービジュアルとは重要なイメージ画像という意味で、そのホームページの印象を打ち出します。
さらにキービジュアル上に、いわゆる「煽り文句（コピー）」を配置することによって、さらに印象を強めることができます。
その下にあるのが、コンテンツ部分。
ここではホームページの主旨を簡潔に分かりやすい文章で表現します。
コンテンツ部分の右側にダイレクトリンクを配置しました。
ここには、「鈴木智子のホームページのアクセスアップ講座」の6大コンテンツへの入り口を用意します。
なぜこのような順番になっているのでしょうか？
実は、ユーザーがホームページを閲覧するときの目の動きは、左上から右下へ移動するという結果が出ているからです。
このサイトでは、閲覧者の目を、「プロのノウハウを公開？どうして？（キービジュアル）」→「無償公開の理由はそういうことか（コンテンツ）」→「じゃあ、興味のある内容を見てみようかな（ダイレクトリンク）」、といった形に誘導したいので、このような配置になっています。
最後がトピックスです。
初めてのホームページにやってきた閲覧者がトピックスに注目することは、あまりないでしょう。
トピックスを見るのは主にリピーターです。
彼らは、「新しい情報が公開されてないかな？」と期待してホームページを訪れます。
そんな彼らの視線は、先に紹介した「左上から右下」ではなく、ピンポイントで最新情報に向くという結果が出ています。
かと言って、トピックスを配置する場所はどこでも良いと言っているわけではありません。
できるならばスクロールせずに表示される場所が良いです。けれど、キービジュアルの大きさ等でスクロールする位置でなければ無理という場合には、1スクロール以内に納めるのが適当です。長いページのず～っと下にあるトピックスは、見られる可能性が極めて低いと言わざるを得ません。
実際の店舗と同じように、ビジターをリピーターにすることが、ホームページのアクセスアップにつながります。
では、次に「ワイヤーフレームとして仕上げる」で、ワイヤーフレーム化してゆきましょう。
