投稿日：2006年6月20日　　　レベル：−　　　　ソフトウェア：−

ウェブページには’原点’である左上から始まる流れのようなものがあります。

この左上に近い位置にあるものが、その後に続くものより重要であると暗に示しているのです。

ページの原点

西洋の人々は左から右、上から下に向かってモノを読みます。原点はあなたがページをまさに見始める場所、スクリーンの左上ということになります。また、HTMLの制約から、ページのサイズを変更しても、左上の点は常に固定された、唯一動かない点でもあります。

全ての視覚的な階層体系は原点を中心に展開されます。左上から右下に向かって連続的に流れていくのです。

原点はウェブのページの中で最も優位な点です。何よりも最初に目に入る、ここに置かれた視覚的な要素がページ全体を支配することになります。ここから、右方向に、さらに左に向かって帰ってくる順路で、ウェブページ上での優先度が低下していきます。

ウェブデザイン会社のEonicのホームページは、これをよく実践していますが、レイアウト自体は右上の斜め裁ちのせいで少し不自然です。

根源的な視覚的階層体系を使って、情報のランクを明確にする

ページ上では、流れに沿って要素を配置していくことで、その重要性が明確になります。それぞれの番号の情報が下の図内に配置されています。注意:”枠”は実際のグラフィクスを示しているわけではありません、これはあくまでも説明上の境界線です。

1．原点に近く、サイトの内容を代表するような要素(通常、ロゴやサイトIDなるもの)
2．サイトに関わるナビゲーションや機能(例えば、”サイト内検索”、”ログイン”･･)。これらはサイトロゴなどの区画に近接した位置になりますが、あくまでもサイトの内容の一部なので、ロゴ、IDよりも下の階層に属します。
3．ナビゲーションや各種機能の下の区画は、現在のセクションのタイトルや、セクションを統括するような要素。
4．現在のセクションと並列な他のセクションへのナビゲーションがくる。
5．セクションのタイトルに要約される、セクションに含まれる全ての事項。
6．現在のセクションとの関係事項へのナビゲーション。セクションの区画の横に位置する。
7．セクションの内容。

これらが連続した視覚的な情報の階層体系を示しています。

実際のサイトの例

上のような従来型のレイアウトを見る

･ロゴ(1)は最も原点に近い位置に配置されています。
･この例では、”Log out”というサイトの状態を示すボックス(2)がサイトIDの下にきます。このボックスは”Community ”タブが支配する区画の外側に位置しています。
･第一ナビゲーションタブ(4)(Community、Chat、･･)はサイトIDの右側(より下の階層)にあり、やや下に位置します。
･セクションID(3)は選択タブと等価です(Community)。
･第二ナビゲーション(6)は2行目のタブ(homepage、blog、gallery)です。これは全てセクション(5)に含まれ、セクションID(Communityタブ)の下に属します。
･ページタイトル(7)は明らかに、セクション(5)の下にあります。
･(7)はページの内容の(8)よりも上になります。

さらに階層体系をみる

･上方かつ左側にある、ページ内容の上方のテキストは全てのイメージに関係します。
･それぞれの写真はキャプション(題目)を持ち、イメージ左端よりやや右側から始まり、イメージの下に位置しています。
･キャプションの右側、下にある”Update”機能は、キャプションの下に属します。

引用:Web Design Library著者:Chris Dolan翻訳:atuk