① まず結論
読みやすい改行は「どこでも自由に折れる」状態ではなく、「折れていい場所だけが増えている」状態のことです。CSSでなんとなく整えるのではなく、読み手が音読したときに息継ぎする場所と一致するように、折りたい場所と折りたくない場所を意識的に分けて設計します。
② たとえ話
文章を朗読する人をイメージするとわかりやすいです。
朗読者は、句読点や意味のかたまりで一呼吸置きます。読点「、」の前後で息継ぎするのは自然ですが、語の途中で息を切ると不自然に聞こえます。
改行も同じで、「、」の後・語句の境界・節のあいだなど、読み手の頭が一拍置く場所で折るのが自然です。「デジタルエクスペリエンスプラットフォー / ム」のように1文字だけ残ると、息継ぎとしても見た目としても不自然になります。
ただし Web では画面幅が読者の端末ごとに変わるので、改行を全部手で決めることはできません。「折れてよい場所」と「折れてほしくない場所」を HTML と CSS でブラウザに教えて、自動の折り返しを助ける、という考え方になります。
改行は息継ぎ。語のまんなかで息は止めない。
③ 図解で見る
やりがちな悪い改行と、読みやすい改行の対比。「/」は改行位置を示しています。
| シーン | 悪い改行 | 読みやすい改行 |
|---|---|---|
| 長いカタカナ | デジタルエクスペリエンスプラットフォー / ムを導入 | デジタルエクスペリエンス / プラットフォームを導入 |
| 読点の位置 | 今日は晴れていて気持ちがいい / 、ピクニックに行こう | 今日は晴れていて気持ちがいい、 / ピクニックに行こう |
| 助詞の孤立 | 日本 / の技術力で世界を変える | 日本の技術力で / 世界を変える |
| 英単語の途中切れ | 予算は extraord / inary なほど膨れ上がった | 予算は / extraordinary なほど膨れ上がった |
ブラウザは自動で折り返しますが、上のような失敗は CSS と HTML の補助で減らせます。
④ よくある失敗
「、」「。」が行頭に来ている
句読点は、できるだけ前の行末に収めるのが日本語組版の基本です。まず lang="ja" を指定し、CJK の禁則処理に関わる line-break: strict を入れます。さらに対応ブラウザでは word-break: auto-phrase によって、文節の途中で折れにくくなる場合があります。ただしブラウザ差があるため、重要な見出しや固有名詞は CSS 任せにせず、wbr や nowrap で個別に補助します。
固有名詞・サービス名が途中で切れる
「文字選びの標本 / 室」のようにブランド名が割れると、認識のスピードが落ちます。短い固有名詞や重要なコピーは、span タグで囲って white-space: nowrap を当てると途中で折れにくくできます。ただし長すぎる語句に使うとはみ出しの原因になるため、適用範囲は短い名前に限定するのが安全です。
助詞だけが取り残される
「日本 / の技術」のように、「の」「は」「を」だけが先頭に残る改行は、読み手の頭で一拍引っかかります。対応ブラウザでは word-break: auto-phrase が文節境界での改行を助けてくれますが、すべての環境で同じように効くわけではないので、重要な見出しは wbr で折ってよい場所を明示しておくと安全です。
word-break: break-all で全部解決しようとする
長い文字列がはみ出すからといって、全体に word-break: break-all を当てると、英単語や固有名詞が不自然な場所で切れやすくなります。本文はまず word-break: normal を基本にし、必要に応じて line-break: strict、overflow-wrap: anywhere、wbr、nowrap を使い分ける方が安全です。
⑤ 実務ではこう判断する
「自動に任せる場所」と「手で整える場所」を分ける
本文・FAQ・ニュース一覧のような長い文章は、基本的にブラウザの自動改行に任せます。一方で、ファーストビューの見出し、ブランド名、料金表の見出し、CTAまわりの短いコピーは、改行位置が印象に直結するため個別に調整します。すべて同じ厳しさで整えるのではなく、文脈ごとに分けると作業量も品質も安定します。
折りたくない場所と折ってよい場所をHTMLで教える
途中で割りたくない短い固有名詞は、span タグで囲って white-space: nowrap を当てます。逆に「ここなら折れてもよい」という場所には wbr を入れます。wbr は br と違って、必要なときだけ改行候補になります。画面幅が足りているときは何も起きないので、長いカタカナ語や英数字の保険として使いやすいです。
CSSは「禁則」「見栄え」「緊急回避」に分けて考える
日本語の句読点まわりは line-break: strict。対応ブラウザで文節の途中折れを減らしたい場合は word-break: auto-phrase。どうしても長い URL や英数字がはみ出す場合は overflow-wrap: anywhere。さらに本文には text-wrap: pretty、短い見出しには text-wrap: balance を段階的に使うと、対応ブラウザでは不自然な折り返しを減らせます。balance は短いブロック向けで、長い本文全体には使いません。
英単語が混ざる本文では、必要に応じて lang="en" を付ける
長い英単語は、その部分を span で囲って lang="en" を指定し、:lang(en) { hyphens: auto } を当てると、対応ブラウザでは英語のルールに沿ってハイフン折りされます。ただし、ブランド名やサービス名はハイフンで割らず、nowrap や wbr で見た目を調整する方が自然な場合もあります。
⑥ 用語メモ
- 行頭禁則
- 行のあたまに来てはいけない約物のこと。「、」「。」「）」「」」など。日本語組版の基本ルール。
- 行末禁則
- 行のおしりに来てはいけない約物のこと。「（」「「」など、次に続くべき記号。
- wbr タグ
- 「ここで折ってもよい」を意味するHTMLタグ。折る必要がなければ何も起きないので、長いカタカナや固有名詞の保険として使える。
- text-wrap: balance
- 短い見出しの行幅を自動でならして読みやすくする CSS。短いブロック向けで、長い本文全体には使わない。対応ブラウザのみ効くプログレッシブな機能。
- text-wrap: pretty
- 本文の改行をきれいに揃え、最後の行が1文字にならないように調整する CSS。
- overflow-wrap
- 長い URL や英数字の連続など、通常の改行位置では収まらない文字列をどう折るかを指定する CSS。anywhere は、はみ出しを防ぐための保険として使える。
- white-space: nowrap
- 指定した範囲内で改行させない CSS。短い固有名詞やブランド名を途中で割りたくないときに使う。ただし長い語句に使うとはみ出しの原因になる。
⑦ 学習後のチェック
- 「、」「。」が行頭に来ていない
- 固有名詞・サービス名が途中で切れていない
- 助詞（の・は・を）だけが取り残されていない
- 「自動に任せる場所」と「手で整える場所」を分けて設計している
- 重要な見出しには nowrap や wbr で改行ヒントを入れている
- word-break: break-all を雑に使っていない
関連フォント