スマホで見ると、ホームページが崩れている
「スマホで自社のホームページを見たら、表が画面からはみ出していた」「画像が大きすぎて、横にスクロールしないと見きれない」「レスポンシブ対応はしているはずなのに、ところどころ崩れている」――こうしたご相談は、少なくありません。
先にお伝えします。スマホでの崩れは、多くの場合、全面的な作り替えをしなくても直せます。そして、私たちが実務で特によく見かける原因が、表（テーブル）と画像のはみ出しです。この2つの扱い方を知っておけば、担当者ご自身で、崩れを防ぐこともできます。
なお、スマホでの見え方がどれだけ重要かは、業態によって変わります。一般消費者向け（BtoC）ならスマホが主戦場ですが、法人向け（BtoB）ではパソコンからの閲覧が多い傾向があります。まずは自社のアクセス解析で、実際のデバイス比率を確認することをおすすめします。
本ページでは、なぜスマホで崩れるのか、特に多い2つの原因、そして自分で直せる範囲と、制作会社に頼んだほうがいい範囲を、制作の現場からご紹介します。
このページでわかること
このページでは、「スマホで見るとホームページが崩れている」という状況について、なぜ崩れるのか、特に多い原因、そして直し方と防ぎ方を整理します。
自社サイトがスマホで崩れていて、どう対処すればいいか悩んでいる方に、参考にしていただける内容です。
その崩れ、どのくらい影響しますか
崩れを直す前に、知っておいていただきたいことがあります。スマホでの見え方がどれだけ重要かは、業態によって大きく変わる、ということです。
一般的なインターネット利用では、スマートフォンが主流です。総務省の調査では、端末別のインターネット利用率は、スマートフォンが74.4％、パソコンが46.8％となっています。
ただし、これは個人のインターネット利用全般の話です。自社サイトを誰が見に来ているかは、また別の話になります。
一般消費者向け（BtoC）のサイトでは、スマホからの閲覧が大半を占めることが多く、スマホでの見え方が決定的に重要です。一方、法人向け（BtoB）のサイトでは、仕事中に会社のパソコンで見られることが多く、パソコンからの閲覧が優位になる傾向があります。
参考までに、ENVY DESIGNの自社サイト（法人向けのWeb制作会社のサイト）で、2026年7月時点の直近90日におけるデバイス別セッションを確認したところ、次のような結果でした。
- パソコン：約87％
- スマートフォン：約12％
- タブレット：約1％
法人向けサイトらしく、パソコンが大半を占めています。ただし、これはあくまで一例です。同じBtoBでも、業種や、サイトの役割によって比率は変わります。
大切なのは、思い込みで判断せず、自社のアクセス解析（Google アナリティクスなど）で、実際のデバイス比率を確認することです。「BtoBだからスマホは関係ない」と決めつけると、実際にはスマホ経由の閲覧が想定より多かった、ということもあります。移動中や商談の前に、スマホでサッと調べられることも、少なくありません。
スマホでの崩れには、大きく二つのパターンがあります
スマホでホームページが崩れる、という場合、状況は大きく二つに分かれます。
一つは、そもそもスマホ対応（レスポンシブ対応）がされていないケースです。パソコン向けに作られたページが、そのまま縮小して表示されるため、文字が極端に小さく、リンクも押しにくくなります。長年、地域で続いてきた会社のサイトなどで、今でも見かけることがあります。
もう一つは、スマホ対応自体はされているのに、ところどころ崩れているケースです。ご相談として多いのは、この二つ目のケースです。レスポンシブ対応はできているのに、特定のページや、一部の要素だけが崩れてしまう。この場合、サイト全体を作り替える必要はなく、崩れている箇所を直せば済むことがほとんどです。
崩れの原因で多いのは、「表」と「画像」です
レスポンシブ対応はできているのに崩れている。その原因として、私たちが実務で特によく見かけるのが、次の二つです。
表（テーブル）が画面からはみ出す
料金表や比較表など、横に項目が並ぶ表は、スマホの狭い画面に収まりきらず、画面からはみ出してしまうことがあります。その結果、横スクロールが発生したり、レイアウトが崩れたりします。
パソコンでは問題なく見えていても、スマホでは表がそのまま縮まらず、はみ出す。これは、非常によくあるパターンです。
画像が画面幅を超えてしまう
もう一つが、画像のはみ出しです。画像の表示幅が固定されていたり、画面幅に合わせて縮小する設定がされていなかったりすると、スマホの画面幅を超えて横にはみ出します。
特に、担当者の方がご自身で更新した際に、横幅を固定した状態で画像を挿入したり、独自のレイアウトを追加したりしたことで、崩れるケースをよく見かけます。
なお、崩れの原因はこの二つに限りません。レイアウトの組み方や、外部から埋め込んだ要素などが原因になることもあります。ここでは、更新作業のなかで起きやすい代表的な二つを挙げています。
どう直すか、どう防ぐか
では、この二つの崩れを、どう直せばいいのか。そして、どう防げばいいのかをお伝えします。
表の対処
表がはみ出す場合、いくつかの対処法があります。表の部分だけ横スクロールできるようにする、スマホでは項目を縦に積み替えて表示する、あるいは、そもそも表に入れる項目を絞る、といった方法です。
なお、横スクロールは、必ずしも悪いものではありません。比較表など情報量が多い表の場合は、無理に縮めて読みにくくするより、表だけ横スクロールできるようにしたほうが、かえって読みやすいこともあります。どれが適しているかは、表の内容や量によって変わります。
画像の対処
画像は、画面幅を超えないように、表示幅を自動調整する設定を入れておくのが基本です。制作時にこの設定がされていれば、元の画像サイズが大きくても、通常はスマホの画面幅に合わせて縮小されます。
もし設定されていない場合は、サイト側の設定を直すのが根本的な対処です。応急処置として、画像を適切なサイズに縮小してからアップロードする方法もあります。
崩れを防ぐために
そして、何より大切なのは、更新した後に、必ずご自身のスマホで実際に見て確認することです。パソコンの画面を縮めて確認するだけでは、実機での見え方と異なることがあります。
たとえば、実機では、パソコンとフォントの表示が違ったり、ボタンをタップできる範囲の感覚が異なったり、iPhoneのように画面の縁の形状に影響を受けたりします。ブラウザによる違い（SafariとChromeなど）も出ることがあります。
更新したら、スマホで開いてみる。可能であれば、iPhoneとAndroidの両方で見られると、さらに安心です。この習慣だけで、崩れの多くは早い段階で気づけます。
自分で直せる範囲と、制作会社に頼む範囲
崩れを見つけたとき、どこまで自分で対応できるのかも、整理しておきます。
ご自身で対応しやすいのは、更新作業のなかで起きた崩れです。大きすぎる画像を小さくして入れ直す、表の項目を減らす、といった対応は、担当者の方でも進めやすい範囲です。
一方、制作会社に相談したほうがいいのは、サイトの仕組みに関わる部分です。表を自動的に横スクロールできるようにする、画像の表示幅を制限する設定を入れる、といった対応は、サイトの設定やコードに手を入れる必要があります。こうした「崩れにくい仕組み」を一度入れておけば、その後の更新で崩れる可能性を、大きく減らせます。
どこまでが自分でできて、どこからが専門的な対応になるのか。判断がつかない場合は、遠慮なく制作会社に確認してみてください。
よくある質問
スマホで崩れていたら、サイトを作り直す必要がありますか?
多くの場合、作り直す必要はありません。レスポンシブ対応ができているのに、一部が崩れているだけであれば、崩れている箇所を直せば済むことがほとんどです。ただし、そもそもスマホ対応がされていない場合は、対応のための改修が必要になります。
自分で更新したら崩れてしまいました。どうすればいいですか?
まず、直前に追加した表や画像を確認してみてください。表が画面からはみ出していないか、画像の表示幅が固定されていないかを確認してみてください。この二つが原因であることが多いです。画像であれば、小さいサイズに入れ替えることで一時的に直る場合があります。ただし、繰り返し崩れる場合は、画面幅に合わせて画像が縮小される設定を、制作会社に確認したほうがよいでしょう。
スマホでの見え方は、どう確認すればいいですか?
ご自身のスマートフォンで、実際にサイトを開いて確認するのが確実です。パソコンのブラウザを縮めて確認する方法もありますが、実機とは見え方が異なる場合があります。更新したら、スマホで開いて確認する。この習慣をつけておくことをおすすめします。
崩れたまま放置すると、どうなりますか?
崩れたままだと、情報が読み取りにくいだけでなく、会社の印象にも影響します。特に一般消費者向け（BtoC）のサイトでは、スマホからの閲覧が大半を占めることが多く、影響は大きくなります。法人向け（BtoB）でも、移動中や商談前にスマホで見られることはあります。また、Googleは基本的にモバイル版のページをもとに検索評価を行っています。スマホで内容が正しく表示されず、情報を読み取れない状態は、ユーザー体験だけでなく検索面でも放置しないほうがよいでしょう。まずは自社のアクセス解析でデバイス比率を確認し、影響の大きさを把握することをおすすめします。
自社サイトが、きちんとスマホ対応できているか調べる方法はありますか?
いくつか方法があります。最も確実なのは、ご自身のスマートフォンで実際に開いて確認することです。あわせて、パソコンのブラウザ（Google Chromeなど）に用意されている、スマホ表示を再現する機能を使う方法もあります。また、Googleが提供しているPageSpeed Insightsを使えば、モバイル環境での表示速度やアクセシビリティなど、技術的な問題を確認できます。ただし、表や画像のはみ出しを必ず検出できるわけではないため、最終的には実機で見て確認することをおすすめします。
自社サイトは法人向けなので、スマホは気にしなくていいですか?
法人向け（BtoB）のサイトは、仕事中に会社のパソコンで見られることが多く、パソコンからの閲覧が優位になる傾向があります。ENVY DESIGNの自社サイトでも、2026年7月時点の直近90日では、パソコンが約87％、スマートフォンが約12％という比率でした。ただし、これは一例です。「BtoBだから」と決めつけず、まずは自社のアクセス解析で実際の比率を確認してみてください。想定よりスマホが多いこともあります。
スマホでの崩れをどう直せばいいか分からない、という段階でもご相談いただけます
スマホでサイトが崩れている、どこが原因か分からない、自分で直せるのか判断がつかない、という段階でも、相談から始めて問題ありません。
ENVY DESIGNでは、どこがどう崩れているのかを確認し、全面的な作り替えが必要なのか、部分的な修正で済むのかを、正直にお伝えします。崩れている箇所だけの修正にも対応しています。そのうえで、今後の更新で崩れにくくなる仕組みを整えることもできます。担当者の方がご自身で運用しやすい形を、一緒に考えます。
「スマホで崩れている」という段階でも、まずは現在の状況のままご相談ください。
出典
関連ページ