カテゴリ一覧から記事を探す

あなたのブログをおしゃれで見やすくする方法7選【アクセスアップにも繋がる】

おしゃれで見やすいブログにする方法7選!【アクセスアップにも繋がる】

読者の悩み

  • 自分のブログがなんだか見づらい
  • 他のブログのように、見やすくて読みやすいサイトにしたい
  • でも、どうやってやったらいいのか分からない!

こんな悩みに答える記事になっています。

今回紹介するたった7つの方法を自分も実践して、今は見やすいブログにすることができています。

平均ページ滞在時間は3分30秒を超えていて、割と長時間読まれているブログだと思います。

過去の自分のブログは見づらい点が多くありました。

しかし、見やすいブログを目指して、他のブログも参考にしつつデザインを変更していくなかで、見やすいブログにはある共通点があることを発見。

それをふまえつつデザインを変更していくことで、私のブログも最初に比べると格段に見やすいブログになりました。

今回は、見やすいブログにするためにはどうすればいいか、7つのポイントを紹介していきます。

この記事に書いてあることを実践すれば、最終的にはPVアップにもつながります!

1.見やすいブログはなにが違う?

見やすいサイトはそもそもテーマが有料テーマであることがほとんどです。

このサイトでは以前、Stinger8という無料テーマを使ってデザインをいじり倒して使っていました。

 デザインをカスタマイズするのはべらぼうに時間がかかるのであまりお勧めはしません。その時間バイトでもしていたら有料テーマ分の額は余裕で稼げます・・・。

有料テーマでは「配色」「記事の配置」「記事の見やすさがぱっとみると違います。

現在は有料テーマに切り替えています。

有料テーマに切り替えてどうなったのかについて書いてある記事もありますので、気になった方は見てください。

見やすいサイトは、

  • 長時間見ていても疲れない
  • 読み手に分かりやすく伝えている
  • デザインのおかげで頭に入ってきやすい部分が多くある

ことが共通点としてありました。

2.見やすいブログにするために変更すべき点

見やすいサイトと比較しつつ、どのような点を見直していくべきなのか、コツと共に紹介していきます。

見やすいブログにする方法1:文字をより見やすくする

一番重要かつ、一気に変わるところです。見やすいサイトと比較すると、そもそも文字が違います。

フォントをいじるかどうかはお任せします。

フォント以外の部分でも、文字の大きさは16px~17pxにした方が見やすいですし、真っ黒よりは、灰色の方が目に優しく見やすいサイトになるでしょう。

最後に、行間。
時々、ずらずらと文字の塊が襲いかかってくるサイトがあります。めちゃくちゃ疲れます。

1・2文で改行したいところです。

改行以外、文字のデザインを変更することで解決します。
最重要ポイントなので、必ずやっておきたいところです。

 特に最近はスマホのユーザも多いので、小さい画面にどんな感じで文字が書かれていると見やすいかな、と考えて改行の回数を増やしましょう。

見やすいブログにする方法2:ヘッダーのデザインを変更する

サイトの顔とも呼べるヘッダーも変更しましょう。

ヘッダーって見にくいと、ブログ名を覚えてもらえないんですよね。

ちょっとは強調して、目につくように配置をしてサイト名を覚えてもらえるようにした方がいいです。

そもそもブログ名も見直した方がいい人もいるかもしれません。

私はココナラでお願いしてヘッダー画像を書いてもらい、今のおしゃれなヘッダーになっています。

その時のやり取りの詳細などはこちら

見やすいブログにする方法3:配色は2~3色に抑える

どのサイトも、大まかに2~3色で構成されています。

maipyon

このブログの場合は、「ピンク」と「緑」ですね。
後は記事内に薄い青を入れ込んでいるという感じ。

メインの色+サブカラー+どこでも使える黒orグレーor白、と覚えておけば変な配色にはなりません。

Material Design Colorのページにある色を使用するだけで綺麗な配色にすることが可能です。このサイトで色に関して悩むことがなくなりました。

サムネイルの背景色にもこだわって、統一感を持たせることで非常に見やすいサイトにしている人も多く見かけます。

見やすいブログにする方法4:人気記事一覧を追加する

人気記事一覧を追加することで、関連記事のほかにも、別の記事に移ってもらえる場所を作りましょう。

人気記事があると、クリックしてみたくなるものです。

このサイトも人気記事一覧を入れています。
PCなら右側にあるはず。
カテゴリー別人気記事を1位から順番に出しているので、クリック率も高めです。

それだけではなく、過去の記事も見られるようになるので、回遊率アップ→アクセスアップにつながります。

人気記事に関してはプラグインを使用してもいいですし、『プラグインなし』で人気記事一覧を出力する方法【WordPress】を参考に自作してもいいでしょう。

 プラグインはサイトの読み込み速度が重くなってユーザにとっては逆効果。特別な事情がなければ自作をオススメします。

見やすいブログにする方法5:トップページの記事一覧をカード化

ちょっと好みの部分も入ってきますが、トップページには最新記事がずらずらと並べられています。

そこでも興味をひかせることができるようにひと手間加えるべきです。

私の場合は、カード化して、より目につきやすくしました。

トップページの記事一覧をカード化

maipyon

今は有料テーマでそのまま自動的にカード形式ですが、以前は自作しました。

タイトルと内容だけが並べられているものと、分かりやすい境目で画像と共に一覧になっているものを比べると後者の方が圧倒的に見やすいです。

画像を入れれるようにするのがポイントだと思っていて、youtubeのような見た目にすると興味を引きやすいのかなと考えています。

私はまだできていませんが、トップページは本でいう目次のようにすべきです。
できるのであれば、ユーザが色々な記事を探しやすい構成にしてあげましょう。

見やすいブログにする方法6:関連記事一覧のデザインを変更する

以前は関連記事一覧はスワイプできるように変更していました。

記事を小さくカード化して、スマホなら2列に並べて、PCなら3列に並べているサイトもよく見かけました。

下へスクロールするにつれ離脱率も高くなっていくので、一画面で目につく記事数を多くするのは重要です。

見やすいブログにする方法7:記事内で使用するボックスを多用しよう

私の記事では、よく色々なボックスを多用しています。
目安として、文章の塊が3~4つきたらボックスか画像を挿入できるように工夫しています。

ボックスデザインについて、まとめました。

また、ボックスだけでなく、商品紹介の部分ではカエレバ・ヨメレバ or Rinkerを使っている人も多いかと思います。
より商品を見てもらうためにも、デザインも変更しています。

このデザインを変えるだけで収益に変化が出てくるポイントでもありますので、初期状態の人は今すぐに変更すべき点です!

3.見やすいブログにする方法は結構簡単

少しでも読者にとって見やすいサイトを作ることは重要です。

見やすいブログは、それだけで記憶に残りやすいですし、何記事も見ようと思うもの。

特に大事なものについては太字にしてみました。

今回紹介したポイント

  • 文字の大きさや行間を変更する
  • ヘッダーのデザインをインパクトのあるものに変える
  • 配色は2~3色で
  • 人気記事一覧を追加する
  • トップページの記事一覧をカード化
  • 関連記事も一画面で多くの記事が見れるようにする
  • 記事内で使用するボックスを多用する

全部変えろとは言いませんが、すぐに変更できる部分もありますので、チャレンジしてみましょう!

デザインの変更のために、HTMLとCSSについて学ぶことも強く勧めます。