日本語の“変な改行”を防ぐ…！wbrやBudouXの改行の使い分けについて考えてみた

Webアクセシビリティ コーディング
CSS html JavaScript Webアクセシビリティ webデザイン

「スマホで見たら、タイトルが変なところで切れて読みにくい…」
そんな指摘、クライアントさんからもらったことはありませんか？

日本語は単語の区切りにスペースがないぶん、改行の見た目が崩れやすいですよね。
特に見出しやキャッチコピーでは、“どこで区切れるか”が伝わり方を左右することも。

今回は、自然で読みやすい改行を実現する方法をまとめました。

【結論】見出しだけ気にするときは「brやwbr」、厳格にテキストの自然な折り返しをしたい場合は「BudouX」がおすすめ！

たとえば、こんな表示

以下は、宮沢賢治の『ポラーノの広場』の一節です。

原文：
わたくしはポラーノの広場で、あのイーハトーヴのすきとおった風を思い出すのです。

▼何も指定していない場合の例（ブラウザの自動折り返し）

わたくしはポラーノの広場で、あのイーハトー
ヴのすきとおった風を思い出すのです。

一見読めそうですが、「イーハトー　ヴ」で切れると、ちょっと違和感あります。

読みながら、ん？ ってなるやつだ

読みやすくする方法は？

改行位置を調整する方法はいくつかあります。

  • <br>で強制的に改行を入れる（br class=”visible-xs”などでスマホ対応）
  • <span style="display:inline-block;">で塊に分ける
  • <wbr>で「ここで折り返してもいいよ」と伝える
  • word-break: auto-phrase;を使う

「word-break: auto-phrase;」は真打登場という気持ちなのですが、非対応ブラウザがまだまだ多く、未来に期待です。

BudouXについて

BudouX（ぶどうエックス）は、Googleが開発した“自動で自然な改行位置を判断してくれる”ライブラリです。

Google Developers Japan: BudouX: 読みやすい改行のための軽量な分かち書き器

  • JavaScriptで自動的に改行位置を判断
  • テキストをそのまま書くだけでOK！
  • 見た目が自然で読みやすくなる
～headなど～
<script src="https://unpkg.com/budoux/bundle/budoux-ja.min.js"></script>
～body本文～
<budoux-ja>
<p>わたくしはポラーノの広場で、あのイーハトーヴのすきとおった風を思い出すのです。</p>
</budoux-ja>

これだけで、画面幅に応じて意味に沿った場所で自然に折り返してくれるようになります。

ちょっとだけ紹介<wbr>タグ

<p class="text">わたくしは<wbr>ポラーノの広場で<wbr>あのイーハトーヴの<wbr>すきとおった風を<wbr>思い出すのです。</p>

この<wbr>タグは、「ここで折り返してもいいよ〜」という指定です。

budouXでも、自動でwbrを入れることにより自然な文章の折り返しを実現しています。

wbrを使う方法もとってもアリですが、手作業で入れる必要もあるので、大量のテキストにはやや不向きです。
さらに日本語で使用するときは工夫が必要で、CSS側でちょっとお手入れが必要です。

.text{
  word-break: keep-all;
  overflow-wrap: anywhere;
}
見出しやキャッチコピーだけ対応したいときにオススメ

さらに補足:wordpressのブロックエディタで使いたいとき

以下のショートコードを使うと、ブロックエディタ内でもショートコードが入れられます。

functions.php内
// 任意改行[wbr] ※CSS変更必要
function shortcode_wbr() {
    return '<wbr>';
}
add_shortcode('wbr', 'shortcode_wbr');
編集画面
テキストが[wbr]入ります。

brでの強制改行について

スマホとPCで改行位置を変えたいときには、<br class="br-sp"> のようなクラス付き<br>タグも便利です。

たとえば…

<br class="br-sp ">スマホ専用改行
<br class="br-pc">PC専用改行

スマホ表示だけで改行され、PCでは改行されません。

/* SP（スマホ）専用の改行 */
@media screen and (min-width: 768px){
.br-sp {display: none; }
}
/* PC（スマホ）専用の改行 */
@media screen and (max-width: 767px){
.br-pc {display: none; }
}

それぞれの用途

方法メリットデメリット使い方
<br>・確実に改行される
・制御しやすい		・画面幅に関係なく改行されるので、レイアウトが崩れることも
・意味の区切りじゃないところで改行されると読みづらい		見出しやキャッチコピーなど「意図的に」改行したいとき
<wbr>・画面幅に応じて改行される
・任意の場所に「改行していいよ」マークを入れられる		・手作業で挿入する必要あり
・日本語ではそのままでは効かない（CSS調整必須）		見出しやキャッチコピーなどで自然な改行をしたいとき
<span style="display:inline-block">・任意の単位で改行を制御できる
・一文字ずつ、または単語ごとに区切れる		・文章全部に使うには非効率・アクセシビリティに注意
・意図しない位置でおかしな改行になることも		リズムを重視した見出しやポエム系テキストなど、表現にこだわりたいとき
BudouX・意味の区切りで自動的に改行ポイントを入れてくれる
・タグを巻くだけでOK（スクリプトで処理）		・JavaScriptが必要
・自動なので後から調整が難しい		長文のテキストに全自動で意味に沿った改行を入れたいとき（読みやすさUP）
word-break: auto-phrase;（実験的CSS）・日本語の自然な意味区切りで改行される
・HTMLをいじらずCSSだけで対応可能		・対応ブラウザが少ない
・挙動が不安定なことも		将来的な選択肢。
実験的に使ってみたい場合に。

読んでもらうために、“読ませやすく”しよう

ここまで厳密に改行をコントロールするのは、正直ちょっとニッチかもしれません。
でも、「ここで区切れたらもっと伝わるのに」っていうこだわりの気持ちもわかります。

キャッチコピーや見出し、ファーストビューの文章など、一瞬で伝えたい場面では特に、こうした細かい気配りが効いてきます。
読み手が「スッ」と内容に入っていけるように、ほんの少しの工夫ができたら、それだけで伝わり方が変わるかもしれません。

この記事のまとめと、moguraの所感

  • 日本語は、意味の切れ目で改行されると読みやすい！
  • でも、Webは完璧を求めすぎなくてもOK
  • 基本はbr、wbrなどで工夫する
  • 対応が必要な項目が多い場合や、文章全てに適用したい場合はBudouXを使う
「読む人のストレスを減らす」って、ちょっとした気づかいから始まるんだな〜

SHARE!