BLOG DESIGN

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

INTRODUCTION

ブログ記事のデザインを現状よりも良くするためのコツをいくつか紹介していきます。

記事のデザインは読みやすさにも大きく影響する大事な部分です。

blogdesigntips cov

ブログの記事デザイン 5つのコツ

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

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

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

2. 余白をつくる

3. 文章の幅を絞る

4. 要素の幅を揃える

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

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

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

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

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

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

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

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

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

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

参考にしたサイト

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

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

2. 余白をつくる

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

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

余白の取り方の例

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

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

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

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

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

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

3. 文章の幅を絞る

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

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

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

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

以下で幅の設定を変更してみましたが、だいぶ読みやすさが変わってくることがわかると思います。

文章幅 : ディスプレイの65%

ディスプレイサイズやデバイスによって幅が変わるので一概には言えませんが、デスクトップの場合はディスプレイ幅の45〜55%程度に設定するのがおすすめです。

文章幅 : ディスプレイの90%

ディスプレイサイズやデバイスによって幅が変わるので一概には言えませんが、デスクトップの場合はディスプレイ幅の45〜55%程度に設定するのがおすすめです。

4. 要素の幅を揃える

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

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

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

・本文のテキスト

・画像 / バナー広告

・ボタン

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

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

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

幅が揃っていない例

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

divi Screenshot

WordPressテーマDiviの特徴

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

・カスタマイズ性が高い

・複数サイトに使える

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

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

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

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

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

・本文の色 (無彩色)

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

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

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

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

文字に黄色はおすすめしない

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

カスタマイズできるかはテーマ次第

ブログデザインの記事デザインについて、カスタマイズできるかは利用しているWordPressテーマによるところが大きいです。

有料テーマであればだいたいができるカスタマイズです。

無料テーマでもカスタマイズ性が高いものはありますが、手間をかけずにデザインが作成できる有料テーマの利用を個人的にはおすすめします。

5themesforaffiliating

【2021年版】WordPress定番テーマおすすめ5選

アフィリエイトブログに定番のおすすめ有料テーマを紹介しています。

MATOME

まとめ : 記事はできるだけシンプルに

ブログの記事はできるだけシンプルに、読者の読みやすさ優先で作ることをおすすめします。

自分の気に入るデザインを模索してみましょう。

収益を出したいからと広告を貼りまくっている記事などはただ読みにくくなったり、離脱率を高める原因になりかねません。

icon img

tama

Graphic / Visual Designer

主にブログ運営とブログデザインについて書いています。tamasdesign : 3.0万PV/月 WordPressテーマはDiviを使用中。

tamasdesign

ブログページトップに戻る

More of BLOGGING

ブログ関連記事

ブログとアフィリエイト関連の記事をピックアップして紹介します。

併せて読んでみてください。

asp cov

【2021年版】アフィリエイトASP 人気の定番おすすめ8社

アフィリエイトブログを運用するなら必ず登録しておきたいASP8社を紹介します。

best blogging tools cov

【2021年版】ブログにおすすめのツール9選

当ブログでも利用しているおすすめのブログツール9選を紹介しています。

modeling img

【2021年版】サムネイルデザイン制作におすすめのツール3選

ブログのサムネイルを制作するのにおすすめのツールの組み合わせ3選を紹介しています。

beststockphoto cov

【無料有料】おすすめフリー素材・画像サイト8選

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。