Webデザイン応用 第5回「下層ページへの展開」
(1)サイトにおけるコンテクスト
トップページの役割が各コンテンツへの導線とするならば、下層ページはまさにコンテンツ本体である。Webにおけるコンテンツとは情報そのものであり、いかにスムーズにビジターに対して情報を提供するのかがサイトの真価となる。下層ページにおける情報提供は、トップページ以上に気を配りたい。
1-1.コンテクストとは
コンテクストとは「前後関係」や「文脈」といった意味を持つ単語だ。では、サイトにおけるコンテクストとは一体何なのだろうか？
サイトとは極論すれば、ある連続性を持った情報の構造体である。その連続性とはある一定のルールや流れのことであり、例えばこれまでに何度か登場したマージンやテキストのルーリング、ナビゲーションのインタラクションであったりする。
コンテクストを作り出すことは、すなわちユーザーの学習を手助けすることである。ある一定のリズムを持ったサイトであればユーザーは次に何が起こるのかを予測することができるようになるが、逆に学習しづらいサイトであればユーザーにストレスをかけることになってしまう。
●ナビゲーションのコンテクスト
ナビゲーションは大きく分けると縦型、横型があるわけだが、基本的に外観および機能は継承する。デザインによっては変化する場合もあるわけだが、少なくとも機能、およびインタラクションにおいての変更は避けること。
また、下層ページからは必ずホームページへ戻るための仕組みを組み込んでおかなければならない。
●構成要素のコンテクスト
リンクの表現や使用するボタン、デザインのテイストなどの外観、および機能を継承する。
例えばショッピングカートで決済手続きをしている時は1ページでは完結しない場合がほとんどだ。こうした時に、すべてのページで表記法法統一されていないとビジターは違う機能なのかもしれないと思ってしまう。
●情報のコンテクスト
これは下層ページだけの問題ではないが、ラベルと表現法法をサイト全体で一致させる。
サイトが大きくなると複数のスタッフが関わることになる。こうした時に、表記法が統一されていないと、人によってまちまちな表現をしてしまい、結果的にコンテクストを喪失してしまう恐れがある。
1-2.コンテクストの喪失
コンテクストについての解説が終わったところで、逆の状態についての話をしよう。先ほどWebサイトとは連続性を持った情報の構造体であると説明したが、この連続性が断絶した時に“コンテクストが喪失した”という状態に陥る。つまり、クリックした次の瞬間にビジターが「あれ？」と思ってしまう状態のことだ。
例えばデザインの外観が急激に変化してしまったり、下手をすると今まで使っていたナビゲーションがなくなってしまったりすることを指す。こうなってしまうとビジターは困ってしまい、ホームページへ戻ろうとする。しかし、戻るための機能を持ってない場合は、大体の場合サイトを立ち去ってしまう。
(2)ナビゲーションの展開
ナビゲーションの基本構造はトップと下層で維持するという原則に基づいて、実際に下層ナビゲーションを組み立ててみよう。
2-1.縦ナビゲーション
汎用性に優れ、メニューの増減に強いというメリットを持つナビゲーション。ただし、カテゴリーが増え過ぎると縦に長くなり過ぎるというデメリットを持つ。下層ページへの展開としては、直感的に構造の把握しやすい「多層構造型」と、操作性を重視した「縦横混在型」に分類される。
●多層構造型
現在位置をナビゲーションを見ただけでも把握しやすいというメリットを持つが、反面、以下のメニューが必要以上に下へ移動してしまうというデメリットを持つ。
●縦横混在型
サブメニュー部分をコンテンツ側に分離してしまう方式。ナビゲーションの位置が著しく変化することがないので、操作のコンテクストとしては優れている。ただし、ナビゲーションを見ただけでは現在位置が把握しにくいというデメリットを持つ。そのため、実用にはもう一工夫欲しいところだ。
2-2.横ナビゲーション
直感的に現在位置を把握できるというメリットを持つが、コンテンツの増減には弱い。しっかりとしたコンテンツ計画を立てないと成立しないため、事前の設計が肝になる。
こちらのナビゲーションも「多層構造型」と「縦横混在型」に分類される。
●多層構造型
メニューの増減に弱いという点以外、弱点らしき弱点の見当たらない優れたナビゲーション。現在位置の把握という点では他の追随を許さない。ただし、ヘッダー部分がだいぶ厚くなるので、情報の掲載方法には十分な注意が必要だろう。
●縦横混在型
情報量の多いサイトで一番利用されているナビゲーション。メニューの上下関係がコンテンツの階層そのものであり、得てして数の多くなりがちなサブメニューを縦ナビゲーションにすることができる。
2-3.その他のナビゲーション
FlashやDHTMLを使うと、さらにダイナミックなナビゲーションを組み立てることも可能だ。
●メタイメージによるナビゲーション
メニューの構造としては縦→横の「縦横混在型」だが、ノートというメタイメージを上手く使って直感的なナビゲーションに仕上げている。
●Flashを用いたナビゲーション
メニューの構造としては横→横の「多層構造型」だが、Flashを用いることでより直感的に、しかも面積の節約に成功している。
(3)下層ページに必要なもの
3-1.ホームページへ戻るボタン
サイト内でユーザーが迷子になった時、多くのユーザーはそのサイトのホームページへ戻ろうとする。この時にホームページへ戻るボタンがないと、慣れたユーザーであればURLの不必要な箇所を削除して戻ることができるが、不馴れなユーザーであればサイトから立ち去ってしまう。
こうした事態を避けるためにも、下層ページにはホームページへ戻るためのボタンを必ず設置しよう。このホームページへ戻るためのボタンの設置には現在のところ3種類存在する。
- ヘッダーに設置したロゴから戻れるようにする。
- 他のメニューと同様に明示的に設置する。
- メニューからは離れているが、ヘッダー内に収める。
パターンとしてはおおよそこの3種類が主流となっており、一番多いパターンとしてはロゴにのみ設置するパターンとなっている。
3-2.トピックパス
トピックパスは別名、「パン屑ナビ」とも呼ばれており、必須ではないが多くのサイトで利用されている。訪れているユーザーに対し、“現在位置”と“上階層への移動手段”を提供することができる。
この手段が特に有効なのはサイト構造が整然としており、上下間の移動が多いサイトだろう。逆に不規則な移動が多発するサイトには向かない。この場合はナビゲーションを工夫し、現在地を明確にするような処置が必要になるだろう。
(4)見出しの基本
文字を伴う画面のレイアウトは、些細な箇所への気配りで全体の印象が大きく変わってくる。知的に仕上げたいものでも、うっかり手を抜くとなかなか全体の印象がまとまらない。見出しと本文などの一見、何の工夫のしようもないところが、実は重要だ。
4-1.見出しの扱いを統一する
サイト内の情報をピックアップしやすく作るためには、細かい見出しの設定が必要だ。Webのようにモニタで見るような情報は、情報ごとに見出しを設けて掲載内容を示す方方が一般的である。こうした考えに基づいて、現在のWebサイトには多くの見出しが含まれているが、その場合、すべての見出しに統一した見栄えを持たせることが基本だ。
画像テキストを採用した見出しは、すべて同じフォントを利用すると、全体の統一感が得られる。また、フォントの形状だけでなく、位置関係を配慮に入れるとさらに良い。一度、見出しと本文という位置関係を決定したら、サイト全体でこれらの要素の位置関係を崩さないことが、レイアウトに一定のリズムを持たせ、レイアウトに安定感を持たせることに繋がる。
4-2.本文との位置関係に注意
見出しの位置と本文のスペースをきれいに揃えるコツは、見出しの位置と本文を若干離して配置することだ。この手法で要素にまとまりが出る。任意の空きスペースを作るには、HTMLの強制改行では無理なので、よりよい見栄えを追求するならCSSを用いて調整するとよい。また、見出しそのものをタグで段落扱いすると、HTMLでは完全に１行分の空きができる。見出しと本文位置が過剰に離れるとそれぞれの関係性がみにくいばかりか、レイアウトをコントロールしきれていない印象を与えるので注意して組みたい。
4-3.サイト機能で方法を検討
確かにポイントとなる見出しを画像テキストにすると、美しいレイアウト作りの近道となるが、サイトに必要な機能にも目を向けたうえで利用を検討しなければならない。
特に学術的な内容のサイトでは、利用者が資料としてテキストの一部を保存する可能性もある。この場合、ブラウザから直接適すとを選択、コピーできない画像テキストは、サイトの利用価値を下げてしまう。内容に合わせて活用すべきだ。
コメント＆トラックバック