ブログの読みやすさを改善する10の方法 – デザインの基本的なこと

Posted under - Web Design

0

海外ブログの翻訳記事です。ブログに限らず、Webサイトのリーダビリティーって大事だと思います。いくら見た目のデザインがきれいでも、読みにくいサイトはちょっと途中で読むのをやめちゃうかもしれません。そんな風にならないように、読みやすさを考えたデザインにしたいですね!

Readability & Design

bluefaqs という海外ブログに、10 Effective Ways To Improve Online Readability(Webページの読み易さを改善する10の方法)というポストがあったので翻訳してみました。

せっかくブログに訪れてくれた人には快適に記事を読んでもらいたいですね。ここに紹介されているTipsは「そんなのわかってるよー」といったものばかりかもしれませんが、改めて自分のブログを見るとまだまだ改善の余地があることに気づきます …。

そしてこれは、Webデザインのとっても基本的なこと。もちろん全ての Webデザインに当てはまるわけではないけれど、文章にはどうして見出しをつけたり、段落をつけたりするのか?を考えるきっかけにもなりました。

あなたが今までにないすばらしいオリジナルポストを書いたとしても、キレイに整った体裁で読者に提供しなければ、ポストが活気づくことはないでしょう。ユーザーにとっての読み易さは、見落とされるべきではないあなたの Webサイトの一部です。

読者はあなたのブログを読むためにやってきます。そしてブログを広く広めるためにも、読み易さはとても大切です。

ユーザーが読み易いと感じるようにするために、一体何ができるでしょうか?ここに簡単にできる、ブログの読みやすさを改善する10の方法を紹介します。

1. 図版率

スクリーンいっぱいに広がったテキストは、ユーザーを威嚇して追っ払ってしまいます。複数の段落に分けられるような、面白い方法を考えてください。グラフや画像を使って記事に活気を与えることもできます。

ものすごく段落が長くなってしまうときには、目を休めるためにも余白が欲しいですね。文章が画面いっぱいに広がると、それだけで読むのに勇気がいります w そして図版がはいることによって、親しみやすさや気軽さがでてきますよね!ページの中の文字と図の割合のことを図版率っていったりしますが、これをコントロールするだけで、ページの印象が変わりますよね!

もし上の画像にイラストがなかったら、全然印象の違うページになりますよね!

2. ポストの日付(目立たせる必要がないもの)

ポストの日付や見出しの下に付記するものはライトなカラーで。そうすれば見出しが目に入り、すぐに記事の本文に目が移るようになります。

これはコントラスト(対比)のお話ですね!何を目立たせたいか … ということを考えると、目立たせたいものを目立つようにするということもできますが、反対に重要ではないものを目立たないようにすることも大事ですねー。

3. テキストの色と大文字/小文字

もし強調したい語句があった場合、他のテキストと違う色にするのが一番いい方法ですが、ユーザーがテキストの中で色の違う語句を見るとリンクだと予想してしまいます。

次に全て大文字で記述するのは絶対に避けるべきです。これは、ユーザーの読むテキストの自然な流れを混乱させてしまい、興味がそがれてしまいます。両方を同時に使うのは絶対に避けるべきです。

私、いつも<strong>タグをどうするか迷うんです。色をつければ目立つのは分かるんですけど、やっぱりリンクだと思っちゃいますもんね。

大文字を使い分けるのは、適切な使い方ならOKだと思いますけどねー。目立たせるための手法 … コントラストは、色だけでなく余白や大きさなど、色んな要素の相乗効果で付けられますね!

4. 広告を入れる場所

たくさんのブログに広告が貼られています。広告を記事の真ん中に置くと、クリック率が上がるという記事を読んだことがあります。それが本当かどうかは分かりませんが、ひとつ言えるのは読者の流れを遮ってしまうのは確かです。

あなたが記事のボディーに何らかの広告を加えるなら、ポストの先端か下部に貼るようにしてみてください。

それよりタイトル下に延々と広告が続いて、本文になかなかたどり着かないページの方が嫌かも。コンテンツの中、リード文と本文の間など、意味的に区切る部分にある分には気になりませんけどねー(私は)。

6. 画像の周り、テキストのラッピング

画像の周りをテキストで囲む時には注意が必要です。そうしたい場合は、画像のサイズやテキストの長さに注意を払い、画像とテキストの間に空白を設けるようにしてください。

確かにテキストと画像がぴったりくっついてると、文章が読み難いですよね!余白の大きさ自体はWebサイトのイメージにもよりますけど、適切な余白を設けましょう!

6. Font Styles

フォントを選ぶときはできるだけ一般的なものを選んでください。ポピュラーなフォントでない場合、ユーザーがそのフォントをインストールしていない可能性が高いです。

CSS3 の @fontを使えば、Webサイト側でフォントを用意できるようになりました。でも、本文には読みにくいフォントを使わないように気をつけたいですね!

7. ポストイメージ(画像)

記事の内容にマッチしたポストイメージ(画像)を使用してください。これは読者の注意を引きつけるのにいい方法です。

もし Photoshop を上手に使いこなせるなら、ポストを際立たせるようなカスタムイメージを作ってみてください。

画像がひとつもない記事は(図版率 0)まるで辞書とか小説の 1ページのような印象です。もちろん行間や文字組だけでいろんな印象を与えることはできますけど、画像があるだけで記事に親しみやすさが出てくるから不思議です。視覚的に訴える画像は、記事に命を与えますよね。

でもそんなとき、記事の内容に関係のない画像を使うと、記事の中のコンテンツを理解するのに混乱しちゃうこともあります。画像と本文には、関連があるって自然に思ってしましますよねー。なので絶対に記事の内容に関係する図版を使うようにしましょう。

8. 見出し、中見出しのコントラスト

見出し、中見出しは、他のテキストから際立って見えるようにしてください。そうすると記事の流し読みが簡単になります。下の画像を見ると、確かに見出しが本文より大きいのですが、十分に区別できるとは言い難いかもしれません。

また、<h2> <h3>などのタグを使用するようにしてください。
そうすればRSSフィードでも適切に表示されるようになります。

見出しはコンテンツの内容を短い言葉で表すもの。コンテンツよりも上位の存在です。なので段落よりも上(だけじゃないけど)に配置して、目立つようにする工夫が必要ですよね!大きくするばかりが目立たせる方法ではないけれど、適切なコントラストを付けてあげることが大切ですね。

9. olタグとulタグ

順序があるリストであればリストに番号(<ol>タグ)をつけましょう。リストが順不同の時には<ul>タグ … というように区別すれば、リストはとても分かり易いものになります。

順番が必要なリストには、基本的に番号を振りますよね。手順とか …。でも、順序が関係ない場合でも、「全部で 8つ」のように、数を分かりやすくする必要があるリストだったら、番号付きにするのも親切です。最後の行をみれば、いちいち数えなくても何個リストがあるかわかりますものね!

10. 長い段落

2~3個の文が、固定されたカラムの中ではいくつかの行になります。続けざまに 3~4の文をひとつの段落に書きがちですが、読者は長い段落を嫌って去ってしまいます。長い段落は簡単な読書というわけにはいきません。

確かに長ーい段落は、それだけで読むのに勇気が必要です。段落を短くして余白をつけてあげたり、小見出しを付けたり、図版率をあげて画像を差し込むだけで、とっても読み易くなりますね。


どれも「分かってるよ。そんなこと。」って言われそうな基本的なことばっかりですね!でも。せっかくブログに訪れてくれた人を「読みにくい …」って思われちゃって追い返しちゃうのは、とっても残念なことですからね!