この記事はブログやオウンドメディアの運営者に向けて記事を読みやすくするためにアドバイスしていることや、Webサイトの運用マニュアルに記載している内容から部分的に抜粋してまとめたものです。読者に記事を読んでいただくにあたって、できるだけ読みやすくなるように意識しているルールです。

※一部WordPressについての記述もありますが、CMSはWordPressに限らず普遍的に活用できるルールだと考えています。

強制改行をしない

記事内の文節では、複数デバイスで安定して表示されるように基本的に強制改行（一般的にはShiftキー + Enterキーによる改行）は使用しないことをおすすめします。なぜなら強制改行をした場合は、PCでの閲覧時には読みやすくてもスマートフォンでは読みにくいという状態が起こりうるためです。

「強制改行をしないと1行あたりの文字量が多くて読みにくい」という場合は、そもそもコンテンツ幅や文字サイズのデザインに根本的な問題がある可能性が高いです。その場合はコンテンツ幅や文字サイズを含めて、全体的な再設計を検討する必要があるかもしれません。

参考記事：読みやすさのためのタイポグラフィとデザインルール設計について

文節ごとに改段落する（区切る）

1文節が160文字（5行以上）になる場合は文節を区切って改段落（強制改行ではなくEnterキーによるブロック改行）することをおすすめします。理由はスクリーンデバイスで読む文章は流し読みされることが多く、短文から拾い読みしやすくなる場面も含めてメリットが多いと考えるためです。

スクリーンデバイスで読む文章は、紙に印刷された文章よりも読者の集中力を要すると考えています。そのため読者の集中力をなるべく保ち、疲れないように配慮したいです。ケースバイケースではありますが、1文節が長文になるよりも適度に区切ってある文章のほうが読み進めやすいのではないでしょうか。

改段落を入れることでユーザーがスクロールする量は増えますが、文章の読みやすさを優先して改段落する（余白を広げる）ほうが、結果的にユーザーへの負担が少なく、読みやすい記事になる場合が多いと判断しています。

空白行は使用しない

空白行が多用されていると余白のルールが崩れて読むためのリズムが保ちにくいため、避けたほうが良いです。まずは見出しブロックや文章ブロックに適切に余白をデザインして、CSSで一括調整をかけることをおすすめします。

その上でどうしても意図的な余白が必要になった場合にのみ、限定的に空白行を入れる程度にとどめたほうが読者にとって読みやすい文章となります。

画像要素には横幅や縦幅を指定しない

PC、スマートフォン、タブレットなど、複数のデバイスで見たときにそれぞれの画面サイズ（解像度）で最適に見えるように、画像はコンテンツ幅いっぱいに表示されるようにあらかじめCSSで設定しておくことをおすすめします。

具体的には、記事の画像ブロック（記事内のimg要素）に対してmax-width: 100%;と指定しておくと良いでしょう。max-width: 100%;を指定すると、以下の挙動になります。

• 画像の横幅がコンテンツ幅より大きい場合は、コンテンツ幅いっぱいまで広がる。
• 画像の横幅がコンテンツ幅より小さい場合は、画像自体の横幅まで広がる。
• ゆえに画像本来の大きさ以上に拡大されたり、拡大されることによる画質の劣化はない。

max-width: 100%;とよく似たCSSの指定でwidth: 100%;という指定方法がありますが、この場合は画像自体がコンテンツ幅より小さい場合でも強制的に大きく表示してしまいます。

width: 100%;では強制的に画像を拡大されることで、元の画像が小さい場合に画質が劣化した状態で表示されるため、避けたほうが良いです。

文字に独自の色（有彩色）をつけない

記事ごとの統一感を保つために、文字に独自の色をつけないことを強く推奨します。有彩色はリンクテキストに限定するのが望ましいです。特に複数人で1つのブログやメディアサイトを運営するときには、記事ごとに書き手の特長が出やすくなります。

その状況で統一感を高めるために、文章中で使用する文字色はあらかじめ決められたものに限定したほうが良いです。「特定のキーワードを目立たせたい」場合は太字が使用できます。まずは色以外の方法で文章に強弱をつける方法を検討しましょう。

また見出しを適切に使うことで文章の階層構造を保つことができるので、色を使う必然性は低いはずです。装飾要素が少ない記事は読者がコンテンツに集中しやすくなり、結果的に読みやすくなります。

画像は適切な大きさに調整する

記事内に掲載する画像は適切な大きさに調整することで見たときの印象が良くなり、読み込み時間の短縮やデータ量の圧縮にもつながります。1つの目安としては、高解像度ディスプレイ用の表示も考慮して、コンテンツ幅の1.5倍〜2倍程度の画像サイズが良いと考えています。

WordPressの場合は事前に設定しておくことで、高解像度の画像をアップロードした際に指定サイズの画像を生成してくれます。そのため大きめの画像をアップロードしておき、コンテンツ幅にあわせてちょうど良いサイズを選ぶと良いでしょう。

※画像を適切に圧縮した場合、解像度は大きいままデータ容量を減らせる場合もあります。自分の場合はPngyuやJPEGmini、ImageOptimなどの画像圧縮アプリを使って画像を圧縮することが多いです。

和欧混植の文章の場合は、かっこ「（）」の表記は全角とする。

和欧混植（日本語と英語などが混ざった）文章の場合は、かっこはベースラインをそろえるために半角ではなく全角（）で統一したほうが整って見えます。欧文（英語）のみで文章が完結している場合や、表組みや図などで限定的に使用しているなど、半角で表記したほうが良い場合もあります。

時間を表記する時の文字としてコロン「：」使う場合は、半角英数を使う

時間表記は全て半角で表記したほうがバランスが良いです。

• 良くない例：12：50
• 良い例：12:50

別ウィンドウ（別タブ）でリンク先のページを開く場合はアイコンも表示する

外部サイトへのリンクテキストが必要になる際、別ウィンドウ（別タブ）でページを開く場合にはアイコン表示されるようにしておくとわかりやすいです。CSSであらかじめ一括指定しておき、自動で反映されるようにしておくと便利です。

• 例：スプラトゥーン2

最後に

以上は記事を読みやすくするためのルールの一部です。実際にはより多く気をつけたほうが良いポイントはありますが、まずは以上のルールを自然に運用できるようになると、ブログやオウンドメディア全体の基本的な読みやすさが維持できているのではないかと思います。読みやすい文章のための役に立てたら幸いです。