より読みやすいウェブサイトとは、改良されたユーザービリティと楽しんで読む体験を意味する。私たちは皆、ユーザーのためにそれを欲しているのではないだろうか?
この記事では、ウェブサイトのリーダビリティを改善することができる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最新情報やセミナー開催のお知らせなど、お役立ち情報を無料でお届けします。