誰でもわかるサイト制作のステップ

Step5トップページフレームを決める

トップページフレームとは、トップページデザインを考える上での基本形となるものです。
トップページフレームは (1)ページデザインの視点 (2)データ階層の視点 で考えることができます。

デザインの視点

デザイン面を規定するトップページフレームには、(1)F字型 (2)逆F字型 (3)ブリッジ型 の3つの形式が挙げられます。

F字型

Webサイトトップページとしては、最も基本的なフレームです。人の目の流れが左から右へ流れ、左下に戻り右へ流れるという、見易さを意識したデザインです。Webサイトに求められる「自社をわかりやすく伝える」ということを考慮しています。

F字型フレーム

逆F字型

バナーを多く使用するトップページデザインの場合は、逆F字型のトップページフレームとします。マーケティングサイト等を活用するマルチエントランス構造のWebサイトの場合に、有効なフレームであるといえます。

逆F字型フレーム

ブリッジ型

トップページに載せる情報量が多い場合に有効なフレームです。特に情報量の多いソリューションサイトなどに活用されることが多いフレームです。

ブリッジ型フレーム

F字型、逆F字型は、インターネットエクスプローラーの「お気に入り」を表示させても、横スクロール無しで全画面を読み取ることができる横幅とするのが一般的です。ブリッジ型は横幅をとるため、「お気に入り」を表示させると、横スクロールとなることが前提となります。

データ階層の視点

データ階層を規定するトップページフレームには、(1)情報集約型 (2)ルビ型 の2つの形式が挙げられます。

情報集約型

全てのコンテンツをトップページに集約させたフレームです。サイトマップ無しでも目的のコンテンツに辿り着けることを前提としており、「わかり易さ」「見易さ」を考慮したフレームであるといえます。
また、トップページに情報を集約させることで、SEO(検索エンジン最適化)対策の面でも有利になります。

情報集約型フレーム

ルビ型

ページ上の"ルビ"を押すことにより、トップページのコンテンツが切り替わるフレームです。限られたスペースの中に、ビジュアルな情報をおさめたい時には有効な方法です。

ルビ型フレーム

事例

事例:作業工具メーカーJ社の場合

作業工具メーカーJ社の場合、トップページフレームの(1)ページデザインの視点では「逆F字型」を採用し、バナーによりマーケティングサイトとリンクさせる、マルチエントランス構造としてます。
また
(2)データ階層の視点では「情報集約型」を採用し、全てのコンテンツをトップページに集約させるフレーム構造となっています。