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

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

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

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

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

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

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

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

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

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

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

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

つまり「レスポンシブテーマを入れたから対応済み」とは言い切れません。手法を採用したことと、使える状態になっていることは別の話です。

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

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

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

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

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

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

1. 文字が小さい

本文が14px未満だと、多くの人は指で広げます。広げる操作が一度でも必要になると、そこで一定数が離れる。目安は本文16px前後、行間は1.6〜1.8。装飾よりも先に、ここを直す価値があります。

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

指の腹はマウスカーソルより太いので、リンクが行内に密集していると誤タップが起きます。目安として押せる範囲は48px四方程度、要素どうしの間隔は8px以上。特にグローバルメニューとフッターのリンク群は詰まりがちです。

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

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

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

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

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

スマホでの入力は、パソコンの数倍おっくうです。項目が10個並んでいる時点で大半は離脱します。基本は名前・連絡先・用件の3項目。加えて、電話番号やメールの欄に適切な入力タイプを指定しておけば、開くキーボードが変わって入力の手数が減ります。住所の自動入力に対応しておくのも効果的です。

自分で確認する方法

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

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

この3つのうち、いちばん骨が折れるのは1つ目です。ページを1枚直すのは30分で済んでも、更新のたびに主要ページを実機で通し確認し続けるとなると話が変わります。写真を1枚差し替えただけでレイアウトが崩れることもあり、気づかないまま数か月放置される例は本当に多い。※こうしたサイトの点検と修正は、当社FACTORが引き受けている業務のひとつでもあります。自店で回すなら、確認するページを「トップ・料金・アクセス・予約フォーム」の4枚に絞り、更新した月だけ見る、という運用に落とすと現実的です。

直す順番と、後回しでいいこと

全部を一度に直す必要はありません。効果と手間の比で並べると、手をつける順番はこうなります。

1. viewportの指定：1行の追加で済むのに、抜けていると全体が崩れます
2. 電話番号のリンク化：店舗サイトでは、ここが直接コンバージョンに触れます
3. 本文の文字サイズと行間：CSSの数行で、読了率の土台が変わります
4. はみ出す表と画像：料金表とメニューが最優先
5. フォームの項目削減：削るだけなので費用がかかりません
6. タップ領域の調整：メニューとフッターから

反対に後回しでよいのは、デザインの全面刷新です。「スマホ対応のためにサイトを作り直す」という話になりがちですが、ここまでに挙げた6項目の大半は既存サイトの微修正で片づきます。作り直しを検討するのは、この6つを直しても操作が成立しないときだけで十分です。順番を逆にすると、費用も時間も余計にかかります。

よくある質問

まとめ

モバイルフレンドリーは合否のラベルではなく、スマホの画面と指の操作で内容が読めて操作できるか、という状態を指す言葉です。レスポンシブで作ってあっても、料金表がはみ出し、電話番号が画像のままなら、その状態には届いていません。評価の基準がスマホ版に置かれている今、削るのではなく折りたたむ発想に切り替えるのが安全です。確認は実機での通し操作、開発者ツール、Search ConsoleのURL検査の3点セット。直す順番は、viewportの指定、電話番号のリンク化、文字サイズ、はみ出す表、フォームの項目削減。作り直しの検討は、そのあとで構いません。