サイト名を「ブログチップス」から「マーケのじかん」に変更しました(2018.12.6)

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

  • 2018年10月3日
  • 2018年10月20日
  • ブログ

ブログを読みやすいデザインにするために、最低限以下の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でもスマホでも、目視で確認しておくと良いですね。実際に見てみることで、「読みづらいな…」と感じることもあるからです。

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

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

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

また読みやすいブログにするために、以下の記事も参考にしてみて下さい。

読みやすい!と思われるブログの書き方|今すぐ出来る4つのポイント

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える

最新情報をチェックしよう!
広告