【Webサイト保守事例】スマホとPCで生じる「文字の段落ち」問題。レスポンシブデザインの改行に関する最適な落としどころとは？

企業のWebサイト運用において、「PCとスマートフォンで文字の改行位置が違う」「変なところで段落ちしてしまう」というお悩みは非常に多く寄せられます。

新規のお客様から「月額制の保守プランでは、普段何を管理しているの？他社と何が違うの？」とご質問をいただくことがありますが、単なるサーバーの死活監視やシステムのアップデートだけが保守ではありません。こうした日々の運用で生じる「ちょっとした見栄えのズレ」を、美しく、かつ安全な形で最適化し続けることも重要な業務のひとつです。

本記事では、現代のWebサイトで避けては通れない「レスポンシブデザインにおける文字の段落ち問題」について、その最適な落としどころと、Kurumi株式会社ならではの解決策をご紹介します。

事例詳細

Webサイトに掲載する文章において、「このキーワードのまとまりで改行したい」「ここで区切ったほうが読みやすい」というご希望は、コンテンツの質を左右する重要なポイントです。

しかし、大前提として、スマートフォンサイトは閲覧している端末（機種や画面サイズ）により改行位置が可変します。

そのため、現代の主流であるレスポンシブデザイン（閲覧する画面幅に合わせてレイアウトが柔軟に可変する仕組み）においては、PCできれいに見えていても、スマートフォンやタブレットで見ると意図しない部分で文字が段落ち（改行）してしまうことが多々あるのです。

ユーザーが使用するデバイスの画面サイズは無数に存在するため、すべての端末で完全に同じ位置で改行させることは物理的に非常に困難なのが実情です。

一般のWeb会社が行なう対応

※あくまでもWeb業界全体における一般的な傾向としてのお話になりますが、この問題に対しては以下のような対応がとられるケースが多く見受けられます。

「仕様です」とそのままにするケース

多くの制作会社では、「レスポンシブデザインの仕組み上、画面幅によって改行位置が変わるのは避けられないものです」とご説明し、そのままの状態で運用を続けることが一般的です。

イレギュラーなサイズ調整で対応するケース

どうしてもという強いご要望があった場合、「その改行させたい部分だけ」イレギュラーにフォントサイズを縮小して、無理やり1行に収めるという対応がとられることもあります。しかし、この場当たりの方法をとると、結果的にページ全体の文字サイズのバランスが崩れ、パッと見の印象が非常に悪くなってしまうという新たな問題が発生します。

Kurumi株式会社が行なっている（行なった）対応

Kurumi株式会社では、デザインの美しさと運用上の無理のなさの「最適な落としどころ」を見つけるため、月額保守のなかで以下のような独自のルールと技術を用いて対応しています。

スマートフォンサイトの文章は「基本左寄せ」で統一

スマートフォンの狭い画面で中央揃えなどを多用すると、段落ちした際の文字のガタつきが目立ち、非常に読みづらくなります。そのため、視線移動がスムーズで可読性が高い「左寄せ」を基本としてレイアウトを構築しています。

読点（、）での改行は原則行わない

画面幅によって不自然な余白が生まれやすくなる原因となるため、読点での強制改行は避けるルールとしています。

句点（。）での改行はご希望に応じて対応

文章の明確な区切りとして自然な句点での改行については、お客様のご要望に合わせて丁寧に調整を行います。

スマートフォン専用の改行プログラムを用意

当社では、「スマートフォン表示の時だけ、ピンポイントで指定位置で改行させる」ことが可能な独自のプログラムを標準でご用意しています。

これにより、PC版のレイアウトや全体のフォントサイズ（デザインのバランス）を犠牲にすることなく、スマートフォンユーザーにとっても最も読みやすいテキスト表示をスマートに実現しています。

その後、どうなったか

こうした細やかな表示調整を、独自のルールとプログラムを用いて継続的に行なうことで、どのデバイスから見ても美しく、かつシステムのバランスを崩さない「安全なサイト運用」が実現できております。

無理なカスタマイズを行わないため、将来的なコンテンツ更新時にも表示崩れが起きにくく、お客様にとってもユーザーにとってもストレスのない安定したWeb環境をご提供し続けています。