ホームページがスマホに対応しているかの確かめ方と直し方

10年近く前に作ったホームページを、スマートフォンで開いてみたことはあるでしょうか。パソコンで見る分には問題が無くても、スマートフォンでは文字が小さすぎて拡大しないと読めない、横にはみ出して左右に動かさないと全体が見えない、ということがよくあります。

この記事では、自社のサイトがスマートフォンで見やすいかを自分で確かめる方法、表示が崩れる主な原因、直し方の選択肢と費用の目安、そしてスマホ対応していないときに困ることを整理します。古いサイトを引き継いだ担当者が、制作会社に相談する前に状況をつかめるように書いています。

まず知っておきたいこと：専用の判定ツールは終わっている

以前は、Googleの「モバイルフレンドリーテスト」にアドレスを入れれば、スマホ対応かどうかを判定してもらえました。しかし、このテストと、Googleの検索向けの管理ツールにあった「モバイルユーザビリティ」のレポートは、2023年12月1日に提供を終えています。古い解説記事を見てこのツールを探しても、今は使えません。

代わりに、次の2つの方法で確かめます。

1. 手元のスマートフォンで実際に開いて見る
2. パソコンのChromeの開発者ツールで、スマートフォンの画面の幅を再現して見る

どちらも費用はかかりません。最終的な判断は、実機で見た結果を優先してください。

方法1：実機で確かめるチェックリスト

社内にあるスマートフォンで、トップページ・会社概要・サービス紹介・問い合わせページの4つは最低限開いてみます。iPhoneとAndroidの両方があれば、両方で見ると安心です。

見るところ	スマホ対応できている状態
文字の大きさ	拡大しなくても本文が読める
横のはみ出し	左右に動かさなくても、画面の幅に収まっている
画像	画面からはみ出さず、縮んで表示される
メニュー	押しやすい大きさで、開いて各ページへ移れる
ボタンとリンク	指で押し間違えないくらいの間隔がある
表	崩れずに読める、または横に動かして読める作りになっている
電話番号	押すと電話をかけられる
問い合わせフォーム	入力欄が画面に収まり、入力から送信まで進める

フォームは実際に送信まで試します。入力欄が小さすぎる、送信ボタンが画面の外にある、といった問題は、見るだけでは気付きにくいためです。

方法2：Chromeの開発者ツールで確かめる

パソコンのChromeには、スマートフォンの画面の幅でページを表示する「デバイスモード」という機能があります。

1. Chromeで自社のサイトを開く
2. ページの上で右クリックし、「検証」を選ぶ（開発者ツールが開く）
3. 開発者ツールの左上にある、スマートフォンとタブレットの形のアイコンを押す
4. 画面の上部に出る機種の一覧や幅の選択で、スマートフォンの幅に切り替える
5. ページを上から下まで動かし、はみ出しや文字の小ささを確かめる

Chromeの公式の解説では、デバイスモードはスマートフォンでの見え方の「一次近似」で、実機の動きをすべて再現するものではないとされています。たとえば、スマートフォンの処理の速さや、機種ごとの細かな違いまでは再現されません。デバイスモードで問題が見つかったら、実機でも確かめるという順で使うのが確実です。

スマホで表示が崩れる主な原因

古いサイトでスマートフォンの表示が崩れる原因は、おおむね次のどれかです。

症状	主な原因
ページ全体がパソコンと同じ形で小さく表示される	スマートフォン向けの画面の幅の指定（viewportの設定）が無い
横にはみ出し、左右に動かさないと読めない	ページの幅が固定の数値で作られている
画像が画面からはみ出す	画像の大きさが固定で、画面に合わせて縮まない
表が崩れる・つぶれる	列の多い表を、スマートフォン向けの工夫なしで置いている
文字が小さい・ボタンが押しにくい	パソコンの画面を前提にした文字の大きさと間隔のまま
一部の部品が表示されない	古い仕組みで作られた動きのある部品が、今のブラウザで動かない

画面の大きさに合わせて見た目を切り替える作り方をレスポンシブと呼びます。Googleの解説でも、スマートフォン向けの作り方として、同じページを画面に合わせて切り替えるレスポンシブがすすめられています。画像の用意の仕方はホームページの画像のサイズと形式の記事にまとめています。

直し方の3つの選択肢と費用の目安

スマホ対応の直し方は、大きく分けて3つあります。

直し方	向いているサイト	気をつけるところ
今のサイトにスマホ向けの指定を足す	ページ数が少なく、作りが単純なサイト	作りが古いと直す箇所が多く、費用がかさむ
テンプレートやCMSを使って作り直す	内容は活かしつつ、見た目と仕組みを新しくしたいサイト	文章や写真の見直しも同時に必要になりやすい
スマホ専用のページを別に作る	特別な事情がある場合	パソコン用と2つを更新し続ける手間がかかる

比較サイトのPRONIアイミツが公表している目安（2026年4月時点の更新）では、既存のサイトをレスポンシブにする費用は次の通りです。

• 下層ページ: 1ページあたり1万〜1.5万円前後
• トップページ: 2万〜3.5万円前後
• 画像の調整: 大きな画像で1枚4,000〜6,000円前後、小さな画像で2,000〜3,000円前後

同じ資料では、新しく作るサイトをレスポンシブにする場合、ページの組み立ての費用が1.5〜2倍ほどになる目安も示されています。ページ数が多い、作りが古い、という場合は、部分的な直しより作り直しのほうが見合うこともあります。作り直しを考える場合はホームページのリニューアルの記事を、作る仕組みの選び方はStudio・Wix・WordPressの違いの記事をご覧ください。

スマホ対応していないと困ること

スマホ対応していないサイトで困るのは、主に次のような点です。

• 読まれずに閉じられる: 文字を拡大しないと読めないページは、そこで読むのをやめられやすくなります
• 問い合わせまで進めない: フォームが入力しにくい、電話番号を押してもかけられない、といった不便が、問い合わせの手前での離脱につながります
• 会社の印象が古く見える: 取引先や求職者が、スマートフォンで会社を確かめることは珍しくありません
• Googleはスマートフォン版の内容を基準に扱う: Googleの解説では、検索のためにスマートフォン版のページの内容を使うとされています。スマートフォン版で内容が欠けていると、その内容は検索で扱われにくくなります

直す前に決めておくこと

制作会社に相談する前に、次のことを社内で決めておくと、見積もりの比較がしやすくなります。

1. スマホで特に見てほしいページはどれか（問い合わせ・採用・商品紹介など）
2. 今の文章と写真をそのまま使うか、見直すか
3. 今後、社内で更新したいページはあるか
4. 予算の上限と、いつまでに直したいか

全体の費用の考え方はホームページ制作の費用の記事にまとめています。

まとめ

スマホ対応の確認は、実機で主なページを開き、Chromeのデバイスモードで補えば、費用をかけずにできます。崩れの原因は、画面の幅の指定が無い、幅が固定、画像や表が画面に合わせて縮まない、のどれかであることがほとんどです。直し方は、足すか、作り直すかで費用が大きく変わるため、ページ数と今後の更新の予定から選びます。

Lapisデザインラボでは、今のサイトの内容を引き継いだ作り直し（リニューアル）を個別のお見積りでお受けしています。ご相談はお問い合わせから受け付けていて、費用の目安は概算のお見積りで出せます。