ユーザー視点のウェブデザインガイド

ユーザーはサイトのここを見ている

ページ

[AD]

ユーザーはサイトのここを見ている

サイトを訪れたユーザーの情報閲覧には、いくつかの基本的な行動パターンが存在する。サイトの性質にも左右される部分はあるが、以下に挙げるポイントを踏まえて画面を作成することで、スムーズにサイトを見てもらえるようになる機会がぐっと増えるはずだ。

[1]ナビゲーションでユーザーを誘導できると思ったら大間違い

「グローバルナビゲーションが設置されているのだから、当然ユーザーはそこからリンクを辿ってくれるはずだ」と思っている方はいないだろうか。

数多くのユーザビリティテストを実施していて毎回痛感するのが、「ユーザーはナビゲーションをなかなか見ない」という点である。これはなぜか。

ユーザーは、あくまでサイトの「コンテンツ」を見に来ている。そのため、ナビゲーションは常に後回しにされてしまうのである。後回しにされて、それでも必ず見てくれるのであればまだよい。しかし現実には、ユーザーはコンテンツ部分をざっと見て、思うようなサイトではないと判断した時点で他のサイトへ移ってしまうことが多い。

もちろん、ナビゲーションを否定しているのではない。サイトの主要ページへのリンクとして、ほとんどのサイトには欠かせない要素だろう。だが、ナビゲーションがあればユーザーに情報を見てもらえると思うのは間違いである。

本当に訴求すべき重要な情報は、きちんと優先度をつけてコンテンツ部分で提示を行い、ユーザーを取り逃がさないように心がけよう(図3)。

図3 ユーザーは、まずコンテンツエリアを見ようとする。

[2]Flashや画像は本当に見られているのか

トップページや、場合によってはカテゴリ以下のページでも、Flashを用いるサイトは多数存在する。しかし、それが本当にサイトの価値に貢献しているのだろうか。

実際にユーザーがサイトを利用しているシーンを見ると明らかなのだが、とにかくユーザーは待たされることを嫌う。

確かにFlashムービーを用いれば、少ないスペースで多くの情報を提供することが可能だが、そのメリットに飛びつく前に、「本当に訪問者は何秒もページにじっととどまってこのFlashを見てくれるのか」を検討したほうがよい。

以下に、画像やFlashがユーザーにとってどのように見られているのかを示す。

  • 画像はアイキャッチになる。実験による目線追跡のデータでもその傾向は見られる。
  • しかし、広告と思われた瞬間、内容を見てくれなくなる(バナーブラインド現象)。
  • ただし、サイトの内容に関連したバナーは比較的認識される傾向が高い。

これらを踏まえ、ユーザーに対して優れたコンテンツを提供する表現手段として、適切な画像やFlashを用いれば、サイトの価値創出に貢献するコンテンツとして機能してくれるだろう(図4)。

図4 効果的な情報提供の例:「三井住友銀行 SMBC」
左側のプロモーション画像では、具体的な数値を記入し、はっきりとした形でメリットを訴求している。また、コンテンツの中央でサービスページへの誘導を行っている。リンクの設置も、ユーザーの行動(目的)に沿った簡潔な分類がなされており、トップページにおける情報提供の成功例として参考にすべき点が多い。

[3]文章はほとんど流し読み

インターネットでのユーザー行動で常に意識しなければならないのが、「文章を読まない」という点である。

ブログなどの「文章を読むことが目的になっているページ」はともかく、トップページからサイトへ入り、徐々に情報を絞り込んでいく場合には、呆れるほど文章は無視されてしまう(図5)。

図5 文章の書き方と見せ方の悪い例と良い例。

「情報を載せていれば読んでもらえるはずだ」というのは、大きな間違いなのである。

特に、長く抑揚に欠ける文章になればなるほどこの傾向は強まることから、ウェブで文章を記述するには、常に以下のポイントに気をつけよう。

  • 長文は極力さけ、段落を区切った記述を行う
  • 1段落は3行以内に収める。
  • 表や箇条書きによって、簡潔なリストアップを行う。
  • 色文字・太文字を交え、緩急のある文章に仕上げる。

[4]ユーザーはリンクを追いかける

デザインを重視するあまり、リンクがリンクであると認識しづらいサイトを見かけることが多いが、それが大きな成果の損失を招いていることが非常に多い。

先程、「文章はほとんど流し読み」という点について述べたが、では、ユーザーがページのどこを見るのかというと、それはリンクである。

目的の情報へたどり着くまでは、ユーザーはリンクを辿ってページを次々と切り替え、絞り込もうという行動を見せる。

ユーザーにスムーズに行動して貰うためにも、以下のポイントに注意してリンクを設置することをおすすめする。

  • リンクであると明確にわかるよう、テキストと区別を付ける(青系色に下線が基本)
  • リンク文言は、移動先のページ内容がはっきりわかるような言葉にする

また逆に、図6のようにリンクと誤解されやすい表現も、ユーザーに大きなストレスを与えることになるため気をつけなければならない。

図6 リンク表現の悪い例。

[5]フッターへのリンク配置は効果大

普段からさまざまなサイトを見ていて、実にもったいないと感じることが多いのは、フッターエリアを有効活用していないという点である。

この、「コンテンツが終わった直下」の空間を有効に利用できるかどうかで、ユーザーに次々とサイト内の情報を見てもらえるかどうかが決まるといっても過言ではない。

あるページの内容を見終えたユーザーは、当然ながらコンテンツの最下端にいることが多い。ところが、そこで次へのリンクが提示されていないと、ユーザーは容易にサイトから離脱してしまうのである。

コンテンツ直下のエリアに関連の深いコンテンツへのリンクを設置することによって、ユーザーはスムーズに次のページへ移ってくれるわけである(図7)。

図7 コンテンツ直下の活用例:「Type」の人材紹介
サービスの紹介によってメリットを訴求した流れで、無料転職サポート登録へのリンクボタンを提示している。さらに、他のコンテンツへのリンクも設置し、ページ内の情報を見終えたユーザーを逃さないための工夫が施されている。
http://shoukai.type.jp/service/advice/

スムーズに情報を見てもらうためのデザイン

画面構成

  • カテゴリやタイトルにふさわしいサムネイル画像や、アイコンでアイキャッチを取ることにより、「ぱっと見て」ユーザーがわかりやすい画面を作ることが可能である。
    ※ただし、アイコンの多用はページの煩雑さにもつながるため、分量は適切に抑えなければならない。
  • コンテンツエリアにて、ユーザーの主要なニーズに対応する情報をしっかりと提供する。
  • リンクは明確にそれとわかるように提示する。
  • コンテンツ終了直下でのリンク提示は効果が大きい。

ライティング・ワーディング

  • ユーザーの頭に浮かんでいるキーワードを多用し、具体的な記述を心がける。
  • 客観性にかけるアピールや、企業からの一方的な「押し売り」はユーザーの不快感をあおり、サイトからの離脱を招くため、避ける。
  • 文章は徹底的に簡潔にまとめる。
  • 数行おきに段落を区切る。
  • 一段落は、3行以内を原則として記述する。
  • 重要なポイントとなるキーワードには、赤文字や太字強調を加え、メリハリをつける。

※この記事は、『Web担当者 現場のノウハウ vol.1』 掲載の記事です。

ページ

[AD]
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

アーティクル・スピニング
既存のコンテンツを書き換えたり、その一部を流用したり自動置換したりして、同一では ...→用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]