今回の記事では、長文を読んでもらうために取り入れている『余白』テクニック の話をしたいな、と思う。
なかなか記事を読んでもらえない……
と悩んでいる人の突破口になったら嬉しい。
まずはじめに、説得力を持たせるために書きたいことがありまして……いや、書かせてください。
2021年2月の結果が、記事数24、平均セッション時間 3:04、直帰率 54.87%だった私は、ブログで大きな結果を出しているマナブさんの記事「ブログでは「直帰率」を気にする必要はない【滞在時間を見るべき話】」の冒頭から、それなりに読んでもらえていると自信をもらった。
読みやすさ、見やすさに気を配るようになってから、ジワリジワリとPVも滞在時間も増えているので、私の経験を大いに交えながら、実際に使ってよかった「余白」についてまとめてみた。よかったらお付き合いください。
この記事はこんな人にオススメ
余白の作り方❶、❸は、Cocoonユーザーじゃなくても使えるテクニックなので、ぜひ、見てね！
まずはじめに、「余白」とは？「余白の効果」とは？
余白とは、
文字や装飾、画像などが入っていない、「何もない空白部分」のこと
余白があると、
・情報が整理され見やすくなる！
・洗練されて、おしゃれに見える
という効果がある。
この記事を読めば、わかること
「ビジュアルとして」読みやすい記事にするための、余白テクニックが4つわかる
結論を先に書いてしまうと、
ここからは、余白の作り方を具体的に紹介していきたいなと思う。余白の取り方は好みが別れるところなので、いいなと思った部分だけ試してもらえれば。
余白1：1~3行以内に改行する（PC表示の場合）
改行しない文章は、文字がギュウギュウしていて「うっ」となる。
しかし、そんな息苦しい文章も、改行し余白を作ると「読もう！」と思える感じにまで持っていける。
余白2：「行の高さ」と「行の余白」を調整する
「行の高さ」と「行の余白」をわかりやすく示したのが上の図（Cocoonの場合）。
「Cocoon設定」→「本文」→「本文余白」から調整できる。
初期設定（行の高さ 1.8 / 行の余白 1.4em）は、右のような感じ。
「行の高さ」は丁度いいけれど、「行の余白」はもう少し広げたほうが良さそう…！と思ったので「2.8」に。そうしたら、
行間と段落の余白にメリハリが生まれ、私にはしっくりときた。
読みやすいな、キレイだな、と感じる感覚はそれぞれ違うと思うので、いろいろ試して、あなたのベストを見つけてね！
余白3：スペーサーを使いこなす
「うーん。ここはもう少しブロック間の間隔が欲しいなぁ…」
とプレビューを確認しながら思うことはないだろうか。私は1記事に1度は思う。そんな時に便利なのが、
2つのブロック間にさらにスペースを空けることができる
「スペーサーブロック」
たとえば、右だと、
商品リンクと文章の間に十分な余白がなく窮屈な印象。
でも、左のようにスペーサーを使い余白をとると……ゆとりが生まれ、軽快に読めるようになった！
めちゃめちゃ便利なので、めちゃめちゃ使っている。スペーサー素晴らし。
スペーサーの作り方
1.「+」をクリックし「スペーサー」と入力すると「スペーサーブロック」が出てくるので選択
2. 記事執筆画面にグレーのスペーサーブロック（余白を作るブロック）ができる
3. 余白の高さは1~500pxまでサイドバーで調節できる
私は8の倍数ルールを採用しているので16,32,40pxあたりを指定することが多い。
余白を適切にあけるとユーザーにとって読みやすい記事になり、ページの滞在時間が伸びたりするよ♪
余白４：上下左右に余白ができるボックスを使う
多分、Cocoonブログでよく使われているのは、このボックス。
案内ボックス
私がいろいろいじっていて偶然発見したボックスがこちら。
発見したボックス
上下左右に広めの余白ができるので、存在が目立ち、目にパッと入ってくるところがお気に入りポイント。ちなみに私は、
伝えたい大事な情報に、このボックスを使っている
さらに。さらに。
このボックスの「わぁ良いじゃん！」ポイントは、もう1つあって。
背景色をサイトデザインに合わせて簡単に変えることができる点。デザインに統一感が出るので重宝している。
色を変える方法が気になる方は、こちらの記事をぜひ！
新たな発見をした自分にしめしめと思ったりしたので、本当は秘密にしておきたいのだけれど、
ツイッターで「どうやって作っているんですか？」と質問をもらったことがあるので、ここからは作り方を紹介していきたい。
上下左右に余白ができるボックスの作り方
1.「+」をクリックし「案内ボックス」をクリック
2. サイドバーの「スタイル設定」→「タイプ」から「ライト（白色）」を選択
3. 「文章を入力、または / でブロックを選択」をクリックすると、サイドバーに「色設定」が表示される
４. 「色設定」から文字色と背景色を選択し、文章を入力すると上下左右に「余白」のあるボックスが完成する
今より1歩、垢抜けたブログにしたい人にはこの本がオススメ
「いいデザインは余白の使い方がうまいんだ！」と帯に書かれているけれど、ほんとにそのとおりだなぁと。
中身が大切なのは言うまでもないのだけれど、読んでもらえるブログってそれだけじゃない。
「けっきょく、よはく。」に出ているいろんなNGデザインと、OKデザインを見ていると、余白でこんなにも印象が変わるんだ！ということを教えてもらえる。
アイキャッチ制作のシーンでも役立ってくれること間違いなしなので、気になった方は、ぜひ！
見やすいブログの作り方、まとめ
…….というわけで、長文を読んでもらう『余白』テクニックを、もう一度振り返るとこんな感じ。
すべて「小さなテクニック」だけれども、積もり積もると、だいぶ読みやすさが変わってくると思う。
神は細部に宿るというけれど、読みやすい文章においても、同じこと。
「ちょっとでも読みやすいように」という気持ちから生まれる記事が、最後には多くの人に届くのかもしれない。
文章： yoko（ @_yoko51_）
Comment