第1部 新規案件のためのWebインターフェイス・デザインガイド
09 ナビゲーション渾然一体型
グローバルとサブのふたつのナビゲーションが一体化したレイアウト
【こんなサイト制作に最適】
・コーポレートサイト
・店舗案内サイト
【解説】
サンプルは、ある高級食品店を想定したサイトのモデル。
トップページから3階層までワンクリックで飛べる優れた導線が特長。左側にナビゲーションがサイトマップ型にまとめられているため、サイト構造がわかりやすくなっている。
ページ数の多い大規模サイトでは、このスタイルを利用すると、メニューリストが長くすぎてしまうことが難点といえる。しかしながら、左コラム以外に大きなスペースを確保でき、余裕をもったデザインができることが魅力だ。
・コーポレートサイト
・店舗案内サイト
【解説】
サンプルは、ある高級食品店を想定したサイトのモデル。
トップページから3階層までワンクリックで飛べる優れた導線が特長。左側にナビゲーションがサイトマップ型にまとめられているため、サイト構造がわかりやすくなっている。
ページ数の多い大規模サイトでは、このスタイルを利用すると、メニューリストが長くすぎてしまうことが難点といえる。しかしながら、左コラム以外に大きなスペースを確保でき、余裕をもったデザインができることが魅力だ。
【Point】
1. ナビゲーション要素を集約
通常はサブナビゲーションに入る下の階層までを、左側にまとめて掲載。全ページにわたり、同位置に同じナビゲーションがあることで、使い勝手の良いサイトとなる。
2. コンテンツエリア
イメージを配置したり、下層コンテンツの紹介を行うエリアを大きく用意している。
【参考サイト】
フォートナム・アンド・メイソン
イギリスに本店を持つ紅茶で有名な食品ブランドのサイト。画面の右半分をイメージ画像、左半分をナビゲーションとしたシンプルなエリア構成。ブランドや商品の紹介以外のコンテンツについては、フッタにリンクを設け、訴求点をクリアにしている。シンプルな構成の場合、どのように更新性をアピールするかが課題となるが、このサイトでは画像数点をランダム表示するとともに、季節ごとに入れ替えを行っている。ニュースやキャンペーンについてはポップアップ表示を採用。
料理教室のABC - ABC Cooking Studio
http://www.abc-cooking.co.jp/index.asp
大手クッキングスクールのABCクッキングスタジオのサイト。ナビゲーションを左コラムに配置。さらにメインエリアへ、それぞれのコンテンツのサムネール画像とヘッドラインを配することで存在感を主張し、アクセス率を高めている。右ナビゲーションは、前ページに共通したレイアウトのため目に留まりやすく、使いやすい。
