スマホ優先の店舗：人が見るデザイン

要点

スマホ優先の店舗とは、指をマウスにして、電話の幅で店の画面を描き、そのあとでモニター上の並びを見ることです。Googleは、スマートフォンのエージェントでクロールしたサイトのモバイル版をインデックスします。スマホで隠したり消したりしたものは、デスクトップでどれほど綺麗でも、検索からは存在しなくなります。店舗テーマは、ほとんどがレスポンシブです。同じページ、同じURLで、画面に合わせてレイアウトが変わります。レスポンシブは、スマホ向けに考えたという意味ではありません。デスクトップが縮んだという意味です。以下では、私が描く順番、消してはいけないもの、タップの大きさ、電話のチェックアウトで確認することを示します。

1. Googleが読むのはスマホであり、モニターではない

モバイルファーストインデックスとは、Googleがインデックスとランキングに使う版が電話の版だということです。検索に出るためにモバイル版は必須ではありません。Googleは、強く推奨するとしています。

店舗についてGoogleが勧める道は、レスポンシブデザインです。同じHTML、同じURLで、画面サイズに合わせて表示が変わります。ほかの二つの道（同じURLで別のHTML、またはm.型の別サイト）もあり、タイトル、内容、リンクを同じに保つ手間が増えます。Shopifyのテーマは、最初の道で生まれます。私はスマホ用に二つ目のサイトを開きません。

設計を変える細部はこれです。スマホの内容がデスクトップより少ないと、Googleはページ全体をもう見ていないため、トラフィックの損失を見込めると警告します。場所を稼ぐアコーディオンとタブは認められます。ブロックを消すことは認められません。

店舗全体を組むなら、ホーム、コレクション、商品が一緒に入る場所はECプロジェクトです。写真、バリエーション、価格を含む商品ページそのものは、商品ページでデザインが見せるべきものの記事にあります。

2. 画面が縮んでも消してはいけないもの

Googleは、同じ主要コンテンツ、同じ明確な見出し、同じtitle、同じmeta description、同じ画像の代替テキストを求めます。構造化データも両方です。スマホで何をマークアップするか優先するなら、Googleが示す順はBreadcrumb、Product、VideoObjectです。

これはレイアウトの規則になります。ハンバーガーメニューに入れてよいのは、二次的なページです。商品名、価格、バリエーション、購入ボタンは入れられません。「重いからデスクトップだけ」の写真は、人が判断に使う画像を検索から外します。Googleはスマホでも品質の高い画像を求めます。大きな写真の代わりの、ぼやけたサムネイルではありません。

寸法、納期、交換の文章は、ボタンの下のアコーディオンに入れられます。文章はページのHTMLの中にある必要があり、別のものを読み込むクリックの後ろには置けません。Googleは、スワイプ、クリック、入力に依存する主要コンテンツは読み込まないと述べています。ページにすでに文章があり、見た目だけ隠すアコーディオンは、あとから文章を取りに行くボタンとは違います。

上部の広告やバナーは、電話の画面を食べます。GoogleはBetter Adsに言及し、上部の広告は場所を取りすぎることがあると言います。店舗でそれに当たるのは、送料の帯、Cookieの通知、アプリのバーを積み上げることです。私は短い帯を一つ残します。残りは、人がスクロールするまで待ちます。

商品の動画は上部の近くに置きます。十個のブロックのあとには置きません。Googleのヘルプは、たくさんスクロールしないと見つからないスマホ上の動画は、検索での動画に不利になり得ると言います。

出典：Google Search Central、モバイルファーストインデックスのページ。更新は10/12/2025、閲覧は16/10/2026。

3. 親指の幅で描く

レイアウトのファイルは、狭い画面から始めます。ホーム、一覧、商品です。その幅で購入が意味を持ってから、デスクトップへ伸ばします。逆にすると、電話には空の列、画面の下に落ちたボタン、ホバーでしか出ないメニューが生まれます。ホバーは指にはありません。

ホームの最初のブロックは、勝手に切り替わるスライダーに頼らず、「この店は何を売るか」に答えます。勝手に切り替わるスライダーは、Googleと人が読む必要のあった文を隠します。写真は一枚、文は一つ、ボタンは一つです。

一覧のカードは、写真、名前、価格を、省略記号で価格を切らずに出します。フィルターは、スマホでページ全体になり、適用ボタンが見えないサイドバーであってはいけません。私はフィルターを一つのボタンに入れ、適用を画面の下に固定します。

商品ページでは、ギャラリー、名前、価格、バリエーション、購入が、最初の画面か、スクロールの始まりに収まります。放棄の調査は、「もっと下」に置いてはいけないものを思い出させます。追加費用は放棄の40%の理由で、ただ見ていた人（42%）は除きます。送料と納期はフッターではありません。判断の一部であり、スマホではフッターは遠いです。

コントラストはWCAGに従います。通常の文字は4,5:1、大きい文字は3:1（18ポイント、または太字の14ポイント）です。日差しの下では、白地の薄いグレーは消えます。写真の上に、グレーの価格の文字は置きません。

店舗がモニターで描かれ、スマホで価格、ボタン、送料が消えるなら、URLと見本の商品を送ってください。まだ店舗を作っていないなら、作る前にご相談ください。店舗は開発ストアとして生まれ、完成した状態で組まれ、あなたの名義に移されます。

プロジェクトを相談

4. タップ対象

WCAG 2.2の基準2.5.8は、ポインタの対象を少なくとも24 x 24 CSSピクセルにするよう求めます。例外があります。それぞれの24ピクセルの円が隣に触れない場合、ページに同等の別の操作がある場合、対象が文の途中にある場合、サイズがブラウザ由来の場合、小さいサイズが本質的な場合です。

店舗では、メニュー、サイズのバリエーション、数量、カートのゴミ箱、フィルターの「もっと見る」リンクがこれにあたります。小さい文字と、隣にくっついたアイコンは、人が違うサイズを買ってしまう場所です。アイコンの絵が小さくても、押せる範囲は広げます。数えるのは範囲であり、線だけではありません。

購入ボタンは、ページでいちばん大きい対象です。スマホでは列の幅、短い文言（「購入」または「追加」）、コントラストを通る色にします。二次ボタン（「お気に入り」、「再入荷を知らせる」）は、同じ大きさと同じ色にはしません。二つが競います。

5. Googleがまだ見る写真

長い一覧で画像を遅れて読み込むのは、普通です。Googleの限界は別です。主要コンテンツを、存在するためにジェスチャーへ依存させないことです。商品の最初の写真は、ファイルを取りに行く「もっと」を人が押さなくても、ページに入ります。

スマホの写真は同じ写真です。商品を切るトリミングではありません。読み込みのたびに変わるURLは、Googleが画像をインデックスするのを妨げます。代替テキストは商品を描写します（「白いスニーカー、側面」）。「画像」という語の繰り返しではありません。

店舗がデスクトップとスマホで別の画像URLを使うと、新しいURLにはまだ履歴がないため、画像のトラフィックがしばらく落ち得るとGoogleは警告します。レスポンシブテーマでは、同じURLのサイズを調整すれば、その回り道を避けられます。電話のためだけに、別のファイル名の第二の「light」ギャラリーは作りません。

6. 電話のチェックアウト

2025年11月に更新されたBaymardのチェックアウト評価では、モバイルサイトの63%が平凡以下でした。デスクトップは64%です。良いとされたモバイルサイトは2%だけです。デスクトップのチェックアウトを縮めても、解決しません。画面はすでに短い。欄が一つ増えると、スクロールが一つ増えます。

Shopifyでは、注文の概要とクーポンは、スマホで折りたたまれた状態から始まります。合計とコードを見るには、タップが必要です。店舗がクーポンで成り立つなら、管理画面でクーポン欄を常に表示します。そのタップの前に、注文金額が読めるようにします。遅く出る費用は、放棄の一覧に入っています。

18%は、アカウントの作成を求められて放棄しました。17%は、手順が長い、または複雑だったからです。電話では、これがより痛いです。キーボードが欄を覆い、段階が一つ増えるたびに、ブラウザを閉じる理由になります。アカウントなしの購入を、主な操作にします。アカウントは、すでに買った人の道です。

Shopifyのチェックアウトは、テーマでは描きません。色、ロゴ、フォントは、チェックアウトのエディタに入れます。標準のチェックアウトを使うか、外部（Yampi、Cartpanda）を使うかの判断は、ブラジルのShopifyチェックアウトの記事にあります。電話の見た目は、どちらの場合も同じように必要です。見える合計、少ない欄、指が当たるボタンです。

文書化されたカート放棄の平均は70,22%です。一部は、ただ見ている人です。デザインが届く部分は、費用、必須のアカウント、長い流れです。スマホでは、この三つが先に出ます。

7. 作業の順番

店舗を見直すとき、順番はこれです。

まず、横向きに回さず、電話の幅でホーム、一覧、商品を一つ開きます。収まらないものを書き留めます。切れた価格、画面の外のボタン、閉じないメニュー、商品を押し下げるバナーです。

次に、デスクトップにある文章がスマホにもあるか、アコーディオンの中でも確認します。ページのタイトルと説明は同じです。写真のaltは入っています。

次はタップです。バリエーション、数量、フィルター、購入です。同じ指の下に二つの操作が収まるなら、離します。

最後がデスクトップです。余った場所は、スマホにない内容を発明するためではなく、写真を横に並べて見せるために使います。デスクトップにだけある新しい内容は、検索が使わない内容です。

出来合いのテーマは、作業を速くします。この確認の代わりにはなりません。入れて一度も電話で開いていないテーマは、63%の誤りを繰り返します。画面はある。購入はない。

よくある質問

スマホ優先の店舗とは、電話用の別サイトを作ることか

いいえ。Googleが勧めるのは、画面に合わせてレイアウトが変わる、同じHTMLと同じURLです。別サイト、または同じURLの別HTMLは、両方で同じタイトル、内容、画像、リンクを求めます。レスポンシブな店舗テーマは、すでに簡単な道にあります。仕事は、その狭い画面を意図して描くことです。

ページをすっきりさせるために、スマホで文章を隠してよいか

アコーディオンやタブに折りたたみ、文章をページに残すことはできます。消すことはできません。Googleはモバイルをインデックスします。スマホの内容が少ないと、検索はデスクトップにしかなかったものを失います。主要コンテンツは、あとから文章を取りに行くクリックに依存してもいけません。

ボタンの最小サイズはいくらか

WCAG 2.2は、少なくとも24 x 24 CSSピクセルの対象を求めます。例外は、対象のあいだの間隔、同等の別の操作、文の途中のリンク、ブラウザの操作、本質的な場合です。店舗では、バリエーション、数量、フィルター、購入にこれを適用します。主ボタンは、列の幅を占めます。

Shopifyのスマホのチェックアウトは、合計を最初から見せるか

概要とクーポンは、折りたたまれた状態から始まります。人はタップして開きます。クーポン欄を常に見せることはできます。合計は、早く読める必要があります。高い追加費用は、ただ見ていた人以外の40%について、Baymardが測る放棄理由の一つです。

上部の販促バナーは、検索の妨げになるか

Googleは、上部の広告が電話の場所を取りすぎることがあると言い、Better Adsの基準に言及します。送料やキャンペーンの短い帯なら収まります。積み上げた複数の帯は、商品と写真を下へ押します。私は一つ残します。

まとめ

スマホ優先の店舗とは、デザインの順番であり、検索の順番です。Googleは電話を読み、人は電話で買い、デスクトップは狭い画面で既に動いたものを活かします。内容は同じままで、タップには余裕があり、写真は鮮明なまま、チェックアウトはカードの前に費用を見せます。店舗がモニターで組まれ、端末で一度も見直されていないなら、その仕事を見る場所はECプロジェクトです。店舗のURLと、例にしたい商品を送ってください。まだ店舗を作っていないなら、作る前にご相談ください。店舗は開発ストアとして生まれ、完成した状態で組まれ、あなたの名義に移されます。

プロジェクトを相談