ウェブサイトのリーダビリティを改善するための5つの秘訣

「リーダビリティ」なんて書くと偉そうに聞こえてしまいますが、ようするに「読みやすさ」ということですね。直接SEOには関係ないと思われる方もいるかもしれませんが、パンダやペンギンはサイトの直帰率や滞在時間を考慮しているなんて説もありますしｍコンテンツ重視のSEOが求められる現在、せっかく作ったコンテンツを内容が良いにも関わらず読みにくさから途中で帰られてしまうなんて事態を最低限にするためにも、サイトのリーダビリティは重要です。今回はそんなリーダビリティを向上するためのティップスを5つ紹介した記事をrespystudiosからどうぞ。 — SEO Japan

より読みやすいウェブサイトとは、改良されたユーザービリティと楽しんで読む体験を意味する。私たちは皆、ユーザーのためにそれを欲しているのではないだろうか？

この記事では、ウェブサイトのリーダビリティを改善することができる5つの簡単な方法を検討する。もちろん、自由に議論に加わって記事の最後にコメントを残してくれて構わない。あなたの意見を楽しみにしている。

タイポグラフィックの基本的理解

あなたは必ず、カーニング、トラッキング、リーディング、セリフ、サンセリフ、line-heightなどの用語に慣れなければならない。

タイポグラフィは、現代のウェブデザインの側面においてとても重要であり、特に今は、ますます多くの人がCSSでFontFaceプロパティを使用しているし、サイト上でWebセーフではないフォントを使うことを可能にするTypekitのようなサービスが存在する。

もちろん、最も美しい活字書体さえも、あなたがいくつかの基本的なガイドラインに従わなければ役に立たない。常にタイポグラフィックの尺度を使うようにしよう。自分で作ったものでも既存のものでもどちらでも良い。もしあなたがピクセルを使っているのなら、12、14、16、18、21、24、36、48、60のようなシンプルなものが、タイポグラフィックの階層構造を定義するのに役立つため、うまく機能するだろう。常に判読可能なサイズを使用すること。

余白を効果的に使用する

“余白”とは、デザイン内の要素間のスペースのことだ―それは、実際に白色を意味するのではなく、セクションや要素を分ける空っぽの何もないスペースを意味する。余白を最大限に活用することが、リーダビリティを改善する鍵だ。

もし全てのものが一緒にぎっしりと詰められていて要素間に明白な区切りがなければ、ウェブサイトを読み進めることはとても難しくなる。自分のコンテンツ、コピー、ボタン、リスト、行動喚起ボタン、その他要素に呼吸ができるスペースを与えるようにすること。

私たちは皆、オンラインユーザーが読むのではなく、自分の注意を引くものを見つけるまでスキャンして、クリックして、それから読む（もしくはスキャンし続ける）ということを知っている。そのことを利用して、余白を効果的に使用することによってスキャンしやすいページにするのだ。

アラインメントとグリッド

テキスト要素とデザイン要素があちこちに存在していると、読むのがとても困難になり、ページは上手く流れて行かなくなる。グリッドを使用することが、コンテンツを整理したり、ユーザーをページ上の重要な要素―例えば行動喚起ボタンのようなもの―に導くのに大いに役立つ。

デザインを作る時に出発点や参考として使用することができるBlueprintといった良く知られたグリッドシステムがいくつかある。私個人は、独自のフレームワークを使うのが好きだが、それは個人の選択になるだろう。

色のコントラスト

グリッドシステムとタイポグラフィックの尺度とフォントの選択がとても重要なのは当たり前だが、色も同じである。白い背景に薄いグレーのテキストはあなたにとっては洗練されているかもしれないが、他の誰かにとっては全く読みにくいものかもしれない。ターゲットオーディエンスが60歳以上なら、もっと読みやすいようにテキストの色は暗くした方がいいかもしれない。同様に、もし背景色が暗いのなら、できる限りテキストは薄い色にすべきかもしれない。

あなたは確実にコントラストで遊ぶことができる。もしサイトが白い背景ならば、特定の要素を暗い色にすることで注意を引き付け、他の要素を薄い色にしてそれほど注意を引き付けないようにすることができる。

デザイン要素と背景色とテキストの間に程よいコントラストがあるようにすること。異なる色やコントラストをテストするには、‘Colour Contrast Check’ツールのようなものを使うことができる。

短く簡潔に

先に述べたように、人々は読むのではなく、スキャンする。私もそうだ！だから、文章を短くして無関係なものを削除することによって、リーダビリティを改善することができる。結局のところ、あなたは小説を書いているのではく（もしかするとそういう人もいるかもしれないが）、オンライン記事を書いているのだ。私は個人的に、テキストの大きな塊にうんざりしてそれを読む時間を割かないことがよくある。文章を段落やリストに分けること。箇条書きを使用したり、不必要な言葉や文を削除するために文章を見直すのだ。

あなたが100語で書く時、同じメッセージを50語で伝えることができる可能性は高い。シンプルに要点をつけば、ユーザーはそれに感謝するだろう。

次はあなたが話す番

私は、この記事で表面をひっかいたに過ぎないことは知っている。あなたの秘訣や技を私たちに共有してほしい。それを読むのを楽しみにしている。コメント欄で会おう！

この記事は、respystudiosに掲載された「5 Tips For Improving Readability On Your Website」を翻訳した内容です。

デザイナーにはどれも基本的な事柄だとは思いますが、リーダビリティを普段そこまで意識することも少なさそうなSEO重視なあなたには改めて参考になった点があるのではないでしょうか。自分では問題ないと思っていても、他人はそう思っていない、なんてこともありそうです。モニターサイズはもちろん、それこそPCとMacでも色の見え方が微妙に違ったりしますよね。ここに書いてあることを意識することはもちろん、（率直に話してくれそうな）知り合いの人にさり気なく読みやすさについての感想を聞いてみる、なんてこともたまには良いかもしれません。 — SEO Japan [G+]

アイオイクスではSEOを軸としたWebコンサルティングサービスを提供しています。

いわゆるSEOの型に沿った施策ではなく、お客様の事業やWebサイトの構成を踏まえた最適な施策のご提案を重要視しています。SEOにお困りの際はぜひご相談ください。

→SEOコンサルティングサービスページ

メールマガジンの登録はこちら

SEOに関連する記事の更新やセミナー情報をお届けします。