スマホで​「見られる」と​「使える」は​違う。​ホームページの​スマホ対応の​確かめ方

スマホ対応とは、​読めて、​押せて、​送れる​こと

「うちの​サイトは​スマホでも​見られるから​大丈夫」と​聞く​ことがあります。
ただ、​パソコン用の​ページが​そのまま​縮んで​画面に​収まっているだけ、という​場合も​「見られる」には​入ってしまいます。
文字が​小さすぎて​指で​広げないと​読めない、​ボタン同士が​近くて​隣を​押してしまう、​フォームの​入力欄が​画面からは​み出す。
こうした​ページは、​表示は​されていても、​スマホで​使えるとは​言えません。

私は、​拡大しなくても​本文が​読め、​ボタンやリンクを​押し間​違えずに​押せて、​問い合わせや​予約の​フォームを​最後の​送信まで​終えられる​状態を、​スマホ対応と​呼んでいます。
最後の​フォームで​つまずくと、​読んでもらえても​連絡は​来ません。
フォーム​その​ものの​見直しは問い合わせフォームを​見直す​チェックリストに​書いたので、​この​記事では​ページ全体の​話を​します。

Googleは、​スマホ版の​ページを​見て​登録している

スマホ対応が​検索にも​関わるのは、​Googleが​スマホで​見た​ときの​ページを​もとに​サイトを​登録しているからです。
Googleは、​インデックスへの​登録と​ランキングに、​スマートフォン エージェントで​クロールした​モバイル版の​サイト コンテンツを​使う、と​説明しています。
同じ​案内で、​モバイルサイトにも​パソコンサイトと​同じ​コンテンツを​含める​こと、​見出しや​構造化データ、​titleと​メタ ディスクリプションも​パソコン版と​そろえる​ことを​求めています​（⁠Google 検索セントラル：モバイルサイトと​モバイルファースト インデックスに​関する​おすすめの​方法、​2026年10月5日確認）。

ここで​気を​つけたいのは、​画面が​狭いからと、​スマホ版でだけ文章や​表を​削る​作りです。
もう​1つは、​ボタンを​押すまで​本文を​読み込まない​作りで、​Googleは​同じ​案内で、​メインの​コンテンツを、​スワイプや​クリック、​入力といった​操作を​した​ときに​初めて​読み込む形に​しないよう​書いています。
スマホ版に​載っていない​文章は、​検索の​うえでも​載っていない​ものとして​扱われうる、と​考えておくのが​安全だと​私は​思います。

レスポンシブとは​：1つの​ページが、​画面の​幅に​合わせて​組み替わる​作り

スマホ対応の​作り方は、​大きく​分けて​3つあります。

Googleは、​この​中で​実装と​維持が​最も​簡単な​デザイン パターンとして、​レスポンシブ ウェブ デザインを​すすめています​（出典は​上と​同じ​案内）。
私たちの​サイトも​レスポンシブで、​記事も​サービスの​ページも、​1つの​ページを​幅に​合わせて​組み替えています。

レスポンシブの​ページには、​HTMLの​頭に​ <meta name="viewport" content="width=device-width, initial-scale=1"> のような​1行が​入っています。
この​1行が​ないと、​スマホの​ブラウザの​多くは​ページを​パソコン向けの​幅で​組んでから​画面に​合わせて​縮めて​見せる、という​動きが​一般に​知られていて、​全体が​小さな​字の​まま​表示されます。
ページを​開いて​文字が​豆粒のように​小さく、​指で​広げないと​読めないなら、​レスポンシブで​作られていない​可能性が​高いです。

自分で​確かめる​方法：​見る​所と、​どの​画面で​見るか

いちばん確かなのは、​手元の​スマホで、​お客様に​なった​つもりで​ページを​たどる​ことです。
トップから​入って、​サービスの​説明を​読み、​問い合わせの​フォームを​送る​ところまで。
下の​表は、​その​とき​見る​所を​まとめた​ものです。

自分の​スマホ1台で​見て​問題が​なくても、​それで​終わりには​しないでください。
画面の​幅は​機種で​違い、​同じ幅でも​iPhoneの​Safariと​Androidの​Chromeでは​文字の​描き方が​違います。
パソコンの​Chromeなら、​開発者ツールの​機種の​切り替え​（デバイス モード）で、​いろいろな​幅を​試せます。
ただ、​これは​Chromeの​描き方で​幅を​変えているだけなので、​Safariでだけ​起きる​崩れは​見つかりません。
iPhoneを​持っている​人に​1度​見てもらうのが、​いちばん早いと​思います。

ボタンの​大きさの​目安

押しやすさには、​Googleが​開発者向けに​出している​目安が​あります。
web.devの​記事では、​タッチの​対象の​最小の​大きさとして​約48デバイス非依存ピクセルを​すすめていて、​これは​実寸で​一辺9ミリほど、​指の​腹と​同じ​くらいの​面積だと​説明しています。
対象どうしは、​縦と​横に​8ピクセルほど​間を​空けるよう​書かれています​（⁠web.dev：タップ ターゲットの​ユーザー補助機能、​2026年10月5日確認）。
定規を​当てる​必要は​なく、​親指で​押して​隣が​反応しないかを​見れば、​だいたいの​見当は​つきます。
文章の​中の​リンクが​何行も​続けて​並んでいる​所や、​フッターの​小さな​文字の​リンクは、​狭くなりがちです。

数字で​見るなら​：PageSpeed Insightsと​Core Web Vitals

スマホでの​表示の​速さや、​読み込み中に​レイアウトが​ずれないかは、​目で​見るより​数字の​ほうが​分かります。
Googleは、​ページの​読み込み、​操作への​反応、​見た目の​安定性に​ついて、​実際の​ユーザーの​体験を​測る​指標を​Core Web Vitalsと​呼んでいます。
「良好」と​される​値は、​次の​とおりです。

Googleは、​Core Web Vitalsを、​ほかの​ページ エクスペリエンスの​要素とともに、​コア ランキング システムが​考慮する​要素として​挙げていて、​測る​道具として​Search Consoleの​Core Web Vitalsレポートと、​PageSpeed Insightsを​挙げています​（⁠Google 検索セントラル：Core Web Vitals と​ Google 検索の​検索結果に​ついて、​2026年10月5日確認）。
ただ、​この​数字が​よければ​上位に​出る、という​話ではありません。
私は、​数字は​「読む人を​待たせていないか」を​確かめる​ものとして​見ています。

PageSpeed Insightsは、​URLを​入れるだけで​使えます。
見るのは​スマホの​結果の​ほうで、​トップだけでなく、​問い合わせの​ページや、​写真の​多い​ページも​入れてみてください。
点数​その​ものより、​どの​画像が​重いか、といった​直す所の​手が​かりの​ほうが​役に​立ちます。

Search Consoleの​「モバイル ユーザビリティ」は、​いまは​ない

以前は、​Search Consoleに​「モバイル ユーザビリティ」という​レポートが​ありました。
いまは​この​レポートは​ありません。
ページを​機械で​点検するなら、​Chromeの​道具である​Lighthouseが​あります​（⁠Chrome for Developers：Lighthouse の​概要、​2026年10月5日確認）。
古い​解説記事に​「Search Consoleで​スマホ対応を​確認する」と​書かれていても、​その​画面は​探しても​見つかりません。
いまは、​先の​表のように​自分の​手で​見るのと、​PageSpeed Insightsや​Lighthouseで​測るのを​組み合わせます。

私たちの​サイトで、​スマホの​表示を​見直した​こと

iPhoneでだけ崩れていた

2026年9月11日の​午前、​代表メッセージの​ページの​文章を​差し替えました。
その​とき、​日本語を​文節で​折り返すために、​CSSの​1行で​済む指定​（word-break: auto-phrase）を​使いました。
パソコンの​Chromeでは​問題なく​見えていたのですが、​この​指定は​iPhoneの​Safariでは​効かず、​iPhoneでだけ語の​途中で​行が​折り返されていました。
差し替えた​後に​気づき、​同じ​日の​昼前に、​文節の​区切りに​目印を​入れる​方法へ​戻して​直しています。
自分の​パソコンで​見て​崩れていなくても、​iPhoneでは​崩れている​ことが​ある、と​身を​もって​知った​出来事でした​（直し方の​詳しい​話は日本語が​単語の​途中で​改行される​原因と​直し方に​書いています）。

6つの​幅と、​2つの​描き方で​全ページを​見た

この​件も​あって、​2026年10月4日に、​サイト全体の​文字の​組み方を​点検しました。
画面の​幅は​360・​390・​430・​768・​1280・​1440の​6つ。
描き方は、​iPhoneの​Safariと​同じ​仕組みの​WebKitと、​Chromeの​仕組みの​Chromiumの​2つです。
記事は​全本を​390と​1280で、​代表的な​記事6本と、​一覧・サービス紹介・会社の​ページは​6つの​幅すべてで​表示し、​合わせて​852回の​表示を、​Playwrightという​道具で​自動で​調べました。

見つかったのは、​手元の​スマホ1台では​気づきにくい​ものばかりでした。
サービス紹介の​ページの​うち3枚では、​幅390px以下に​なると、​箇条​書きの帯の​文字が​1字分の​幅まで​縮み、​縦に​並んでいました。
コラム一覧の​ページ送りは、​幅360pxでだけ、​数字と​「前へ」​「次へ」が​縦に​割れていました。
どちらも、​幅の​広めの​機種では​起きません。
いずれも​同じ​日の​うちに​直し、​直した​後に​同じ​点検を​もう​一度​通しています。

本文と​入力欄の​文字の​大きさ

同じ​点検で、​文字の​大きさも​測りました。
コラムの​本文は、​スマホの​幅で​16pxです。
一方、​サービス紹介の​ページの​本文は、​スマホで​15.5pxに​なっていました。
わずか​0.5pxですが、​同じ​サイトの​中で​記事より​小さいのは​筋が​通らないので、​16pxに​そろえています。

問い合わせの​入力欄は、​スマホの​幅で​16px以上に​していて、​点検でも​16px未満の​欄は​0件でした。
16pxに​しているのは、​入力欄の​文字が​16pxより​小さいと、​iPhoneの​Safariでは​欄を​押した​ときに​画面が​拡大される、という​挙動が​一般に​知られているからです。
拡大されると、​送る​前に​指で​戻す手間が​増えます。

作り直す前に、​いまの​ページを​1周してみる

スマホで​崩れているのを​見つけると、​作り直したくなるかもしれません。
ただ、​文字が​小さい、​ボタンが​近い、​表がは​み出す、といった​崩れの​多くは、​CSSを​直せば​済みます。
作り直しが​要るのは、​そもそも​レスポンシブで​作られておらず、​パソコン用の​ページを​縮めて​見せている​場合や、​スマホ用の​別の​サイトを​持っていて、​2つを​直し続けられない​場合だと​私は​考えています。
作り直すか​どうかの​判断はホームページの​リニューアルは​必要かに​書いています。

bundlyzeは、​大阪市北区の​グラングリーン大阪を​拠点に、​大阪・兵庫を​中心とした​関西の​会社からの​ご相談に​対応していて、​打ち合わせは​Web会議でも​対面でも​できます。
全国から​オンラインでも​ご相談いただけます。
この​記事を​書いた​津嘉山は、​業務システム開発と​AWSを​専門と​する​エンジニアで、​この​サイトの​ページを​書き出す​仕組みと、​スマホと​パソコンの​幅で​表示を​点検する​手順も​自分で​組んでいます。

まずは、​自社の​トップページを​スマホで​開いて、​問い合わせの​ボタンまで​親指だけで​たどり着けるかを​試してみてください。