フッター情報はすっきりとデザイン 鈴木智子のホームページのアクセスアップデザイン講座

フッター情報をデザインする

次に、フッターをデザインします。

フッターとは、本文の下にあるページ情報などを記述するための領域です。印刷用の文書では、ページ番号、文書作成日、作成者などを記述するのに使われるエリアです。フッター(Footer)をきっちりデザインすると、引きしまった印象のホームページになります。
他の部分を丁寧にデザインしても、フッターで気を抜いてしまうと努力が水の泡になってしまいますので、きっちりガンバリましょう。

フッターデザインの分類

現在のインターネットを見渡すと、フッターのデザインはおおまかに2つに分類できます。

  1. すっきりシンプルに仕上げたフッター
  2. 写真・イラスト等を使用して、サイトデザインの一つとして組み込まれたフッター

1の例としてNIKON、2の例としてマクドナルドをご紹介します(2009年9月現在)。

どうでしょうか?
ニコンは罫線のみを使用したシンプルなデザイン、マクドナルドは曲線やイラストを使用した凝ったデザインですね。
どちらのデザインを選択するかは、サイトの性格や目的によります。

鈴木智子のホームページのアクセスアップ講座」では、1を選択しました。
このホームページはコンテンツ内容がほぼテキストで構成されているため、華やかなフッターをデザインすると、閲覧者の視線を邪魔してしまうと考えたからです。
閲覧者にはコンテンツに集中していただきたいので、かなり抑えめにデザインすることにしました。

デザインの配置

では、実際のデザインに移ります。
ここでもまず要素の配置を行い、その後で罫線を引いてみます。
要素の配置や罫線の引き方は、「ワイヤーフレームとして仕上げる」や「グローバルナビをデザインする」にある通りです。

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

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

これで共通部分のデザインは終了です。
ここまでのpsdデータは下記のようになります。データをこちらに上げていますので、解凍してご覧ください。

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

follow me

鈴木智子のホームページのアクセスアップ講座