【Cocoon】おしゃれなブログデザインの作り方 〜押さえておきたい基本設定8+α〜

と悩んでいる方に向けて。

見た目に気を配るようになってから、

「お洒落なブログなので、デザインを参考にさせてもらっています。」

みたいな嬉しい言葉をかけてもらえることが多くなりました。それにともない、ジワリジワリとPVや収益も増えているので、今回は私の経験を大いに交えながら、

「おしゃれで読みやすいブログデザインの作り方」

についてちょっと書いてみたいです。よかったらお付き合いください。

この記事はこんな人にオススメ

この記事を読めば、わかること

結論を先に書いてしまうと、

それでは、ひとつずつ説明していきたいと思います。

ポイント1｜文字色は濃いグレーにする

上図だと差がちょっとわかりにくいですが…… 背景が白（#ffffff）の場合、文字色が

真っ黒 → コントラストが強すぎて目に負担がかかる
濃いグレー → 優しい印象になり読みやすくなる

というのは、ブログ界隈では有名な話。

Cocoonは「真っ黒（#000000）」がデフォルトなので、濃いグレーに変更しておきましょう。

細いフォント（明朝体など）を使うなら少し濃いめに、逆に太いゴシック体なら若干薄めにするとよさそう。最終的には、好みかな、と。

文字色を変更する方法

ポイント2の前に、「余白」とは？「余白の効果」とは？

余白とは、

余白があると、

という効果があります。

ポイント2〜4では、余白の作り方を具体的にご紹介。余白の取り方は好みが分かれるところなので、いいなと思った部分だけ取り入れてもらえれば。

ポイント2｜1~3行以内に改行する（PC表示の場合）

改行しない文章は、文字がギュウギュウしていてうぅ、となりますが…

そんな息苦しい文章も、改行し余白を作ると、「読もう！」と思える感じにまで持っていけます。

ポイント3｜「行の高さ」と「行の余白」を調整する

Cocoonの「行の高さ」と「行の余白」をわかりやすく示したのが上の図。

「Cocoon設定」→「本文」→「本文余白」から調整できます。

初期設定（行の高さ 1.8 / 行の余白 1.4em）は、左のような感じ。

「行の高さ」は丁度いいけれど、「行の余白」はもう少し広げたほうが良さそう…！と思ったので「2.8」に変更。そうしたら、

行間と段落の余白にメリハリが生まれ、私にはしっくりときました。

ポイント4｜スペーサーを使いこなす

「うーん。ここはもう少しブロック間の間隔が欲しいなぁ…」

とプレビューを確認しながら思うことはないでしょうか。私は1記事に1度は思います。そんな時に便利なのが、

たとえば、左だと、

商品リンクと文章の間に十分な余白がなく窮屈な印象。

でも、右のようにスペーサーを使い余白をとると、ゆとりが生まれ、軽快に読めるように。

めちゃめちゃ便利なので、めちゃめちゃ使っています。スペーサー素晴らし。

スペーサーの作り方

ポイント5｜アイキャッチ画像のサイズを揃える

アイキャッチのサイズがバラバラだと落ち着かないし、美しくないのですが、、、

揃えると、突然そこに秩序が生まれて、すごくキレイになります。

【厳選7冊】初心者におすすめのデザイン本 〜独学向け〜で紹介した『デザインのドリル』にも書いてありましたが、押さえておきたいのは、

ということ。ちなみに私は、装飾のカラーや記事内の画像サイズ、吹き出しもこれを意識しています。

サイズを揃える方法

ここでは、多くのブロガーが愛用している無料デザインツール「Canva(キャンバ)」を使ったサイズの揃え方をご紹介。

・・・・・・・・

こちらもオススメ！「Cocoonのアイキャッチサイズはいくつにすればいいの……？？」と悩んでいる方に向けて。詳しくは下記記事に書いたので、気になった方はポチッとしてみてください。

ちなみに、私が画像作成に使っているツールはPhotoshopとIllustrator。Canvaよりも、痒い所に手が届く的な繊細な調整ができるAdobeソフトの方がお気に入りです。

・・・・・・・・

こちらもオススメ！　なんと。Adobe CCを30,000円以上も安く購入できる方法を紹介しています。しかも、Adobeソフトの基礎講座付き！気になる方はぜひ。

ポイント6｜装飾で、重要な場所にスポットライトを当てる

一目瞭然だと思いますが、目に飛び込んで来るのは、装飾（見出し・箇条書き・ボックス・表etc）を施した文字。

SNS・サブスク配信・ゲームなど情報が爆発的に増えている社会では、みんな多くの情報を秒でスワイプしています。流し読みするユーザーに手を止めてもらえるよう

を意識して記事を作っています。

 色が多すぎると「ごちゃごちゃ」してうるさい印象に。色を揃えると統一感が生まれ、スッキリ。

こちらもオススメ！　装飾の色を自分好みにした方はコチラをどうぞ。

ポイント7｜画像を適度に入れる

文字だけがずーーーっと続くと、読者は疲れ離脱してしまうので、画像を適度に入れて、目に優しい記事にしています。

 アイキャッチと同じでサイズが揃っていないと、ガタガタして落ち着きませんが、大きさを揃えるとキレイな印象になり◎

ポイント8｜吹き出しを使う

ブログを始めた頃は、文章を書くことに精一杯で、読み手の立場になってみる余裕なんてなかったのですが…デザイナーの友だちに、

とアドバイスされ、こんな感じで使い始めました。

今から思えば、「読みやすい記事」について考えるきっかけになったように思います。

吹き出しには、

などの効果があり、便利。

使いすぎるとうるさくなるので注意が必要ですが、メリットが多いので、これからも使うぞっと思っています。

テイストがバラバラよりは、揃っていた方が雰囲気が崩れず、自然な感じになります。

自分でイラストを描けない方は、スキルのフリマ【ココナラ】などのサービスでオリジナルアイコンを作るのがオススメ。

おまけ｜上下左右に余白ができるボックスを使う

…..と、まぁここまでは既出の話も多いので、最後にあまり他のブログには書かれていないであろう話をしてみようかなと思います。

多分、Cocoonブログでよく使われているのは、このボックス。

私がいろいろいじっていて偶然発見したボックスがこちら。

お気に入りポイントは、上下左右に広めの余白ができるので、存在が目立ち、目にパッと入ってくるところ。ちなみに私は、

さらに。さらに。

このボックスの「わぁ良いじゃん！」ポイントは、もう1つあって。

テキストや背景の色をサイトデザインに合わせて簡単に変えることができる点（案内ボックスはCSSを追加しないと変えられません）。デザインに統一感が出るので重宝しています。

色を変える方法が気になる方は、こちらの記事をぜひ！

・・・・・・・・

新たな発見をした自分にしめしめと思ったりしたので、本当は秘密にしておきたいのですが、

ツイッターで「どうやって作っているんですか？」と質問をもらったことがあるので、ここからは作り方を紹介していきます。

上下左右に余白ができるボックスの作り方

こちらもオススメ　トップページをサイト型にした話↓

【Cocoon】おしゃれなブログデザインの作り方、まとめ

…….というわけで、「おしゃれで読みやすいブログデザインの作り方」もう一度振り返るとこんな感じ。

すべて「小さなテクニック」。でも、積もり積もると、だいぶ読みやすさが変わってくると思います。

神は細部に宿るといいますが、読みやすい文章においても、同じことなのかなと。

「ちょっとでも読みやすいように」という気持ちから生まれる記事が、最後には多くの人に届くのかもしれません。

文章・デザイン： yoko（ @_yoko51_）