「うちのサイト、スマホ対応はしてますよ」と言われたのに、実際にスマホで開くと、ボタンが小さくて押しづらい。表示に何秒も待たされる。
そんなサイトを見たことはないでしょうか。
こんにちは、三重県でホームページ制作を行っているMYコンサルティングです。
実は「スマホで崩れず表示される」ことと「スマホで快適に使える」ことは、まったくの別物です。
この記事では、その差を埋めるスマホ最適化について、当社が制作現場で実際に使っている検品基準まで公開しながら解説します。
スマホ最適化とは
ホームページを「スマホで表示できる」状態からさらに進めて、スマホで快適に使える状態に仕上げることです。
具体的には、拡大せずに読める・指で押しやすい・速く表示される、という3つの快適さを整えます。
いま多くのお店でサイト訪問の8割前後がスマホからです。スマホでの使い心地は、そのままお店の第一印象になります。
「レスポンシブ対応」との違い
よく混同されますが、レスポンシブ対応とスマホ最適化は役割が違います。
レスポンシブ対応は「土台」です。
画面の幅に合わせてレイアウトが組み変わり、スマホでも崩れずに表示される状態を指します。詳しくはレスポンシブ対応の解説記事で書いたとおり、これは今や大前提です。
スマホ最適化は、その土台の上に積む「快適さ」です。
崩れずに表示されても、文字が薄くて読みづらければ読まれません。ボタンが小さければ押されません。表示が遅ければ、開かれる前に閉じられます。
この「読める・押せる・待たせない」を仕上げる作業がスマホ最適化です。
スマホ最適化の3つの要素
要素1. 見やすい：拡大しなくても読める
スマホの小さな画面では、パソコンと同じ感覚で作った文字はそのまま読みにくさに直結します。
基準はシンプルで、指でつまんで拡大しなくても、すべての文字が読めること。
文字の大きさだけでなく、背景と文字の色の差（コントラスト）も重要です。おしゃれな薄いグレーの文字は、屋外の日差しの下ではほぼ見えなくなります。
要素2. 押しやすい：ボタンは「指のサイズ」で作る
マウスのカーソルは1ピクセルの点ですが、指先は違います。
そのため、タップする要素には最低限のサイズが必要です。当社では44×44ピクセル以上を基準にしています。これはAppleがiPhoneの設計ガイドラインで推奨している数値です。
もう1つ大事なのが、スマホならではの機能につなげることです。
電話番号は、タップしたらそのまま発信できるように。
住所は、タップしたらGoogleマップが開くように。
お問い合わせフォームは、電話番号の欄をタップしたら数字のキーボードが出るように。
こうした一つひとつの積み重ねが、「問い合わせのしやすさ」の正体です。フォームの作り方はお問い合わせフォームの記事でも詳しく解説しています。
要素3. 速い：Googleが数値で測っている
表示の速さは感覚の話ではなく、Googleが「Core Web Vitals（コア・ウェブ・バイタル）」という3つの指標で数値化しています。
| 指標 | 何を測るか | 合格ライン |
|---|---|---|
| LCP | ページの主役（大きな画像など）が表示されるまでの時間 | 2.5秒以内 |
| INP | タップしてから画面が反応するまでの速さ | 0.2秒以内 |
| CLS | 表示中にレイアウトがガタッとずれない安定性 | ずれがほぼ無いこと |
速さを削る主な犯人は、重すぎる画像です。
撮ったままの写真をそのまま載せると1枚で数MBになり、それだけで2.5秒の合格ラインを超えてしまいます。画像を軽い形式（WebP）に変換し、読み込む順番を制御するのが速さの基本です。
2回目以降の表示を速くする仕組みはキャッシュの記事で解説しています。
Googleはスマホ版でサイトを評価している
「スマホ最適化はSEOに関係ありますか？」という質問には、はっきり「あります」と答えられます。
💡 Googleの評価基準は「スマホ版」です
Googleは「モバイルファーストインデックス」という方針をとっており、サイトの評価はスマホ版のページを基準に行われます。
パソコンでどれだけきれいなサイトでも、スマホ版が使いにくければ、その使いにくい方が評価対象になります。
さらに上で紹介したCore Web Vitalsの数値は、検索順位を決める要素のひとつとして公式に使われています。
つまりスマホ最適化は「見た目の仕上げ」ではなく、集客の土俵に乗るための条件になっています。
自分でできる3つのチェック
お手持ちのサイトが最適化できているか、道具なしで今すぐ確かめられます。
チェック1. 電話番号をタップしてみる
発信画面が開けば合格です。何も起きなければ、お客様は番号を手で打ち直しています。
チェック2. 親指だけで3ページ移動してみる
片手の親指だけでメニューを開き、目的のページまで行けるか。途中で押し間違えたり、拡大が必要になったりしたら、ボタンのサイズか間隔に問題があります。
チェック3. PageSpeed Insightsで測る
Googleが無料で提供している採点ツール（PageSpeed Insights）にサイトのURLを入れると、スマホでの表示速度が100点満点で採点され、Core Web Vitalsの合否も表示されます。
検索で「PageSpeed Insights」と探せばすぐ見つかります。
当社の検品基準を公開します
参考までに、当社がすべての案件で使っているスマホ検品基準の一部を公開します。
制作会社を選ぶときに「このあたり、どうしていますか？」と聞く材料にしてください。
| 項目 | 当社の基準 |
|---|---|
| タップ要素のサイズ | 最小44×44px・間隔8px以上 |
| フォームの文字サイズ | 16px以上（iPhoneで勝手に画面が拡大されるのを防ぐ） |
| 電話・地図 | タップ発信、Googleマップ連携を必ず設定 |
| 画像 | 全枚WebP形式・サイズ指定・読み込み順の制御 |
| 文字の読みやすさ | 背景との明暗差4.5:1以上（屋外でも読める濃さ） |
| 表示速度 | PageSpeed Insightsモバイル85点以上・Core Web Vitals全項目「良好」 |
| 最終確認 | 小さい画面のiPhone実機で全ページ確認してから納品 |
チェックリストは全部で20項目あり、どの案件でも同じ基準で検品しています。
「スマホ対応です」と一言で済ませず、この中身まで話せる会社かどうかが、選ぶときの分かれ目です。
よくある質問
レスポンシブ対応済みなら、スマホ最適化もできているのでは？
別物です。レスポンシブは「崩れずに表示される」ことまでしか保証しません。文字の読みやすさ、ボタンの押しやすさ、表示速度は、それぞれ個別に作り込む必要があります。実際、レスポンシブ対応済みでもPageSpeed Insightsで30点台のサイトは珍しくありません。
スマホを優先すると、パソコンでの見た目は犠牲になりますか？
なりません。スマホ向けの設計を土台にして、画面が広いパソコンでは余白やレイアウトを広げていく「モバイルファースト」という作り方が標準です。両方の見た目を最初から設計に含めます。
今のサイトを最適化だけしてもらうことはできますか？
サイトの作りによります。もともとレスポンシブ前提で作られていれば部分的な改善で済むことが多いですが、古い固定幅のサイトでは作り直しのほうが安く済む場合もあります。当社では現状のサイトを拝見して、どちらが得かを含めてご提案しています。
表示速度はどのくらいを目指せばいいですか？
Googleの合格ラインは「主役の画像が2.5秒以内に表示されること」です。PageSpeed Insightsのモバイル採点なら、まず60点以上、できれば80点以上が目安です。当社は85点以上を納品基準にしています。
まとめ
スマホ最適化とは、「スマホで表示できる」を「スマホで快適に使える」に引き上げる作業です。
中身は3つ。拡大せずに読める、指で押しやすい、速く表示される。この3つをGoogleは数値で測っていて、検索順位にも影響します。
まずは自分のサイトの電話番号をタップして、PageSpeed Insightsで採点してみてください。
それだけで、いまの立ち位置がだいたい分かります。
当社の制作するホームページは、この記事で公開した検品基準をすべての案件で満たしてから納品しています。
「うちのサイト、スマホでどうなのか見てほしい」というご相談だけでも歓迎です。お気軽にどうぞ。