「うちのサイト、スマホ対応はしてますよ」と言われたのに、実際にスマホで開くと、ボタンが小さくて押しづらい。表示に何秒も待たされる。
そんなサイトを見たことはないでしょうか。
こんにちは、三重県でホームページ制作を行っているMYコンサルティングです。
実は「スマホで崩れず表示される」ことと「スマホで快適に使える」ことは、まったくの別物です。
この記事では、その差を埋めるスマホ最適化について、当社が制作現場で実際に使っている検品基準まで公開しながら解説します。
スマホ最適化とは
ホームページを「スマホで表示できる」状態からさらに進めて、スマホで快適に使える状態に仕上げることです。
具体的には、拡大せずに読める・指で押しやすい・速く表示される、という3つの快適さを整えます。
お店のホームページは、スマホから見られることがとても多くなっています。スマホでの使い心地は、そのままお店の第一印象になります。
この記事はホームページ（Webサイト）のスマホ最適化の話です。スマホ本体の動作を軽くしたり電池を長持ちさせたりする「最適化」の設定とは別の話なので、ご注意ください。
なお、同じことをモバイル最適化やスマートフォン最適化と呼ぶこともあります。
モバイル表示の最適化、という言い方も見かけますが、指しているものは同じです。この記事では「スマホ最適化」で統一します。
「レスポンシブ対応」との違い
よく混同されますが、レスポンシブ対応とスマホ最適化は役割が違います。
レスポンシブ対応は「土台」です。
画面の幅に合わせてレイアウトを組み変える作り方で、スマホでも崩れにくく表示されます。ただし、読みやすさや速さまで自動的に整うわけではありません。詳しくはレスポンシブ対応の解説記事で書いたとおり、これは今や大前提です。
スマホ最適化は、その土台の上に積む「快適さ」です。
崩れずに表示されても、文字が薄くて読みづらければ読まれません。ボタンが小さければ押されません。表示が遅ければ、開かれる前に閉じられます。
この「読める・押せる・待たせない」を仕上げる作業がスマホ最適化です。
スマホ最適化の3つの要素
要素1. 見やすい：拡大しなくても読める
スマホの小さな画面では、パソコンと同じ感覚で作った文字はそのまま読みにくさに直結します。
基準はシンプルで、指でつまんで拡大しなくても、すべての文字が読めること。
文字の大きさだけでなく、背景と文字の色の差（コントラスト）も重要です。薄いグレーの文字は、屋外の日差しの下などでは読みにくくなります。
要素2. 押しやすい：ボタンは「指のサイズ」で作る
マウスのカーソルは1ピクセルの点ですが、指先は違います。
そのため、タップする要素には最低限のサイズが必要です。AppleはiPhoneの設計ガイドラインで、ボタンの押せる範囲を44×44ポイント以上にするよう推奨しています。これを参考に、当社ではホームページのタップできる部分を44×44px以上にすることを独自の基準にしています。
もう1つ大事なのが、スマホならではの機能につなげることです。
電話番号は、タップして発信の確認画面へ進めるように（営業電話対策で「タップで番号を表示」する形にする場合も、表示した番号からそのまま発信へ進めるように）。
住所は、タップしたらGoogleマップが開くように。
お問い合わせフォームは、電話番号の欄をタップしたら数字のキーボードが出るように。
こうした一つひとつの積み重ねが、「問い合わせのしやすさ」の正体です。フォームの作り方はお問い合わせフォームの記事でも詳しく解説しています。
要素3. 速い：Googleが数値で測っている
表示の速さは感覚の話ではなく、Googleが「Core Web Vitals（コア・ウェブ・バイタル）」という3つの指標で数値化しています。
反応の速さを測る指標は、2024年3月に以前の「FID」から「INP」に置き換わりました。古い解説記事にFIDと書かれていたら、情報が古いと考えてください。
| 指標 | 何を測るか | 良好の目安 |
|---|---|---|
| LCP | 画面の中でいちばん大きな画像や文字のかたまりが表示されるまでの時間 | 2.5秒以内 |
| INP | タップしてから画面が反応するまでの速さ | 0.2秒以内 |
| CLS | 表示中にレイアウトがガタッとずれない安定性 | 0.1以下 |
判定は、実際に訪れた人の計測値の75パーセンタイル（遅いほうから4分の1の人の体験）で行われます。3つの指標は、それぞれ別に評価されます。
速さを削る主な犯人は、重すぎる画像です。
撮ったままの写真は1枚で数MBになることがあり、通信環境によってはLCPが遅くなる大きな原因になります。画像を軽い形式（WebP）にして大きさを整え、読み込む順番を制御するのが速さの基本です。
2回目以降の表示を速くする仕組みはキャッシュの記事で解説しています。
Googleはスマホ版でサイトを評価している
「スマホ最適化はSEOに関係ありますか？」と聞かれたら、「関係します。ただし、それだけで順位が決まるわけではありません」と答えます。
💡 Googleの評価基準は「スマホ版」です
Googleは「モバイルファーストインデックス」という方針をとっており、主にスマホ版のページの内容を使って、検索への登録や順位の判断を行います。
スマホ版で文章や画像を省いていると、その省いた状態の内容で判断されることになります。
さらに上で紹介したCore Web Vitalsは、Googleが検索順位を決めるときに参考にする「ページエクスペリエンス」の一部だと公式に説明されています。ただし、内容の良さに比べれば影響は大きくないとも説明されているので、「速ければ上位」というほど単純ではありません。
つまりスマホ最適化は、見た目の仕上げだけの話ではありません。スマホ版に必要な内容がそろっていること、使いやすいこと、速いことが、検索でもお客様の目でも見られています。
AIの検索に向けて何をすればいいかは、llms.txtとは？お店のサイトに必要か で、当社サイトの実際の記録をもとに書いています。
お店のサイトでよくある「スマホで困る」8つ
レスポンシブ対応済みのサイトでも、スマホで開くと次のような問題が見つかることがあります。
当社がお店のサイトを見るとき、まず確かめている8つの点です。
| よくある問題 | お客様に起きること | 直し方 |
|---|---|---|
| 表が横にはみ出す | 料金表やメニュー表を見ようとすると、ページ全体が横に揺れる | 表だけを横にスクロールできる枠に入れる |
| メニューや料金が画像・PDFだけ | 指で広げないと読めない。PDFは開き方によって別の画面に移る | 文字で載せる。画像を使うなら、同じ内容を文字でも書く |
| 電話番号にリンクが付いていない | 機種によっては、番号をコピーしたり手で打ち直したりすることになる | タップで発信の確認画面へ進めるようにする |
| 入力欄を押すと画面が勝手に拡大する | iPhoneのSafariなどで、入力欄を押すとフォームが急に大きくなる | 入力欄の文字を16px以上にして、実機で確かめる |
| 画面いっぱいの写真の下が欠ける | ブラウザのアドレスバーの分だけ、写真やボタンが隠れる | 画面の高さの指定が原因なら、アドレスバーの出入りに合わせて変わる高さの指定（dvhなど）を検討する |
| 上に固定したメニューでスクロールがカクつく | 指で動かすたびに画面が引っかかる | 実機で原因を調べ、すりガラス風の効果など負荷の高い演出が原因なら弱める・外す |
| 開いた瞬間にお知らせの窓が画面をふさぐ | 閉じるボタンを探さないと本文が読めない | 本文をふさがない位置に小さく出す |
| 地図やSNSの埋め込みがいくつもある | ページが重くなり、表示に時間がかかる | 本当に必要なものだけ残す |
「表が横にはみ出す」は、当社が運用しているサイトでも実際に見つけた問題です。公開済みの記事をスマホの幅で測ったところ、表を枠に入れていなかったページで、表が画面より横に広がっていました。
パソコンで作業していると気づけないので、スマホの実機か、スマホの幅での実測で確かめるのが確実です。
スマホで開いてすぐに見える範囲（ファーストビュー）に何を置くかは、ファーストビューとはで説明しています。
自分でできる4つのチェック
お手持ちのサイトが最適化できているか、道具なしで今すぐ確かめられます。
チェック1. 電話番号をタップしてみる
発信の確認画面が開けば合格です。「タップで番号を表示」するボタンの場合は、表示された番号をもう一度タップして、発信へ進めるかまで確かめます。何も起きなければ、お客様は番号を打ち直すことになります。
チェック2. 親指だけで3ページ移動してみる
片手の親指だけでメニューを開き、目的のページまで行けるか。途中で押し間違えたり、拡大が必要になったりしたら、ボタンのサイズか間隔に問題があります。
チェック3. PageSpeed Insightsで測る
Googleが無料で提供している採点ツール（PageSpeed Insights）にサイトのURLを入れると、スマホでの表示の速さが100点満点で採点されます（90点以上が「良好」の区分）。
実際に訪れた人のCore Web Vitalsは、訪問者のデータが十分にあるページでだけ表示されます。公開したばかりのサイトや、訪問が少ないページでは出ないことがあります。
検索で「PageSpeed Insights」と探せばすぐ見つかります。
チェック4. 表のあるページで、横にずれないか指で確かめる
料金表や営業時間の表があるページを開き、ページ全体を左右に動かしてみます。表の中だけが動くなら合格、ページ全体が横に揺れるなら、上の「表が横にはみ出す」に当たります。
以前はGoogleの「モバイルフレンドリーテスト」というツールがよく紹介されていましたが、2023年12月に提供が終わっています。今はPageSpeed Insightsや、Chromeに入っている「Lighthouse」で確かめます。
制作会社に聞きたいスマホの検品基準（当社の例）
参考までに、当社がスマホで確かめている検品基準の一部を公開します。
制作会社を選ぶときに「このあたり、どうしていますか？」と聞く材料にしてください。
| 項目 | 当社の基準 |
|---|---|
| タップ要素のサイズ | 最小44×44px・間隔8px以上 |
| 表 | すべて横スクロールの枠に入れ、スマホの幅で横にはみ出さないことを実測 |
| フォームの文字サイズ | 16px以上（iPhoneで勝手に画面が拡大されるのを防ぐ） |
| 電話・地図 | タップで発信へ進める（番号表示ボタンの場合も表示後に発信できる）、住所からGoogleマップを開ける |
| 画像 | 全枚WebP形式・サイズ指定・読み込み順の制御 |
| 文字の読みやすさ | 本文は背景とのコントラスト比4.5:1以上（WCAGの基準）。屋外でも実機で読みやすさを確認 |
| 表示速度 | 納品前：PageSpeed Insightsのモバイル採点85点以上（当社独自の目標）／公開後：訪問者のデータがたまったらCore Web Vitalsを確認 |
| 最終確認 | 小さい画面のiPhone実機で全ページ確認してから納品 |
このほかにも細かい確認項目があり、納品前にこの基準で確かめています。
「スマホ対応です」と一言で済ませず、この中身まで話せる会社かどうかが、選ぶときの分かれ目です。
よくある質問
レスポンシブ対応済みなら、スマホ最適化もできているのでは？
別物です。レスポンシブは画面の幅に合わせてレイアウトを変える作り方で、文字の読みやすさ、ボタンの押しやすさ、表示の速さまで自動で整うわけではありません。それぞれ個別に作り込む必要があり、レスポンシブ対応済みでもPageSpeed Insightsの点数が低いことはあります。
スマホを優先すると、パソコンでの見た目は犠牲になりますか？
必ずしも犠牲にはなりません。当社では、スマホ向けの設計を土台にして、画面が広いパソコンでは余白やレイアウトを広げる形で、両方の見た目を最初から設計しています。
今のサイトを最適化だけしてもらうことはできますか？
サイトの作りによります。もともとレスポンシブ前提で作られていれば部分的な改善で済むことが多いですが、古い固定幅のサイトでは作り直しのほうが安く済む場合もあります。当社では現状のサイトを拝見して、どちらが得かを含めてご提案しています。
表示速度はどのくらいを目指せばいいですか？
Googleが示す良好の目安は、LCP（いちばん大きな画像や文字が表示されるまで）2.5秒以内、INP 0.2秒以内、CLS 0.1以下です。PageSpeed Insightsの採点は90点以上が「良好」の区分です。当社は納品前のモバイル採点85点以上を独自の目標にしています。
まとめ
スマホ最適化とは、「スマホで表示できる」を「スマホで快適に使える」に引き上げる作業です。
中身は3つ。拡大せずに読める、指で押しやすい、速く表示される。このうち速さや反応はCore Web Vitalsとして測られ、検索順位の判断にも使われますが、良好でも上位が約束されるわけではありません。
「そもそも誰が見に来ているのか知りたい」という場合は、ホームページは誰が見たかわかる？ をご覧ください。個人は特定できません。分かることと分からないことを線引きしています。
まずは自分のサイトの電話番号をタップして、PageSpeed Insightsで採点してみてください。
それだけで、いまの立ち位置がだいたい分かります。
当社の制作するホームページは、この記事で紹介した検品基準で確かめてから納品しています。
「うちのサイト、スマホでどうなのか見てほしい」というご相談だけでも歓迎です。お気軽にどうぞ。