中ページをデザインする
最後に、中ページ（ローカルページ、子ページ、下層ページなどとも呼びます）をデザインします。
実は、「デザインを制作する」で紹介した手順で作業を進めると、中ページのデザインの90％はすでに終わっているのと同じです。
なぜなら、ヘッダーなどは「共通要素をデザインする」で終わっていますし、中ページはトップページのデザインを踏襲するものだからです。
トップページと中ページのデザインが全く異なっていると、ユーザーは「違うサイトに飛ばされたのかな？」と誤解してしまいます。
優れたデザインのサイトだとしても、ユーザーの混乱を招くようではユーザビリティが低いと言わざるを得ないでしょう。
実際に、ほとんどのサイトはトップページと中ページで共通のデザインを用いています。
「鈴木智子のホームページのアクセスアップの講座」では大項目ごとに異なるメインカラーを採用しています。
カテゴリやサービス内容によってそれぞれのメインカラーを設定しているサイトも多々見られます。
このようなサイトでも、ユーザーの混乱を避けサイト全体の統一感を出すため、全体のデザインは同じものを使用しています。
例えば、ホスティング会社のWADAXはサービス内容によって3種類のメインカラーを採用し、サービスの区分けをしています。
（2009年10月現在）
要素を配置する
では、中ページ用にすっかりお馴染になったワイヤーフレームを制作しましょう。
「ワイヤーフレームとして仕上げる」で作ったトップページのワイヤーフレームをコピーして、変更を加えて行くと早く仕上がります。
中ページの構成要素はパンくずリスト・ローカルナビゲーション・コンテンツの3つです。
「パンくずリスト」とは、そのページがサイトのどの位置にあるか階層表示するリストです。童話「ヘンゼルとグレーテル」で道に迷わないようにパンくずを落としながら歩いたというお話に由来します。
「鈴木智子のホームページのアクセスアップ講座」のように階層構造が複雑なホームページでは、ユーザが現在位置を見失う恐れがありますからユーザビリティのためにパンくずリストを設置します。
サイト全体の情報量が多いため、階層が深くなることを予測して広い表示幅をとることができるよう、パンくずリストをグローバルメニューの下に配置しました。
ローカルナビゲーションは、各講座に属する詳細ページを列挙するスペースです。
詳細ページは講座によってページ数が異なりますし、今後も増えることが予測できますので、運営・更新のしやすさを考えて縦に取ります。
最後がコンテンツです。コンテンツは中ページの主役ですので、残った空間を全て当てます。
要素をデザインする
ここからは、「コンテンツをデザインする」と同じ理論、同じ手法の繰り返しです。
先に制作した中ページのワイヤーフレームをコピーして、変更を加えます。
また、「トップ画面のデザインを仕上げる」で制作したデザインで共通の部分は、そのままコピーして使います。
さて、まず決めなくてはならないのは、視覚的優先順位でしたね。
中ページの視覚的優先順位は以下のようになります。
- コンテンツ
- ローカルナビゲーション
- パンくずリスト
では、実際にデザインしましょう。
コンテンツのデザイン
コンテンツのデザインは中ページの視覚的優先順位第一位ですが、デザインが目立てば良いというわけでもありません。
コンテンツ内容の主役は「テキスト」であり「画像」です。ユーザーがこれらを閲覧する情報の内容を、デザインが邪魔してはならないのです。
もう1つ気をつけておきたいのが、ページをhtml化したときに見出し要素に当たる部分のデザインです。「h1,h2,h3,h4,h5,h6タグについて」で説明した部分です。
コーディングしながら足りないパーツを作るという方法もありますが、最初に作っておいた方が統一感のあるデザインに仕上げやすいと思います。
以上の2点に留意してデザインすると良いでしょう。
「鈴木智子のホームページのアクセスアップ講座」では、このようになります。
ローカルナビゲーションのデザイン
ローカルナビゲーションのデザインのコツは、「グローバルナビゲーションをデザインする」と「コンテンツをデザインする」の合わせ技です。
「メニュー文字の読みやすさを最優先」に、「共通カラーを使用し、コンテンツより目立たないようにする」だけで良いのです。
この2点を注意してデザインしてみると、このようになります。
最後にパンくずリストをデザインします。
パンくずリストの区切り記号には、「＞」（大なり記号）を使うのがもっともポピュラーですので、この形を踏襲します。
そして、他の内容を邪魔しないように、少し地味目にデザインします。文字色をグレーにするとよいと思います。
以上で中ページのデザインは完成です。
実際の操作は、「ワイヤーフレームとして仕上げる」や「コンテンツをデザインする」でやった操作の繰り返しです。
デザインを仕上げるためには様々な装飾方法を覚えなければなりません。
「鈴木智子のホームページのアクセスアップ講座」では、最近流行の装飾方法や良く使うイラストやロゴの作成方法を「パーツデザインの制作」にまとめてあります。
是非、そちらもデザインの参考にしてください。
これで全てのデザインが出来上がりました。
完成したpsdデータをこちらに上げていますので、解凍してご覧ください。
では、次に「Illustratorの設定」に進みます。
