モバイルUX
Mobile UXもばいる・ゆーえっくす
モバイルUXとは、スマートフォンで自社サイトを使ったときの体験の質そのもののこと。画面が小さく、操作するのは指先で、見ているのは移動中や休憩中の数十秒。この条件のもとで「読めるか・押せるか・待たされないか・入力を終えられるか」の4点が満たされているかどうかで決まります。デザインの好みの話ではなく、成果の出口を塞いでいないかどうかの話です。
作る側はPCで確認し、顧客はスマートフォンで離れていく
サイトの打ち合わせは、たいていPCの大きな画面で行われます。デザイン案もPCで見せられ、公開後の確認もPCで済んでしまう。ところが実際の訪問者の多くは、片手で持ったスマートフォンでそのページを開いています。作った人が一度も見ていない画面が、顧客が唯一見ている画面である——これが多くの中小企業サイトで起きているねじれです。PCでは整って見えるページが、スマートフォンでは見出しが4行に折り返し、料金表が横にはみ出し、電話番号は画像なのでタップできない。訪問者は不満を伝えずに戻るだけなので、この状態は報告されません。
混同されやすい言葉を先に整理します。モバイルファーストは「スマートフォンを基準に考える」という方針、レスポンシブデザインは「1つのHTMLで画面幅に合わせて組み替える」という実装手法です。モバイルUXはその結果として顧客の手元で何が起きているかを指します。レスポンシブで作られていても、モバイルUXが悪いサイトは普通にあります。幅は収まっているのに文字が小さい、ボタンが隣同士で押し間違える、画像が重くて表示を待たされる。方式が正しいことと、使いやすいことは別の話です。
判断を感覚に任せなくて済むよう、公開されている目安を押さえておくと役に立ちます。タップの領域について、AppleのHuman Interface Guidelinesは44×44ポイント以上、GoogleのMaterial Designは48×48dp以上を推奨しています。文字と背景の明暗差については、WCAG 2.1のレベルAAが本文で4.5:1以上を求めています。表示速度と操作の反応については、GoogleのCore Web Vitalsが「良好」の基準としてLCP 2.5秒以内、INP 200ミリ秒以内、CLS 0.1以内を示しています。また、Googleは2024年7月5日以降、サイトの巡回をスマートフォン用のクローラーのみで行う方針を公表しました。スマートフォンで表示できない情報は、検索エンジンから見ても存在しないということです。
良いモバイルUXは褒められません。気づかれないまま用が済むことが、成功の形です。
顧客心理の視点で見ると、スマートフォンの訪問者は「読みたい」のではなく「早く済ませたい」状態にあります。そして小さな画面には、独特の不安がつきまといます。押し間違えたら戻れるだろうか。この長いフォームを打ち終わるまで電車は着かないだろうか。拡大しないと読めない文字は、あとで契約条件を見落とす不安につながります。つまりモバイルの不便さは、単なる面倒ではなく「この会社と進めて大丈夫か」という判断材料として受け取られるのです。逆に言えば、余計な操作を求めないだけで信用は積み上がります。電話番号をタップすればそのまま発信できる、住所をタップすれば地図が開く、フォームの入力欄に触れたら数字キーボードが出る。こうした小さな配慮は語られませんが、確実に「分かっている会社だ」という印象を残します。中小企業ほど、ここで差がつきます。
仕組み化の視点では、担当者の几帳面さに頼らないことが要点です。人が目視で気をつける方式は、繁忙期に必ず崩れます。代わりに「4つの検査点」を制作と更新の手順に埋め込むのが現実的です。①見える（本文は16px以上、明暗差は4.5:1以上）②押せる（タップ領域は44〜48px四方、隣接するリンクは間隔をとる）③待たない（LCP 2.5秒・INP 200ms・CLS 0.1を月1回計測）④入力できる（必須項目は3〜5個、入力形式を端末に伝える）。この4つを新規ページのテンプレートに反映しておけば、以降どのページを作っても一定の水準が保たれます。とくに③のCLS（表示中に要素がずれる度合い）は見落とされがちですが、押そうとした瞬間にボタンが動く体験は、誤タップと不信を同時に生みます。加えて、親指が届く画面下部に「次の一手」を常に置く設計を型にしておくと、ページごとに導線を考え直す手間がなくなります。
AI活用の視点では、確認作業を任せられます。主要ページのスマートフォン表示のスクリーンショットをAIに渡し、「初めて訪れた人が最初の画面で答えを得られるか、押しにくい箇所はどこか」を指摘させる。人の目は自社サイトに慣れてしまうため、この外部の視線が効きます。計測側では、PageSpeed Insightsのような無償ツールを月1回まわし、数値が基準を外れたページだけを直す運用にすれば、勘で改修する無駄が減ります。ARGASのように訪問者の行動を追える仕組みがあれば、端末別にどのページで離れているかが分かるため、「PCでは問題ないがスマートフォンだけ離脱が集中しているページ」を特定して直せます。フォームの入力途中での離脱が多い場合は、AIチャットで質問に答える窓口を先に置き、入力の前に不安を解消する手も取れます。順番としては、まず4つの検査点を機械的に満たし、その後で体験の細部をAIと一緒に磨くのが失敗しません。
図解：画面のどこに何を置くか、と満たすべき4つの目安
左は縦画面の役割分担です。目に入りやすい上部と、指が届きやすい下部は別の場所にあります。右は、デザインの議論の前に機械的に確認できる4点です。
事例で見る：国内・海外
AppleとGoogleの設計指針 ── 「指は正確なポインタではない」という前提
モバイルUXの基準を独自に考える必要はありません。端末をつくっている当事者が、設計指針を公開しています。AppleのHuman Interface Guidelinesは、タップ可能な要素に44×44ポイント以上の領域を確保するよう推奨しています。GoogleのMaterial Designは、同じ趣旨で48×48dp以上を目安として示しています。数値そのものより重要なのは、その背後にある考え方です。マウスカーソルは1ピクセル単位で狙えますが、指は接地面が広く、しかも押した瞬間に自分の指で対象が隠れます。つまり「見えている大きさ」より「押せる大きさ」を確保しなければならない。この前提を受け入れると、判断が変わります。テキストリンクを並べるより余白のあるボタンにする、隣接する選択肢は間隔をとる、削除や送信のような戻れない操作は他の要素から離す。両社の指針は無償で公開されており、社内の議論を「好みの主張」から「基準との照合」に変える共通言語として使えます。なお、指針の内容は改訂されるため、実装時には最新版の記述を確認するのが前提です。
地域の工務店のような形 ── 直したのは3か所だけだった
たとえば、住宅のリフォームを手がける地域の工務店が、問い合わせのほとんどをスマートフォン経由で受けている場合を考えます。サイトはリニューアル済みで、PCでは施工写真が大きく並ぶ立派な作りです。それでもスマートフォンでは、いくつかの詰まりが起きがちです。トップページの最初の画面が大きな写真で埋まり、対応エリアも営業時間も画面の外にある。電話番号は装飾された画像なのでタップできず、番号を覚えて電話アプリに打ち直す必要がある。問い合わせフォームは必須項目が9個あり、そのうち「ご予算」と「詳しいご要望」は、まだ相談していない人には答えようがない。どれも致命的には見えませんが、すべて「あとにしよう」と思わせる理由になります。手を入れる場所は多くありません。最初の画面に対応エリアと営業時間、そして電話をかけられるボタンを置く。電話番号を画像からテキストリンクに変え、タップで発信できるようにする。フォームの必須項目を名前・連絡先・相談内容の3つに絞り、残りは任意にする。確認は、端末別に問い合わせ件数を分けて月単位で見れば足ります。これは特定企業の実績ではなく、来店・訪問を伴う地域商圏のビジネスで詰まりやすい代表的なパターンとして示しています。
現場での使い方：5ステップ
- 顧客と同じ入口から、自分のスマートフォンで入るブックマークからトップページを開くのではなく、実際に検索して該当ページに着地する。ここで見える最初の1画面が、顧客が見ている全体像。
- 4つの検査点で機械的に見る見える（16px・明暗差4.5:1）／押せる（44〜48px四方）／待たない（LCP 2.5秒・INP 200ms・CLS 0.1）／入力できる（必須3〜5個）。好みの議論はこの後にする。
- 親指が届く範囲に「次の一手」を置く電話・地図・問い合わせのうち、そのページで最も自然な1つを画面下部に常設する。上部の目立つ場所と、押しやすい場所は別だと考える。
- 数値は端末別に分けて見るPCとスマートフォンを合算すると、スマートフォンだけで起きている離脱が平均に埋もれる。端末で分け、差が大きいページから直す。
- 直したことと反応を1行で記録する「電話番号をタップできるようにしたら、スマホからの発信が増えた」を残す。この蓄積が、次の制作依頼の仕様書そのものになる。
関連用語
まとめ：小さな不便を消すだけで、顧客は自分から動く
モバイルUXは、スマートフォンで自社サイトを使ったときの体験の質です。レスポンシブで作られていることと、使いやすいことは別の話。判断は感覚に頼らず、公開されている目安で機械的に行えます。本文16px以上と明暗差4.5:1、タップ領域は44〜48px四方、LCP 2.5秒・INP 200ms・CLS 0.1、必須項目は3〜5個。この4点を制作と更新の手順に埋め込めば、担当者の几帳面さに依存しなくなります。画面の上部は目に入る場所、下部は指が届く場所なので、結論は上に、行動の入口は下に置く。確認の視線と文面の候補出しはAIに任せ、採用の判断は端末別の実績で行う。不便がなくなったサイトは褒められませんが、顧客は迷わず次の一手に進みます。
