ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > 視覚階層形態

視覚階層形態

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


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

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

ページの原点

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

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

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

100_101_026_1.jpg


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

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

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

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

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

100_101_026_2.gif


実際のサイトの例

100_101_026_3.jpg


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

・ロゴ(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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング