導線を元に問題点を探そう！2017/10/12

Webデザインがグラフィックデザインと大きく違うのは、「導線」という考え方があるからです。

グラフィックデザインというのは平面のデザインで、代表的なものはチラシや雑誌広告などの印刷物、それにロゴマークなども含みます。

これらは目の前にある一枚のデザインで、私たちの心をぐっと惹きつけます。

 

Webでもビジュアルデザインが大切なのはもちろんですが、負けず劣らず重要なのが、ここで紹介する「導線設計」です。

これを理解するとWebサイトを企画、運営するための視野がぐんと広がっていきます。

ぜひ導線設計をマスターして、利用価値の高いWeb運営をマスターしましょう。

  

1　グローバルナビゲーションで全体を覆う

2　サブナビゲーションも重要

3　ページ内の情報に気づかれていないのでは？

1　グローバルナビゲーションで全体を覆う

企業が使うWebサイトにはある程度定番の形、構成するパーツがあります。

サイトの上部に並ぶ「グローバルナビゲーション（グローバルメニュー）」は、重要なパーツです。

 

このグローバルナビゲーションが基本的には、サイトの主要な情報を網羅します。企業サイトの場合は取り扱い商品やサービス、会社情報などは必ず含まれるものです。プレスリリースや採用情報も重要です。

また資料請求やお問合せ、通販サイトへの誘導をグローバルナビゲーションと同等かそれ以上の目立つ扱いで、ページ右上などにボタンで設置するのもよく見る手法です。企業によっては店舗検索や問合せのフリーダイヤルを大きく設置するなど、O2O（Online to Offline）でリアルなやり取りに持って行く形もあります。

 

それほど頻繁に見られないメニューは、ヘッダやフッタに小さめに置かれます。

具体的な内容としては、プライバシーポリシーや推奨閲覧環境などがこれにあたります。

 

よくある失敗としてグローバルナビゲーションやヘッダ、フッタのいずれのメニューにも含まれていないコンテンツがある、というのがあります。しかも主要な情報の場合もあります。

ではどこにそのページへの誘導が置かれているかと言うと、例えばトップページの目立つ位置にバナーでドーンッと置かれています。

この扱いだけを見ればユーザーに見て欲しいコンテンツなのは明らかなのですが、残念ながらトップページに行かないと分かりません。今のWebサイトだと、検索エンジンから直接お目当ての情報にアクセスするというのも日常茶飯事です。ですからトップページを一度も通過せずに訪問を終えるというケースも多くあります。

つまりいくらトップページにバーンッと大きなバナーを設置したところで、スルーどころかユーザーの目にも触れていないのです。

 

グローバルナビゲーションとはその名が示す通りサイト全体の情報を網羅したものですから、主要なコンテンツには必ずここから行けるようにしておきます。そこで漏れたものはヘッダやフッタのナビゲーションに入れ、どのページからもサイト内のすべての情報に行けるようにしましょう。

  

2　サブナビゲーションも重要

 Webサイトには、「階層」というのがあります。

トップページから二階層目、三階層目・・・と情報が分かれていくのです。

二階層目をグローバルナビゲーションで大きく表示して、その中の細かな内容はサブナビゲーションに記していきます階層としては、これが三階層目にあたります。

具体的な例を挙げましょう。

 

〇会社情報

・（二階層目）グローバルナビゲーション：会社情報

・（三階層目）サブナビゲーション：会社概要／事業内容／代表メッセージ／沿革

〇採用

・（二階層目）グローバルナビゲーション：採用情報

・（三階層目）サブナビゲーション：新卒採用の皆さまへ／中途採用の皆様へ／社員メッセージ

 

こんな形で階層が分かれても、ユーザーに対してはどこにどんな情報があるかをメニューで分かりやすく示していきます。

 

サブナビゲーションをページ内のどこに置くかも大切です。

向かって右側、あるいは左側のエリア（サイドカラム）が定番の設置場所ですが、最近はスマートフォンを基準にしてサイドがないページ（1カラムレイアウト）のWebサイトが増えています。

この場合は1ページ内の縦に情報を配置していくという方法、またはグローバルナビゲーションにマウスをのせると下側にサブナビゲーションが広がる、といった形を取るケースが多くなっています。後者はサブナビゲーションを大きく見せるため、メガドロップダウンメニューと呼ばれています。

 

またスマートフォンでは、グローバルナビゲーションをハンバーガーメニューというボックス状の箱の中に置き、タップすると中が開いてメニューが表示されるというやり方が定番化しています。

その中でさらにサブナビゲーションを開くようにする、あるいは一度各メニューをタップして関連するサブナビゲーションを置いたページに遷移してもらうという方法が多く取られます。

しかしいくつかの調査によると、ハンバーガーメニューが何なのかに気づいていないユーザーも多いという報告もあります。

そのため主要メニューだけは表側に出しておく、といった工夫をしているスマホサイトもあります。

 

3　ページ内の情報に気づかれていないのでは？

 この記事で最後に紹介したいのは、案外見落とされがちになっているページ内の情報設計です。

ページ内で必要な情報が、ユーザーの見やすい場所、形で置かれていないというケースが割と多いのです。

事実、多くのWeb担当者に「〇〇の情報がないですよ」と指摘すると、「ここに書いてあります」と反論されてしまいます。

たとえばある商品紹介ページで「使用方法が書いてありません」と指摘すると、テキストの一部を指して「ここに書いてあります」と言われるのです。

 

残念ながらWebページに訪れたユーザーは、担当者ほど事細かに読んではくれません。

斜め読みして必要な情報がないと判断すれば、すぐにページを離れてしまいます。

最近はコンテンツ量が豊富なメディアタイプのWebページも多いですが、ユーザーは「読む」と「見る」との中間のような動きをしています。試しに電車内やカフェなどで、スマートフォンを操作する人たちの様子を観察してみましょう。

本や雑誌を読む時ほどじっくりと集中せず、画面をさわってすぐに次の操作に移っていくはずです。パソコンだと多少は同じ場所に滞在する時間は増えますが、モニター画面で字を読むというのは想像以上にストレスを感じるものです。やはり紙に印刷された情報ほどじっくりと読んでいないのは明らかです。

こうしたWebに訪れる「素早く移動、判断をしていく」「必要な情報がすぐに欲しい」ユーザーの行動に合わせて、ページ内の情報は適切な場所に、適切な形で設置するべきです。

先ほどの例でいえば商品の実際の使用方法はニーズが高いはずですので、見出しを分けるか、別ページに分けてサブナビゲーションで誘導するようにしましょう。

具体的には、次のような形です。

 

〇商品情報ページ（見出しで下の項目を明確に区切る、またはサブナビでページを分ける）

・商品の特徴／使用方法／購入するには／サポート情報

 ページ内の情報を企業の意図通りにユーザーに見てもらえているかは、なかなか分からないものです。

そのためWebサイトを公開する前に社内、できればWebやITに関りが薄い人に頼んでページを一度見てもらい、情報がきちんと伝わるかを確認してみると良いでしょう。

「ユーザーテスト」という言葉を聞いたことがある方も多いでしょうが、これはその最も身近で手軽な方法になります。