スマホで​日本語が​変な​ところで​改行される​問題の​直し方

なぜ、​変な​ところで​改行されるのか

英語は、​単語と​単語の​間に​空白が​あるので、​ブラウザは​空白の​位置で​行を​折り返します。​日本語には​空白が​ないので、​ブラウザは​基本的に​「どの​文字の​間でも​折り返して​よい」と​扱います。

その​結果、​画面の​幅に​よっては、​次のような​折り返しが​起きます。

• 「立ってきま」で​改行され、​「した」だけが​次の​行に​残る
• 「見出」で​改行され、​「し」が​次の​行の​頭に​来る
• 見出しの​最後の​1〜2文字だけが、​次の​行に​ぽつんと​残る

パソコンの​広い​画面では​気に​ならなくても、​幅の​狭い​スマホでは​目立ちます。​読みにくいだけでなく、​雑に​作られた​サイトという​印象を​与えてしまいます。

直し方の​基本：文節で​改行させる

日本語を​読みやすく​折り返すには、​「文節」の​区切りで​改行させます。​文節とは、​「今日は」​「天気が」​「いい」のように、​意味が​切れない​最小の​まとまりです。

やり方は、​次の​2つの​組み合わせです。

1. 文節の​区切りに、​目に​見えない​改行の​目印を​入れる。 ​「ゼロ幅スペース」と​呼ばれる、​幅のない​文字を​区切りの​位置に​入れます
2. それ以外の​場所では​折り返さない、と​指定する。 CSSで​ word-break: keep-all を​指定すると、​目印のない​場所では​日本語を​折り返さなくなります

文節の​区切りを​手作業で​見つけるのは​大変なので、​機械で​区切る​道具を​使います。​Googleが​公開している​「BudouX」は、​日本語の​文章を​文節に​区切る​ための​オープンソースの​道具です​（GitHub：google/budoux）。​私たちの​サイトも、​この​「BudouXで​目印を​入れる​＋word-break: keep-all」の​組み合わせで​表示しています。

新しい​指定は、​使える​ブラウザを​確かめてから

CSSには、​ブラウザ自身に​文節で​折り返させる​ word-break: auto-phrase という​新しい​指定も​あります。​1行書くだけなので​手軽ですが、​対応している​ブラウザが​限られます。

私たちが​自社サイトの​文章を​直した​ときに​確かめた​範囲では、​Chromeや​Edgeでは​効きましたが、​iPhoneの​Safariでは​効かず、​「立ってきま」と​「した」の​間のように、​1文字単位で​折り返されていました。​お客様の​多くは​スマホで、​しかも​iPhoneで​見ます。​新しい​指定に​頼るなら、​Safariでの​見え方を​必ず​確かめます。​私たちは、​どの​ブラウザでも​同じように​効く​「目印＋keep-⁠all」の​方法を​選びました。

行末に​1〜2文字だけ​残るのを​防ぐ

段落や​見出しの​最後の​行に、​1〜2文字だけが​残るのも​読みにくさの​原因です。​CSSの​ text-wrap: pretty を​指定すると、​ブラウザが​段落の​最後の​行が​短くなりすぎないように​調整してくれます。​見出しには、​行の​長さを​均等に​近づける​ text-wrap: balance も​使えます。

どちらも、​対応していない​ブラウザでは​単に​無視されるだけなので、​入れておいて損は​ありません。

目印を​入れても、​記号や​数字の​まわりは​崩れる​ことがある

文節の​目印と​ keep-all で、​文字と​文字の​間の​変な​改行は​ほぼなくなります。​ただ、​それで​全部が​直るわけではありません。​「％」や​単位の​記号、​ハイフンなどの​前後は、​ブラウザが​折り返して​よい​位置として​扱うことが​あり、​文節の​目印とは​関係なく​改行される​ことがあります。

私たちが​自社サイトで​実際に​見つけて​直した​例

2026年10月1日から​2日に​かけて、​自社サイトの​記事を​点検した​ところ、​次の​崩れが​見つかりました​（表の​「｜」が​改行された​位置です）。

直し方は​2通りでした。​何度も​出てくる​形​（​「％」や、​ハイフンで​つないだ英語名）は、​目印を​入れる​処理に​規則として​足し、​全ページに​効かせました。​記号の​使い方​その​ものに​無理が​ある​箇所は、​原稿の​表記を​言い​換えました。

自社の​サイトで、​まず​見る​場所

同じ​崩れは、​どの​サイトでも​起きる​可能性が​あります。​スマホで、​次の​箇所を​重点的に​見てください。

1. 「％」や​「円」の​すぐ​後ろに​文字が​続く​文
2. 「㎡」のような​単位の​記号や、​「×」​「÷」を​使った​文
3. ハイフンで​つないだ英語の​名前や​商品名
4. 見出しと​表の​中​（幅が​狭く、​崩れが​目立つ）

パソコンの​Chromeなら、​開発者ツールの​「デバイスの​ツールバー」で​画面の​幅を​スマホと​同じに​して、​同じ​箇所を​確かめられます。

直したら、​必ず​画面で​確かめる

改行の​調整は、​入れて​終わりに​しない​ことが​大切です。​私たちは、​次の​2つを​確かめる​仕組みを​作りました。

• 行の​途中で​切れていないか。 スマホの​幅​（390ピクセル）と​パソコンの​幅​（1280ピクセル）で、​文節の​途中の​改行、​行末に​1〜2字だけ残る​行、​画面の​横へのは​み出しの​3つを、​自動で​数える
• 文章​その​ものが​変わっていないか。 目印を​入れる​処理の​あとで、​元の​原稿の​文が​1文ずつ、​そのまま​ページに​入っているかを​照らし合わせる

2つ目は、​実際に​失敗して​加えた​ものです。​改行を​調整する​処理の​書き方を​誤り、​「という」の​前の​文字が​重複して​「とという」に​なっていた​ことがありました。​見た目の​確認だけでは​見落としやすいので、​原稿との​照合を​自動に​しています。

目印を​入れない​ほうが​いい​場所

• 一字​一句​そのまま​使って​もらう​文章。 法令に​基づいて​公表する​情報や、​コピーして​使って​もらう​文面には、​目に​見えない​文字が​混ざらないよう、​目印を​入れません
• 検索窓や​フォームに​入力して​もらう​例文。 コピーされた​ときに、​目に​見えない​文字が​一緒に​入ってしまいます
• コードや、​メールアドレス、​URL。 正しく​動かなくなります

読みやすさは、​細部で​決まる

改行の​位置は、​読む​人が​はっきり意識する​ことは​少ない​細部です。​それでも、​変な​位置で​改行された​文章は、​読み進める​手を​止めさせ、​サイトの​印象を​下げます。​文節で​改行させ、​行末の​取り残しを​防ぎ、​画面で​確かめる。​この​3つを​押さえるだけで、​スマホでの​読みやすさは​大きく​変わります。

まずは、​自社の​サイトを​スマホで​開いて、​見出しと​冒頭の​段落が​変な​位置で​改行されていないかを​確かめてみてください。​広告の​画像や​SNSの​投稿に​入れる​日本語の​扱いは、AIで​広告画像や​SNS投稿を​作る​とき、​日本語の​文字を​崩さない​作り方に​まとめています。​ホームページ全体の​見直しは、ホームページ・LP制作と​運用の​ページで​ご案内しています。