すぐマネできる「見やすいブログデザイン」の作り方 〜余白の話〜

見やすい ブログ デザイン 余白

今回の記事では、長文を読んでもらうために取り入れている『余白』テクニック の話をしたいな、と思う。

「なかなか記事を読んでもらえなくて、、、」

と悩んでいる人の突破口になったら嬉しい。

まずはじめに、説得力を持たせるために書きたいことがありまして……いや、書かせてください。

2021年2月の結果が、記事数24、平均セッション時間 3:04、直帰率 54.87%だった私は、ブログで大きな結果を出しているマナブさんの記事「ブログでは「直帰率」を気にする必要はない【滞在時間を見るべき話】」の冒頭から、それなりに読んでもらえていると自信をもらった。

manablogの記事
画像引用元:manablog より

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

スポンサーリンク

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

  • ブログを書いたのに読んでもらえない…と悩んでいる人
  • なんだか読みにくい記事だなぁ…と感じてはいるけれど、改善方法がわからない人
  • Cocoonユーザー
キップム
キップム

余白の作り方❶、❸は、Cocoonユーザーじゃなくても使えるテクニックなので、ぜひ、見てね!

まずはじめに、「余白」とは?

文字や装飾、画像などが入っていない、「何もない空白部分」のこと

余白の効果とは?

・余白があると、情報が整理され見やすくなる!

・洗練された、おしゃれなブログになる

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

「ビジュアルとして」読みやすい記事にするための、余白テクニックが4つわかる

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

  •  1~3行以内に改行する(PC表示の場合)
  • 「行の高さ」と「行の余白」を調整する
  •  スペーサーを使いこなす
  •  上下左右に余白ができるボックスを使う

ここからは、余白の作り方を具体的に紹介していきたいなと思う。余白の取り方は好みが別れるところなので、いいなと思った部分だけ試してもらえれば。

余白1:1~3行以内に改行する(PC表示の場合)

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

改行がない文章

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

改行した文章

「読もう!」と思える感じにまで持っていける。

余白2:「行の高さ」と「行の余白」を調整する

行の高さと、行間の余白をわかりやすく表した図
文章引用元:西加奈子「サラバ!」より

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

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

Cocoon設定画面

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

行の余白1.4emの図

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

行の余白3emの図

行間と段落の余白にメリハリが生まれ、読みやすくなった。

読みやすいな、キレイだな、と感じる感覚はそれぞれ違うと思うので、いろいろ試して、あなたのベストを探してもらえたらと思う。

余白3:スペーサーを使いこなす

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

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

2つのブロック間にさらにスペースを空けることができる

「スペーサーブロック」

たとえば、こちら。

スペーサーなしの文章

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

スペーサーを使った文章

ゆとりが生まれ、軽快に読めるようになった。

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

スペーサーの作り方

1.「+」をクリックし「スペーサー」と入力すると「スペーサーブロック」が出てくるので選択

スペーサーの作り方1

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

スペーサーの作り方2

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

スペーサーの作り方2

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

キップム
キップム

余白を適切にあけるとユーザーにとって読みやすい記事になり、ページの滞在時間が伸びたりするよ♪

余白4:上下左右に余白ができるボックス

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

案内ボックス

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

発見したボックス

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

伝えたい大事な情報にこのボックスを使っている

さらに。さらに。

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

背景色をサイトデザインに合わせて簡単に変えることができる点。デザインに統一感が出るので重宝している。

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

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

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

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

1.「+」をクリックし「案内ボックス」を選択

ボックスの作り方1

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

ボックスの作り方2

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

ボックスの作り方3

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

ボックスの作り方4

今より1歩、垢抜けたブログにしたい人にはこの本がオススメ

「いいデザインは余白の使い方がうまいんだ!」と帯に書かれているけれど、ほんとにそのとおりだなぁと。

中身が大切なのは言うまでもないのだけれど、読んでもらえるブログってそれだけじゃない。

「けっきょく、よはく。」に出ているいろんなNGデザインと、OKデザインを見ていると、余白でこんなにも印象が変わるんだ!ということを教えてもらえる。

アイキャッチ制作のシーンでも役立ってくれること間違いなしなので、気になった方は、ぜひ!

見やすいブログ、まとめ

…….というわけで、長文を読んでもらう『余白』テクニックを、もう一度振り返るとこんな感じ。

  •  1~3行以内に改行する(PC表示の場合)
  • 「行の高さ」と「行の余白」を調整する
  •  スペーサーを使いこなす
  •  上下左右に余白ができるボックスを使う

すべて「小さなテクニック」だけれども、積もり積もると、だいぶ読みやすさが変わってくるんじゃないかなと思う。

神は細部に宿るというけれど、読みやすい文章においても、同じことかなぁと。

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

文章: yoko( @_yoko51_

Comment