WEBはスマホで見る時代

インターネット利用者の端末別利用率（2024年）

出典：総務省「令和7年版 情報通信白書」

このようにインターネット利用者の大半がスマホユーザーとなっている現在、WEBサイトは基本的にスマホでの閲覧を前提にして作られています。いわゆる「スマホ対応」です。

「スマホ対応」の必要性は、パソコンとスマホの違いを見ると分かります。

パソコンとスマホの主な違い

「スマホ対応」していないと

• 文字や画像が小さくて見づらい
• ボタンが小さくて押しづらい

　「スマホ対応」していると

• 文字や画像が見やすい
• ボタンが押しやすい

このように視認性や操作性を最適化する場合に用いられるのが、サイトのデザインのレイアウトが端末の画面に合わせて自動で切り替わる「レスポンシブデザイン」という方法です。この「レスポンシブデザイン」によって、ユーザーのストレスは大きく解消されます。

「レスポンシブデザイン」

ただし、「レスポンシブデザイン」であっても、常に自動で最適な表示になるとは限りません。ここではその一部をご紹介します。

謎の改行が発生

Webサイトに文章を載せる際、読みやすさを意図して、文の途中で改行を加えることがあります。これは主に、パソコンでの表示を前提としていることが多いでしょう。（下図）

ところが、これをスマホで表示すると…

文が画面の序盤や中盤で改行されてしまっています。

原因は、パソコンとスマホとで1行に表示される文字数が異なること。「レスポンシブデザイン」では、サイトのデザインは自動で最適化してくれますが、このような意図的な（強制的な）改行に起因する「崩れ」には通常、対応していません。

このような事態を避けるためには、そもそも文の途中に改行を入れないことがベストですが、どうしても入れたい場合は、端末によって改行位置が変わる設定を施すのが良いでしょう。

▲正常に表示されたらこうなります。