読みやすいコンテンツライティング5つのポイント

  • このエントリーをはてなブックマークに追加
  • 0
コピーライティング

ウェブ上の文章というのは、ウェブという媒体に合わせた特徴的な書き方がいくつかあります。紙媒体で読む文章とウェブ上の文章では、明らかな “見た目的” 表現の違いがあります。特に毎回注意しておいてほしい部分を、サイズ・スタイル・カラー・行数・改行の 5 つの視点でまとめてみました。

視点は 5 つありますが、その全てに共通することは、いかに読みやすくするか、という点です。ぜひ参考にしてください。

文字のサイズ

フォントサイズ

ウェブコンテンツの文字サイズは 3 段階くらいにしましょう。基本の文章に使う文字サイズは 14 px 〜 16 px くらいがよいとされています。迷った場合は、小さくするくらいなら大きくした方がいいです。文字サイズが大きいとかっこわるいですか? それでいいんです。読みやすさを優先してください。

それとは別に 2 パターンくらい使い分ければ OK です。ベーシックなところで言うと、タイトル文字のサイズと本文中に使う見出し用のサイズです。

なんで 3 つくらいまでに抑えた方がいいかというと、素人が色んな文字のサイズを使うと、バランスが悪くなって読みにくくなるからです。ウェブのコンテンツは紙媒体のコンテンツとは違い、集中しにくいという研究結果があります。本なら 1 時間ぶっ続けで読めても、ウェブ上の文章を 1 時間読み続けるのって、結構きつくないですか?

そのため、全体的な文章のスタンスとして、読みやすさには気をつけるようにしましょう。

文字のスタイルはゴシックで

ゴシック/明朝

文字のスタイル、CSS で言うと font-family と呼ばれるものの設定は、基本ゴシック体にしましょう。文字のスタイルには主にゴシック体と明朝体があります。紙媒体は明朝体の方が読みやすく、ウェブ媒体はゴシック体の方が読みやすくなります。

ですので、基本はゴシック、たまに変化を付けたい部分(見出しなど)は明朝を使うなどにしましょう。テーマにもよりますが、WordPress を使っていれば、基本はゴシックで指定されていると思います。少なくとも Twenty Eleven はゴシック系です。

文字の色は

文字色

文字の色は基本 3 色までにしておきましょう。本文は黒(濃いめのグレーも可)。強調したい文は赤、+α の三色です。背景は白で、基本の文字色が黒(濃いめのグレー)です。背景が白だという前提で、読みやすい色を選ぶようにしましょう。

また、素人が下手にたくさんの色を使うと、サイトが見にくくなります。基本は 3 色で済ませてください。強調したい部分が強調されず、注目して欲しい部分へ注目させることができなくなります。

よく、大事な言葉に色を付けるときに、統一感なく付けているサイトを見かけます。ここは赤で強調してるのに、あっちはピンク、こっちは緑、みたいな感じです。結局どこか大事か伝わらなくなります。そもそもちかちかして目に悪い。つまり読みたくなくなります。

メッセージが伝わらない、イコールあなたのサイトはわけの分らないサイトということです。わけの分らないサイトから、商品を買うお客さんはいません。

文字色と背景の関係

また、サイトによっては、基本の文字自体が青とか紫とか黒背景に白になっているところもあります。これもやめた方がいです。サイトの雰囲気によっては、ありなんじゃないかと思うかもしれません。しかし、人が一番読みやすいのは白背景に黒文字(若干グレーも可)なんです。これはもう覆りません。

コントラストを付ける意味で一部のバナーなどは、赤にしたり、背景黒の白文字にしたりはありですが、ベース(つまり記事の部分)は白背景に黒文字でいきましょう。見た目を気にしてお客さんを逃がす、売上を落とすなんてのは本末転倒です。

行数が多くなりすぎないようにする

紙媒体の文章と違って、ウェブ媒体の文章は段落が固まると非常に読みにくくなります。目安はだいたい PC のサイズで 5 行以内に収めましょう。スマホやタブレットで見ると行数が増えますので、それも考慮すると、PC で閲覧したときは、若干少ないかなと思うくらいで OK です。

たま〜に、ごくたま〜に何ですが、1 ページのコンテンツが全て改行なしに文字が敷き詰められているサイトを見かけます。改行の仕方をご存知ないのでしょうか? さすがにビジネス用のサイトでは見かけた記憶はないですが、行数にもちゃんと気を配るようにしましょう。

また、行数が 1 行ばかりになるように改行しているサイトも逆に読みにくくなります。個人のブログとかではよく見ますよね。そういう場合はいいんですが、ビジネス用のサイトだと、行の取り方でも文章の信頼度が変わりますので気をつけてください。

改行の位置に気をつける

改行位置については、もう 1 点重要なポイントがあります。それは、文章の途中で改行はしない、ということです。改行する場合は、句点(。)にしましょう。

ウェブ上の文章は、それを見る媒体によって表示に差が出てきます。特に改行の影響が出るのはブラウザの幅です。例えば、次の表示を見比べてみてください。

改行表示の違い(PCとスマホ)

ブラウザの幅は、使っているパソコンやスマホ、タブレットの画面の横幅が影響してきます。そのため閲覧媒体(デバイス)によって、横幅に納まる文字数にも差が出てくるのです。これを意識していないで、自分がエディタを使っているデバイスで見える感覚のみで文章を書き、改行をすると、とてつもなくみにくいコンテンツが出来上がる可能性があります。

読点(、)や言葉の区切りでむやみやたらに改行せずに、一文はまとめておきましょう。また、これと同じ理由でスペースの使い方も気をつけましょう。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

メールアドレスが公開されることはありません。