デザインで変わる！　あなたのブログを読みやすくする30の方法

読みやすさ。

ブログを読みやすくと言っても、2通りの変え方があります。１つは文章構造や表現など、文章そのものを直す方法。もう一つは、文字飾りや行間など、デザイン面で体裁を整える方法。今回は後者のデザイン寄りの部分をまとめてみます。Pro Blog Designより、「30 Ways to Improve Readability」。

30を箇条書きでまとめてから、いくつかポイント整理をしてみたいと思います。

rank.gif

30のチェックポイント

まずは簡単に箇条書きで。

  1. リンクには下線を付ける
  2. 行間は見やすくあける
  3. 投稿とその他の境界を明確に
  4. 引用（pull-quote）の際は目立つように
  5. 短くまとめる
  6. 文字と背景の色彩バランスに注意
  7. 階層構造をしっかり持たせる
  8. 広告を記事の真ん中に挟まない
  9. 太字や斜体を使うなら、色はそのままで
  10. H1やStrongなどで、意味のある構造化をする
  11. イメージ画像を置く
  12. 文字の固まりはNG
  13. 左端揃えが基本
  14. 行送りに注意
  15. 見出しは特に力を入れる
  16. 箇条書きを○で書くか番号で書くか再考する
  17. 箇条書きのインデントを整える
  18. 画像はセンタリングして、上下の境界は入れない
  19. 印刷されたときの見やすさも考慮
  20. フォントを指定するなら、一般的に使われている物を選ぶ
  21. 追記するなら、目立つように斜体を使う
  22. 強調文字も大きさは変えない
  23. 大文字だけで書かない
  24. ポップアップ画像は避ける
  25. 1行の長さを長すぎないように
  26. 段落は少なすぎるより多すぎる方がいい
  27. サイドバーは短めに
  28. 記事を分割する場合、ナビゲーションは見やすく
  29. 薄いグレーの使い道に注意
  30. 略語もHTMLとCSSで記述

いくつか注釈

色彩バランス

Colour Contrast Checkというサービスが紹介されていました。これは、文字の色と背景の色を指定することで、明るさや色そのものの違いを計算し、読みやすいかどうかを3段階（Yes, sort of, No）で判定してくれるというもの。

このブログでも本文、記事タイトル、記事見出しの配色チェックをしてみましたが、どうにか合格っぽい感じでした。

PCモニタ以外で見る時を考える

今回は「印刷した場合」というのを例に挙げていましたが、iPod touch（またはiPhone）や携帯電話などのモバイル機器で見る場合のスタイル、RSSリーダーなどの極端に幅が低い画面で表示したときのスタイルにも注意を払うと親切になります。

ちなみに、画面の幅が足りないときに省略されるのは右側です。サイドバーを右に置けばサイドバーが消えやすくなるし、サイドバーを左に置けば記事（の一部）が消えやすくなります。

表記に注意する

英語の場合でしたら、 THIS BLOG IS ABOUT …. のように大文字だけで書くのは厳禁です（叫んでるイメージになってしまいます）。日本語の場合、半角カタカナやギャル文字を避けるというのもありますが、漢字だけが続かないようにする事も重要です。

例えば、
[tegaki]新規契約事務手数料相当[/tegaki]
なんて言葉があります。携帯電話のパンフレットなんかに載ってますよね。この言葉、漢字が11文字も続いていて読みづらいです。ここにひらがな2文字を加えて、

[tegaki]新規契約の事務手数料に相当[/tegaki]
とすると…結構読みやすくなると思います。

特に専門用語になると、こういう漢字の羅列がよく見られます。内容をかみ砕く意味でも、せいぜい漢字6文字くらい（できれば2～4文字くらい）で区切れるとよさそうです。

略語をHTMLで記述

HTMLタグの中には、略語を記述するためのabbrタグやacronymタグがあります。

Hnタグ（見出し）やStrongなどの強調タグよりちょっと知名度が低いかもしれませんが、SEO的にも読みやすさ的にも便利です。使い方は、

＜abbr title=”CarriageWay Leaders Academy”＞CLA＜/abbr＞

のように記述します（表記の問題で、＜＞は全角になっています）。

画面にはCLAの用に略語が表示され、マウスを重ねると「CarriageWay Leaders Academy」という正式名が見える、という感じです。

abbrとacronym、一応違いはあるらしいですが…そこまで気にしなくてもよさそうなので、僕はabbrで統一してます。

創造のタネ

デザインを調整することで読みやすさは変わってきますが、やり方によっては質素になりすぎて寂しくなることもあります。一つのポイントは、「他人のサイトを見ていて、邪魔だと思ったり見づらいと感じた物は取り入れない」という事でしょうね。

例えばポップアップを避けるようにしたり、横に長すぎる画面を避けたり、小さすぎる文字を避けたり、etc。自分が見づらいと思うものをわざわざ取り入れても、マイナス効果になるだけです。

また、文字サイズ一つをとっても、人によっては小さい文字を好む人もいるでしょうし、最終的には個人差が生じてきます。Web上で無数に紹介されている物を全て取り入れるのではなく、自分に合う物を組み合わせて使うのも重要ですね。

編集後記

気分転換も兼ねて記事投稿。たまには1日2記事で…。

余談ですが、プロフィールを更新しました。

記事紹介デザイン, ブログ, 読みやすさ

Posted by Ater