ウェブサイトのユーザビリティを改善する 7つの方法

2011年10月17日

【翻訳 by Conyac】【原文】

Web ユーザー向けのコンテンツを書くことには独特の難しさがある。最も重要なのは、読み手にとって、コンテンツが読みやすく理解しやすいようにすること、すなわちリーダビリティである。

コンテンツのリーダビリティが高ければ、読者は書き手の伝える情報をすばやく要約することができる。個人のウェブサイトやあるいはブログにとっても、ネットショップにとっても、企業サイトにとってもこれは価値ある目標といえる。

以下はウェブサイトのユーザビリティとリーダビリティを向上させるための、極めてシンプルなティップスとテクニックをまとめたものだ。

これらのティップスは、ユーザビリティの専門家として名高い、ジェイコブ・ニールセン氏による調査と提言をベースにしている。

このリストは完全なものではなく、単に書き手に実践可能なアイデアを与えようとするものである。もし他にも良いティップスがあれば、コメント欄に書き加えてほしい。

ユーザーフレンドリーなウェブコンテンツのための一般的目標

使いやすく読みやすいウェブコンテンツは、ウェブデザイナーとコンテンツライターの努力が互いに結ばれることによって作られる。

ウェブページは、コンテンツを容易かつスムーズに読み進められるよう、配色やタイポグラフィー、スペースの配置などが適切にデザインされていなければならない。

同様にコンテンツライターは、読者にすぐに意気投合させ、読んで情報を習得させるようなライティングの策略に気をつけなければならない。

以下の７つのヒントを話していく上で、これらの３つの一般的なガイドラインを頭に入れておいてほしい。

テキストやタイポグラフィーは読みやすく見た目が良いものでなくてはならない。（すなわち、判読可能であること）
コンテンツは理解しやすいものであること。
ウェブのユーザーは深く読まないので、コンテンツは流し読みできるものであること。研究によると、うまくいったとしても、我々はウェブページのテキストの28%しか読まないのである。

これらのゴールを達成するために我々ができる簡単なことは何か。さらに読み続けてみよう。

1. コンテンツは可能な限り簡潔にする

ウェブのユーザーが非常に短い時間しか注意を払わず、記事を隅から隅まで読んだりしないことはよく知られたことだと思う。読むことに関するデジタル世代の習慣の変化を調べたある調査によると、皆、求める情報を見つけるために流し読みをしている。

キーワードで検索し、順番どおりには読まない。つまり上から下へ読むのではなく、ページ中を飛び回って読む。そして短時間で関心を失う。

ウェブサイトのコンテンツを読むことについて言うとユーザはざっとしか読まないという考えは、ヤコブ・ニールセンが行ったユーザビリティの研究により裏付けされている。この研究で、Webサイトの単語数をおよそ半分に削ることで単純にユーザビリティが58%増加するとしている。

内容を短くすると読みやすくなる、これは読みやすさを測るためによく用いられている手段として、読みやすさと理解しやすさに影響を及ぼす要因としては文章と単語の長さを利用することが多いからである。

実践しよう

可能な限り早く核心に触れる。
不要な情報は省く。
理解しやすく、短く、一般的な単語や言い回しを用いる。
長い段落や文は避ける。
時間を節約し注意を引く書き方を用いる。例えば数字は “one thousand” のようにスペルを綴るのではなく “1,000″ と書く。ざっと目を通したり流し読むにはこの方が都合がよい。
文章がどれぐらい読みやすいかを計測できるユーザビリティ指標を用いて、書き方のスタイルをチェックする。Readability Test Tool は、URL を指定することで、Flesch Kincaid Reading Ease などの主要なリーダビリティ指標に基づくスコアを出してくれる。

2. 見出しを使って、長い記事を短く切り分ける

ウェブコンテンツ管理の専門家ジェリー・マクガヴァン氏が記事に書いたあるユーザビリティの研究によって、同氏はインターネットユーザがウェブページをブロックやセクションごとに読む、もしくはマクガヴァン氏が言う「ブロック・リーディング」をしているという結論に達した。

つまり、我々はウェブページを見る時、ウェブページを１つのまとまりとしてみているのではなく、むしろ区分化された情報のいくつかの塊として見ている傾向があるのだ。私達は区分ごとに読む傾向があり、積極的に探しているものに合いそうな項目に真っ先に目を向ける。

ニールセン氏が行なった視標追跡調査で、ウェブユーザーが確かに区分ごとに読んでいるという考えをさらに裏付ける、目の動きのパターンが明らかになった。我々は目を左から右に動かし、それからFの字を書くように目をページの下へと移動させ、そのFの字の間にある多くの文は飛ばしている。

これらの読み方パターンを受けて、いくつかの対処ができる。一つは、長い記事をセクションに分ければ、ユーザーは用意にページの下まで拾い読みすることができる。これはFの字読みやブロック・リーディング（文のブロックは見出しによって示される）にもあてはまる。というのも、我々はページの下に進むにつれ、見出しに気を引かれるからだ。

以下は、同じ文章の見出し無し形式 (バージョン 1) と見出し有り形式 (バージョン 2) である。どちらの方が読み手にとって、興味のあるセクションへ素早く移動できるか見てもらいたい。

実践しよう

記事を書く時は、書き始める前にまず、自分の考えや思考の塊を整理して構成することを試みる。
見出しはシンプルで簡潔にする。
見出しはキーワードに富んだものにする。流し読みしやすく、ブラウザの検索機能 (Windows では Ctrl + F、Mac では Command + F) も使いやすくなる。

3. 素早く目を通せるウェブページにする

これまでに触れたニールセンのユーザビリティ調査や、その他の結果からもわかるように、ウェブではユーザーはコンテンツを流し読みする傾向にあり、ウェブページを流し読み向けにデザインし構成することでユーザビリティを (前出の調査では 47% ほども) 向上できる。

実践しよう

最初の 2語を重視する。ユーザーは流し読みをする際、見出しやタイトル、リンクの最初の数個の単語しか読まない傾向にある。
ページタイトルや見出しやリンクでは、キーワードを前のほうに置くようにする。文法的には受動態を用いることが効果的となる。
逆ピラミッドの記述スタイルを用いて、重要な情報を記事の最初に持ってくる。

上から順に「重要事項」「補足事項」「関連情報」。

4. 黒丸付きの箇条書きと文章修飾を使う

ClickTaleが行った視点追跡調査によれば、利用者が長く視線を合わせているのは、黒丸付きの箇条書きと（ボールド体やイタリック体のように）修飾されたテキストだった。

文章のスタイル付けするツールを使えば、読み手の関心を集めることができる。情報を個々に分け大事なキーワードやフレーズを強調表示することで、文章の見た目を特徴づけるとともに、読解スピードアップに役立つからだ。

実践しよう

一段落を黒丸付き箇条書きに分割できるかどうか推敲する。
重要な情報はボールド体かイタリック体で強調表示する。

5．文章のブロックごとに適切な間隔を入れる

文字や単語、行間や段落ごとの間隔は重要な要素だ。ウェブページの文字がどのように並んでいるかが、読みやすさ（つまり読むスピード）を大きく左右する。

「オンラインの文章を読む：余白のレイアウト４種類の比較」という研究で、研究者らは文の余白が変われば読解度や読むスピードも変わることを発見した。

読解度とマージンの相関性

実践しよう

スペースの取り方についてページのレイアウトを評価し、必要に応じてサイトの CSS を修正する。
スペースに影響を与える CSS のプロパティについて理解する。試す価値があると思われるのは、margin、padding、line-height、word-spacing、letter-spacing、text-indent である。

6. ハイパーリンクをユーザーフレンドリーにする

ウェブベースのコンテンツは先進的なものであるが、その大きな理由のひとつは、ハイパーリンクが利用できることである。ハイパーリンクを正しく使うとリーダビリティーを向上できる。

実践しよう

すでにユーザーによって開かれたリンクを CSS セレクタ :visited を使って通常のリンクと異なるスタイルにする。どのリンクを試したか、読者に一目で分かるようにすることがニールセンによって提唱されている。
title 属性を用いてハイパーリンクに補足情報を付加し、リンクをクリックすると何が起きるかユーザーに分かるようにする。
さらなるティップスについて、Visualizing Links: 7 Design Guidelines を参照していただきたい。