文章を読みやすくするレイアウトのテクニック

dokusyo

お役立ちコンテンツとして作成したページをユーザーにしっかり読んでもらうために、私がやっている【レイアウトテクニック】をご紹介したいと思います。

どんな文章を書くかではなく、どんな見た目にするか、ということです!

スポンサーリンク

1. フォント(文字)サイズは大きく!

本文の文字が小さいページは、まず読んでもらえません。

特に、ショップのターゲット層が40歳以上の年齢なら、本文のフォントはとにかく大きくしましょう。・・・ほんと、大きくしてください! 読みにくいです(笑)。

もちろん、ターゲットが10代、20代のスマホ世代であっても、やはり文字は大きい方が読みやすいですよね。

ショップできすぎくんですと、「ショップデザイン設定」→「詳細設定」で本文中のテキストのサイズが変更できます。「16px」以上が読みやすいでしょう。

2. 見出しはとにかく分かりやすいデザインに!

たとえ文字ばかりのコンテンツでも、見出しをわかりやすく目立たせるだけで、とても読みやすくなります。

  • 見出しのフォントも大きく
  • 見出しの背景に目立つ色を使う

この2点だけで十分です。

(ショップできすぎくんの場合、「ショップデザイン設定」で見出しのフォントサイズを大きく設定すると、スマホで見たときとんでもない大きさになることがあります。こちらも16pxくらいがちょうどいいと思います。)

ページの中に画像や表などが入ってごちゃごちゃする場合は、見出し全体に目立つカラーを入れます。

見出しのカラー

こちらはもしもさんのサンプルサイトですが、ここまで見出しがはっきりしていると、とても分かりやすいですよね。

背景に色を使った見出しには

色の帯で視線を止める

という効果もあります。

長い文章を読んでいてだらけてきた時に、ふっと気分転換になったりもします。最後まで読んでいただくためにも、大切なことですのでぜひやってみてください。

3. 太字と青い文字を有効に使う

これは、お役立ちコンテンツ全体にざっと目を通してもらうためにとても重要です。

私もそうですが、人は本や資料をに目を通すときにまず「斜め読み」をします。

  • タイトル
  • 冒頭文
  • 見出し
  • 強調された文字
  • まとめ

これらを先に拾って読み、興味があるものがあればもう一度戻ってそこを読み深めていくのです。そんな時に有効なのが、「強調された文字」です。

これを随所にちりばめておくと、それらを拾ってページを読み進めてくれます。

文字を強調するには、太字にしたり、色を変えたり、斜めにしたり、大きくしたり…といろいろな方法がありますが、これらをすべて使ってしまうと逆に読みづらくなります。

ですので、シンプルに「太字」「青い文字」だけを使うのがおすすめです。

「青い文字」とは、すなわち「リンクが貼られた文字」のことです。これも、ピンクや緑などいろいろな色をCSSで指定しているのを見かけます。けれど、その場合リンクだと分かってもらえないこともありますので、ぜひ青にしてください!それだけでもクリック率が上がります。

(注意)太字のタグについて

文字を太くするタグはいくつかあります。ショップできすぎくんの編集画面で「太字」ボタンを使うと、<b></b>タグが入ります。

これは、単に文字を太くするタグです。SEO的に、ある文字(キーワード)を強調したい場合は、HTMLの編集でその文字を <strong></strong> タグで文字を囲みます。

できすぎくんでは、一旦「HTML」の編集モードに切り替えて、自分で<strong></strong>タグを入力すればOKです。

ただ、これはあまり乱用するとSEOでは逆効果になりますので気をつけてくださいね。

4. ホワイトスペースを活用する

と書けばなんだかカッコイイですが、要は余白をうまく取り入れる、ということです(^^)
ちなみに、おしゃれなサイトはホワイトスペースをとても上手に使っています。

見出しの前後

見出しの前後(上下)にはあらかじめ余白(margin・padding)がCSSで設定されていることが多いです。その余白も、広くとっておいた方が読みやすいので、できる方はCSSを調整してみてください。

重要な文章の前後

重要な文章を書く場合は、前後に余白があるとそれだけでよりその文章が強調されます。変に文字を大きくしたり色をつけなくても効果があります。

会話の中で、大事なことを相手に伝えたい時に、すこし間をとるのと同じ感覚ですね。

CSSでも調整できますが、分からない方は改行を入れておくといいです。

太字の前後

これまで私は、太字の前後にわざわざ半角スペースを入れていました。そうすることで、太字の部分がとても見やすくなるんです。

しかし、最近CSSでそれができることを知りました(^^;

strong, b { padding : 0 0.2em ; }

このタグをCSSに追加するだけです。

太字の前後に少し余白が入ります。最近こちらのブログにもこれを入れましたので、以前の記事の中の太字の部分にはダブルで余白が入ってしまってると思います(笑)

ひらがなを使う

これ、実はとても効果があります!

本文もそうですが、特にページタイトルでは、漢字を使うかひらがなを使うかでタイトルの目立ち度が激変します!クリック率も変わりますので、使い分けて試してみてください。

漢字の代わりに丸みのあるひらがなを使うことで、その文字のあたりにホワイトスペースができます。漢字が並ぶより、ずっと読みやすくなりますよ。

最後に

ドロップシッピングを副業としてやっている方にとっては、お役立ちコンテンツを書く時間をよりスピードアップするのが課題でしょう。

COMゼミナールでは、そんな方のために「文章作成セミナー」の第2回目を5/29(日)に開催します!

> 30分でスラスラ1,000文字!! 文章作成セミナー

> 第1回目のセミナーれぽはこちら

プロのライターさんから文章作成のコツを学べるチャンスです。
定員は10名。次回の開催は半年後になりますので、お見逃しなく!

スポンサーリンク