レスポシブデザインにおけるテキストの改行について

お客さまから、よくいただくリクエストのひとつに、テキストの改行位置の指示があります。

例えば、こういったものです。

「改行の位置が中途半端で気持ち悪いから、●●の後ろで改行したい」

お気持ちはよくわかります。

この部分を改行させるのは簡単なのですが、ただ「じゃあその位置で改行させますね」と簡単には言い難いのです。

なぜか。

それは、できるだけ多くの環境で問題がない状態にしたいから、です。

どうしてもここは改行したい、という箇所でなければ、基本的には「句点（。）」「感嘆符（！）」等、キリの良い箇所での改行にとどめることをオススメしています。

具体例をあげながら、もう少し詳しく解説していきますね。

なお前提として現在主流の仕様である、レスポンシブデザインでの制作とします。

見る環境によって文字が折り返される位置は異なる

例えば下記のような状態だったとします。

「スマートフォンでの改行が気持ち悪いから、”太郎”の後ろで改行したい」というご要望をいただいたとしましょう。

ご要望どおりの位置で改行するとこうなります。

スマホではちょうど良く見えますが、PCで見るとやや微妙ですね。

ただ、スマートフォンで見る人が多いBtoCのサイトだからPCはこれでも許容する、とします。

それでも、たまたま見ているスマートフォンで収まりがよくても、少し小さいスマホで見るとこうなります。

ひとまわり小さいスマホで見た場合、かなり気持ちの悪い感じになってしまいますね。

もっというと、テキストのサイズは見ている環境によって誤差が出る場合もあり、つまりテキストの折り返される場所というのは、必ずしもどんな端末でも同じとは限りません。

さらに言えば、中にはブラウザの設定でテキストサイズを変えて表示している方もみえます。

つまり、自分のスマホやPCでちょうど良い位置で改行されていたとしても、見る人によっては、かえって読みにくくなってしまう可能性がある、ということです。

対策案：画像化して改行位置が変わらないようする

解決策のひとつとして、テキストではなく画像にしてしまう、という方法があります。

画像化してしまえば、もちろんバナーやチラシ等と同じように絶対的な位置での改行が可能なのですが、この場合、SEOであったり、メンテナンス性で問題が出てきます。

当然、文字サイズを自分の読みやすい大きさに変更したい人にとっては、そもそもその設定も反映されません。

よって、不必要に画像化することはオススメしにくいのです。

対策案：文字サイズを調整する

また、文字サイズを調整することで解決しようという場合もあります。

先程のケースで言えば「こんにちわ！僕の名前は山田太郎です」というテキストを全体的にもう少し小さくすれば、折り返さずに全文一行で収まる。

確かにこれで解決することもあります。

ただそれによって全体のバランスが崩れたり、あまりに文字を小さくすればシンプルに読みにくくなります。SEO的に問題が出てくることもあります。文字数自体、もしかしたら今後増やしたくなることが出てくるかもしれません。

そう考えると、文字サイズで解決できるケースもそれほど多くはないのです。

技術的には可能です

とはいえ、画像化せず、文字サイズも変えず解決することは、技術的には可能なのです。

例えばあるサイズのディスプレイまではここで改行する。
でもこのサイズ以下の場合は改行しない、といった、ディスプレイのサイズに応じて改行の有無を指定することは可能です。

ただし、今やディスプレイのサイズはかなり多く、どこまでの端末を考慮して改行位置を調整するのか、その数によっては、追加費用がかかってしまうこともあります。

例えば追々そのテキストを変更する可能性まで考慮したり、ご予算をあてがう優先度から考えると、他にかけていただいた方が良いケースの方が多いというのが実情でもあります。

よって、冒頭にて書かせていただいたとおり、どうしてもここは改行したい、という箇所でなければ、基本的には「句点（。）」「感嘆符（！）」等、キリの良い箇所での改行にとどめることをオススメしている、というわけです。

今回の例で言えば、改行するのであれば下記の位置がベターかと思います。

ちなみに、まさに今読んでくださっているこの記事の改行も句点（。）での改行しかしていません。

たかが改行されど改行

いかがでしょうか。

チラシやパンフレット等の印刷物であれば、全員がまったく同じ状態のものを手にするため良いのですが、Webサイトの場合はそうではないがゆえの文字サイズ問題。

改行位置ひとつとっても、意外と色々なことを考慮しなければならないということが、多少なりともご理解いただけたら嬉しいです。

お客さまからご要望をいただいた場合、お電話やメールだけでご説明するのがなかなか難しく、今回はこういったかたちでブログにまとめてみました。