フッター情報をデザインする
次に、フッターをデザインします。
フッターとは、本文の下にあるページ情報などを記述するための領域です。印刷用の文書では、ページ番号、文書作成日、作成者などを記述するのに使われるエリアです。フッター(Footer)をきっちりデザインすると、引きしまった印象のホームページになります。
他の部分を丁寧にデザインしても、フッターで気を抜いてしまうと努力が水の泡になってしまいますので、きっちりガンバリましょう。
フッターデザインの分類
現在のインターネットを見渡すと、フッターのデザインはおおまかに2つに分類できます。
- すっきりシンプルに仕上げたフッター
- 写真・イラスト等を使用して、サイトデザインの一つとして組み込まれたフッター
1の例としてNIKON、2の例としてマクドナルドをご紹介します(2009年9月現在)。


どうでしょうか?
ニコンは罫線のみを使用したシンプルなデザイン、マクドナルドは曲線やイラストを使用した凝ったデザインですね。
どちらのデザインを選択するかは、サイトの性格や目的によります。
「鈴木智子のホームページのアクセスアップ講座」では、1を選択しました。
このホームページはコンテンツ内容がほぼテキストで構成されているため、華やかなフッターをデザインすると、閲覧者の視線を邪魔してしまうと考えたからです。
閲覧者にはコンテンツに集中していただきたいので、かなり抑えめにデザインすることにしました。
デザインの配置
では、実際のデザインに移ります。
ここでもまず要素の配置を行い、その後で罫線を引いてみます。
要素の配置や罫線の引き方は、「ワイヤーフレームとして仕上げる」や「グローバルナビをデザインする」にある通りです。

控え目にすると決めましたが、このままではデザイン性がありませんし完全にグローバルナビゲーションに負けてしまっています。
色々考えた結果シンプルなイラストを使用することにしました。

Illustratorで西新宿の街並みのシルエットを制作し、背景にします。
シルエットの作成については、「キービジュアルをデザインする」で作成する背景にある新宿の街並みのデータを元に、「シンボルマーク(アイコン)の制作」や「地図の制作」などを参考に作成してみて下さい。
色は薄いグレーのみで、シンプルに。イラストの下部をすっぱりと切り取って、コピーライトやスポンサーリンク部分の罫線の代わりとして利用します。
新宿周辺の景色をご存知の方には、「おや?」と思ってもらえるかもしれないことを期待して!
これで共通部分のデザインは終了です。
ここまでのpsdデータは下記のようになります。データをこちらに上げていますので、解凍してご覧ください。

西新宿の街並みは、Illustratorで作成しますので、ひとまずフッターのデザインを終了して、「トップ画面をデザインする」に進みます。
