【完全版】読みやすいWebの文章を書く10個のコツ！デザインのヒントまで徹底解説
「Webで紹介文を書きたいけど、なんか読みにくい」
「一生懸命書いた自己紹介がわかりにくいと言われてしまった」
「文字だらけでなんか見にくいWeb記事を修正する方法はない？」
ライティング
初心者
こんな悩みはありませんか？
Webの文章には独特のルールがあります。ルールを理解して書くだけで、誰でも簡単に読みやすい記事をかけますよ！
とは言っても、書籍を読んで情報収集に時間を書けるのは大変ですよね。
そこでこの記事では、Webで読みやすい文章を書くコツをギュッと濃縮しました。
- 文章を読みやすくする10個のルール
- 記事を見やすくする11のデザインルール
この記事を最後まで読むと、誰でも読みやすい文章が書けるはず。なんかわかりにくい文書になってしまうなという方はぜひ参考にしてください。
なお、ブログに書けない更に濃い内容のオンラインビジネスノウハウに関しては僕のメルマガで配信しています。入退会無料なので、ぜひ登録してみてください！
Webで読みやすい文章を書く10個のルール
Webで読みやすい文章を書くコツはたった10個だけ。
- 一文の長さは60文字以内
- 一文中に使う読点は2つまでにする
- 改行は句点で行う
- 見出しを使う
- 見出しで結論がわかるようにする
- 一見出し当たりの分量を絞る
- カタカナは全角・数字は半角にする
- 箇条書きを活用する
- 結論から説明する
- 漢字とひらがなのバランスは3：7
ぜひ、1つひとつ意識してみてください。
1. 一文の長さは60文字以内
一文の長さは60文字以内にしましょう。可能であれば40文字程度が良いです。
一文が長くなるほど、主語や述語がとらえにくくなり、内容がごちゃごちゃしてしまいます。たとえば、長すぎる文章を整えると以下のように変わります。
＜悪い例＞
一文の長さがかなり長い場合、主語と述語が離れてしまったり、修飾語が多くなりすぎてしまったりするため、その文で伝えたいことがぼやけてしまい、読者にも何が言いたいのかわかりにくくなってストレスを与えます。
＜改善例＞
一文がかなり長い場合、主語と述語が離れてしまったり、修飾語が多くなりすぎてしまったりします。結果、その文で伝えたいことがぼやけてしまい、何が言いたいのかわかりにくいです。
そのような文章は、読者にもストレスを与えます。
できるだけ一文を短く、端的に伝えるのがコツです。長すぎる場合は二文に分けられないか検討しましょう。
2. 一文中に使う読点は2つまでにする
一文中の読点は2つまでにしましょう。読点が多すぎる文章も読みにくいためです。
＜悪い例＞
私の出身である、東京都は、日本の首都であり、栄えているところです。
＜改善例＞
私の出身である東京都は、日本の首都であり栄えているところです。
悪い例は少し極端かもしれませんが、読点が多すぎると文章全体のリズムが悪くなります。読点が多すぎる場合は意味のかたまり以外で分割しないように意識しましょう。
3. 改行は句点で行う
文章を改行するときは句点（。）で行ないましょう。
文の途中でやたらと改行するのはおすすめしません。一文が何行にも及ぶと意味を捉えにくくなるためです。また、読者が記事を読むときにスクロールする量が増えてしまって負担になります。
結果、途中で読むのをやめてしまう可能性も高いです。
4. 見出しを使う
適切に見出しを使いましょう。
見出しとは、この記事で言う「Webで読みやすい文章を書く10個のルール」や「4. 見出しを使う」の部分のこと。見出しがあることで、文章全体の流れや区切れ目がわかりやすくなります。見出しとは、いわば本の章や節に当たる部分です。
なお、見出しを最初に考えてから文章を書き始めると、話が脱線せずに伝わりやすくなります。こちらもぜひやってみてくださいね。
5. 見出しで結論がわかるようにする
見出しをたてるときは、見出しタイトルにもこだわりましょう。見出し部分を読んだだけで結論がわかるのがベストです。
たとえばこの節ならば、「見出しのタイトルも重要」と名付けるより、「見出しで結論がわかるようにする」のほうが内容が伝わりやすいはずです。
Web記事の読者は斜め読みすることが多いもの。じっくり読んではくれません。そのため、誤解なくわかりやすく伝えるには、見出しタイトルが重要なのです。
見出しタイトルが適切であれば、読者は知りたい情報を探しやすくなるので、しっかり文章を読んでもらえるでしょう。
6. 一見出し当たりの分量を絞る
1つの見出しあたりの分量を絞りましょう。文の数にして12文以内が目安と言っている人もいます。
各見出しでは1つのトピックについて説明するのが鉄則。たとえばこの見出しにいきなりデザインの話も出てきたら、要点がつかめなくなってしまうでしょう。
1つの見出しでの文章が多すぎる場合は、2つ以上のトピックについて語っている場合が多いです。1トピックで完結していれば、自然と分量はセーブされてくるので、意識してみてください。
7.カタカナは全角・数字は半角にする
カタカナや数字の表記が全角・半角混ざっていると読みにくくなります。たとえば料金表示が、
- 商品A：7,000円
- 商品B：８，０００円
と書かれていたら、一瞬引っかかる方が多いはずです。
Web上では以下の表記にするのが基本なので覚えておきましょう。
- カタカナ：全角表記（アイウエオ）
- 数字：半角表記（123）
- アルファベット：半角表記（abc）
- 句読点：全角表記（、。）
- 記号：基本は全角表記（「」・？！）
ルールを統一するだけで、ぐっと記事全体にまとまりが出てくるはずです。
8. 箇条書きを活用する
3つ以上並列して物事を説明するときは、箇条書きを活用しましょう。それだけで読みやすくなります。
＜悪い例＞
ランチメニューは「中華料理（チャーハン・餃子）」「和食（炊き込みご飯と焼き魚）」「イタリアン（パスタとサラダ）」「アメリカン（ハンバーガーとポテト）」から選べます。
＜改善例＞
ランチメニューは
- 中華料理（チャーハン・餃子）
- 和食（炊き込みご飯と焼き魚）
- イタリアン（パスタとサラダ）
- アメリカン（ハンバーガーとポテト）
から選べます。
箇条書きをしたほうが、並んでいるものがすっと頭に入るはずです。情報を整理して、その都度わかりやすく伝えられる手段を選びましょう。
9. 結論から説明する
Webの文章では、できるだけ結論から説明するようにします。
書籍などと異なり、Webの文章はじっくり読まれません。ぱっと内容を見て、「なんとなく難しそう、よくわからなそう」と思われてしまえば、そこで離脱されてしまいます。
結論から情報を伝えることで、読者は理解しやすくなります。結論・その結論を伝える理由という順番で伝えるのがコツです。
実際にこの見出しも、
- 結論：Webの文章では、できるだけ結論から説明する
- 理由：Webの文章はじっくり読まれないから
- 補足情報や具体例
という順序で説明しています。
10. 漢字とひらがなのバランスは3：7
漢字とひらがなのバランスがだいたい3：7になるように心がけると読みやすくなります。
以下の文章はどちらも読みにくいと感じるはず。
- 漢字と平仮名の比率は3：7を意識し執筆しましょう。（漢字が多い）
- かんじとひらがなのバランスは3：7にするとよみやすくなります。（ひらがなが多い）
漢字が多すぎると堅苦しい印象になります。逆にひらがなが多いと、意味を取り違えかねません。
熟語をかんたんな言葉に言い換えながら、バランスを取りましょう。
Webの文章を読みやすくするデザインの11のルール
続いて、デザインのルールも11個解説します。
- フォントはゴシック体
- フォントサイズは16px程度
- 行間を調整する
- 文字色は濃いグレーを基本にする
- 文字は基本的に左揃えにする
- 太字を活用する
- 色数を絞る
- コントラストを意識する
- 適宜画像を挿入する
- 表は幅を揃える
- 文字の装飾は最低限にする
どんなに文章自体が読みやすくても、直観的に「見にくい」デザインは読者に負担を与えます。これらを意識してデザイン調整すると、さらに読みやすくなるはずです。
1. フォントはゴシック体
さまざまなフォントが混在すると、読みにくくなります。読者が直観的に頭に入りやすいのはゴシック体です。
明朝体も読みやすいフォントと言われていますが、スマートフォンのAndroid端末では標準搭載されていないのでゴシック体に変換されてしまいます。
どのデバイスから見ても同様に表示され、見やすい文字を使いたいならばゴシック体がおすすめです。
2. フォントサイズは16px程度
本文のフォントサイズは14px〜16px程度が良いです。文字が小さすぎると、文章を追いかけるのが大変になります。
逆に大きすぎると、1文が数行に渡るので、意味が取りにくくなるでしょう。
- 文字サイズが小さすぎる場合（10px）
- 文字サイズが大きすぎる場合（24px）
見出しに関しては多少文字サイズを大きくしてもかまいません。ただし、本文の文字サイズは14px〜16pxを基本にしましょう。
3. 行間を調整する
行間を調整することも大切。行間が狭いと文字がぎっしり詰まった印象になり、読みにくいです。
逆に広すぎると、パッと見たときに文章全体を理解しにくくなります。行間の目安は1.5〜2.0です。
＜行間が広い例＞
行間が広い文章は、全体が見にくくなります。
スクロールの負担も増えるので読者に優しくありません。
避けたほうが良いでしょう。
＜行間が狭い例＞
行間が狭い文章が続くと、文字が全体的にぎっしり詰まった印象になります。改行していてもわかりにくいので意味の塊もとらえにくくなり、要点がつかみにくくなるでしょう。
特に長文を読んでもらいたい場合は行間調整は必須です。
全体的に詰まった印象を与えないようにしてください。
4. 文字色は濃いグレーを基本にする
本文の文字色は濃いグレーがおすすめです。個性を出すためにカラフルにしてしまうと読みにくくなります。
＜読みにくい文章の色＞
一見鮮やかなカラーですが、文章が続くと目が疲れてきます。目立たせたいところにピンポイントで使うなら問題ありませんが、全体をカラフルにするのは避けたほうが良いです。
また、真っ黒の文字は圧迫感があります。多くのウェブサイトでは、目が疲れにくい黒に近いグレーを採用しているので、真似してみるといいでしょう。
5. 文字は基本的に左揃えにする
文字は左揃えが基本です。文頭が揃っていないと、目が忙しく動いてしまい、疲れてしまうからです。
本サイトでも、見出し・本文ともに左揃えを採用しています。
6. 太字を活用する
目立たせたいところは太字を活用しましょう。ポイントを捉えやすくなります。
ポイントは太字で示すと読みやすいです。
フォントサイズを変えると目立ちますが、長文が読みにくくなります。
一部フォントサイズを大きくする方もいますが、文章がガタガタとしてしまうので、可読性がよくありません。特に長文を読んでほしい場合は、太字のほうが見やすいです。
7. 色数を絞る
サイトに使う色数は絞りましょう。サイト全体のテーマカラーを決め、2色〜3色で仕上げます。
色数を多くしすぎると、ごちゃついた印象になり見た目に影響します。
8. コントラストを意識する
色を使う場合は、背景と文字色のコントラストを意識しましょう。淡色同士では文字が目立ちにくいですし、濃い色どうしでは見にくいです。
実際に複数のディスプレイで確認しながら、読みやすい配色を心がけましょう。
9. 適宜画像を挿入する
文字列だけが続いていると、「読むのがめんどくさい」と感じる方も多いです。文章の途中で適宜画像を挿入すると、箸休めになり効果的。
商品紹介など実際のものがある場合は、現物の写真を見せるとわかりやすいです。また、必要に応じて図解を作ると読者の理解を助けます。
10. 表は幅を揃える
表を作るときは横幅を画面いっぱいに揃えましょう。幅ががたがただと、見にくくなります。
＜悪い例＞
| 商品1 | 100円 |
| 商品2 | 200円 |
| 商品3 | 100円 |
| 商品4 | 200円 |
＜良い例＞
| 商品1 | 100円 |
| 商品2 | 200円 |
| 商品3 | 100円 |
| 商品4 | 200円 |
特に複数の表を並べる場合は、全て端を整えるだけで見た目が良くなります。
11. 文字の装飾は最低限にする
文字の装飾は最低限にしましょう。装飾が多すぎると、本当に大切なところはどこか、読者がわかりにくくなってしまうからです。
全部の文に太字を使ったり、色を使ったりするのは逆効果。文章の中で一番伝えたいところに絞って装飾するようにしてあげましょう。
ぜひこの記事を参考に、Webの文章作成にチャレンジしてみてください！
なお、僕のメルマガでは、ネットビジネスに関する情報を発信しています。ブログには書けない情報も公開しており、入退会無料なので、ぜひチェックしてみてくださいね！
