日本語Webの「孤立文字」と不自然な改行をCSSだけで直す（text-wrap / word-break: auto-phrase）

1. 何が起きていたか

日本語のWebページでは、放っておくと次のような読みにくい折り返しが起こります。

• 孤立文字: 「〜しっかり押さえて」で改行され、次の行に「ね。」の2文字だけが残る。
• 単語の途中改行: 見出しの「オペレーション」が「オペレー」と「ション」に分かれてしまう。

どちらも「横幅には余裕があるのに、読み手の意味の区切りを無視して改行されている」状態です。まずはこれをCSSのプロパティで整えていきます。

2. まずは text-wrap：pretty と balance の違い

改行の「行の分け方」を制御するのが text-wrap です。日本語で使うなら、この2つの挙動の違いを押さえるのが出発点になります。

/* 本文はこれだけで、孤立した最終行を避けやすくなる */
body {
  text-wrap: pretty;
}

一見すると「見出しは balance で揃えると綺麗」と言われがちですが、ここに落とし穴がありました。

3. balance の落とし穴

balance は行長を均等化するのが仕事なので、1行に収まる（あるいは1行目を使い切れる）テキストでも、わざわざ2等分に折り返してしまうことがあります。

たとえば「プロジェクトとオペレーションの違い」という見出しが、横幅に余裕があるのに「プロジェクトとオペレー」「ションの違い」のように、中途半端かつ単語の途中で割れてしまう、という具合です。「整える」はずの機能が、逆に読みにくさを生んでしまいました。

balance適用により1行に収まる幅でも不自然に2行に折れてしまった見出しの例

そこでこのサイトでは、見出しも含めて text-wrap: pretty に統一し、balance は使わない方針にしました。

4. 【重要】pretty だけでは「単語の途中改行」は防げない

ここが日本語特有の、そして一番大事なポイントです。

text-wrap: pretty が制御するのは「行の分け方」であって、「どこで改行してよいか」ではありません。そして日本語（CJK）は、デフォルトでは文字と文字の間ならどこでも改行が許される言語です。

つまり pretty を指定しても、見出しが長ければ「オペレー／ション」のような単語の途中改行は依然として起こり得ます。これを構造的に防ぐには、別のプロパティが必要でした。

5. word-break：auto-phrase で「文節」で改行する

その答えが word-break: auto-phrase です。これは文節（意味のかたまり）の区切りでしか改行しないようにするプロパティで、日本語を機械学習で解析して自然な改行位置を選んでくれます。

/* 日本語の見出しは文節区切りで改行する */
@supports (word-break: auto-phrase) {
  :lang(ja) h1,
  :lang(ja) h2,
  :lang(ja) h3,
  :lang(ja) h4 {
    word-break: auto-phrase;
  }
}

text-wrap: pretty（1行目を使い切る）と word-break: auto-phrase（単語を割らない）を組み合わせることで、「行はできるだけ長く使いつつ、意味の切れ目で自然に折り返す」という理想的な挙動になります。

@supports で囲っているのは、未対応ブラウザで安全に無視させるためです。対応していないブラウザでは従来どおりの折り返しになるだけなので、害はありません（段階的に導入できます）。

6. 「BudouX」を入れなくていい理由

日本語の改行を賢くするツールとして、Google製の BudouX というライブラリが知られています。文節を解析して <wbr>（改行してよい位置）を自動挿入してくれるものです。

とても便利ですが、このサイトではあえて導入していません。理由はシンプルで、同じ機能が word-break: auto-phrase としてブラウザに標準搭載されているからです。中身はBudouXと同じ仕組みです。

ライブラリを足すと、JavaScriptへの依存、静的サイト生成（SSG）時のhydrationのずれ、依存パッケージの継続的な保守、といったコストが発生します。CSS一行で同じ結果が得られるなら、そちらのほうが軽くて壊れにくい、という判断です。

7. 仕上げのポイント

最後に、崩れを防ぐための注意点をいくつか。

• 本文の行長（measure）を広げすぎない: 読みやすさの土台として意外と効きます。1行が長すぎると視線が迷子になるので、本文カラムは適度な幅（max-width）に抑えるのがおすすめです。
• 手動改行（<br>）は本文で乱用しない: <br> は画面幅に関係なく固定で改行してしまうため、スマホでレイアウトが崩れる原因になります。長文はブラウザの自動折り返しに任せましょう。ヒーローの短いキャッチコピーなど、どの幅でも安全な位置に限って使うのが無難です。

8. AIとの共同開発で得たノウハウとガードレール

今回の改行ルールの策定は、AIアシスタントとのペアプログラミング（Vibe Coding）の過程で、数々の試行錯誤とデグレーションを経て辿り着いたものです。その中で得られた実務的な知見をまとめます。

① 「便利そうなCSS」の落とし穴は人間が気づく

当初、AIによって「見出しを整えるため」に text-wrap: balance が一律で導入されました。しかし、これによりカタカナ語が単語の途中でぶった切られるという深刻な可読性低下（デグレ）が発生しました。 AIは「仕様通りに適用する」ことは得意ですが、それが日本語として「人間目線で不自然かどうか」の最終判断は人間にしかできません。不自然な改行を見つけた際は、すぐにルールを巻き戻し、pretty一本化に倒す決断が重要です。

② 自動（auto-phrase）の限界と手動（br）の棲み分け

word-break: auto-phrase は非常に強力ですが、画面幅によっては「最初に / しっかり」のように、文脈上不自然な文節間で改行が発生してしまう幅がどうしても存在します。

自動改行（auto-phrase）によって「最初に」の後で不自然に折り返してしまった吹き出しの失敗例

このように、自動改行を過信しすぎると不自然な折り返しをガードできません。そのため、キャラクターの吹き出しのような「絶対に読ませたい短文UI」では、自動改行のみに頼らず、人間が目視して意味の切れ目に明示的に <br />（またはHTMLの<br>）を入れて改行位置を固定するのが最適解です。

一方で、画面サイズが多様な長文の本文では、スマホ表示等での崩れを防ぐために自動折り返し（pretty）に任せる、という「自動と手動の棲み分け」を明確にしました。

③ ガードレール（開発・執筆ルール）の明文化がAIを育てる

合意したルールをただコードに反映するだけでなく、rules.md（開発規約）や content-guidelines.md（執筆マニュアル）などのドキュメントへ即座に明文化しました。 これにより、次回のセッションで別のAIエージェントが作業を引き継いだ際にも、このルールが「AIに対する指示書（ガードレール）」として働き、同じ改行ミスや不要なライブラリ導入を未然に防ぐことができます。AIとの対話の成果はドキュメント化して蓄積することこそが、中長期的な開発効率を高めるノウハウです。

まとめ：コピペ用の最小構成

最終的に、このサイトで採用しているルールはこれだけです。

/* 本文・見出しとも、孤立文字を避けつつ行を使い切る */
body {
  text-wrap: pretty;
}

/* 日本語の見出しは単語を割らず、文節で改行する */
@supports (word-break: auto-phrase) {
  :lang(ja) h1,
  :lang(ja) h2,
  :lang(ja) h3,
  :lang(ja) h4 {
    word-break: auto-phrase;
  }
}

ポイントは、「pretty で行を使い切る」＋「auto-phrase で単語を割らない」の合わせ技だよ。
CSSだけ・数行で日本語がぐっと読みやすくなるから、ぜひ試してみてね！