フロントエンド実装
日本語見出しの改行崩れ
— 375pxで1〜2文字だけ落ちる折り返しを、実装で直す
スマートフォンでサイトを開くと、見出しの末尾だけが1〜2文字、ぽつんと次の行に落ちている。あるいは、複合語が途中で切れて読みにくい。パソコンの画面では気づかなかった折り返しの崩れが、幅の狭いスマホでだけ現れることがあります。
この記事では、なぜこの崩れが起きるのかを、CSSのword-break: keep-allとoverflow-wrap: anywhereの競合として整理し、375pxでの検出方法、対処の選択肢、そして当社が手動分割からtext-wrap: balance＋単一テキストノードへ移行した実装記録をまとめます。Webサイトの見出しを実装・調整するフロントエンドのITエンジニアや、制作を発注してレビューする立場の方に向けた内容です。
この記事の要点
スマホで見出しの末尾が1〜2文字だけ落ちる・語中で切れる崩れは、「語中で折り返さない」指定と「あふれる時はどこでも折り返す」指定が、狭い幅でぶつかることで起きます。
検出は難しくありません。ビューポートを375pxに固定し、見出しの最後の行を目視するだけです。
当社は、折り返し点を手で固定する方式から、見出しを1つのテキストノードにまとめて
text-wrap: balanceに任せる方式へ移行しました。読みやすさと保守性を目的としたもので、クリック率などの効果は計測していません。
— 01
何が起きているか
崩れは、大きく2つの見え方で現れます。どちらも「読みにくさ」として扱い、ここでは効果の良し悪しではなく、事象そのものを整理します。
- 末尾の孤立行（1〜2文字落ち）：見出しのほとんどが1行に収まっているのに、最後の1〜2文字だけが次の行に取り残される見え方です。行の下端に短い断片がぶら下がり、まとまりが崩れて見えます。
- 語中分断：ひとつながりの語や複合語、サービス名が途中で切れて2行にまたがる見え方です。意味の切れ目ではない位置で折り返るため、一瞬読み取りづらくなります。
いずれもパソコンの広い画面では起きにくく、スマートフォンの狭い幅で顕在化します。見出しは最初に目に入る要素なので、ここが崩れていると内容以前に「作りが粗い」という印象につながりかねません。クリック率や離脱率といった数値への影響は当社では計測しておらず、この記事では断定しません。あくまで「読みやすさを損なう表示の問題」として扱います。
— 02
原因は、2つの指定の競合にある
日本語の見出しでは、語の途中で改行されないようword-break: keep-allを指定することがあります。当社のスタイルシートでも、見出しには次のルールを置いています。
/* globals.css — 見出しの折り返しルール */
h1, h2, h3 {
text-wrap: balance; /* 1〜2文字の孤立行を防ぐ（行を均等割り） */
word-break: keep-all; /* CJK を語中で折り返さない */
overflow-wrap: anywhere; /* 320px 級の極狭幅での「保険」 */
line-break: strict; /* 約物の行頭落ちを禁止 */
}word-break: keep-allは「CJK（日本語・中国語・韓国語）を単語や文節の境界でだけ折り返し、語の途中では折り返さない」という指定です。一方のoverflow-wrap: anywhereは「他に折り返せる場所がなく、はみ出してしまう時は、どこででも折り返してよい」という指定で、極端に狭い幅（320px級）での横はみ出しを防ぐ保険として置いています。
この2つは、通常の幅では問題なく共存します。ところが幅が狭くなり、keep-allによって「不可分」になった文節が、そのままでは1行に収まりきらない状況になると、anywhereの保険が働きます。結果として、本来は語中で切りたくなかった位置に、あふれを避けるための改行（緊急改行）が挿入されます。「語中で折り返さない」という意図が、あふれの局面ではanywhereによって実質的に打ち消される、という関係です。
当社は過去に、本文（p・li）にもkeep-allを効かせていた時期があり、この時は文節全体が不可分になって狭幅で横にはみ出し、緊急改行による禁則の乱れを起こしていました。そのため本文はword-break: normal（日本語は任意の文字間で自然に折り返す標準の組版）へ戻しています。この経緯は、いまもglobals.cssのコメントとして残しています。見出しは短く、意味のまとまりを保ちたいのでkeep-allを残しつつ、孤立行の抑制は次に述べるtext-wrap: balanceで担わせています。
— 03
375pxで検出する
崩れは特別なツールがなくても見つけられます。狭い幅で目視するのが最も確実です。
- 1ビューポートを375pxに固定して確認する：ブラウザの開発者ツールでデバイス幅を375px（iPhone SE / 主要スマホの狭い側の代表値）に設定し、全見出しをスクロールして目視します。孤立行や語中分断は、この幅で最も出やすくなります。
- 2見出しの「最後の行」に注目する：崩れは末尾に出ます。1〜2文字だけが次の行に取り残されていないか、単語や複合語が途中で切れていないかを、見出しごとに確認します。
- 3実機の最小幅でも一度は見る：開発者ツールの値と実機のレンダリングは、フォントの読み込みや行間でわずかにずれます。公開前に一度は実機の小さい画面で最終確認します。
- 4コピーを変えたら見出しを再確認する：文言が1文字増減するだけで折り返し位置は変わります。見出しのテキストを編集したら、375pxでの見え方をもう一度確認する運用にしておくと、崩れの持ち込みを防げます。
375pxを基準幅にするのは、主要なスマートフォンの狭い側の代表値だからです。ここで崩れがなければ、これより広い幅では概ね問題になりません。見出しごとに最後の行だけを追えばよいので、確認はすぐ終わります。
— 04
対処の選択肢と使い分け
対処はひとつではありません。見出しの性質に応じて、次の3つを使い分けます。
| 方法 | 向いている場面 | 補足 |
|---|---|---|
| text-wrap: balance ＋ 単一テキストノード | 本文コピーが変わり得る通常の見出し。分割点をコードで固定したくない場合。 | 見出しを1つのテキストノードで持ち、折り返しはブラウザに任せる。コピー変更に強い。 |
| 固定改行 `<br className="sm:hidden" />` | 文言が確定していて、モバイルでだけ決め打ちの位置で改行したい見出し。 | スマホ幅（sm未満）でのみ改行を挿入する。意味の切れ目で必ず改行させたいときに使う。 |
| 語中改行の保護 `<NoWrap>` | 「Web3・AI」のように、中黒や約物の境界で途中改行されると意味が壊れる語句。 | 対象の語句だけを whitespace: nowrap で包む。多用すると狭幅で横はみ出しを招くため範囲を絞る。 |
文言が確定していて、モバイルだけ決め打ちの位置で改行したい見出しには、<br className="sm:hidden" />を意味の切れ目に挿入する方法が有効です。当社でも固定見出しではこの手法を使っています。
<h2> 製造業がAI検索に<br className="sm:hidden" />出ない理由 </h2>
一方、「Web3・AI」のように中黒や約物の境界で途中改行されると意味が壊れる語句には、その語句だけを<NoWrap>（whitespace: nowrap）で包みます。ただし、何でも包むと今度は狭幅で横にはみ出すため、「途中で切れると意味が壊れる語句」だけに絞ります。
— 05
手動分割から、単一テキストノードへ
当社のSIGNALのサービスページでは、以前、見出しを語の境界で手分割し、各セグメントを折り返さない要素として並べていました。折り返し点を人の手で固定するやり方です。
// 旧: 語境界で手分割し、各セグメントを nowrap で並べていた // セグメントは折り返し点を固定するため、幅が変わると孤立行が残った h1Segments: ['従来型SEOで', '止まる課題を、', 'コードから直す。'] // 新: 1つのテキストノードにまとめ、折り返しは text-wrap: balance に委ねる h1: '従来型SEOで止まる課題を、コードから直す。'
この手動分割には弱点がありました。分割点が固定されているため、画面幅が変わっても改行位置は同じで、幅によっては結局1〜2文字の孤立行が残ります。さらに、見出しの文言を少し変えるたびにセグメントの切り方を調整し直す必要があり、調整漏れが崩れとして表面化しやすい状態でした。
そこで2026年7月24日の改修で、見出しを1つのテキストノードにまとめ、折り返しはtext-wrap: balanceに委ねる方式へ移行しました。balanceは、行ごとの文字数が均等になるようブラウザが折り返し位置を計算するプロパティで、末尾に1〜2文字だけ落ちる孤立行を抑えるのに向いています。テキストが1つのノードにまとまっていれば、ブラウザはその内容全体を見て、画面幅に応じた最適な折り返しを毎回計算できます。文言を変えても、分割点を手で調整し直す必要はありません。
移行の目的は、見出しの読みやすさと、コピー変更に強い保守性です。クリック率や問い合わせ数といった成果への効果は計測しておらず、そこは断定しません。
text-wrap: balance の対応状況（2026年7月24日 確認）
- 主要ブラウザで対応済みです。Chrome 114以降、Firefox 121以降、Safari 17.5以降で利用できます。ウェブ標準の相互運用状況を示す「Baseline」では、2024年に広く利用可能（Baseline 2024）へ到達しています。
- 機能する行数に上限があります。Chromium系はおよそ6行以下、Firefoxはおよそ10行以下の短いテキストでのみ均等割りが働きます（Safariは行数の上限を設けていません）。見出しは通常1〜3行に収まるため、この上限は問題になりません。
- 未対応の環境では、このプロパティは無視され、通常の折り返しにそのまま戻ります。表示が壊れるのではなく、均等割りが効かないだけなので、段階的な適用（プログレッシブ・エンハンスメント）として安全に導入できます。
上記は2026年7月24日時点で確認した内容です。対応状況は更新され得るため、導入時は最新の情報をご確認ください。
注意点もあります。balanceは折り返し位置をブラウザに任せるため、「必ずここで改行する」という決め打ちはできません。意味の切れ目で確実に改行させたい固定見出しには、前述の<br className="sm:hidden" />を併用します。balanceは「均等割りで孤立行を減らす」ための道具、固定改行は「意図した位置で切る」ための道具と、役割で使い分けるのが実務的です。
この記事の見出しも、同じ方針で実装しています。H1は短い1つのテキストノードにまとめ、各セクションの見出しも手分割せずにtext-wrap: balanceへ委ねています。375pxでの見え方は、公開前に確認しています。
この記事の著者
飯田 友広
代表取締役
Netsujo株式会社 代表取締役。京都発のWeb3・AI実装スタートアップを2023年6月に創業。Webサイトを営業基盤として捉え、経営・営業・検索・生成AI・コンバージョン・計測を横断して課題と改善優先順位を整理する「Netsujo SIGNAL」を設計・運営。京都ビッグデータ活用プラットフォーム参画(小規模企業会員・ベンチャー)、同プラットフォーム発のワーキンググループ「Chain Up KYOTO」参画(2026-03-10)、IVS2026サイドイベント「なぜ京都でWeb3.0ビジネスなのか」を京都府庁旧議場で開催(2026-07-02・Netsujoとして主催、企画・登壇・運営／京都府デジタル政策推進課は共催)。京都美術工芸大学での講義・龍谷大学でのセミナー実績、ITコミュニティ「みやこでIT」(connpassメンバー609名・イベント162回以上・2019年2月から運営)運営。NPO法人NEMTUS理事、BAR KRYPTO運営。ソーシャル企業認証「S認証」認証企業(2026年2月認証・2026年4月公表)。技術領域はWeb3/ブロックチェーン/DID/NFT/生成AI/コミュニティ運営。
プロフィールを見るこの記事が向いている方
スマホで見出しの折り返しが崩れる原因と直し方を知りたいフロントエンドのITエンジニア
Web制作を発注し、見出しの見え方を含めた品質をレビューする立場の方
text-wrap: balance を日本語見出しへ導入するか検討している方
— 壁打ち相談
読者のよくある相談
記事を読んだ後に「自分の状況だとどう判断すべきか」を整理するための壁打ち相談を受け付けています。下記のような相談例が当てはまる方は、お気軽にご連絡ください。
Q. text-wrap: balance を入れれば手動の改行はすべて不要になりますか？
孤立行の抑制には有効ですが、意味の切れ目で確実に改行させたい固定見出しには <br className="sm:hidden" /> を併用します。役割で使い分けます。
Q. word-break: keep-all を外せば崩れは直りますか？
keep-all を外すと語中でも折り返せてしまい、別の読みにくさが出ます。見出しは keep-all を残し、孤立行は balance で抑えるのが当社の方針です。
Q. 崩れているかどうかは、どう確認すればよいですか？
ビューポートを375pxに固定し、各見出しの最後の行を目視します。コピーを変えたら再確認する運用にします。
上記いずれかが該当する場合、初回30分の壁打ち相談で論点整理に対応します。記事に書ききれない個別事情を踏まえた判断材料が必要な段階こそ、壁打ちが活きやすいフェーズです。
Web営業基盤｜Netsujo SIGNAL
サイトの実装課題を、直せる状態にする
見出しの折り返しのような表示の問題から、初期HTML・構造化データ・計測設定まで、SIGNALは実装課題を対象URL・変更箇所・完了条件が揃った改善仕様に落とし込みます。無料スキャン・診断で現状の最優先課題3件を確認できます。検索順位やAI掲載を保証するものではありません。