ブログを読みやすいデザインにするための3つのポイント

ブログ

ブログを読みやすいデザインにするために、最低限以下の3つをチェックすれば良いと僕は考えています。

  • 記事幅は約510px~730px
  • 行間は1.5~2.0
  • カラーは「3色以下」「真っ黒は使わない」

デザインはこだわるとキリがないです。サイズや色など、微調整しようと思えば無限に出来てしまいます。

なので、最低限のデザインさえ抑えていれば問題です。

読みやすいブログのデザインテンプレートを使っているのであれば、それはそのままでも良いと思います。

が、自分でカスタマイズしたい場合は、以下を参考にしてみて下さい。

ブログを読みやすいデザインにするための3つのチェック項目

記事幅は510px~730pxにおさめる

ヤフーニュースの記事幅

ブログの記事幅は、510px~730pxにおさまっていれば良いですね。というのも、アクセスが多い有名サイトの幅がそのpx内におさまるからです。

以下、参考記事です。

これが読みやすいブログデザイン!有名サイトの記事幅と余白設定を大公開

読みやすいデザイン=読み慣れているデザイン、と考えると、より多くの人に見られているデザインを参考にするのが良いと僕は考えています。

なので、記事幅は510px~730pxにしておけば、まず問題はないかなと。

行間

サルワカさんによると、おすすめの行間の幅は「line-heightで1.5~2.0」とのことです。

【CSS】line-heightで行間を調整する方法:おすすめの値は?

広すぎず、狭すぎない行間の幅に出来るので、上記の設定にしておきましょう。

カラー

ブログのカラーは、以下の2つの意識したいです。

  • ベースの色は3色以下にする
  • 真っ黒「#000000」は使わない

これは僕自身がコピーライターとして仕事をしてきた中で、何度も見聞きしてきたことです。

ベースの色は3色以下にするということですが、これはコピーライターの間で言われていることですね。コピーライティングで有名なダイレクト出版の小川さんも、ベースカラーは3色以上使うなと言っています。

読む集中力が分散されるし、ページの成約率(クリック率とか、購入率とか)が落ちるケースがあるらしいんですね。

また、真っ黒の「#000000」を使わないというのは、これはデザイナーの間で言われていることです。背景色だろうが、フォントカラーだろうが、どうにも読みづらくなるそうです。

…とはいっても、根拠ははっきりしません。僕自身も「本当かよ」と思って論文を探してみたのですが、どちらもしっくりくる論文は見当たらず…すみません。

ただ、コピーライターとデザイナーの間で言われていることは確かです。

もし上記を無視したデザインになっている場合、玄人から「こいつ分かってねえな~」なんて思われるかもしれません。

まあ、ヤフーニュースのフォントカラーは「#333333」ですし、僕のブログもそれに合わせています。体感ですが、読みやすいとは感じますね。

なので、ブログのベースカラーは3色以下におさえて、黒を使う場合は「#333333」にしてみてください。

以上、3つのポイントをお伝えしました。

ブログデザインは目視で確認しよう

ブログデザインは、必ずPCでもスマホでも、目視で確認しておくと良いですね。実際に見てみることで、「読みづらいな…」と感じることもあるからです。

とはいってもこだわるとキリがないので、上記を参考にしてデザインしてみて下さい。

もしアクセス数や読者の反応を厳密に分析したい場合は、デザインを変更する前と後でアクセス数やクリック率などを比較してみて下さい。

それではお読みいただきありがとうございました。

ブログ
役に立ったらシェアお願いします!
マーケのじかんをフォローする
スポンサーリンク
ブログ運営者
コピーライター古川

東証マザーズ上場の株式会社トゥエンティーフォーセブンにて、2013年5月から2018年2月末までの約5年、コピーライター兼マーケッターとして経験を積み、その後に独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。情報商材やサプリメント系物販、セミナー集客や英会話教室立上げ、オウンドメディアの立ち上げや運営など、企画・開発・販促・顧客対応など経験してます。現在は複数企業のメディアやメルマガなどのコンサルティングやお手伝いをしています。

マーケのじかんをフォローする
マーケのじかん
タイトルとURLをコピーしました