こんな方に読んで欲しい！
- 文章デザインという言葉を初めて聞いたので、詳しく知りたい！
- 読みやすい文章デザインを知りたい！
- 文字フォントやサイズ、行間などの推奨値を知りたい！
「文章デザイン」を意識していますか？
コンテンツ（記事）の内容がどんなに良くても、「文章デザイン」が良くないと読みにくくて、最後まで読んでくれません。
今回は、読みやすい文章の設定方法を徹底解説します！
＼記事を読む前にクリックで応援してください！／
もくじ
1. 文章デザインは、内容と同じくらい大事
コンテンツ（記事）の内容が良ければ、「みんなに読んでもらえるし、Googleも評価してくれる！」と思っていませんか？
読者がコンテンツ（記事）をしっかり読んでくれるかどうかは、その「内容」はもちろん「文章デザイン」にも大きく影響されます。
文章デザインは、以下のような項目で構成されます。
- 読みやすい文字フォント
- 文字サイズ（フォントサイズ）
- 行間
- 字間
- 行の長さ
- 文字位置
- 文字装飾
それぞれ「読みやすくするための推奨値」がありますので、見ていきましょう！
1-1. 読みやすい文字フォント
日本語のフォントは大きく分けて、「明朝体」と「ゴシック体」の2種類があります。
「明朝体」と「ゴシック体」
ゴシック体：
視認性が高く、人目を引きやすいフォントです。短くメッセージを伝えるのに向いているので道路標識や看板などに多いです。
明朝体：
可読性、つまり「読み取りやすい」文字とされています。長文に向いているので書籍や新聞で多く用いられています。藤沢周平や谷川俊太郎など、作家のために明朝体系の専用フォントが作られることも。凄いですね！
結論から言えば、Webコンテンツ（記事）はゴシック体がおすすめです。
ここがポイント！
インターネットビジネスラボでは、「Hiragino Kaku Gothic ProN（ヒラギノ角ゴシックProN）」が使われています。
インターネット黎明期、明朝体は環境によって表示に不具合が出やすかった歴史があります。
そのため、長らくWebコンテンツ（記事）ではゴシック体が多く使われていました。
その名残で多くの人は馴染みが深いのはゴシック体であり、明朝体には違和感を受ける場合があります。
今後は変わってくるかもしれませんが、現時点ではこだわりがないのならばゴシック体を選択するのが無難です。
普段から意識している人は少ないかもしれませんが、主要なSNSは全てゴシック体ですね。
1-2. 文字サイズ（フォントサイズ）
文字サイズについて、Googleはを16px、iosは11pt（14.6px）を推奨しています。
14px～16pxは幅広い層が「読みやすい」と感じるサイズです。
これより小さいと、表示を拡大する人が増えます。また、途中で読むのをやめる人も出てきます。
逆に極端に大きい文字は、１行に入る文字数が減るためスクロールする回数が増え、やはり途中で読むのを止める人が多くなります。
ここがポイント！
インターネットビジネスラボでは、 フォントサイズを16pxに設定しています。
1-3. 行間
行間とは、行と行の間隔です。
今、あなたが読んでいるこの行と、次の行（１つ下の行）との間隔のことです。
行間が狭いと読みにくく、目で追うことに一生懸命になり内容が頭に入ってきません。
行間が空きすぎると「スクロールが面倒くさい」状態になります。
行間は、文字サイズの50％～100％程度（0.5文字～1文字分）がおすすめです。
例えば、文字サイズが15pxだったら、行間は8px～15pxがちょうど良い行間となります。
ここに注意！
CSSで行間を調整する際、{ line-height : 値 } で指定しますが、実は「行間」ではなく「行高（行の高さ）」を指定しています。
フォントサイズが16pxで、line-height を16pxにすると、行間は0pxになります。
フォントサイズが16pxで、line-height を32pxにすると、文字の上下に8pxずつ間隔ができますので、次の行との間には8px×2＝16pxの行間ができます。
ちょっとややこしいですね。指定し間違えないように注意してください。
ここがポイント！
インターネットビジネスラボでは、 line-height は31pxに設定されています。
1-4. 字間
字間は文字と文字の間隔を意味します。これも「読みやすい間隔」「読みにくい間隔」があります。
字間を設定するのであれば、文字サイズの5％～10％がおすすめです。
ただし、文字によって横幅が異なるので、一律に〇％と設定すると字間がバラバラに見えてしまう場合もあります。
そんな時に便利なのが「カーニング」。
自動的に調整して均一な字間に見せることができます。
CSS
.xxx {
font-feature-settings: "palt";
}
※「.xxx」は、適宜変えてください。
1-5. 行の長さ
あなたのWebサイト（ブログ）は、１行に何文字が表示されますか？
１行が長すぎると、目線を動かす距離が長くなります。
目線だけでは足りない場合は、首を動かすことになります。
右端から左端に移動する際、次の行の先頭を見失う可能性もあります。
つまり、距離が長くなれば長くなるほど読みにくく、疲れやすくなります。
一方で、１行が短すぎると文章がぶつ切りになり、書かれている内容が頭に入ってきにくくなります。
フォントサイズにもよりますが、パソコンの場合は１行に25～40字が良いとされています。
ここがポイント！
インターネットビジネスラボでは、1行に42文字程度、表示されます。ちょっと多いですね。。。
1-6. 文字位置
見出しは、デザインによって中央寄せや右寄せもあります。
ただ、コンテンツ（記事）の本文は、左寄せが基本です。
左寄せ
吾輩は猫である。名前はまだない。
どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。
中央寄せ
吾輩は猫である。名前はまだない。
どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。
右寄せ
吾輩は猫である。名前はまだない。
どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。
広告など目立たせたい場合は中央寄せを使うこともあります。。
しかし、ブログはやはり左寄せが読みやすいですよね。
読み慣れた文章の形が好ましいと考えてください。
1-7. 文字装飾
文字装飾とは、以下のようなものです。
フォントの太さを変更しました。
フォントの色を変更しました。
文字の下に線を引きました。
文字に黄色マーカーを引きました。
背景に色を付けました。
文字を枠で囲みました。
などです。
また、これらを組み合わせ、デザインを入れると、
ここがポイント！
こんな感じの文字装飾もできますね。
ずぅーーーーっと、装飾のない文字・文章が続くと、やはり読みにくくなります。
しかし、多すぎる文字装飾は読みにくい文章となる原因の１つです。
上の文章は読みにくいですよね。何が大事なことなのか、何が１番伝えたいことなのかがわかりません。
文字装飾は、あなたのルールを決めましょう。
例えばインターネットビジネスラボでは、
強調したい文章は、黄色マーカーを引きます。
強調したい言葉は、赤太文字にします。
ここがポイント！
補足や注意事項などは、囲み装飾を使っています。例えば「ポイント」はこの装飾です。
ルールを決めることで、あなたが読者に伝えたい事が明確になります。
さらに、継続的な読者はもちろん、初めて読んだ人にとっても読みやすいコンテンツ（記事）になります。
3. まとめ：文章デザインを決め、読みやすいコンテンツ（記事）に！
Webサイト（ブログ）で最も大事なのは、そのコンテンツ（記事）の中身です。
読者にとって意味のある、読者が本当に求めるコンテンツ（記事）であることが１番です。
文章デザインは、その次です。２番手です。
どんなに良いコンテンツ（記事）も、デザイン次第で読まれないものになってしまうからです。
- 読みやすい文字フォント
- 文字サイズ（フォントサイズ）
- 行間
- 字間
- 行の長さ
- 文字位置
- 文字装飾
今日の記事では、この7つの設定について解説しました。
具体的な設定値も書いていますので、あなたのブログと見比べてみてください！