見やすいページになってる？ホームページ内の情報密度を考える5つのポイント

更新日: 2018年01月31日

デザイン

*「情報密度」(Information Density)*という言葉を聞いたことはありますか。
一般的にWebの世界では、ホームページにユーザーが到達してからユーザーが出会うコンテンツ内の情報量のことを言います。

もちろん、情報密度が高くなればなるほど、ユーザーは１ページの中でたくさんのコンテンツを目にすることになります。
情報密度とコンテンツ自体の関係を考えると、情報密度の高低によって、ユーザーのコンテンツに対する理解度は変化すると言えます。
さらには、ユーザーの理解度や認識度はそのサイトのユーザビリティやユーザーエクスペリエンスにも影響を与えるのです。

デザインを行うときには、ユーザーの実際にどれくらいのコンテンツ量を一度に処理できるのかを考える必要があります。
ユーザーが出会うコンテンツが多ければ多くなるほど、そのページで本来達成すべき目標を達成するのに時間もかかってしまいます。
実際、Facebookのフィードを下にスクロールすればするほどたくさんのコンテンツに出会いますが、だんだんと脳に負荷がかかってくるので、スクロールが深くなるたびに離脱率が高くなるのです。

今回は、ホームページ内の情報密度をバランス良くするために考えるべき5つのポイントをご紹介します。

ホームページ内の情報密度をバランス良くするために考えるべき5つのポイント

1. 1つのページではテーマや商品を1つに絞る

諸説ありますが、人間が１日に行う「選択」の回数は実に1万〜2万回とも言われています。
実際、そんなに選択をしているので、選択肢が多すぎると正しい判断ができなくなるときがあります。
そうした状態のことを、心理学では*「選択麻痺」*(Choice Paralysis)と呼びます。

例えばコンビニエンスストアでは、1種類の商品に対しての選択肢を減らして、購買率が上がるように工夫されています。
歯磨き粉やティッシュ、シャンプーなどは、1種類、多くても2〜3種類しか置かれていないことのほうがほとんどです。

しかし、選択肢の種類が多いと、判断に困ることがあります。
例えばコーヒー豆の専門店に行ったとき、コーヒーに知識がなく、なんとなくコーヒーを自分で淹れたいと思ってふらっとお店に立ち寄った場合、どれを選べばよいのか迷うのではないでしょうか。
コクや深み、苦味や値段も大きく違います。
店員さんに聞いてオススメを選んでもらわないと、選択肢が多すぎて購買に至らないのです。

これをホームページに置き換えた場合には、できるだけ１つのページではオススメしたいものを１つに選ぶほうがよいでしょう。
いろいろなものをオススメした結果、ユーザーが何を選べばいいかわからなくなり、ホームページを離脱するということが減るからです。

2. 密度が高い場合は「情報の固まり」を作る

Googleのトップページのように検索ボックスだけのシンプルなページは、情報密度は圧倒的に低いですが、ユーザーが行うべきことははっきりしているので、離脱する可能性もぐんと下がります。

一方、ブログやニュースサイトのようなテキストでメッセージを伝えることが多いホームページの場合は、どうしても情報密度が高くなる傾向にあります。
特にニュースサイトはブログとは違って中見出し・小見出しを置くことは少ないので、こうした記事を読むのに慣れていないユーザーからすると非常に読みにくく感じてしまいます。

▲ Fortune紙のあるニュース記事の一部

情報密度が多い場合は、できるだけ段落を細かく分けたり、適切な見出しをつけるなどして、ユーザーが情報を処理しやすいようにテキストの配置を考える必要があります。
本文の行間や字間を読みやすいように空けたり、重要な情報を太字にするなどして、情報にメリハリをつけることが大切です。

3. デバイスごとに適切な情報量にする

デスクトップデバイスとモバイルデバイスでは、画面の大きさが違うために、デバイスごとに適切な情報量に調整するよう心がけてみましょう。
近年ではモバイルでのインターネット閲覧は4分の3を超えているとも言われているので、モバイル版のホームページでの情報量を適切にコントロールするのは非常に重要です。
必要のないものは省いて、よく使うものだけに絞ることで、モバイルでも心地よいUXを実現することができます。

例えば、下記の図は格安航空券(LCC)のJetstarのホームページです。
このホームページは可変型のレスポンシブデザインになっており、どのデバイスにも合うようにデザインが表示されます。
デスクトップ版とモバイル版のホームページでは、何が違っているか分かりますか？

Jetstarのロゴマークの右側に置かれているメニューが、デスクトップ版では7つ表示されていますが、モバイル版では「メニュー」「サポート」の2種類だけしか表示されていません。
それでもこの2つのメニューはよく使うこと、そして「セール」や「ツアー」のようなメニューは他のUIであったり画面をスクロールすることで対応できるので、メニューが少なくなっても問題ないのです。

4. 目の前のユーザーに必要な情報だけに絞る

もしユーザーの素性が分かったり、ユーザーの欲しいものがはっきりと分かっている場合には、できるだけそのユーザーが欲しい情報だけに絞るのも一つの戦略です。

例えば、Amazonのホームページでは、一見すると情報密度が高く、情報が乱雑に並んでいるだけのように見えます。
しかし、過去の購買情報から紐づけられた「あなたへのおすすめ」をはじめ、ユーザーのAmazonサイト上での行動を記録することでユーザーに最適な商品を提案しています。
そのユーザーに関連性の高い情報を提供していれば、情報密度が高くてもユーザーはその情報に興味を持っているので、選択麻痺になる可能性も少なくなります。

今度は、Appleの製品の購入ページを覗いてみましょう。
例えば、Macbook Proが欲しいと思ったときに、Macbook Proのページを訪れると、「購入」というボタンを押します。
「購入」ボタンを押してはじめて、13インチにするのか15インチにするのかを決めたり、ボディカラーやCPUのスペックを決めたりします。