現役エンジニアがオススメするデスク周りの商品紹介

【アクセスUP】見やすいブログにする方法7選【デザインは重要です】

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

読者の悩み

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

見やすいサイトは、

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

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

見やすいブログへの最速の道は、有料テーマ

無料テーマでも十分という意見もありますが、私は有料テーマを推奨します。

なぜなら、この後紹介する7つのポイントの内4つはクリアできるからですね。

maipyon

正直、見やすいブログを目指すのであれば有料テーマは最低限必須だと思っています。

読みやすさは「文章の読みやすさ×見た目」なので、プロのブロガーも使っている有料テーマを使うことで、見た目のほうだけでもまずはプロと同じレベルに立ちましょう。

有料テーマは数多くありますが、オススメについては『【PV爆上げしました】WordPressの有料テーマおすすめ5つを比較』にまとめました。

【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 WordPressの有料テーマのおすすめをブログ歴3年・本業でも様々な有料テーマを使ってきた私が紹介します。私自身、有料テーマでPVが一気に上昇しただけでなく、色々なメリットがあったので必須だと感じています。

確かに高いのですが、ブロガーが時間をかけるべきは記事執筆。

使い勝手も上がって時短に繋がりますので、時間を買うイメージといっても良いでしょう。

2.見やすいブログにするために変更すべき点【デザインは重要】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

maipyon

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

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

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

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

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

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

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

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

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

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

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

見やすいブログにする方法5:記事のアイキャッチ画像にもこだわろう

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

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

こだわるポイントとしては

  • 質の高い画像サイトを使う
  • きちんと編集する

というあたりになります。

私の場合、画像サイトについてはPixabayAdobe Stockを使用しています。

Adobe Stockについては会員登録が必要ですが、2020年に有料の画像が一部無料開放されたため、かなり画像の質が高いです。

編集については、Canvaがパワーポイント感覚で編集でき、かつ素材数も多いので毎回使用しています。

関連記事
WordPressブログで使っている神ツールまとめ【月間2万PV達成】 WordPressブログで使っている神ツールまとめ【月間2万PV達成】 ブログ歴2年の私が、取捨選択しながら現在WordPressブログで使っているツールについてまとめました。使用しているツールに変更点があれば、その随時この記事を更新したいと思います!

見やすいブログにする方法6:文章を細かく切る

結構やってしまっている人が多いのですが、1文がやたらめったら長くするのは避けましょう。

「文字の壁」という感じで、非常に疲れます。

気に掛けるポイントとしては、

  • 1文はMax50~60文字で切り、頻繁に改行させる
  • 箇条書きを多用することで頭に入ってきやすい文章にする

ことが重要になってきます。

例えば上記の箇条書きの文章は、以下のようにも書くことができます。

文章で気に掛けるポイントとしては、1文はMax50~60文字で切り頻繁に改行させることと、箇条書きを多用して頭に入ってきやすい文章にすることですね。

上記は70文字で、箇条書きも使っていないので非常に頭に入ってきにくい文章になっています。

この辺りのテクニックについては、学ぶ→実際に使うことで段々と培っていきましょう。

なお、テクニックを学ぶのであれば以下の本がオススメです。

文章を書く際に、「どうやったら読みやすくなるか?」について、ナタリーの編集長が書いている本です。

プロが読みやすさのテクニックについて書いている本ですので、一読する価値アリです。

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

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

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

また、ボックスだけでなく、商品紹介の部分ではカエレバ・ヨメレバ or Rinkerを使っている人も多いかと思います。

より商品を見てもらうためにも、デザインも変更しています。

CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズ CSSコピペで完了!カエレバ・ヨメレバのデザインをカスタマイズ カエレバ・ヨメレバのカスタマイズの方法の詳細を、コピペだけでカスタマイズが完了するようにCSSを紹介します。どこにCSSを記載するのかということや、カスタマイズがうまくいっているかの確認方法や設定方法についても誰でもわかるように詳しく画像付きで解説していきます。 CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう! CSSコピペでOK!Rinker(リンカー)のデザインをカスタマイズしよう! RinkerのカスタマイズCSSを紹介します。Rinkerのメリットは大きく、私も乗り換えに至りました。今回はそんなRinkerを今まで使っていたカエレバ・ヨメレバのデザインと大体同じにしたいということで、カスタマイズのためのCSSを紹介していきます!

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

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

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

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

今回紹介した7つのポイントは以下の通りです。

今回紹介したポイント

  • 大前提:有料テーマを使う
  • 文字の大きさや行間を変更する
  • ヘッダーのデザインをインパクトのあるものに変える
  • 配色は2~3色で
  • 人気記事一覧を追加する
  • アイキャッチ画像にもこだわる
  • 文章を細かく切る
  • 記事内で使用するボックスを多用する

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

中でも一番大きく変わるのはやはり有料テーマに変えることなので、『【PV爆上げしました】WordPressの有料テーマおすすめ5つを比較』の記事から検討するのをおすすめします。

【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 【初心者向け】WordPressのおすすめ有料テーマ5つを比較【PV爆上げ】 WordPressの有料テーマのおすすめをブログ歴3年・本業でも様々な有料テーマを使ってきた私が紹介します。私自身、有料テーマでPVが一気に上昇しただけでなく、色々なメリットがあったので必須だと感じています。