今回は、読みやすくてかつSEOに強いブログデザインの基礎知識についてです。
読みやすいブログは離脱率を下げることができます。そして、離脱率が下がればSEOにも強くなります。
少しでも多くの人に読んでもらえるようなブログデザインにしましょう。
文字サイズ
記事の文字サイズは16pxが推奨されています。
まだ目が衰えていない若者であれば、14pxでも問題ありません。
しかし、今や年配の方でもWebサイトやアプリを閲覧している時代です。年配の方には小さい文字は辛いはずです。
16px以上で誰でも読みやすい文字サイズにしましょう。
この文字サイズは14pxです。
この文字サイズは16pxです。
フォント
フォントは、見やすさを重視しましょう。一般的にはゴシック体が使われています。
Windowsではメイリオ、Macではヒラギノ 角ゴが一般的で読みやすいフォントです。
游ゴシックは環境によっては読みづらいことがあり、Windowsではfont-weightの調整をする必要があります。
硬い内容（例えば、経済・政治とか）の文章であれば、明朝体でも良いでしょう。
Windowsでは游明朝、Macなら游明朝かヒラギノ明朝がオススメです。
適度に画像を挟もう
文字ばかりのコンテンツは、読むのに疲れてしまいます。
そして、多くの人は長文を読むことに慣れていません。読書をする習慣がないのです。
以下の調査では、47.5%の人が「月に１冊も本を読んでいない」と回答しています。
文字だけがズラーと並ぶと、多くの人は拒否反応を起こしてしまいます。
そこで参考にするのが、Instagramです。
Instagramをスクロールして眺めると、画像と文字がバランスよく並んでいるのが分かります。
ファーストビューで迷わせない
まとめサイトなどありがちなのが、広告などで本文が下に追いやられているというケースです。
ページを開いたらすぐにタイトルが見えるようにし、スクロールしてすぐに本文が見えるようにしましょう。
ちなみにアドセンス広告においては、ファーストビューで広告がコンテンツを下に追いやるのは規約違反となります。
上下両方にナビや広告を配置しない
iPhoneのSafariでWebサイトを閲覧すると、上にはアドレスバー、下には戻るボタンなどのメニューが表示されます。
それに加えてWebサイトで上下にナビや広告を固定配置させてしまうと、見える範囲が極度に狭くなってしまいます。
固定配置するなら上か下のどちらかにすべきです。できれば何も配置しない方が見やすくなります。
配色
ブログのデザインでは、背景色と文字色（リンク文字色）、アクセントカラーの三つの色を決めましょう。
背景は#FFFFFFから#F9F9F9くらいの色がおすすめです。
文字色は真っ黒ではなく#111から#555くらいが見やすくて目にも優しいでしょう。
それ以上明るくすると可読性が落ちてしまうので、あまりおすすめしません。
リンクの文字色は青系がおすすめです。昔からテキストリンクは青が使われています。クリックすると別のページに飛ぶというのが一目で分かります。
鮮やかすぎる色は避けよう
アクセントカラーに鮮やかすぎる色はおすすめしません。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
ガチャガチャしてて落ち着きませんね。
彩度を抑えて、少し暗くした方が見やすくなります。
- 彩度を抑えた方が見やすくなります。
- 彩度を抑えた方が見やすくなります。
- 彩度を抑えた方が見やすくなります。
背景色なんかも同様です。ビビットカラーにするとめちゃくちゃ見づらいですね。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
- 彩度が高すぎる色は目に優しくありません。イケてない雰囲気にもなります。
背景色はうっすら見える程度で十分です。
- 彩度を抑えて明るくして、白に近づける。
- 彩度を抑えて明るくして、白に近づける。
- 彩度を抑えて明るくして、白に近づける。
色は統一して、無駄に増やさない
強調のために文字に色を付けるのはいいですが、たくさんの色を多用すると見づらくなります。
このように、文字色を多用するのはおすすめできません。
サイトのメインカラーを決めて、その色を使うようにしましょう。
見出しの上にスペースを空ける
下の画像を見ると分かりますが、このブログでは見出し上のスペースを広めにとっています。
これは、セクションのまとまりが分かりやすくするためです。この画像で言えば、「CDN」と「キャッシュプラグイン」が別のセクションだということが一目で分かります。
文字間を調整する
このブログでは、bodyにletter-spacing: .04em を指定しています。
body {
letter-spacing: .04em;
}ほんの少しの違いですが、文字間を空けることで硬さがなくなり、ゆったりとした印象になります。
硬い文章のメディアでは、逆に文字間を詰めていることもあります。
この文章は文字間を少し開けています。
この文章はデフォルトの文字間です。
この文章は文字間を詰めています。
サイトの特徴に合わせて、文字間を調整してみて下さい。
メインコンテンツの幅
記事のある要素の横幅にも気を配りましょう。サイドバーを省いた、メインコンテンツの幅ですね。
ここは600pxから700pxくらいにしているブログが多いです。１カラムなら700pxから800pxくらいですね。
それ以上になると一行の文字数が多くなり、テキストが多いサイトに見えます。次の行への目の移動もしづらくなります。
逆に少なすぎると改行が多くなり、スクロールが多くなったり、目の移動が多くなったりします（スマホならしょうがないですが）。
適度な幅は600pxから700pxくらい（１カラムなら700pxから800pxくらい）です。
当ブログはちょっと広めの760pxです。ソースコードを載せることが多いので、ちょうど良いかなと思います。
スマホで横にスクロールしないように
例えば、320pxのスマホで、CSSでサイズを調整していない350pxの画像を貼り付けると横にはみ出てしまいます。
そうなると、横方向へのスクロールが発生してしまいます。
スマホでの横方向へのスクロールはガタつきの原因となり、ユーザビリティを損ねます。
画像にmax-width: 100%を指定したり、コンテンツに overflow: hidden を指定したりするなど、ガタつかないようにしましょう。
デザインにこだわる前に、気を付けること
ブログのデザインはシンプルにして、文章に集中してもらうのがベストだと思います。装飾は二の次です。
デザインにこだわりすぎて、無駄に画像やJavaScriptを多用して読み込まれない…。
アニメーションがガチャガチャ動いて文章に集中できな…。
そのようなサイトになってはいけません。
読みやすくて、ページの表示も速い。そんなブログが理想だと思います。
関連記事
