第1部　02　検索機能重視型

2006.12.27 WED

第1部　新規案件のためのWebインターフェイス・デザインガイド

02　検索機能重視型

文字情報を整理し、検索性の高さに重点をおいたインターフェイス

【こんなサイト制作に最適】
・ポータルサイト
・自治体サイト

【解説】
ポータルサイトの典型的な例を想定したサンプル。下層に多くのページを備え、幅広い層のユーザーが訪れるこのタイプのWebサイトのトップページは、インデックスページとしての機能性を重視する。ここでは、検索ボックスとカテゴリ別メニューをメインに構成した。

ヘッダ部分に検索ボックスを配し、画面上部にカテゴリ別メニューを配置。さらに、地域別の情報検索のためのメニューを下部に掲載している。

メール機能やマイページへのログインなど、特にアクセスが見込まれる重要なコンテンツについては、右カラムに集約し、導線を確保した。

テキスト情報をいかに見やすく配置するかがポイントとなるが、見出し部分でアクセントをつけたり、枠組みにするなど、掲載情報の領域がわかりやすくなる工夫を施している。

【Point】

1.　検索ボックスを一番目立つ位置に
使用頻度が高い検索ボックスはヘッダー部分に配置している。

2.　グローバルナビゲーションも目立つように
サイト全体を案内するグローバルナビゲーションは、視認性の高いトップ部分へレイアウトする必要がある。

3.　カテゴリ別メニューを画面中央へ配置
ユーザー導線の肝となりうるカテゴリ別メニューを画面中央へ配置。

4.　新着情報はファーストビュー内へ
ニュースなど更新性の高い要素はファーストビュー内へ配置する。

5.　ログイン誘導は右上に
ログインコーナーは、目にとまりやすい右上へ配置した。

6.　リンク関連は右コラムに集約
訴求したい要素や下層へのリンクは右コラムに集約させている。

7.　2の補足項目を下部に配置
グローバルナビゲーションの内容を補うメニュー要素を下部に置いている。

【参考サイト】

Yahoo! JAPAN
http://www.yahoo.co.jp/

言うまでもなく最大級のポータルサイトYahoo!。検索エンジンやメール、ショッピングモール、路線検索やニュースなど日常使いされるコンテンツを多く備え、それらへのユーザー導線を考慮して構成されている。最も視認性の高い位置に検索ボックスや、メールボックスが配置されているため、ユーザーが次のアクションを起こしやすい。また下層コンテンツをわかりやすくまとめたカテゴリ別のメニューも目が届きやすい中央エリアに配され、一覧できる。

渋谷区
http://www.city.shibuya.tokyo.jp/

渋谷区のWebサイト。行政機関のサイトも情報が多岐にわたり、アクセスするユーザー層も幅広い。
中央コラムで下層の内容を一覧表示し、ユーザーをいち早く目的のコンテンツへ誘導する工夫がなされている。カテゴライズされた情報は中央と右コラムに振り分けて掲載され、ファーストビュー内に重要項目がほぼ収まる構成だ。
さらに見出しとなったカテゴリ項目は、下層ページにおいてグローバルナビゲーションとして使用されている。