モバイルフレンドリーとは｜
店舗サイトが離脱される5条件

スマホ片手に「◯◯ △△（エリア名）」と検索し、出てきたサイトを開く。文字が小さいので指で広げ、はみ出した料金表を横にずらし、電話しようと番号を押しても何も起きない——ここで多くの人が戻るボタンを押します。滞在時間にすれば10秒あるかどうか。店側は「サイトはちゃんとある」と思っていて、実際パソコンで開けば何の問題もありません。この落差を埋めるための考え方が「モバイルフレンドリー」です。言葉としてはよく耳にするのに中身が曖昧なまま使われがちなので、店舗サイトの視点で分解していきます。

モバイルフレンドリーという言葉が指す範囲

この用語は、何かの検査に合格した状態を指すものではありません。スマートフォンの画面サイズと指での操作を前提に、拡大や横スクロールをしなくても内容が読め、目的の操作ができる状態——それがモバイルフレンドリーです。合否ではなく、程度の話だと捉えてください。

もともとはGoogleの評価基準の呼び名として広まった言葉ですが、その後に判定用の単体ツールは提供が終了しています。ですから現在は「テストに通ったから大丈夫」という確認の仕方ができません。状態を自分の目で確かめる必要がある、というのが今の前提です。

中身は3つの層に分けると整理しやすくなります。

• 表示：拡大しなくても読めるか（文字サイズ、行間、はみ出し）
• 操作：指で押せるか（タップ領域、電話リンク、フォーム）
• 速度：待たされないか（画像の重さ、読み込みの順番）

この記事では前の2つを扱います。速度は独立したテーマなので、関連記事のほうを参照してください。

レスポンシブとは何が違うのか

混同されやすいので、はっきり分けます。レスポンシブは実装の手法、モバイルフレンドリーは結果として得られる状態です。

レスポンシブとは、同じHTMLをCSSで画面幅に応じて組み替える作り方を指します。スマホ用に別のURLを用意する方式や、同じURLで端末ごとに違うHTMLを返す方式もあり、レスポンシブはその選択肢のひとつにすぎません。

ここが肝心なのですが、レスポンシブで作ってあってもモバイルフレンドリーでないサイトは珍しくありません。実際によく見る例を挙げます。

つまり「レスポンシブテーマを入れたから対応済み」とは言い切れません。手法を採用したことと、使える状態になっていることは別の話です。そしてこの5つは、同時に起きていても被害の大きさが揃いません。電話が主導線の業種で番号が画像になっているのと、料金表がはみ出しているのとでは、失っているものの大きさが違う。どれから直すかの判断は、その店がどこで成約しているかによって変わります。

モバイルファーストインデックスとの関係

モバイルファーストインデックス（MFI）は、検索エンジンがサイトを評価する際の基準を、パソコン版ではなくスマートフォン版のページに置く仕組みです。移行はすでに完了しており、現在はスマートフォン用のクローラーで巡回されるのが前提になっています。

店舗サイトにとっての実務的な意味は、ひとつに集約されます。スマホ版に載っていない情報は、評価の材料にならない可能性があるということです。

ありがちなのが、「スマホでは長すぎるから」という理由でサービス説明を削り、見出しを減らし、構造化データを外してしまっているパターン。パソコンで見れば情報が揃っているのに、評価の基準になる側が痩せている状態です。

スマホで離脱される5つの条件

ここからは具体です。店舗サイトで実際に離脱を招いている条件を、頻度の高い順に5つ挙げます。

1. 文字が小さい

本文が小さいと、多くの人は指で広げます。広げる操作が一度でも必要になると、そこで一定数が離れる。適切な大きさは、想定する読み手の年齢層と一文の長さによって変わります。高齢層が多い業種で若年向けサイトの数値をそのまま持ってくると、読めないままの状態が残る。装飾よりも先に、ここを見直す価値があります。

2. タップ領域が小さい、あるいは近すぎる

指の腹はマウスカーソルより太いので、リンクが行内に密集していると誤タップが起きます。特にグローバルメニューとフッターのリンク群は詰まりがちです。厄介なのは、作った本人は迷わず押せてしまうことです。どこにボタンがあるか知っている人の操作では、この問題は再現しません。

3. 横スクロールが発生する

原因はだいたい次のどれかです。viewportの指定が入っていない、幅が固定された要素がある、途中で改行されない長い文字列がある、表や画像がはみ出している。指を左右に動かさないと全部読めない時点で、内容は伝わらないと考えてください。

4. 電話番号がタップできない

店舗サイトでは致命的な部類です。画像で作った電話番号や、リンクになっていないテキストは、押しても何も起きません。tel:のリンクにしておけば発信画面が開きます。あわせて、営業時間外に電話をかけさせないよう、番号のすぐ横に受付時間を添えておくと親切です。

5. フォームの入力負荷が高い

スマホでの入力は、パソコンの数倍おっくうです。項目が並ぶほど離脱は増えます。とはいえ削れば済むわけでもありません。減らしすぎたフォームは、届いた問い合わせの精度が落ち、折り返しの電話が一往復増えます。どこまで削り、何を必須にするかは、問い合わせの後にどんなやり取りが発生するかによって変わる。加えて、入力欄に適切なタイプを指定しておけば、開くキーボードが変わって入力の手数が減ります。ここは見落とされやすい割に効く部分です。

自分で確認する方法

前述のとおり、合否を一発で出してくれる専用ツールは現在提供されていません。代わりに、次の3つを組み合わせるのが実務的です。

1. 実機で通しの操作をする：自分のスマホでWi-Fiを切り、トップページから目的のページへ進み、電話リンクを押し、フォームを最後まで送信する。ここまで一通りやります。iPhoneとAndroidの両方、できればスタッフの端末でも試してください。判断材料としてはこれがいちばん確実です
2. ブラウザの開発者ツールを使う：Chromeなら開発者ツールを開き、デバイスツールバーに切り替えると画面幅を変えながら崩れを探せます。はみ出している要素や、固定幅のまま残っている箇所が見つけやすい
3. Search Consoleで確認する：URL検査を使うと、スマートフォン用のクローラーが実際にどう読み取ったかと、レンダリング結果のスクリーンショットを確認できます。「ウェブに関する主な指標」のレポートでは、モバイルとパソコンが分かれた形で状態を見られます

この3つのうち、いちばん骨が折れるのは1つ目です。1箇所を直すこと自体より、更新のたびに主要ページを実機で通し確認し続けるほうが重い。写真を1枚差し替えただけでレイアウトが崩れることもあり、気づかないまま数か月放置され、その間ずっと予約を取りこぼしている例は本当に多い。しかも「どこが崩れているか」より「どの崩れが売上に効くか」の判断が要ります。※当社FACTORは、この点検と修正、優先順位づけまでを運用として引き受けています。自店で回すなら、どのページを毎回通し確認の対象にするかを先に決めておかない限り、点検は続きません。

自サイトのどの崩れが実際に予約の取りこぼしにつながっているのかは、ページの構成と流入の入り方を突き合わせないと決められません。無料のAI診断では、店舗名から現状の見え方を確認できます。

どこから直すか、後回しでいいこと

全部を一度に直す必要はありません。手を入れる対象は、次の6つに整理できます。

• viewportの指定
• 電話番号のリンク化
• 本文の文字サイズと行間
• はみ出す表と画像
• フォームの項目構成
• タップ領域の調整

この6つのどれから着手するかで、同じ工数でも成果の出方が変わります。viewportの指定が抜けているサイトでは、他をいくら整えても全体が崩れたままです。逆に、そこが正常なサイトで最初に効くのは、成約に直結する導線のほう。電話が主導線の店とフォームが主導線の店では、優先すべき対象がそもそも違います。一律の順番があるように見えて、実際には自店のどこで成約が起きているかを知らないと決められません。

反対に後回しでよいのは、デザインの全面刷新です。「スマホ対応のためにサイトを作り直す」という話になりがちですが、まずはこの6つに手を入れて、どこで離脱しているかを数字で押さえるのが先です。原因が分からないまま作り直すと、同じ問題を新しいデザインで再現することになります。刷新するにしても、この6つを検証したあとのほうが、投資が無駄になりません。原因を掴んでから作り直せば、次のデザインで何を守るべきかが決まります。

よくある質問

まとめ

モバイルフレンドリーは合否のラベルではなく、スマホの画面と指の操作で内容が読めて操作できるか、という状態を指す言葉です。レスポンシブで作ってあっても、料金表がはみ出し、電話番号が画像のままなら、その状態には届いていません。評価の基準がスマホ版に置かれている今、削るのではなく折りたたむ発想に切り替えるのが安全です。確認は実機での通し操作、開発者ツール、Search ConsoleのURL検査。そして本当に効いてくるのは、見つけた崩れのどれが売上に触れているのかを見極めることです。崩れの数を数えても優先順位は出ません。自店がどこで成約しているかと突き合わせて初めて、直す価値のある崩れとそうでない崩れが分かれます。作り直しの検討は、そのあとで構いません。