①読者にとって読みやすいページにすること
②読者に信頼してもらえるページにすること
③ブログに個性を生み出すこと
ブログのデザインは気にしていますか？ブログで最も大切なことは内容ですが、内容が良くても、読まれなければ意味がありませんよね。
人は55％もの情報を視覚から得ると言われています。内容が良くても「読みにくい」と思えば、読者はすぐにページを閉じてしまいます。
しかし、本記事を参考にすれば、無料テーマでも読みやすいデザインにすることができ、ブログに多くの読者を集めることができます。
今回は無料テーマのCocoonで解説しますが、ポイントさえおさえれば、他のテーマでも転用できるため、Cocoonを使っていない方も参考にしてください。
☑Cocoonでデザインをもっと良くしたい
☑ブログの直帰率を下げてPV数を上げたい
☑読みやすい記事のポイントを抑えたい
このような方は、是非、読んでみてください。
Cocoonを導入したい方はこちらからダウンロードできます。
こちらの記事でも、Cocoon設定についてまとめているので参考にしてください。
- 読みやすい記事にするための「Cocoon設定」
- ブログの外観を整える（[Cocoon設定]→[スキン]）
- 記事の見出しやサイドバーのタイトルの色を決める（[Cocoon設定]→[全体]→サイトキーカラー）
- 記事の文字のデザインを設定する（[Cocoon設定]→[全体]→サイトフォント）
- グローバルナビの色を決める（[Cocoon設定]→[ヘッダー]→グローバルナビメニュー色/グローバルナビメニュー幅）
- コンテンツ幅等の設定（[Cocoon設定]→[カラム]→コンテンツ幅/コンテンツ余白幅/サイドバー幅）
- フロントページブログカード設定（[Cocoon設定]→[インデックス]→カードタイプ/投稿関連情報の表示/枠線の表示）
- 記事の行の高さと行の余白を設定する（[Cocoon設定]→[本文]→本文余白）
- 読みやすい記事にするためのその他の方法
- ブログはデザインの基礎が分かればいっきに良くなる
読みやすい記事にするための「Cocoon設定」
Cocoonは機能が多いテーマですが、それゆえに、設定が難しく何から手を着ければいいか悩んでいる方も多いのではないでしょうか。
しかし、しっかり設定しないと、読みにくいブログになってしまいます。
最初に、読みやすいブログにするための「Cocoon設定」の方法を解説します。
Cocoonの良さは、シンプルな点です。にぎやかなデザインを目指すより、シンプルでなデザインを目指した方が、より多くの読者を集めることができます。
Cocoon設定には、大量の設定項目があります⇩
以上を念頭において、順番に解説していきます。
ブログの外観を整える（[Cocoon設定]→[スキン]）
スキンとは、Cocoonに標準搭載されているテーマの基盤デザインです。約80種類の中から選べます⇩
色や文字といった細かいデザインは、選んだスキンを実装したまま、他のCocoon設定で修正できます。
ただし、次のようなデザインは、Cocoon設定では修正できないため、CSS等の知識が必要になります。
多くのブロガーが好む機能の代表例です。よって、はじめから上記のデザインが実装されているスキンを選ぶのが良いでしょう。
おすすめ４つを示します⇩
①SILK（シルク）
②ミックスブルー
③モダンブラック
④Like Simplicity
僕が過去に使った中から、読みやすいと思うものを厳選しました。スキンを選べない方は、この4つのどれかから始めてみてください！
記事の見出しやサイドバーのタイトルの色を決める（[Cocoon設定]→[全体]→サイトキーカラー）
サイトキーカラーとは、サイドメニューや見出しの色といった、サイト全体の中心となる色のことです。
サイトキーカラーは、他のデザイン要素（ヘッダー、フッター、グローバルナビ、その他ウィジェット）の配色と一緒に決めないと、統一感のない見た目になってしまいます。
配色に詳しくない方は、それぞれ白、灰、黒の中から別個に設定しましょう。下手に配色を決めても、低品質な印象のブログになってしまうからです。
どうしても、白黒灰以外の色を使いたい方は、デザインの配色の勉強をしてからにしましょう（下記リンクから、配色パターンの参考ページが開けます）。
>>https://colordrop.io/popular/
記事の文字のデザインを設定する（[Cocoon設定]→[全体]→サイトフォント）
サイトフィントでは、文字フォント、文字サイズ、文字色を設定します。文字サイズのみ、モバイル用も設定します。
それぞれ次のように設定すると読みやすくなります。
特に重要なのが、文字サイズです。
小さい文字は読みずらいですが、大きすぎても画面に1段落が表示されなくなり、読みずらいです。今までの経験上、18pxが最も丁度良い大きさです。
モバイルの文字も、13pxは小さいと感じる方もいるかもしれませんが、大きいと、画面に表示される範囲が限定的となり、かえって読みにくいです。よって、13pxが丁度よい大きさです。
グローバルナビの色を決める（[Cocoon設定]→[ヘッダー]→グローバルナビメニュー色/グローバルナビメニュー幅）
グローバルナビメニュー色
グローバルナビのラベルと文字の色を設定します。
サイトキーカラーと同様に、配色に詳しくない方は、とりあえずそれぞれ白、黒、灰の中から選びましょう。
グローバルナビメニュー幅
グロ―バルナビの1ラベルは広めに設定しましょう。せまいと窮屈な印象を与え、無意識に不快な印象を読者に与えてしまいます。
ナビのタイトルの長さにもよりますが、150pxくらいが丁度良いでしょう。
コンテンツ幅等の設定（[Cocoon設定]→[カラム]→コンテンツ幅/コンテンツ余白幅/サイドバー幅）
下記の3か所の幅を設定します。
サイドバー幅は、広告を貼り付ける場合を想定して、企業広告のサイズ幅として多く採用されている300pxで設定します。
コンテンツ幅は600～650pxとして設定する人が多いですが、余白を広めにとりたいので、650pxに設定しましょう。
余白は、60px以上に設定すると、文章部分と余白のコントラストが強調され、文章が引き締まって見えるため、読者が記事に目を通しやすくなります。
先ほど紹介したSILKスキンでは自分で設定できないため、幅を修正したい場合は別のスキンを使いましょう。
フロントページブログカード設定（[Cocoon設定]→[インデックス]→カードタイプ/投稿関連情報の表示/枠線の表示）
カードタイプとスニペット表示
投稿関連情報の表示で設定したいのは、スニペットです。カードタイプとスニペットはセットで考えましょう。
スニペットとは、記事の概要を説明する記述で、表示する場合はブログカードは「大きなカード」に設定しましょう（以下イメージ）。
スニペットを表示しない場合は、ブログカードを「2カラム」に設定しましょう。大きなカードだと、読者のスクロール頻度を無駄に多くしてかえって記事が探しにくくなります（以下イメージ）。
枠線の表示
ブログカードのデザインはスキンによって異なりますが、枠線がないスキンの場合、読者はどこをクリックすれば良いのか分かりづらくなります。
特にPCではホバー機能で位置が確認できるスキンでも、モバイルではホバーできないため、枠線がないと本当に分からなくなります。
枠線は表示させましょう。
記事の行の高さと行の余白を設定する（[Cocoon設定]→[本文]→本文余白）
行の高さ→段落の中身の行間スペース
行の余白→段落間のスペース
行の高さ「1.8」、行の余白「３」にしましょう。デフォルトよりも広めの設定です。
行の高さがせまいと読みづらくなりますが、広くても1段落が長くなり、まとまりのない印象を与えてしまいます。1.8というのはちょうどいい値です。
一方で、余白は、広めにとりましょう。余白が広いと段落のまとまりが強調され、読みやすくなります。
読みやすい記事にするためのその他の方法
次に、Cocoon設定以外で、記事を読みやすくするための方法をいくつか解説します。
h2見出しの下に画像を挿入する
h2見出しとは、タイトルの次に大きい見出しのことです（タイトルはh1見出しです）。
h2見出しの下に画像を入れると、記事が組織化され、どこを読んでいるかが分かりやすい記事になります。ただし、次のルールにしたがってください。
①読者により読んでもらいたい記事に限定する
②h2見出しの下に画像を挿入する場合は、その記事のすべてのh2見出しの下に挿入する
画像はデータサイズが大きく、すべての記事に画像を入れると、かなり重たいブログになってしまいます。記事を限定して入れましょう。
また、h2見出しの下に画像があったりなかったりと統一されていない場合は、「反復」の要素がぬけ落ち、逆に読みにくくなってしまいます。
画像をh2見出しごとに入れることが読みやすさにつながる理由は、デザインの「反復」という要素が関係しています。
h2見出しの下に画像を入れると決めたなら、その記事のh2見出しの下には必ず画像を入れるようにしましょう（以下イメージ）。
1段落は２～３行以内にする
読者は長い文章は読まないと思って文章を書きましょう。
基準は1段落2～3行です。最初は、多くの情報を漏れなく書かないといけないと思いがちですが、一読して100％把握できる人はごくわずかです。
ブログの基本は、情報を漏れなく伝えることではなく、より伝えたいことをいかに分かりやすく伝えるかです。
太字・色を使って伝えたい部分を強調する
単調な文章も読者に読まれません。メリハリのある文章にする必要があります。
より注目して読んでもらいたい部分を太字にする・赤字にする・アンダーラインを引くといった方法があります。
例えば、僕は下記のようにルールを設定しています。
どうでもいい部分→そのまま
少し注目して欲しい部分→太字
注目して欲しい部分う→太字＆アンダーライン（赤）
ブログはデザインの基礎が分かればいっきに良くなる
前項で「反復」については少し触れましたが、デザインの４つの要素と言われる「整列」、「反復」、「対比」、「近接」を学べば、読みやすいデザインが分かります。
例えば、1段落のまとまりは「近接」、それを強調するのが段落間の余白で、行の高さと段落間の余白が「対比」の関係になっています。また、白と黒というのも色の「対比」ですよね。
ブログはデザインの知識もあれば役に立ちます。デザインの勉強をしたい方は以下の本を読むと、僕がこの記事で説明したことの根拠が分かります。
興味がある方は、是非、購入してゆっくり読んでみてください。
ここまで読んでいただきありがとうございます。また、よろしくお願いします。
コメント