レイアウトの仕方

トップページのレイアウトほど考えるものが難しいと感じることはありませんか?まずページのレイアウトを考える前にトップページには何があるのかを考えていきましょう。

トップページにはなにがある?

サイトの一つの顔となるトップページ。なんとなくでも重要だと感じて、あなたもトップページをどうしようかと考えたことはないでしょうか?

そもそも他のサイトのトップページには何があるのか、意識してみたことがありますか?(僕はあまり見ないほうですが)

Microsoftのトップページ
Appleのトップページ

右の図の上のほうがMicrosoftのサイト、下がMacで有名なAppleのサイトです。まったくレイアウトは違いますけれど、サイトのトップページにあるものは、さほど変わりません。

図の中にAという部分は、そのサイトがどこのサイトであるのかという表示の部分です。ちょっと難しい言葉を使うと「サイトアイデンティティ(略して『サイトID』)」と言われる部分です。

Bの部分は、サイト内のページを移動するのためのメニューで、いわゆる「ナビゲーション」の部分です。

Cの部分は、実際のページの中身についての説明の部分です。トップページによっては、 とくに押し出したいコンテンツを目立たせるように、画像なんかでインパクトを与えてクリックを訴求しています。

Dの部分は、著作権情報が載っています。いわゆる「フッタ」と言われているものです。

実は大手のサイトでもトップページを構成している要素はたったの4つなんです。もういちどおさらいしてみましょう。補足も含めて表にしてみました。

ページの要素 解説
サイトID
(サイトアイデンティティ)
  • サイトがどこのサイトなのかを示す。
  • ページの信頼性を上げるため。
  • どこのサイトかとわかると訪問者は安心しやすい。
ナビゲーション
  • ページ内の移動をスムーズに移動させるため。
  • ページ間での移動がスムーズにできるようになると、ストレスを感じずに訪問者に読んでもらえるので、好感度アップ。
コンテンツ
  • サイトのオリジナルの部分。そのページでしか表示されない情報。
  • ページ1枚 - サイトID - ナビゲーション - ヘッダ = コンテンツ。
フッタ
  • 主に著作権情報、免責事項などが載せられている。
  • サイトIDと同じような役目を果たし、ページの信頼性を上げることが目的になっていたりする。

レイアウトとは部品を組み合わせること

紙のデザインはどうかはわかりませんけど、Webデザインのレイアウトは上の4つの組み合わせなんです。さらにフッタというのは名の通り、ページの下に付けるものと決まっているので、
実際に組み合わせるものはサイトID、ナビゲーション、コンテンツの3つです。 この3つを組み合わせてレイアウトと呼ばれる作業になるのです。

Webページ=サイトID+ナビゲーション+コンテンツ

2005年9月4日更新