スマホでの表示崩れを自分で見つける方法｜無料でできる確認手順

ホームページを開いてくださる方の多くは、今やパソコンではなくスマートフォンからご覧になっています。ところが、パソコンの画面できれいに見えているページが、スマホだと文字が画面からはみ出していたり、ボタンが小さすぎて押しにくかったり、ということは珍しくありません。作った当時はスマホ対応していたはずなのに、記事を足したり写真を差し替えたりするうちに、気づかないところで崩れていることもあります。

こうした表示の乱れは、見てくださった方が「読みにくい」と感じて離れてしまう原因になります。ただ、専門の業者に見てもらわないと分からない、というものでもありません。実はご自身のスマホと、無料で使えるいくつかの道具だけで、かなりのところまで確認できます。この記事では、何をどの順番で見ればいいのか、画面のどこに何という表示を探せばいいのかまで、具体的にご紹介します。所要時間の目安も添えていますので、空いた時間に少しずつ進めていただけます。

スマホでの表示崩れとは何か、どこで損をしているのか

「スマホで見ると、なんとなく読みづらい気がする」。そう感じていても、どこがどう崩れているのかを言葉にするのは意外と難しいものです。まずは、スマホでの表示崩れと呼ばれる状態が具体的にどんな見え方なのかを、専門用語を使わずに並べてみます。自分のホームページに当てはまるものがあるかどうか、思い浮かべながら読んでみてください。

よくある「崩れ」の7つのかたち

• 文字が画面の外にはみ出す…指で横に動かさないと、文章の右端が読めない状態。本来スマホは上下にだけ動かせば読めるのが自然なので、横に動く時点で何かがはみ出しています。
• 文字が小さすぎて読めない…二本指で広げて拡大しないと内容が追えない状態。パソコンの画面では普通に見えていても、スマホでは別物になることがあります（スマホで見ると文字が小さい原因は別記事で詳しく触れています）。
• 写真が画面幅をはみ出す・縦に伸びる…商品写真や店舗の外観が、左右で切れていたり、人物が不自然に細長く伸びていたりする状態。
• ボタンやリンクが小さく、間隔が近すぎる…「お問い合わせ」を押したつもりが隣の項目に飛んでしまう。指は矢印より太いので、パソコンと同じ間隔だと押し間違いが起きます。
• 固定のバナーやメニューが本文に重なる…画面の上や下に貼り付いた帯が、肝心の文章や入力欄を隠してしまう状態。フォームの送信ボタンが隠れているケースもあります。
• 電話番号がタップできない…番号が画像になっていたり、ただの文字として置かれていると、押しても発信画面が開きません。せっかく「今すぐ電話したい」と思った方の手が止まります。
• 表が横に大きくはみ出す…料金表や対応エリア表など、項目が多い表はスマホの幅に収まらず、右側が見えないままになりがちです。

こうした状態が、問い合わせの機会を減らしてしまう理由

いまはホームページを見る方の多くが、パソコンではなくスマホから訪れています。移動中や休憩時間に、片手で何件かのお店や会社を見比べる。その流れの中で、文字が小さい・ボタンが押しにくいというだけで、内容を読む前に別の候補へ移ってしまうことがあります。せっかく良い商品やサービスがあり、文章もきちんと書かれているのに、見え方だけで伝わらずに終わる。これはとてももったいない状態です。

ただ、こうした崩れに気づけないのは、ごく自然なことでもあります。ホームページは、お知らせを足したり写真を差し替えたりするたびに、少しずつレイアウトがずれていきます。作った当初はきれいに収まっていたものが、数年かけて一つずつ積み重なるので、どこかの時点で急に壊れるわけではありません。加えて、ご自身は普段パソコンで管理画面を開いて確認することが多く、スマホでじっくり見る機会が少ない。見落として当然の仕組みになっているのです。制作を頼んだ会社との付き合いが薄くなっていれば、なおさら誰も気づかないまま時間が過ぎます。

また、検索エンジン側も、スマホでの見やすさを評価の材料のひとつにしているとされています。これだけで順位が決まるわけではありませんし、直せば必ず上がると言えるものでもありません。ただ、読む人にとって読みやすい状態に整えることは、問い合わせにも、検索から見つけてもらうことにも、マイナスにはならない取り組みです。

幸いなことに、表示崩れの確認は、お金をかけずにご自身で進められます。次の章から、手持ちのスマホで5分でできる確認と、無料のツールで客観的に確かめる手順を、画面のどこを見るかまで具体的にご案内します。

まずは自分のスマホで5分チェック（最短の確認手順）

表示崩れを見つけるのに、特別な道具は要りません。いちばん確実なのは、お客様と同じ状況、つまりご自身のスマートフォンで実際に見てみることです。以下の手順なら、全部で5分ほどで終わります。パソコンの画面では気づけない崩れが、驚くほどあっさり見つかります。

手順1〜3：まずトップページを素のまま見る（約2分）

1. 自分のスマホのブラウザで自社サイトのトップページを開く（30秒）。iPhoneならSafari、AndroidならChromeが標準です。このとき、ブックマークではなく検索窓に会社名を入れて、検索結果から入ってみてください。お客様がたどる道筋と同じになります。
2. 指を使わず、縦スクロールだけで最後まで読み切れるか確認する（1分）。親指で上下に動かすだけで、フッター（ページ一番下の会社情報などが並ぶ部分）まで到達できれば合格です。途中で画面が左右にずれる、右側に白い余白が出る、横にスクロールできてしまう——これは、何かが画面の幅からはみ出しているサインです。はみ出しているのは、たいてい大きな画像か、横長の表か、長いURLの文字列です。
3. 拡大せずに本文が読めるか確かめる（30秒）。指で広げないと読めない大きさなら、お客様の多くはそこで離れます。スマホで文字が小さくなる原因は別の記事で詳しく触れていますが、まずは「拡大が必要だったページ名」をメモしておけば十分です。

手順4〜6：問い合わせの導線を実際に触る（約2分）

1. 「お問い合わせ」ボタンを片手の親指でタップする（30秒）。両手で狙いを定めて押すのではなく、片手で持ったまま、普段どおりの雑さで押してみてください。一度で押せない、隣のボタンに当たる、押せたか分からない——どれも、お客様が問い合わせをあきらめる理由になります。
2. 電話番号をタップして発信画面が出るか確かめる（30秒）。番号が画像として置かれていたり、ただの文字として書かれているだけだと、タップしても何も起きません。番号を覚えてかけ直してくれる方は、思うほど多くありません。発信画面が出たら、そのままキャンセルして戻れば大丈夫です。
3. 問い合わせフォームを開いて、入力欄を実際に触る（1分）。見るところは三つです。入力欄が画面の幅に収まっているか。文字を打ち始めたときにキーボードが出て、送信ボタンが隠れたまま出てこなくならないか。そして、空のまま送信ボタンを押したときに「必須項目です」といった案内がきちんと見える位置に出るか。ここが崩れていると、せっかく最後まで読んでくれた方を取りこぼします。

手順7：見るページは4つあれば足りる（約1分）

トップページだけで判断しないでください。崩れはページごとに起きます。最低限、次の4ページを同じ要領で見ておくと、全体の傾向がつかめます。

• トップページ——第一印象を決める場所
• 料金・メニューのページ——表を使っていることが多く、横にはみ出す崩れが起きやすい
• お問い合わせページ——ここが崩れていると、損がそのまま問い合わせ数に出る
• 一番新しい記事やお知らせ——最近追加した画像が原因になっていることがある

見つけたら、その場でスクリーンショットとメモを

崩れを見つけたら、必ずその場で画面を撮っておいてください。iPhoneなら電源ボタンと音量上ボタンの同時押し、Androidなら電源ボタンと音量下ボタンの同時押しです。あとで「あのページのどこかがおかしかった」と説明しようとしても、再現できずに終わることがよくあります。

あわせて、ページ名・症状・使った端末とブラウザの3つをメモに残します。たとえば「料金ページ／表が右にはみ出す／iPhone・Safari」といった具合です。この3行があれば、ご自身で直すときも、制作会社に相談するときも、話がすぐ通ります。無理もないことですが、崩れは作った直後ではなく、あとから足したページで起きることがほとんどです。責めるべき相手はいません。見つけて、記録して、順番に手を打てば十分です。

手持ちスマホでの確認手順

1. トップを見る縦スクロールだけで読めるか、横揺れや文字サイズを確認する
2. 導線を実際に触るボタンや電話番号タップ、フォームの入力欄が動くか試す
3. 主要4ページを見るトップ、料金、問い合わせ、最新記事を同様に確認する
4. スクショと記録崩れを発見したら画面を撮影し、症状と端末名をメモする

無料ツールで客観的に確かめる（Google提供のツールの使い方）

自分のスマホで見るだけでも多くの崩れは見つかりますが、お持ちの機種1台だけでは「たまたまこの端末で平気なだけ」という可能性が残ります。Googleが無料で公開しているツールを使うと、機械的な視点で指摘を出してくれるので、見落としを拾えます。1ページあたり3分程度で確認できます。

1. PageSpeed Insightsで見え方と指摘を確認する（約3分）

1. ブラウザで pagespeed.web.dev を開きます。ログインは不要です。
2. 中央の入力欄に、調べたいページのURLを貼り付けて「分析」を押します。結果が出るまで30秒ほどかかることがあります。
3. 結果画面の上部に「モバイル」「デスクトップ」の切り替えタブがあります。「モバイル」が選ばれていることを必ず確認してください。初期状態でモバイルになっていることが多いですが、念のため目で見て確かめます。
4. 画面を下にたどると、そのページのスクリーンショット（実際の見え方のプレビュー画像）が表示されます。文字が切れていないか、横にはみ出していないか、ボタンが重なっていないかをここで目視します。自分の端末と違う見え方をしていれば、崩れの手がかりです。
5. さらに下の診断項目を読みます。「タップ ターゲットのサイズが適切ではありません」（リンクやボタンが小さすぎる・近すぎる）、「フォント サイズが小さすぎて読めません」（本文の文字が小さい）といった指摘が日本語で並びます。該当する項目を開くと、問題のある箇所のURLや要素が一覧で出ます。

文字の小ささを指摘された場合は、スマホで文字が小さくなる原因も合わせて見ると、どこを直せばよいか当たりがつきやすくなります。

なお、画面に出る点数（0〜100の数字）はあくまで目安です。点数を上げること自体が目的ではありません。見てほしいのは数字より、スクリーンショットと日本語の指摘文のほうです。点数が低くても、読む人が困っていなければ急ぐ必要はありません。

2. Search Consoleで報告が出ていないか見る（お持ちの場合）

Google Search Console（検索での見え方を無料で確認できるGoogleの管理画面）を登録済みの場合は、ここにも手がかりがあります。

1. Search Consoleにログインし、左メニューから「ページ」を開きます。ここで、検索に載っていないページや、その理由が一覧で確認できます。
2. 左メニューに「エクスペリエンス」系の項目や、スマホでの表示に関するレポートがお使いの画面に該当の項目がある場合は、そこを開いて、問題として報告されているページがないか確認します。表示されるレポートの種類はアカウントや時期によって異なります。
3. 報告があるときは、対象のURLが一覧で出ます。そのURLを先ほどのPageSpeed Insightsに入れ直すと、具体的な指摘と見え方を突き合わせられます。

3. パソコンしかないときはChromeでスマホ表示を再現する

手元にスマホがない、あるいは複数の画面幅で見たいときは、ブラウザのChromeに備わっている開発者ツール（デベロッパーツール）が使えます。

1. Chromeで対象のページを開き、キーボードの F12（Macは Command + Option + I）を押します。画面の横か下に英語のパネルが出ます。
2. パネル左上にあるスマホとタブレットが重なったアイコンを押すと、表示がスマホサイズに切り替わります。
3. 上部の「Dimensions」から機種名や画面幅を選び、横幅を変えながら、文字の折り返しやボタンの位置が崩れないかを見ます。

実機とまったく同じ見え方になるわけではありませんが、横にはみ出す・要素が重なるといった大きな崩れは十分に見つけられます。見つかった箇所はURLと症状をメモしておくと、次のセクションで原因の当たりをつけるときに役立ちます。

崩れの原因になりやすい箇所（見つけたあとに当たりをつける）

スマホで見たときの崩れは、見た目はバラバラでも原因になりやすい場所はだいたい決まっています。「どこが犯人になりやすいか」を先に知っておくと、直すときも、制作者に相談するときも話が早くなります。まずは症状から当たりをつけてみてください。

症状	よくある原因	自分でできる対処の目安
横にずれる・右に余白ができて左右に動く	幅を数値で固定した写真や表、埋め込み地図。途中で改行されない長いURLや英数字の羅列	写真の「幅600px」などの数値指定を外す。表の列を減らす。長いURLはリンク文字を日本語の説明に変える
文字が小さくて読みにくい	本文の文字サイズが小さい数値のまま指定されている	管理画面のデザイン設定で本文サイズを変えられる場合あり。16px前後が目安
ボタンが押しにくい・隣を押してしまう	ボタン同士の余白が足りない。リンクが文字だけで面積が小さい	ボタン化する、上下の余白を広げる。指の腹で押せる大きさが目安
地図やYouTubeが画面からはみ出す	埋め込みコードの幅が固定の数値になっている	埋め込みし直すときに幅の指定を見直す。難しければ制作者へ
下の固定バナーが本文やフォームに重なる	画面下に固定した部分の高さ分の余白が本文側にない	バナーを一時的に外して確認。調整は制作者に依頼が早い
表が途中で切れる	横に長い表をそのまま載せている	項目を減らす、2つの表に分ける、縦並びの箇条書きに書き換える

自分で直せること／依頼したほうが早いこと

線引きの目安はシンプルです。管理画面から文章や写真を編集できる範囲は、自分で直したほうが早く済みます。写真の幅指定を外す、表を短くする、長いURLを日本語のリンク文字に置き換える、ボタンの前後に空行を入れる——このあたりは数分で終わります。

一方で、テンプレートそのものの設定、CSSという見た目を決めるファイル、画面下の固定バナー、フォームの作りに関わるものは、触ると他のページまで崩れることがあります。ここは制作者に任せたほうが結果的に早く、安全です。ご自身で直せる範囲と相談すべき範囲の整理は、どこから直せばいいかの優先順位の決め方もあわせて参考になります。

依頼するときの伝え方

制作者に直してもらうときは、次の4点をまとめて送ると、やり取りの往復が減ります。

1. ページのURL（トップページだけでなく、崩れている固有のページ）
2. スクリーンショット（スマホで電源ボタンと音量上ボタンを同時に押すと撮れます。崩れている部分が写っていれば十分）
3. 機種名とブラウザ（「iPhone 13、Safari」「Android、Chrome」など。機種によって出方が違うため重要です）
4. 症状の一言（「右に空白ができて横に動く」「地図が画面からはみ出す」など、見たままの言葉で構いません）

「なんとなく崩れています」だけだと、相手は再現から始めることになり時間がかかります。上の4点があれば、原因の見当がついた状態で着手してもらえます。

崩れの対処における判断基準

自分で直せる範囲

• 写真の幅指定を外す
• 表の列を減らす・短くする
• 長いURLを日本語リンクに変える
• ボタンの前後に空行を入れる

→

制作者へ相談推奨

• テンプレートやCSSの設定
• 画面下に貼り付く固定バナー
• フォームの作りにまつわる部分

直したあとの確認と、崩れを増やさない日々の習慣

直してもらった、あるいは自分で設定を変えたあと、すぐにスマホで開いて「変わっていない」と感じることがあります。これは直っていないのではなく、スマホやブラウザが前に見た内容を一時的に保存していて、古い画面を出しているだけ、ということが少なくありません。この仕組みをキャッシュと呼びます。まずはここを疑ってから判断すると、無駄なやり取りが減ります。

修正後の再確認は3段階で（所要5分ほど）

1. 同じページを再読み込みする…画面を指で下に引っ張ると更新されます。これで変われば、古い表示が残っていただけです。
2. シークレットウィンドウで開く…Chromeなら右下の「…」から「新しいシークレットタブ」、Safariなら右下のタブ一覧から「プライベート」を選び、そこにURLを貼って開きます。保存された古い情報を使わないので、はじめて来た人に近い見え方になります。
3. 別の機種・別のブラウザで見る…iPhoneで直したならAndroidでも、SafariならChromeでも開いてみます。画面幅や文字の大きさの設定が違う端末で崩れが残っていることがあります。

自分の端末だけでは判断しきれないので、ご家族や社員の方に「このページ、スマホで開いて変なところがないか見てほしい」と頼むのがいちばん早い方法です。文字が切れていないか、横にはみ出していないか、ボタンが押せるか、の3点だけ伝えれば十分です。

崩れを増やさないための5つの習慣

表示崩れは、気づけないのが普通です。パソコンで作業していれば、スマホ側の見え方は目に入りません。だからこそ、気合いで注意するのではなく「見る日」と「見るページ」を決めてしまうと、ぐっと楽になります。

• 新しい記事やお知らせを公開したら、スマホで一度だけ開く…公開直後に1分。自分のスマホでURLを開いて上から下まで指でなぞるだけで、ほとんどの崩れは目に入ります。
• 写真は大きさを指定せずに入れる…「横700px」などと数字で固定すると、画面の狭いスマホではみ出す原因になります。そのまま挿入して、自動で幅に合わせてもらうほうが崩れにくいです。
• 表は項目を絞る…横に並べる列が5つ6つと増えると、スマホでは必ず窮屈になります。3列までを目安にし、それ以上になりそうなら箇条書きに分けたほうが読まれます。
• 見た目に関わる更新をしたあとは必ずスマホで確認…テーマ（デザインの土台）の更新、プラグインの追加、トップページの画像差し替えなど。「見た目をいじった日はスマホを開く」とだけ決めておきます。
• 月に一度、主要4ページを見る日を決める…トップページ、サービス・商品のページ、料金や事例のページ、お問い合わせページ。この4つだけで構いません。毎月1日、給料日のあとなど、すでにある予定にくっつけると忘れません。

対象ページを先に決めておくと手間が増えない

すべてのページを毎回見ようとすると続きません。問い合わせにつながる道すじ（人が最初に来るページ→説明のページ→フォーム）だけを確認対象として紙かメモに書き出し、それ以外は公開時の1分チェックに任せる、という割り切りで十分です。どのページを見るべきか迷うときは、実際に人が来ているページの調べ方を参考に、訪問の多い順に4つ選ぶとずれがありません。

なお、崩れが直ったからといって、検索の順位や問い合わせ数がすぐに変わると約束できるものではありません。それでも、読む人が途中で引き返す理由がひとつ減るのは確かです。毎月5分の確認が、せっかく来てくれた方を取りこぼさないための地味な保険になります。

まとめ

スマホでの表示崩れは、専用の機材も有料の道具もなくても、手元のスマートフォンとGoogleが無料で公開しているPageSpeed Insights（ページの表示速度と使い勝手を点検してくれる無料の診断ページ）で、大部分を見つけることができます。制作会社に頼まないと分からないもの、と思われがちですが、実際には「自分の指で触って、引っかかるところを書き出す」だけでかなりのことが分かります。

この記事の要点

• まずは自分のスマホで見る。横にはみ出していないか、文字が小さすぎないか、ボタンが押しにくくないか、電話番号やフォームまでたどり着けるか。5分あれば一通り触れます。
• 次に無料ツールで客観的に確かめる。PageSpeed Insightsの「モバイル」タブを開き、URLを入れて分析するだけ。「テキストが小さすぎて読めません」「クリック可能な要素同士が近すぎます」といった日本語の指摘を探します。
• 見るページは全部でなくてよい。トップページ、サービス・商品の案内ページ、料金のページ、問い合わせフォームの4ページから。ここが入口と出口になっていることが多いためです。
• 直す順番は「問い合わせに近いページ」から。同じ崩れでも、問い合わせフォームで起きているものと、会社沿革のページで起きているものでは、損の大きさがまるで違います。フォーム・料金・サービス案内の順に手を付けると、限られた時間でも効きやすくなります。
• 直したあとは、必ず同じ手順でもう一度見る。直したつもりが別の場所を崩していることもあるため、修正後に自分のスマホで再確認し、PageSpeed Insightsも入れ直して比べます。

なお、表示崩れを直したからといって検索順位が上がると決まっているわけではありません。ただ、見づらい・押しにくい状態は、せっかく来てくださった方がそこで帰ってしまう理由になります。崩れを直すことは、順位のためというより「来た人に伝わる状態にしておく」ための作業だとお考えください。あわせて自分のスマートフォンでホームページを確認するときの5項目も、日々の点検のひな形として使えます。

シロツメWebについて

私たちSHIROTSUME GRASS株式会社の本業は、法人向けの中古スマートフォン・PCの買い取りと販売です。その集客を外に頼まず、自分たちでSEOの記事を書いて行ってきました。そこで結果が出たので、同じやり方を他社さまにもご提供しています。代行だけを専門にしてきた会社ではない、というのが私たちの立ち位置です。

ご自身で一通り確認してみて、「崩れているのは分かったけれど、どこから手を付ければいいか判断がつかない」というときは、無料のホームページ診断をご利用ください。ホームページのURLとご連絡先のメールアドレスだけでお申し込みいただけます。スマホでの見え方や、気になった箇所、改善の糸口をお伝えするもので、売り込みのためのご連絡はいたしません。順位や問い合わせ数をお約束するものではありませんが、現状を外から見た一つの見方として、お役に立てればと思います。