いくつかメディアサイトのデザインを経験してきた私ですが、今回視覚的に読みやすい記事デザインについて考えてみました。

 

せっかく面白い記事を書いていても、読み手がストレスを感じてしまうようなデザインでは、途中で読むのをやめてしまったり、「あ、読みにくそうだな〜」と思ってしまわれると読まずに離脱してしまいます。

 

ブログは内容が大切だと思いますが、せっかく記事を書いているので「読みやすさ」についても考えてみましょう＊

 

 

読みやすい記事デザインの７か条

 

基本webは流し読みである

 

まず大前提に、webというのは基本流し読みです。

情報があふれているこの世界ですから、ひとつひとつ読んでられませんよね。

初めてきた人は特に、自分に必要な情報かどうか判断するため、本文は読まずスクロールしながらタイトルなどで流し読みをします。

そのため、来た人が「始めから最後まで目を通している」という認識はNG。

読みずらいなぁと思ったら、すぐ離脱されてしまうのがwebなのです。

 

  

一番読みやすいのは白地に黒

 

やはり白地に黒が一番読みやすいです。

視認性の問題はもちろんですが、やはり一番シンプルで文字に集中できます。 

重要なのは、背景と文字とのコントラスト。白地×黒がベストだと思いますが、色をつけたい場合は、背景はなるべく薄い色を選びましょう！

  

 

1記事1画像以上

 

画像があったほうが、記事に目がグッと惹きつけられます。

長い記事も、文章だけだと疲れてしまうけど、ところどころに画像があると休憩にもなるし、イメージがあるだけで、見やすくなる＆楽しんで読めるようになります。

 

アイキャッチはもちろん、長い記事にはぜひ画像を挟んでみましょう♪

 

 

読みやすい文字サイズを考える

 

ブログは特に文章がメインなので、読みやすい文字サイズというのは重要です！

具体的に言うと、文字サイズは小さくても14px以上は必要！14〜16pxが基本かなと思います。（ちなみにこのサイトは15px）

ちなみに、年配の方が見にこられるような記事を書いてる場合は、大きめの文字で表示するようにしたほうがいいでしょう＊

 

 

タイトルと本文との文字バランスを考える

 

本文の文字サイズに対する、タイトルや見出しのサイズの違いを「ジャンプ率」と言います。（新聞の見出しなどを想像するとわかりやすいです♪）

このジャンプ率の差が、ブログの印象を大きく変えます。

 

ジャンプ率が高いと（文字の大きさの差が大きい）、区切りがわかりやすく、どんな内容を書いているのかがわかりやすい。

さきほど、webは流し読みという前提がありましたが、情報系のサイトなどは見出しと本文に差をつけることによって、情報量が多くてもすっきりとまとまった印象になります。

 

一方で、ジャンプ率が低い（文字の大きさの差が少ない）ものは、落ち着いていている印象を与えるので、日記やポエム系のものは向いているかもしれませんね＾＾

 

（ちなみにこのサイトでは、本文が15pxに対し、タイトルは24px、本文中の中見出しは18px、小見出しは17pxという差にしています。）

 

  

読みやすいように適度な改行を入れる

 

読み手のことを考えると、適度に改行をいれたほうがいいです。

一文で改行するのはやりすぎかなと思いますが、多くても７行くらいで一度間を空けたほうがいいかと思います。

 

リズムよく読めるというのは大切にしています。

 

 

行間はほんの少し広めに

 

ものすごく細いのですが、文章の行間って意外と読みやすさを左右するんです。

例えば、この左と右の文章。左は窮屈で読んでいてしんどくなりますよね。

とてもここは奥が深いなぁなんて私が思うのですが、自分が読みやすいと思うサイトを参考にしていつも調整しています。

CSSのline-heightプロパティですぐ整えられますので、興味のある人はやってみてください＊（参考：line-height−スタイルシートリファレンス）

 

 

 

余談

 

今回「読みやすい記事デザイン」についてまとめてみました。こんなの当たり前じゃん！知ってるよ！って方は申し訳ないです。。；；

このサイトもまだまだ改善するところがたくさんあるので、頑張っていきます！

 

しかも書いてて思ったのですが、このブログは結構スマホから来られている方が多いんですよね。

私は無料で書いてるのでスマホはいじれない！！

きっと、これを読んでいる今も、ものすごく読みにくいと思います＞＜申し訳ないです。。。

プロに変更することも考えていますので、どうか離脱されないことを祈っています。。笑