今回の記事では、長文を読んでもらうために取り入れている『余白』テクニック の話をしたいな、と思う。
「なかなか記事を読んでもらえなくて、、、」
と悩んでいる人の突破口になったら嬉しい。
まずはじめに、説得力を持たせるために書きたいことがありまして……いや、書かせてください。
2021年2月の結果が、記事数24、平均セッション時間 3:04、直帰率 54.87%だった私は、ブログで大きな結果を出しているマナブさんの記事「ブログでは「直帰率」を気にする必要はない【滞在時間を見るべき話】」の冒頭から、それなりに読んでもらえていると自信をもらった。

読みやすさ、見やすさに気を配るようになってから、ジワリジワリとPVも滞在時間も増えているので、私の経験を大いに交えながら、実際に使ってよかった「余白」についてまとめてみた。よかったらお付き合いください。
この記事はこんな人にオススメ

余白の作り方❶、❸は、Cocoonユーザーじゃなくても使えるテクニックなので、ぜひ、見てね!
まずはじめに、「余白」とは?
文字や装飾、画像などが入っていない、「何もない空白部分」のこと
余白の効果とは?
・余白があると、情報が整理され見やすくなる!
・洗練された、おしゃれなブログになる
この記事を読めば、わかること、
「ビジュアルとして」読みやすい記事にするための、余白テクニックが4つわかる
結論を先に書いてしまうと、
ここからは、余白の作り方を具体的に紹介していきたいなと思う。余白の取り方は好みが別れるところなので、いいなと思った部分だけ試してもらえれば。
余白1:1~3行以内に改行する(PC表示の場合)

改行しない文章はこんな感じ……

文字がギュウギュウしていて「うっ」となる。しかし、そんな息苦しい文章も、改行すると、

「読もう!」と思える感じにまで持っていける。
余白2:「行の高さ」と「行の余白」を調整する

「行の高さ」と「行の余白」をわかりやすく示したのが上の図(Cocoonの場合)。
「Cocoon設定」→「本文」→「本文余白」から調整できる。

初期設定(行の高さ 1.8 / 行の余白 1.4em)がこちら。

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

行間と段落の余白にメリハリが生まれ、読みやすくなった。
読みやすいな、キレイだな、と感じる感覚はそれぞれ違うと思うので、いろいろ試して、あなたのベストを探してもらえたらと思う。
余白3:スペーサーを使いこなす

「うーん。ここはもう少しブロック間の間隔が欲しいなぁ…」
とプレビューを確認しながら思うことはないだろうか。私は1記事に1度は思う。そんな時に便利なのが、
2つのブロック間にさらにスペースを空けることができる
「スペーサーブロック」
たとえば、こちら。

デフォルトだと、商品リンクと文章の間に十分な余白がなく窮屈な印象に。でも、スペーサーを使い余白をとると……

ゆとりが生まれ、軽快に読めるようになった。
めちゃめちゃ便利なので、めちゃめちゃ使っている。スペーサー素晴らし。
スペーサーの作り方
1.「+」をクリックし「スペーサー」と入力すると「スペーサーブロック」が出てくるので選択

2. 記事執筆画面にグレーのスペーサーブロック(余白を作るブロック)ができる

3. 余白の高さは1~500pxまでサイドバーで調節できる

私は8の倍数ルールを採用しているので16,32,40pxあたりを指定することが多い。

余白を適切にあけるとユーザーにとって読みやすい記事になり、ページの滞在時間が伸びたりするよ♪
余白4:上下左右に余白ができるボックス
多分、Cocoonブログでよく使われているのは、このボックス。
案内ボックス
私がいろいろいじっていて偶然発見したボックスがこちら。
発見したボックス
上下左右に広めの余白ができるので、存在が目立ち、目にパッと入ってくるところがお気に入りポイント。ちなみに私は、
伝えたい大事な情報にこのボックスを使っている
さらに。さらに。
このボックスの「わぁ良いじゃん!」ポイントは、もう1つあって。
背景色をサイトデザインに合わせて簡単に変えることができる点。デザインに統一感が出るので重宝している。
色を変える方法が気になる方は、こちらの記事をぜひ!
新たな発見をした自分にしめしめと思ったりしたので、本当は秘密にしておきたいのだけれど、
ツイッターで「どうやって作っているんですか?」と質問をもらったことがあるので、ここからは作り方を紹介していきたい。
上下左右に余白ができるボックスの作り方
1.「+」をクリックし「案内ボックス」を選択

2. サイドバーの「スタイル設定」→「タイプ」から「ライト(白色)」を選択

3. 「文章を入力、または / でブロックを選択」をクリックすると、サイドバーに「色設定」が表示される

4. 「色設定」から文字色と背景色を選択し、文章を入力すると上下左右に「余白」のあるボックスが完成する

今より1歩、垢抜けたブログにしたい人にはこの本がオススメ
「いいデザインは余白の使い方がうまいんだ!」と帯に書かれているけれど、ほんとにそのとおりだなぁと。
中身が大切なのは言うまでもないのだけれど、読んでもらえるブログってそれだけじゃない。
「けっきょく、よはく。」に出ているいろんなNGデザインと、OKデザインを見ていると、余白でこんなにも印象が変わるんだ!ということを教えてもらえる。
アイキャッチ制作のシーンでも役立ってくれること間違いなしなので、気になった方は、ぜひ!
見やすいブログ、まとめ
…….というわけで、長文を読んでもらう『余白』テクニックを、もう一度振り返るとこんな感じ。
すべて「小さなテクニック」だけれども、積もり積もると、だいぶ読みやすさが変わってくるんじゃないかなと思う。
神は細部に宿るというけれど、読みやすい文章においても、同じことかなぁと。
「ちょっとでも読みやすいように」という気持ちから生まれる記事が、最後には多くの人に届くのかもしれない。
文章: yoko( @_yoko51_)
Comment