フロントエンド実装
日本語見出しの改行崩れ
— 375pxで1〜2文字だけ落ちる折り返しを、実装で直す
スマートフォンでサイトを開くと、見出しの末尾だけが1〜2文字、ぽつんと次の行に落ちている。あるいは、複合語が途中で切れて読みにくい。パソコンの画面では気づかなかった折り返しの崩れが、幅の狭いスマホでだけ現れることがあります。
この記事では、なぜこの崩れが起きるのかを旧word-break: keep-allとoverflow-wrap: anywhereの組み合わせから振り返り、375pxでの検出方法、text-wrap: balanceとword-break: normalの使い分け、固有名詞だけをNoWrapで守る方法まで整理します。Webサイトの見出しを実装・調整するフロントエンドのITエンジニアや、制作を発注してレビューする立場の方に向けた内容です。
この記事の要点
スマホで見出しの末尾が1〜2文字だけ落ちる・語中で切れる崩れは、「語中で折り返さない」指定と「あふれる時はどこでも折り返す」指定が、狭い幅でぶつかることで起きます。
検出は難しくありません。ビューポートを375pxに固定し、見出しの最後の行を目視するだけです。
当社は、折り返し点を手で固定する方式から、見出しを1つのテキストノードにまとめて
text-wrap: balanceに任せる方式へ移行しました。読みやすさと保守性を目的としたもので、クリック率などの効果は計測していません。
— 01
何が起きているか
崩れは、大きく2つの見え方で現れます。どちらも「読みにくさ」として扱い、ここでは効果の良し悪しではなく、事象そのものを整理します。
- 末尾の孤立行（1〜2文字落ち）：見出しのほとんどが1行に収まっているのに、最後の1〜2文字だけが次の行に取り残される見え方です。行の下端に短い断片がぶら下がり、まとまりが崩れて見えます。
- 語中分断：ひとつながりの語や複合語、サービス名が途中で切れて2行にまたがる見え方です。意味の切れ目ではない位置で折り返るため、一瞬読み取りづらくなります。
いずれもパソコンの広い画面では起きにくく、スマートフォンの狭い幅で顕在化します。見出しは最初に目に入る要素なので、ここが崩れていると内容以前に「作りが粗い」という印象につながりかねません。クリック率や離脱率といった数値への影響は当社では計測しておらず、この記事では断定しません。あくまで「読みやすさを損なう表示の問題」として扱います。
— 02
原因は、2つの指定の競合にある
日本語の見出しでword-break: keep-allを使うと、意味のまとまりを守れるように見えます。しかし長い日本語を不可分にしたまま緊急改行へ逃がすと、かえって不自然な位置で切れることがあります。現在の当社スタイルシートでは、word-break: normalで通常のCJK改行候補を残し、text-wrap: balanceで短い孤立行を抑えます。auto-phraseも実画面比較しましたが、390pxで孤立行が増えたためサイト全体には採用していません。
/* globals.css — 見出しの折り返しルール */
h1, h2, h3 {
text-wrap: balance; /* 1〜2文字の孤立行を抑える */
word-break: normal; /* 未対応ブラウザでは自然なCJK改行へ */
overflow-wrap: break-word;
line-break: strict; /* 約物の行頭落ちを禁止 */
}
/* auto-phrase は実画面A/Bで孤立行が増えたため、サイト全体には適用しない */旧ルールでは、keep-allで通常のCJK改行候補を強く抑えたうえで、anywhereを横はみ出し時の保険にしていました。この組み合わせは、十分な幅では問題が出なくても、見出しが狭いカラムへ入ったときに「通常は折れない → 最後に任意位置で緊急改行」という挙動を作り得ます。
この2つは、通常の幅では問題なく共存します。ところが幅が狭くなり、keep-allによって「不可分」になった文節が、そのままでは1行に収まりきらない状況になると、anywhereの保険が働きます。結果として、本来は語中で切りたくなかった位置に、あふれを避けるための改行（緊急改行）が挿入されます。「語中で折り返さない」という意図が、あふれの局面ではanywhereによって実質的に打ち消される、という関係です。
そのため現在は、見出しも本文もフォールバックをword-break: normalへ戻しています。見出しではさらにtext-wrap: balanceで孤立行を抑えます。ブラウザ依存の文節推定に全体を委ねず、短い固有名詞だけをNoWrapで保護するため、長い文節全体を不可分にはしません。
— 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" />`（例外） | ブランドコピーなど、画面幅より編集意図を優先して改行位置を固定する必要がある場合だけ。 | 通常の見出しには使わず、意味上どうしても固定したい箇所に限定する。レスポンシブ幅ごとの再調整コストを伴う。 |
| 語中改行の保護 `<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へ委ねる方式へ移行しました。さらに2026年9月10日の全体見直しで、見出しのkeep-all + anywhereをやめ、normal＋balanceへ更新しました。auto-phraseも390px実画面で比較しましたが、孤立行を増やしたため全体適用は見送りました。
移行の目的は、見出しの読みやすさと、コピー変更に強い保守性です。クリック率や問い合わせ数といった成果への効果は計測しておらず、そこは断定しません。
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は折り返し位置をブラウザへ委ねます。そこで「Claude Code」「Web3・AI」のように途中で切れると意味が壊れる短い固有語だけはNoWrapで保護し、固定brは表現上どうしても必要な箇所に限定します。通常のコピーは単一テキストノードのまま保つ方が、画面幅や文言変更に強くなります。
この記事の見出しも、同じ方針で実装しています。H1は短い1つのテキストノードにまとめ、各セクションの見出しも手分割せずにtext-wrap: balanceへ委ねています。375pxでの見え方は、公開前に確認しています。
RESEARCH
BtoB企業のWeb営業機会損失調査 2026
国内21社の公開サイトを75項目で外部監査した調査です。判定基準と、実際に観測した状態、修正仕様まで公開しています。
この記事の著者
飯田 友広
代表取締役
Netsujo株式会社 代表取締役。Technical BizDev / AI Deploymentとして、顧客の業務課題、AI適用領域、PoC、実装チームとの要件、本番導入後の評価をつなぐ。京都発のWeb3・AI実装スタートアップを2023年6月に創業。Webサイトを営業基盤として捉え、経営・営業・検索・生成AI・コンバージョン・計測を横断して課題と改善優先順位を整理する「Netsujo SIGNAL」を設計・運営。さらに、ChatGPT・Codex・Claude Codeを状態再構築、競合回避、独立QC、Exact-head検証、停止、復旧まで含む制御ループで運用する社内AI開発基盤「Netsujo Agent OS」を設計・実運転。Netsujoとして京都ビッグデータ活用プラットフォームに参画(小規模企業会員（ベンチャー）)し、同プラットフォーム発のワーキンググループ「Chain Up KYOTO」にも参画(2026年3月10日〜)。IVS2026サイドイベント「なぜ京都でWeb3.0ビジネスなのか」はNetsujoとして京都府庁旧議場で主催・企画・登壇・運営(2026年7月2日／京都府 総合政策環境部 デジタル政策推進課は共催)。京都美術工芸大学・龍谷大学での講義に加え、京都高度技術研究所（ASTEM）、旅館業界、就労支援施設、Open Source Conference等で登壇実績。ITコミュニティ「みやこでIT」(connpassメンバー639名・イベント176件・2019年2月から運営)運営。NPO法人NEMTUS理事、BAR KRYPTO運営。Netsujoはソーシャル企業認証制度「S認証」の認証企業(2026年2月認証・2026年4月公表)。技術領域はWeb3/ブロックチェーン/DID/NFT/生成AI/コミュニティ運営。
プロフィールを見るこの記事が向いている方
スマホで見出しの折り返しが崩れる原因と直し方を知りたいフロントエンドのITエンジニア
Web制作を発注し、見出しの見え方を含めた品質をレビューする立場の方
text-wrap: balance を日本語見出しへ導入するか検討している方
— 壁打ち相談
読者のよくある相談
記事を読んだ後に「自分の状況だとどう判断すべきか」を整理するための壁打ち相談を受け付けています。下記のような相談例が当てはまる方は、お気軽にご連絡ください。
Q. text-wrap: balance を入れれば手動の改行はすべて不要になりますか？
通常の見出しではまず不要です。normal＋balanceへ任せ、固定brはブランドコピーなど改行位置自体に編集意図がある場合だけの例外にします。
Q. word-break: keep-all を外せば崩れは直りますか？
当社では外しました。normal＋balanceを基本にし、短い固有名詞だけNoWrapで保護します。auto-phraseは実画面比較で孤立行が増えたため全体適用していません。
Q. 崩れているかどうかは、どう確認すればよいですか？
ビューポートを375pxに固定し、各見出しの最後の行を目視します。コピーを変えたら再確認する運用にします。
上記いずれかが該当する場合、初回30分の壁打ち相談で論点整理に対応します。記事に書ききれない個別事情を踏まえた判断材料が必要な段階こそ、壁打ちが活きやすいフェーズです。
Web営業基盤｜Netsujo SIGNAL
サイトの実装課題を、直せる状態にする
見出しの折り返しのような表示の問題から、初期HTML・構造化データ・計測設定まで、SIGNALは実装課題を対象URL・変更箇所・完了条件が揃った改善仕様に落とし込みます。無料診断では、公開情報から問い合わせを止めている可能性が高い仮説と最初の修正指示を確認できます。検索順位やAI掲載を保証するものではありません。
