コンテンツを届けるため、伝えるための見せ方の工夫

公開日:
カテゴリー:
Webサイトの使いやすさを考える

Webユーザビリティの第一人者・ヤコブ・ニールセン博士によると、Webページ上の文字はなんと20%ほどしか読まれていないそうです。
せっかく作ったコンテンツをユーザーに届けるためにはどうしたらよいのでしょうか?

ニールセン博士によると、テストユーザーの79%がどんなページに出くわしても流し読みしていたそうで、ユーザーは流し読みをするという前提でサイトを制作する必要があるようです。
そのためWebでは流し読みをしていても目に入ってくるような書き方をする必要があります。
具体的には下記のような手法になるそうです。

  • キーワードを強調する(ハイパーテキストリンクは一種の強調としての働きを持つ。他に書体の変化や色が挙げられる)
  • 意味のある小見出し(「気の利いた」ものではない)
  • 箇条書きリスト
  • 1段落1アイデア(ユーザーが段落始めの数語でつかめなかったアイデアは、その後で言っても飛ばされてしまう)
  • 逆ピラミッド型の文体、結論から先に。
  • 通常の文章に比べて語数は半分(あるいはそれ以下)に

こちらは有名なブロガーのChikirinさんのブログのキャプチャです。

chikirin

・意味のある見出し
・箇条書きリスト
・1段落1アイデア
・逆ピラミッド型の文体、結論から先に
・語数は半分
すべてに当てはまっていました。
これがひと続きの長い文章になっているとWebでは流し読みされて読んでもらいづらくなってしまいます。
さすが有名ブロガーさん、見せ方も工夫されていますね。

このニールセン博士の手法以外で、デザイナー視点で読みやすい工夫がされているサイトを今回調べてみました。
いくつか良かったサイトをご紹介いたします。

見出しと短い説明テキストでパッと見で内容が伝わる/GAP

gap
こちらはGAPのサイトですが、キーワードを強調して、語数は半分(あるいはそれ以下)にすっきりまとめています。リンクテキストも具体的で、考えなくてもぱっと見て理解することができます。

13文字以下の文字数に絞る/クックパッド

cookpad
クックパッドでは、可読性を意識して文字数を短くしているそうです。
13文字を超えると可読性が下がるそうで、どのテキストも短くまとめられていますね。情報量が多いにもかかわらず、眺めているだけで何があるのか探すことができるのは少ない文字数のおかげではないでしょうか。

余白を使う/path

path
余白があれば、文字サイズがそれほど大きくなくても文字が目に入りやすくなりますね。白と黒で強いコントラストがあるというのもポイントかもしれません。こちらはpathのサイトです。

ワンカラムデザイン/medium

medium
以前はマルチカラムが多かったPCサイトも最近はワンカラムでデザインされたサイトが増えました。これもコンテンツに集中して、より文章を読んでもらうための工夫だと言えます。

最後に

工夫次第で、読んでもらいづらいWeb上のテキストもユーザーに伝わるようになります。
逆に工夫しなかったばかりに、届けたいコンテンツが届かなかったということもあるかもしれません。
これはどうしても伝えたいという内容は、流し読みで読みとばされてしまわないように、ぜひ見せ方を工夫してみましょう。

タグ:

記事を共有する

この記事を書いた人

プロフィール画像

山本美代子
フリーランスWebデザイナー。
美術系大学後、情報誌の会社の制作部、Web制作会社を経てフリーランスに。
ビジネスに貢献できるサイト制作のためにUXやマーケティングの勉強中です。 ペーパープロトタイプ作成後、デザイニングインザブラウザにてUIデザインを行う制作スタイルで制作しています。