【2022年版】おしゃれで読みやすいブログ記事デザインの作り方 5つのコツを紹介。

記事デザインの良さは離脱率を下げるので、結果的に収益性にも影響する重要な要素のひとつです。

今回紹介するブログの記事デザインのコツはこちらの5つになります。

1. コンテンツを中央に配置する

2. 余白をつくる

3. 文章の幅を絞る

4. 要素の幅を揃える

5. 色は3色程度に抑える

それぞれの項目について詳しく説明していきます。

ブログにおけるメインコンテンツは文章です。

読みやすさを重視するのであれば、文章は中央に配置するのが一番です。

デスクトップで記事を読む際に画面の端の方を見ていることにずっと違和感があったのですが、中央配置にしたことで解決されました。

ただ、サイドバー付きの7:3分割構成のブログスタイルがだいたいで、読み慣れている方も多いことから文章の左側配置でも問題ありません。

逆にいうと中央配置のレイアウトにするだけでデザインにオリジナリティを出すこともできるということになります。

個人ブログであればデザインは自由です。

色々と試してみてしっくりくるものを探してみることをおすすめします。

個人的に当ブログ記事のデザインを決める際に参考にしたのは「note」です。

読むことに特化させて、記事デザインはあくまでもミニマルでシンプルなものが良いです。

ブログに配置する文章や画像など、ある程度の余白をつくることで読みやすさが格段に増します。

これはアイキャッチに文字を入れる際などにも言えることです。

ある一文を強調したい時など、背景を塗りつぶす要素を作成する際などでは上下左右に余白を設けましょう。

paddingは要素内の余白を調整するタグ

paddingは要素内の余白を調整するタグ

だいぶ印象が変わると思います。

ボタンやブロックなどCSSが大きく関係してくる要素に関してはpaddingを適切に取って余白を作るようにしましょう。

文章の連続性が失われるので余白の取りすぎにも注意です。

文章の横幅を取りすぎると一文あたりが読みにくくなって離脱率が高まる原因になります。

幅を絞ることは読みやすさの向上と、余白を作ることにも繋がります。

目線を左右に動かさなくても文章が読めるような適切な幅に設定すると読みやすさが向上します。

デスクトップの場合はディスプレイ幅の45〜55%程度に設定するのがおすすめです。

だいぶ読みやすさが変わってきます。

要素の幅を揃えることですっきりとした印象を与えることができます。

読者が目線をすっと下げることができるので、必要な情報を拾いやすくなります。

幅を揃えるときれいに見える要素は例えば以下のようなものです。

・本文のテキスト

・画像 / バナー広告

・ボタン

・関連記事などのボックス

イメージとしては一つの帯を作る感じで、要素の幅を揃えるだけで見栄えがかなり良くなります。

文章の幅を抑えることで要素の幅も揃えやすくもできます。

幅が揃っていない例を以下に作成してみました。

WordPressテーマDiviの特徴

・ノーコードでWebサイト・ブログがつくれる

・カスタマイズ性が高い

・複数サイトに使える

他の文章と雰囲気が違うことがわかると思います。

目線がうろうろするので読みづらく、ガタガタしていてまとまりのない印象を与えることになるので、できるだけ要素幅を揃えましょう。

記事内で使う色は3色程度に抑えると落ち着きのある印象を与えられます。

具体的な色の使い分けとしてはこちら。

・本文の色 (無彩色)

・強調用の色 (赤がメジャー)

・タイトルなど (テーマカラー)

無彩色(モノトーン)を何色か使い分けるだけでも統一感を出せるのでかなり効果的です。

ブログのテーマカラーを設定している方はその色をポイントで使うとブログに良いアクセントを出すことができます。

直感的にわかるとは思いますが、背景色が白地のページにおいて黄色は読みにくくなるだけなのでおすすめしません。