ホームページのスマホ対応は、スマホで開いたときに、文字が読めて、押したいところが押せて、パソコンと同じ情報にたどり着ける状態にすることです。
この記事では、なぜ要るのかを公的な統計と Google の説明で確かめたうえで、どう作るか、何を確かめればよいかを基準つきで整理します。
スマホ対応が必要な理由
1 つめは、見る人の多くがスマホで開くことです。総務省が毎年行っている通信利用動向調査では、インターネットを使う端末は「スマートフォン」が「パソコン」を 28.8 ポイント上回り、20〜59 歳の各年齢層では約 9 割がスマートフォンで利用しています（令和 7 年調査）。取引先や求職者が、最初にスマホでサイトを開くことは珍しくありません。
2 つめは、検索での扱いです。Google の説明では、Google はスマートフォン用のクローラーで読み込んだモバイル版の内容を、インデックスとランキングに使っています。インデックスに使われるのはモバイル版に表示されている内容だけで、モバイル版の内容がパソコン版より少ないと、ある程度のアクセスの減少を見込むべきだ、とも書かれています。Google は、モバイル版にもパソコン版と同じ内容を載せるよう求めています。
作り方はレスポンシブデザインが基本
スマホ対応の作り方には、画面の幅に合わせて同じページの並びを変える方法（レスポンシブデザイン）と、スマホ用に別のページを用意する方法があります。
Google は、実装と保守がいちばん簡単だとして、レスポンシブデザインを勧めています。ページが 1 つなので、更新も 1 回で済み、パソコン版とスマホ版で内容がずれる心配がありません。
実際のサイトのスマホ向けの作り
今回集計した実際のサイト 148 件のトップページを見ると、スマホの画面幅に合わせる指定（viewport）は 100%、スマホで開閉するメニューは 100% が持っていました。どちらもスマホ対応の土台です。一方で、電話番号をタップして発信できるリンクをトップページに置いていたのは 72% で、サイトによって分かれました。
どちらを前に出すかは、最初の連絡をどう受けたいかで決めます。電話で予約や相談を受けるなら、スマホで見た人がそのまま電話できる作りが合います。先に用件や条件を書いてもらってから返事をしたいなら、問い合わせフォームへ案内する作りが合います。集計したのは SITE PICK が作った完成済みのサイトなので、その作り方の傾向も含みます。
スマホで確かめること
実際にスマホで開いて、次を確かめます。基準があるものは、その数字も並べます。
- 横にはみ出さない 文字・画像・表が画面の幅に収まり、横にスクロールしなくても読めるか。表は横に長くなりやすいので、特に確かめます。
- 押したいところが押せる ウェブのアクセシビリティの国際基準 WCAG 2.2 は、タップする対象の大きさを少なくとも 24×24 CSS ピクセルとしています（レベル AA。例外あり）。Google の開発者向けの解説 web.dev は、押しやすさの目安として約 48 ピクセルを勧め、隣の対象とは約 8 ピクセル離すよう勧めています。ボタンやリンクが小さすぎたり、近すぎたりしないかを見ます。
- パソコンと同じ内容がある スマホでは表を省いたり、文章を短くしたりしていないか。上に書いたとおり、検索はスマホ版の内容で扱われます。
- メニューから主要なページへ行ける 開閉するメニューに、サービス・会社概要・問い合わせなどが入っているか。
- 電話やフォームにすぐ進める 電話番号がタップで発信できるか。フォームでは、メール欄や電話番号欄で入力に合ったキーボードが出るか。
フォームの項目の選び方は 問い合わせフォームの作り方 で整理しています。
実際のサイトでスマホ表示を見る
連絡の入口の置き方が違う 2 つを並べます。スマホで開いて見比べてください。内科クリニックは、今日受診できるかを知りたい人に向けて、トップページから電話をかけられる作りです。土木の会社は、工事の場所や用件を先に書いてもらえるよう、問い合わせフォームへ案内する作りです。
作り方は 3 つ｜完成済み・自作・オーダーメイド
作り方はどれでも選べます。優劣ではなく、向いているケースが違います。
- オーダーメイドで作る（制作会社に依頼） 要件を渡せば設計から任せられます。自社に合わせて一から作りたい場合や、撮影・原稿まで任せたい場合に向きます。SITE PICK でもオーダーメイド制作の相談を受け付けています。
- 自分で作る（自作） 費用は抑えられます。ホームページ作成サービスやテーマを選ぶときは、レスポンシブに対応しているかを確かめ、この記事の確認項目を公開前にスマホで一つずつ確かめてください。
- 完成済みのサイトから選ぶ（完成済み） 構成・更新の仕組み・入口が組まれた状態を実物で確かめ、社名・写真・文章を差し替えて公開します。完成形を先に確認してから決めたい場合に向きます。この記事の集計は、その実際のサイトのデータです。
