ホームページのスマホ対応とは?レスポンシブの意味と費用感を解説

スマホで自社のホームページを開いて、文字を指で広げないと読めないなら、そのサイトはスマホに対応できていません。

総務省の調査では、インターネットを使う端末はスマートフォンが74.4%で、2017年にパソコンを上回りました。年代別でも、60代の78.8%、70代の53.0%がスマホでインターネットを使っています（2024年。総務省 情報通信白書 令和7年版）。

この記事では、スマホ非対応で起きること、「レスポンシブ対応」の意味、自分のサイトの確かめ方、直すときの費用の決まり方を順に説明します。

スマホ対応していないと何が起きるか

読む前に閉じられる

パソコン用の画面がそのまま縮んで表示されるため、文字はとても小さくなります。指で広げながら読むのは手間で、よほど用事が強い人でなければ途中で戻ります。お客様に年配の方が多い業種では、なおさらです。文字の大きさや色の決め方は高齢のお客様にも読みやすいホームページの作り方にまとめています。

操作でつまずく

• ボタンやリンクが小さく、隣を押してしまう
• 問い合わせフォームが崩れて、入力欄が押せない・送信できない
• 電話番号が画像で置かれていて、押しても電話がかからない

どれも問い合わせの直前で起きます。外出先で「今から行ける所」を探す飲食店や美容室・サロンでは、スマホでの見え方がそのまま来店に響きます。海外からの旅行者もスマホで探すので、ホームページの多言語対応は必要?もあわせて読んでおくと判断しやすくなります。

検索での扱い

Google は、スマホ用の巡回ロボットで集めたページの内容を、検索の索引と順位付けに使っています。これを「モバイルファーストインデックス」と呼び、Google は作り方としてレスポンシブを勧めています（Google 検索セントラル「モバイルファースト インデックス」）。

ここで使われるのは、スマホに届くページの「内容」です。パソコンにもスマホにも同じ中身を出している古いサイトは、内容の面ではそのまま索引されます。Google は、表示の速さや反応の良さ（Core Web Vitals）は順位を決める仕組みに使っていると書く一方、それ以外の使いやすさの項目は「直接は順位を上げない」としています（Google 検索セントラル「ページ エクスペリエンス」）。

スマホ対応は、順位を上げる近道というより、来た人に読んでもらうための前提です。損の中心は、検索よりも「来た人が帰ること」のほうにあります。

レスポンシブ対応とは

レスポンシブ対応とは、1つのサイトが、見る画面の幅に合わせて並び方を自動で組み替える作り方です。

• パソコンで見ると: 横に3列並んだ形
• スマホで見ると: 同じ内容が縦1列に並び、文字とボタンが指で扱える大きさになる

中身は1つなので、お知らせを1回直せば、パソコンでもスマホでも同じ内容になります。

ほかの作り方との違い

3つめは、作成ツールの Wix（従来の Wix エディタ）の方式です。パソコンでの変更はスマホに反映されますが、スマホ側で直した並びはパソコンには反映されません。同じ Wix でも、Wix Studio は画面幅ごとに組み替えるレスポンシブの作りです（Wix ヘルプセンター）。ツールの違いはWix・STUDIO・WordPress比較を参考にしてください。

見積書の「スマホ対応」の見方

新しく作るサイトなら、スマホでの表示は最初から含まれているのがふつうです。見積書でスマホ対応が別の項目になっていたら、何が含まれているのかを聞いてください。一方、今あるサイトをスマホに合わせて直す場合は、スマホ対応そのものが作業の中身なので、費用がかかるのは当然です。見積書の読み方はホームページ制作の見積書の見方にまとめています。

自分のサイトを確かめる方法

ふだんパソコンでしか自社サイトを見ていないなら、この節の確かめ方を一度試してください。3分ほどで終わります。

方法1 ─ 自分のスマホで開く

電話番号は、文字で書かれていれば iPhone の Safari が自動で押せる形にするため、対応できているかどうかの見分けには使えません（Apple の開発者向け資料）。押してもかからないときは、番号が画像になっていないかを確かめてください。

方法2 ─ パソコンでブラウザの窓を細くする

パソコンでブラウザ（サイトを見るソフト）の窓を横に細くしていき、並び方が縦1列に組み替わればレスポンシブです。組み替わらずに右側が切れ、横に送るための棒（スクロールバー）が出るなら、対応できていません。

方法3 ─ 問い合わせを実際に1件送る

• 入力欄をタップして、文字が打てるか
• 送信ボタンが押せて、完了の画面が出るか
• 送った内容が、自分のメールに届くか

スマホで読まれる中身の工夫

並び方が画面に合っていても、中身がパソコン向けのままだと、スマホでは読まれにくくなります。

画面の下に出したままのボタンの置き方はLINE公式アカウントとホームページの連携で、ボタンの先のフォームの見直しは問い合わせが増えるホームページの作り方で説明しています。

表示の速さも確かめる

スマホは、外出先の電波で見られることが多い端末です。パソコンでは気にならない重さでも、スマホでは表示を待たずに戻られます。

Google が無料で公開している PageSpeed Insights に自社サイトの住所を入れると、スマホで見たときの表示の速さの診断が出ます。点数よりも、どこが遅いのかの手がかりとして使ってください。

• 写真が大きすぎる ── 撮ったままの写真を、縮めずに載せている
• 動く飾りや部品が多い ── スライドする写真、外部の埋め込み、使っていない部品が残っている
• サーバーの反応が遅い ── サイトを置いている場所そのものが遅い

写真が原因のときは、写真の大きさを整えるだけで速くなることがあります。直しを頼むときは「表示の速さも見てほしい」と伝えておくと、見積もりに入れてもらえます。

費用を決めるもの

同じ「スマホ対応」でも、金額は次の3つで大きく変わります。見積もりを取るときは、この3つを伝えると話が早く進みます。

• ページ数 ── 直すページが多いほど増えます
• 元のサイトの作り ── 古い作りほど、部分的に直すのが難しくなります
• 内容の見直しを含めるか ── 文章や写真も新しくするなら、作り直しに近い費用になります

幅が大きい作業なので、複数の依頼先に同じ条件で見積もりを取ると比べやすくなります。リニューアル全体の費用の考え方はホームページのリニューアル費用相場、新しく作る場合はホームページ制作の費用相場で説明しています。

部分的に直すか、作り直すか

分かれ目は、サイトの中身がまだ今の事業に合っているかどうかです。

作り直すなら、サービス・料金・実績の中身、問い合わせにつながるページの構成、お知らせを自分で更新できる仕組みも一緒に見直すと、二度手間が減ります。依頼の段取りはホームページ制作の流れと期間、準備するものはホームページ発注前の準備リストにまとめています。

まとめ ─ 依頼の前に確かめること

1. 自分のスマホでサイトを開き、文字・横のはみ出し・ボタン・フォームの4つを見る
2. パソコンでブラウザの窓を細くして、並び方が組み替わるか見る
3. サービス・料金・実績が今の事業と合っているかを確かめ、部分的に直すか作り直すかを決める
4. 制作会社に、電話番号を押してかけられるか、地図アプリへのリンクが動くか、公開前に自分の端末でフォームを送って確かめられるかを聞く

LIT STUDIO のホームページ制作は 50,000円〜（5ページまで）で、スマホで見やすい作りが基本に含まれています。6ページ目からは1ページ10,000円です。AIを使って制作費を抑えている理由と、その分どこに気を付けるべきかはAIを使ったホームページ制作はなぜ安い?で説明しています。今のサイトの住所を添えてお問い合わせいただければ、部分的に直すか作り直すかの見立てからお伝えします。