自社サイトをスマートフォンで開いて、レイアウトが少し崩れて見える画面を確かめようと眉を寄せて見ている企業のWEB担当者
サイト運用・更新約9分

スマホで表示が崩れている？自分で見つけて直す確認手順

「スマホで見たら、文字が画面からはみ出してた」 「お客さんから、レイアウトが崩れて見えると連絡があって」 ——そんなふうに言われて、あわてて自分のスマホでサイトを開いた経験はありませんか。

パソコンできれいに見えていたのに、スマホだと横に切れていたり、ボタンが重なっていたり。これは、あなたの作り方が間違っていたからではありません。あとから画像や表を足していくうちに、スマホの狭い横幅に収まりきらなくなる——よくある、自然に起きることです。原因の多くは「はみ出しているもの」を見つければ手を付けられる場所にあります。今日は、どこを見て、どこまで自分で直し、どこから制作会社に頼むかを、一緒に順番に整理していきましょう。難しいコードの話は、いったん脇に置いて大丈夫です。

結論：まず自分のスマホで実際にそのページを開いて、どこが崩れているかを目で確かめます。崩れの原因で多いのは、①横に大きすぎる画像・表、②長いURLや英単語がはみ出している、③スマホで文字が小さすぎる/ボタンが重なるの3つ。指で左右にスクロールできてしまう（横に隙間ができる）ページは、たいてい何かがはみ出しているサインです。画像や表の差し替えなど自分で直せるものから手を付け、レイアウトの土台に関わる部分は、崩れている画面のスクリーンショットを添えて制作会社に相談すればOKです。

何が起きているのか

スマホ表示の崩れは、ざっくり言うと「パソコン向けに作った幅の広いものが、スマホの狭い横幅に収まりきっていない」状態です。おもな原因はこのあたりです。

見分ける手がかりが、ひとつあります。それは、ページを指で左右にスクロールできてしまうかどうか。スマホのサイトは本来、縦にだけスクロールできれば十分です。もし横にも動いて、右側に余計な余白が見えるなら、何かが画面幅からはみ出しているサインです。まずはここに気づけると、原因を探しやすくなります。

なお、スマホでの見やすさは、お客さんの体感だけの話ではありません。多くの人がスマホで検索して見る今、スマホで見づらいサイトは検索でも評価されにくくなります。だからこそ、崩れに気づいたら、そっと整えておきたいところです。

手順を小さく分ける

スマホの実機で見て、はみ出している場所を探し、自分で直す分と制作会社に頼む分に仕分けるまでの流れを示した概念図
「実機で見る → はみ出しを探す → 自分でやる分と頼む分に仕分ける」の順で進める

一度に全部をきれいにしようとしないのがコツです。次の順番で、ひとつずつ進めてみましょう。

  1. 自分のスマホで、崩れていると言われたページを開く：まずは実機で見るのがいちばん確実です。トップだけでなく、崩れの指摘があったページや、よく見られるページ（サービス紹介・お知らせなど）も開いてみましょう。
  2. 指で左右にスクロールしてみる：横に動いて右側に余白が出るなら、何かがはみ出しています。どのあたりで横に広がるか、上から順に指でなぞって、はみ出している場所の見当をつけます。
  3. はみ出しの正体を探す：多いのは、大きな画像、横に広い表、長いURLや英単語です。その部分までスクロールして、「ここで画面が横に広がるな」という場所を特定します。
  4. 自分で直せるものから直す：画像なら、スマホの幅に合わせてリサイズ・圧縮して差し替えます（やり方は 画像をアップする前に整える3手順 にまとめています）。表は、項目を減らす・縦並びに書き換えるなどで収まることがあります。長いURLは、リンク文字を「詳しくはこちら」などの短い言葉に置き換えると、はみ出しが消えることがあります。
  5. 土台に関わる部分は、画面を添えて制作会社に頼む：ヘッダーやメニュー、全体のレイアウトそのものが崩れている場合は、CSS（見た目を決める設定）の調整が必要なことが多く、無理に触ると別の場所が崩れることもあります。崩れている画面のスクリーンショットと「どの端末・どのページで、どう崩れているか」を添えて相談すると、話が早く、見積もりも取りやすくなります。

まずは1と2、「自分のスマホで開いて、横に動くか確かめる」だけでも、今日は十分な一歩です。

具体例

たとえば、お客さんから「会社概要のページが、スマホだと右が切れて見える」と連絡が来たとします。自分のスマホで開いて指で左右に動かすと、たしかに横にスクロールできて、右側に余白ができる。上からなぞっていくと、アクセス情報の表のところで画面が横に広がっていました——これは実際によくある光景です。

見てみると、表の列が多く、パソコン基準の幅で作られていました。そこで、表の項目を必要なものだけに絞り、「住所」「最寄り駅」「電話番号」を縦に並べる書き方に直したところ、横スクロールが消えてすっきり収まった、というふうに、「はみ出している1か所を整える」だけで直ることは珍しくありません。

一方で、メニューを開くとボタンが重なって押せない、全ページで文字がはみ出すといった、レイアウトの土台に関わる崩れは、画像や表を直しても変わりません。ここはCSSの領域なので、崩れた画面を見せて制作会社に相談する——と切り分けられれば、自分で抱え込まずに済みます。

あなたへの影響

明日やること

  1. 崩れの指摘があったページ（なければトップとよく見られるページ）を、自分のスマホで開く。
  2. 指で左右にスクロールしてみて、横に動くか・右に余白が出ないかを確かめる。
  3. はみ出している場所があれば、画像・表・長いURLのどれかを疑い、原因の見当をつける。
  4. 自分で直せそうなら、画像を1枚リサイズして差し替える／表を縦並びに書き換えてみる。
  5. 土台の崩れは、崩れた画面のスクリーンショットを保存して、制作会社への相談メモに残す。

チェックリスト

まずはこの3つができれば、初回は合格です。最低ラインはここだけに絞ります。

残りは「気になったときにやる」任意項目です。当てはまらなければ、空欄のままで問題ありません。

スマホ表示の崩れを直し終えて、きれいに収まったサイトをスマートフォンで見ながらすっきりと前を向いている企業のWEB担当者

「スマホで崩れてる」と言われると、どこが悪いのかわからないうちが、いちばん不安なものです。 でも、自分のスマホで開いて指で左右に動かしてみれば、「どこがはみ出しているのか」は案外すぐ見えてきます。全部を今日直す必要はありません。はみ出している画像や表を1つ整えるだけでも、画面はぐっと収まりよくなります。今日ひとつ確かめて、ひとつ整えられたなら、あなたのサイトは昨日より少しだけ見やすくなっています。

よければ、こちらも

はみ出しの原因になりやすい画像の整え方は、画像をアップする前に整える｜リサイズ・圧縮・altの3手順。スマホでの重さ・速さもあわせて見ておきたいときは、サイトの表示が遅いかも｜PageSpeed Insightsで測って直す基本。「そもそも表示されない」ときの切り分けは、サイトが表示されない｜あわてず確認する最初の手順もどうぞ。「この崩れ、どう頼めばいい？」と迷ったら、お問い合わせからいつでも声をかけてくださいね。

関連用語