改行を辞書に任せたら、「そばに／いる。」で切れていました

文節は合っていて、意味が切れていた話です。

CTO/COO　熊谷大樹が書きました

2026-09-28　/　技術

8月に、サイトの日本語の折り返しを辞書に任せました。BudouXという、文を文節に切る小さな辞書です。文節の切れ目にだけ、目に見えない改行の候補（<wbr>）を入れて、それ以外の場所では折り返さないようにしました。

動くまで、｜そばに｜いる。
AI・DXを、｜現場で｜動く｜ものに｜する。

サイト全体で67箇所。トップページのHTMLには、改行の候補が257個入っています。「決めるところか／ら」のような折り返しは、これで消えました。

iPhoneの幅で、見出しを全部見ました

今日、辞書を通している見出しを、幅375pxで全部並べました。27本あります。2行以上になっていたのは4本。そのうち3本が、意味の途中で折れていました。

トップ        動くまで、そばに ／ いる。
AIXとは       この1年で、変わった ／ こと
開発の進め方  いい ／ ことばかりでは、 ／ ありません。

いちばん上は、社名の次に大事な一行です。それが「そばに」で折れて、次の行が「いる。」だけでした。

辞書は、まちがえていません

「そばに｜いる」は、文節としては正しい切り方です。ブラウザは、入るところまで詰めてから、最後に入った切れ目で折ります。幅375pxの画面で、余白を引いた本文の幅は315px。36pxの字なら8文字入ります。「動くまで、そばに」が、ちょうど8文字でした。

つまり、辞書もブラウザも、言われたとおりに動いています。知らなかったのは、「そばにいる」がひとつの意味で、この一行がうちの看板だということです。それは辞書に書いてありません。

3本だけ、手で決めました

トップと「AIXとは」の2本は、読点の後ろに、スマホの幅でだけ効く改行を1本ずつ入れました。「動くまで、／そばにいる。」で折れます。

「開発の進め方」の1本は、事情が違いました。「いいことばかりでは、」の10文字が、315pxに入りません（320px要ります）。だから読点で折る指定をしても、その手前の「いい」で折れます。ここは「いいこと」の後ろに折り返しの候補を1つ足しました。幅375pxでは「いいこと／ばかりでは、／ありません。」の3行、幅390pxのiPhoneでは「いいことばかりでは、／ありません。」の2行になります。

残りの24本は、辞書のままです。それと、辞書を入れる前から手で入れてあった改行（<br />）は、サイト全体でまだ94本あります。全部を辞書に置き換えることは、していません。書いた人が折る場所を決めた行は、そのままにしてあります。