ホームページがスマホ対応していない｜お客さまの画面で起きていることと、作り直しを頼む前に決める3つ

スマホ対応していないホームページは、お客さまの画面でこう見えます

下の2枚は、同じお店のホームページを、同じスマートフォンの幅で開いた画面です。お品書きも、営業時間も、写真も、載せている内容は同じです。違うのは、作りだけです。

スマホ対応していない

作り直したあと

どちらも、実際にインターネットへ置いてあります。お手元のスマートフォンで開くと、お客さまと同じ画面になります（検索には載せていません）。

• スマホ対応していないホームページを開く
• 作り直したあとのホームページを開く

左の画面は、いまも実際に公開されているホームページの作りを調べて、再現したものです。この記事を書くにあたり、さいたま市の商店会や商工団体のページからたどれるホームページを27件、スマートフォンの幅で開きました。27件のうち6件が、左と同じ状態でした。めずらしい話ではありません。

来る直前のお客さまに、3つのことが起きています

お店のホームページをスマートフォンで開く人の多くは、もう行くつもりになっています。知りたいのは、今日は開いているか、どこにあるか、電話は何番か、です。左の画面では、その3つともつまずきます。

左の画面を測ると

• 1営業時間が、読めない画面に出る文字は、約5px
• 2メニューが、押せない画面の上での高さは、約10px
• 3電話が、かけられない番号が、絵の中に書いてある

読めない。文字は、画面の上で約5pxです。2本の指で広げれば読めますが、広げると横にはみ出し、左右に動かしながら探すことになります。

押せない。「営業のご案内」「アクセス」といったメニューは、高さが約10pxしかありません。指先よりずっと小さいので、となりの項目を押してしまいます。

かけられない。電話番号は、看板の写真の中に、絵として書いてあります。絵なので、押しても何も起きません。番号を覚えて、打ち直すことになります。

ここで手間取った人は、苦情を言ってはくれません。黙って検索の画面に戻り、ほかのお店を開きます。お店の側からは、何も起きていないように見えるのが、この問題のいちばん厄介なところです。

検索への影響もあります。Googleは、スマートフォンで開いたときの内容を、検索に載せる判断と順位づけに使うと説明しています。あわせて、画面の幅に合わせて並び方を変える作りをすすめています。

スマホ対応は、文字を大きくするだけでは済みません｜レスポンシブに組み直す理由

「それなら、文字を大きくしてもらえばいい」と思われるかもしれません。それでは済まないのは、小さく見える原因が、文字の大きさではないからです。

スマートフォンは、幅の指定がないページを開くと、「これはパソコン用のページだ」と判断します。そして、幅およそ980pxの画面として組み立ててから、手のひらの画面に入るように全体を縮めます。

左の画面で起きていること

幅980pxの画面として
組み立てる文字は12px

幅390pxの画面に
入るように縮める全体が4割の大きさに

画面に出る文字は
約5px12px × 0.4

つまり、ページ全体が「幅980pxの紙」として作られていることが原因です。文字だけを大きくすると、その紙の中で文字があふれて、表やメニューが崩れます。

スマホ対応とは、この紙の作りをやめて、見る画面の幅に合わせて並び方が変わる作りに組み直すことです。この作りは、レスポンシブと呼ばれます。右の画面は、同じ内容を、スマートフォンでは縦に1列、パソコンでは横に並ぶように組んであります。

組み直しの大きさは、いまのページの作りで決まります。見積もりを頼むと、制作会社はここを見ています。

いまのページの作り	かかる手間
並び方を、あとから変えられる作り	ここ10年ほどの間に作られたページに多い作りです。いまのページを生かして、スマートフォン用の並び方を足せます。
幅を固定した表で、全体を組んである	左の画面がこれです。メニューも、お品書きも、表の中に入っているので、ほぼすべてを組み直します。
見出しやメニュー、電話番号が絵になっている	絵は、幅に合わせて並べ替えられません。文字に打ち直すところから始めます。

下の2つに当てはまるなら、手を足すより、文章と写真を引き継いで作り直すほうが、早くて確かです。作り直しといっても、内容を一から考え直すわけではありません。変えるのは、入れものです。

スマホ対応の作り直しを頼む前に、決めておく3つ

スマホ対応は、制作会社に頼む仕事です。頼む前に、次の3つを決めておくと、見積もりを比べやすくなり、あとで困りません。

1

だれに頼むかいまの制作会社か、別の制作会社か。

2

何を引き継ぐか文章、写真、ホームページの住所、メール。

3

この機会に、何を足すかスマートフォンで来る人が、すぐ使えるもの。

1. だれに頼むか

まず、いまの制作会社に見積もりを頼みます。ホームページの中身をいちばん知っているのは、いまの制作会社だからです。そのとき、毎月の管理費に、スマホ対応が入っているかどうかも聞いてください。

管理費を払い続けているのに、スマホ対応は別料金で高額、という見積もりが返ってくることがあります。その金額で新しく作り直せるなら、制作会社の乗り換えを考える時期です。別の制作会社の見積もりと、並べて比べます。

2. 何を引き継ぐか

作り直しで失いたくないものを、先に書き出します。文章と写真。「お店の名前.com」のようなホームページの住所（ドメイン）。その住所で使っているメール。

写真と文章は、だれが用意したものかで扱いが分かれます。ご自分で撮った写真、ご自分で書いた文章は、そのまま使えます。いまの制作会社が用意した写真やイラスト、書いてもらった文章は、新しいホームページで使ってよいかを、契約書で確かめるか、制作会社に聞いてください。素材サイトの写真は、借りた制作会社だけが使える決まりになっていることがあります。使えないものは、撮り直すか、用意し直せば済みます。

とくに住所は、名刺や看板、地図の情報に載っています。変わると、すべて直すことになります。ドメインがだれの名義になっているかで、引き継げるかどうかが決まるので、ドメインは誰の名義？で先に確かめておくと安心です。

3. この機会に、何を足すか

同じ内容を、ただスマートフォンの幅に収めるだけでは、もったいないです。スマートフォンで来る人は、読んだその場で動きます。右の画面では、次のものを足しました。

項目	スマホ対応していない	作り直したあと
画面に出る文字	約5px	18px
メニューの高さ	約10px	49px
押せる電話番号	0か所（絵の中）	4か所。下に「電話する」が出たまま
地図	住所の文字だけ	ページの中に地図を表示
予約	電話だけ	電話と、予約フォーム

見積もりを比べるときは、金額だけでなく、この表の下の3行にあたるものが入っているかを見てください。

かりぬいホームページは、スマホ対応が標準です

上の「作り直したあと」は、私たちの制作サンプルです。かりぬいホームページは、スマホ対応を標準にしています。追加の料金はかかりません。電話のボタン、地図、フォームも含めて、初期費用50,000円と、月額10,000円の中に入っています。

作り直しは、いまのホームページのアドレスを、依頼フォームに貼るだけで始められます。文章と写真は、いまのページから引き継ぎます。あらためて原稿を書いていただく必要はありません。いまの制作会社が用意した写真やイラストは、使ってよいかを先に確かめ、使えないものはこちらで用意し直します。

契約の前に、いまのホームページの内容で、トップページを作り直した見本をお見せします。2回まで直せます。ここまで無料です。ご自分のスマートフォンで、いまのホームページと見比べてから決めてください。いまの制作会社の見積もりと、比べていただいて構いません。

• 画面の数字は、2026年10月4日に、幅390pxのスマートフォンの画面で2つのホームページを開いて測ったものです。お店（麦と汐）は架空で、「スマホ対応していない」ほうは、実在するホームページの作りを再現した見本です。実在のホームページの文章や画像は使っていません。
• 27件の確認は、2026年10月4日に行いました。さいたま市の商店会の連合会と商工団体のホームページからリンクされている外部のホームページのうち、開けた27件が対象です。お店のホームページだけを集めたものではありません。
• Googleの説明は、Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」によります。