マルチデバイス対応
Multi-Device Designまるちでばいす・たいおう
マルチデバイス対応とは、同じ顧客がスマートフォン・PC・タブレットを行き来しながら検討する前提で、表示・導線・計測・引き継ぎを揃えて設計すること。端末ごとに別のサイトを持つことではありません。狙いは、どの端末から入っても話が途切れず続き、次の端末で再開できる状態をつくることです。
1人の顧客が、3回にわたって別々の端末で来ている
1件の問い合わせが生まれるまでの動きを、実際の順番で追ってみます。移動中にスマートフォンで検索して自社サイトを見つける。その日の夜、会社のPCで料金と実績をあらためて比べ、資料をダウンロードして上司に転送する。数日後、外出先からスマートフォンで電話をかける。これは特別な行動ではなく、法人向けでも個人向けでも珍しくない経路です。ここで重要なのは、端末が変わったのは人が変わったのではなく、判断の段階が変わった合図だということです。同じ人が、同じ会社について、違う目的で見ています。にもかかわらず多くのサイトは「スマホでも崩れずに見える」ところまでで対応を終えています。崩れないことは前提であって、対応そのものではありません。
実装方式は3つに整理できます。1つ目がレスポンシブで、1つのURLと1つのHTMLを共通で使い、画面幅に応じてCSSで組み替える方式。2つ目がダイナミックサービング（アダプティブ）で、同じURLに対しサーバー側で端末を判定し、別のHTMLを返す方式。3つ目が別URLで、PC用とスマートフォン用に異なるアドレス（m.〜など）を用意する方式です。Googleは検索セントラルのモバイルサイト向けの案内で、この3つの構成を挙げたうえでレスポンシブを推奨しています。理由は運用の単純さです。レスポンシブデザインなら更新箇所が1つで済み、「スマホ版だけ料金が古い」という状態が構造的に起きません。別URL方式は、二重管理と正しい相互指定（どのページがどのページの対応版かをタグで伝える設定）が必要になり、専任担当がいない組織では維持が難しくなります。
見落とされやすいのが計測の分断です。多くのアクセス解析は、標準の設定ではブラウザ単位で訪問者を識別します。そのためスマートフォンで見つけてPCで申し込んだ顧客は、別々の2人として数えられます。すると、PC側の申し込みは「直接アクセス」や「検索」として記録され、最初のきっかけをつくったスマートフォンでの流入（広告やSNSなど）は成果ゼロの経路として評価されます。ここを知らずに数字だけを見ると、実際には効いている入口の予算を削る判断をしかねません。Google Analytics 4のUser-ID機能のように、ログインや会員IDを用いて端末をまたいで同一人物として結びつける手段はありますが、識別子の取得と利用には本人の同意と適切な実装が前提になります。中小企業がすぐ取れる現実的な策は、資料請求や問い合わせの入力欄で「どこで知ったか」を1問だけ聞くことです。技術で埋められない部分は、顧客に直接尋ねたほうが早く正確です。
端末が変わるのは、人が変わったのではなく、検討の段階が進んだ合図です。
顧客心理の視点で見ると、端末ごとに知りたいことがはっきり違います。スマートフォンでは「見つける・確かめる」——何をしている会社か、自分の条件に合いそうか、近いか。落ち着いて読む状態ではないので、長い比較表を出しても読まれません。PCでは「比べる・決める・人に見せる」——料金の条件、対応範囲、実績、そして社内で共有できる資料。ここでは情報量が足りないことが不安になります。タブレットは「相手に見せながら話す」場面で使われることが多く、図と写真が主役になります。同じ内容を全端末に等しく並べると、スマートフォンでは多すぎ、PCでは物足りないという両方の失敗が同時に起きます。だから変えるのは情報の量ではなく、順番です。スマートフォンでは結論と連絡先を前に、PCでは根拠と条件を厚く。そして最も効くのが、次の端末に渡す配慮です。「この内容をメールで受け取る」ボタンが1つあるだけで、移動中に見つけた顧客は自分の机で検討を再開できます。
仕組み化の視点では、4点セットで型にします。①1つのHTMLで揃える——レスポンシブを土台に、更新の二重管理を作らない。②端末で変えるのは優先順位だけ——見出し、最初に見せるブロック、CTAの位置の3か所に限定し、それ以外は共通にする。③続きに移れる導線を置く——メールで送る、URLを共有する、PDFで渡す。検討が1回の訪問で終わらない前提を、設計に組み込む。④計測を端末別に分ける——合算した平均値は、片方の端末で起きている問題を隠します。この4つを新規ページのテンプレートに反映すれば、ページごとに考え直す作業がなくなります。加えて確認の作法として、公開前に主要3ページを実機のスマートフォン・PC・タブレットで開き、「最初の1画面に、その端末の顧客が知りたいことがあるか」だけを見る。崩れの有無ではなく、順番の妥当性を見る点が要点です。
AI活用の視点では、確認と調整の両方を任せられます。主要ページを3種類の画面幅で撮ったスクリーンショットをAIに渡し、「それぞれの端末の利用状況を踏まえて、最初の画面に置くべき情報がずれている箇所」を指摘させる。人は自社サイトの構成を覚えてしまうため、順番の違和感に気づけません。文面についても、同じ内容をスマートフォン向けに短く言い切る版とPC向けに条件まで説明する版に書き分ける作業は、方針を与えれば候補出しを任せられます。ARGASのような追跡の仕組みがあれば、端末別にどのページで離脱が集中しているかが分かるため、「PCでは読まれているのにスマートフォンだけ離脱するページ」を特定して順番だけ直せます。順番としては、まずレスポンシブで土台を1つにし、次に端末別の優先順位を整え、そのうえで端末をまたぐ計測に手を伸ばすのが失敗の少ない道筋です。
図解：端末をまたぐ1本の検討と、3つの実装方式
上段は同じ顧客が端末を持ち替えながら進む流れです。段階が違うので、求める情報も違います。下段は実装方式の違いで、運用の負担が大きく変わります。
事例で見る：国内・海外
Googleが公開する構成の指針 ── 3方式のうち1つを推している理由
マルチデバイス対応の方式選びは、好みで決める必要がありません。Googleは検索セントラルのドキュメントで、モバイル対応サイトの構成としてレスポンシブ・ダイナミックサービング・別URLの3つを挙げ、そのうちレスポンシブを推奨する立場を示しています。技術的に他の方式が扱えないという話ではなく、運用上の事故が起きにくいという理由です。1つのURLに内容がまとまっていれば、共有されたリンクがどの端末でも正しく開き、対応版の指定を間違える余地もなく、更新の抜け漏れも生まれません。同社はさらに、端末をまたいだ計測についてもGoogle Analytics 4のUser-ID機能という手段を用意しています。ログインIDや会員番号のような自社で管理する識別子を渡すことで、複数端末での行動を同一人物として集計できる仕組みです。ただし、識別子の取得と利用には本人への説明と同意、そして適切な実装が前提になります。ここから中小企業が受け取れる示唆は明快です。方式は迷わずレスポンシブを選び、余った労力を「端末ごとに何を先に見せるか」という中身の設計に回すこと。仕様の詳細や推奨内容は更新されるため、実装前に公式ドキュメントの最新版を確認してください。
受託加工のBtoB企業のような形 ── 「社内共有用のURL」を1つ足した
たとえば、金属部品の受託加工を手がける国内のBtoB企業を考えます。サイトはレスポンシブで作られており、どの端末でも崩れません。それでも、よくある詰まりが2つあります。1つは、スマートフォンで最初に表示されるのが会社紹介と設備写真で、来訪者が真っ先に確かめたい「対応できる素材・寸法・最短納期」が下のほうにあること。もう1つは、PCで資料をダウンロードした人が、その内容を上司や設計担当に共有する手段を持っていないことです。検討を進めるのは担当者ですが、決めるのはその人ひとりではありません。手を入れる箇所は限られます。スマートフォンの1画面目に、対応領域と最短納期、そして電話ボタンを置く。PC向けには、条件を横に並べて比較できる仕様表と、そのまま転送できる資料を用意する。そして資料をダウンロードした人に、社内で共有できるURLをメールで自動送付する。この1本があるだけで、検討は次の端末と次の人に引き継がれます。効果の確認は、端末別の問い合わせ件数と、資料ダウンロード後の再訪問の有無を月単位で見れば足ります。加えて、問い合わせフォームに「どこで当社を知ったか」を1問だけ置けば、計測の分断で見えなくなる最初のきっかけを補えます。これは特定企業の実績ではなく、複数人で検討が進むBtoB事業で効きやすい代表的な進め方として示しています。
現場での使い方：5ステップ
- 土台はレスポンシブで1つにまとめる別URL方式は二重管理になり、専任担当がいない組織では必ずどこかが古くなる。更新箇所を1つに保つことを優先する。
- 端末で変えるのは順番だけにする見出し・最初に見せるブロック・CTAの位置の3か所に限定。情報の量を端末で削ると、PCの顧客には物足りなくなる。
- 「続きに移れる」導線を1本置くメールで送る、URLを共有する、PDFで渡す。検討が1回の訪問で終わらない前提を設計に入れる。BtoBでは社内共有用のURLが効く。
- 計測は端末別に分けて見る合算した平均は片方の端末の問題を隠す。同時に、端末をまたぐと同一人物として数えられないことを前提に数字を読む。
- 入力欄で「どこで知ったか」を1問だけ聞く技術で埋められない分断は、顧客に直接尋ねるのが早い。最初のきっかけをつくった経路の予算を、誤って削らないための保険になる。
関連用語
まとめ：端末が変わっても、話が続く状態をつくる
マルチデバイス対応は、同じ顧客が端末を持ち替えて検討する前提で設計することです。崩れずに表示されることは前提であって、対応そのものではありません。スマートフォンでは見つけて確かめ、PCでは比べて決めて社内に見せ、再びスマートフォンで連絡する。段階が違うので、変えるべきは情報の量ではなく順番です。土台はレスポンシブで1つにまとめ、端末ごとに変えるのは見出し・最初のブロック・CTAの位置の3か所に絞る。そして「続きに移れる」導線を1本置く。計測は端末をまたぐと分断されるため、端末別に分けて読み、足りない部分は入力欄で1問だけ尋ねて補う。順番の違和感の検出と文面の書き分けはAIに任せ、採用の判断は端末別の実績で行う。どの端末から入っても話が途切れなければ、顧客は自分の速度で前に進めます。
