訪問者がズームしたり、ためらったり、ブロック要素に遭遇したりすることなく、製品を発見したり、バリエーションを選択したり、カートに追加したり、支払いに達したりできる場合、ストアはモバイル上で正しく機能します。 したがって、ホームページの簡単なプレビューだけでは十分ではありません。
ウェブサイトとShopifyストアの作成と再設計の専門家であるSiteQuiVendによって書かれたガイド。 2026年8月に情報が更新されました。
モバイルで本当に機能的なストアとは何ですか?
応答性の高いサイトは、使用が困難なまま画面の幅に適応できます。コントロールは 4 つの相補的な次元をカバーする必要があります。
表示
テキストカット、重複、歪んだ画像、画面より大きいコンテンツはありません。
インタラクション
メニュー、フィルター、バリエーション、アコーディオン、ボタン、フォームがタッチに反応します。
商業の旅
価格、在庫状況、配送、および次のアクションは引き続き理解できます。
パフォーマンス
メインコンテンツは、過度の待ち時間や予測不可能な動きなしに表示されます。
Google は、モバイル版のコンテンツをクロールおよびインデックス作成に使用します。そのため、重要な情報、タイトル、重要な画像、構造化データが小さな画面に消えてはなりません。
1.3 段階の検証を組み合わせる
375 px でのシミュレーション
スポットオーバーフロー、固定テーブル、位置の悪いボタン この再現可能なベースは実際のデバイスではありません。
リアルデバイス
IPhone と Android では、キーボードの動作、ジェスチャー、ネイティブ ウィンドウが明らかになります。
利用データ
Shopify レポートでは、ロード、対話性、安定性に関してモバイルとデスクトップが区別されます。
具体的なフィードバック
顧客の質問や放棄は、再現するために摩擦を知らせることができます。
2.各テストと同一のテストルートに従う
プライベートウィンドウを使用して、キャッシュと以前のセッションの影響を制限します。 、デバイス、ブラウザ、接続、URLと障害の時間をメモします。
- ホームページを開き、場合によっては Cookie バナーを閉じる。
- 開いてから、メニュー、検索、言語または国のセレクターを閉じます。
- コレクションにアクセスし、並べ替えを変更してフィルターを適用します。
- 製品を開き、画像を参照して各バリエーションを選択します。
- 意図的にエラーをトリガーします: バリアントが利用できないか、必須フィールドが空です。
- カートに追加し、数量を変更し、削除してから再度追加します。
- 注文を完了せずに支払いに達し、表示されているフィールドを制御します。
- 戻る: バスケットと選択肢は一貫していなければなりません。
3.モバイル制御マトリックスを使用する
影響に応じて欠陥を分類します。二次的な美的要素は、アクセスできないバスケットと同じ優先順位を持ちません。
| エリア | テスト | 頻発する欠陥 | 優先度 |
|---|---|---|---|
| ヘッダー | メニュー、検索、閉じる | 閉じることが不可能なウィンドウ | ブロッキング |
| コレクション | ソート、フィルター、マップ | オフスクリーンフィルター | 高い |
| 製品 | ギャラリー、バリエーション、追加 | 隠しボタンまたは一貫性のない状態 | ブロッキング |
| バスケット | 数量、削除、合計 | 合計またはアクションにアクセスできません | ブロッキング |
| コンテンツ | テキスト、画像、テーブル | 横スクロール | 中～高 |
4.読みやすさと触覚の相互作用を確認する
- テキスト: 価格やエラーを含め、ズームなしで読む必要があります。
- タッチゾーン: 意図せずに押さないようにボタンをスペースアウトします。
- コントラスト: 画像上のリンク、ボタン、テキストを制御します。
- 固定要素: カチューシャ、チャット、同意が画面に侵入しないでください。
- キーボード: アクティブなフィールドと次のアクションには引き続きアクセスできます。
- オリエンテーション: 固定幅を維持するブロックを検出します。
「親指」テストは簡単です: 片手で電話を保持し、メインアクションを実行します 正確に狙いを定める必要がある場合は、ウィンドウやズームを移動する必要がある場合は、インターフェースは修正に値します。
5 製品シート、バスケットおよび支払をテストして下さい
単純な製品に限定しないでください。また、いくつかのバリエーションを持つ商品、入手できない商品、店舗が許可している場合は割引や特定の配送も選択してください。
製品シート
価格、バリアント、在庫、数量、メディア、説明、ボタンは同期したままにする必要があります。バリアントの変更ごとに、予想される状態が更新される必要があります。
バスケット
引き出しとカートのページ、数量、削除、発表されたしきい値、予想される場合は割引コード、合計を確認してください。
フォーム
良いキーボードは、電子メール、電話、および数字のために開く必要があります エラーは、フィールドを修正する方法を明確に説明する必要があります。
支払い
アクセス、提供される手段、配信情報、フラッシュバックを制御します。テスト手順で必要な場合にのみ、実際の注文を行います。
検出されたポイントを改善するには、ガイドを参照してください shopify ストア モバイル エクスペリエンス そして、に捧げられたもの 購入の旅を簡素化します.
6.測定と感覚を混乱させることなく速度を制御します
空のキャッシュとプロのWi-Fiよりも不利な接続で最初の訪問をテストする メモを見る前に行動を観察してください。
- 読み込み中: メインコンテンツや商品イメージはすぐに表示されますか?
- インタラクティブ性: メニューまたはボタンはタッチ時に反応しますか?
- 安定性: 画像、フォント、アプリが到着するとページは移動しますか?
- 継続性: 収集-製品-バスケットの遷移は、遅いネットワーク上で理解可能なままですか?
ShopifyのWebパフォーマンステーブルは、実際の訪問時にCore Web Vitalsを追跡し、モバイルとデスクトップを区別するのに役立ちます。検査室での測定は診断に役立ちますが、現場データは実際に使用されているデバイスやネットワークを反映します。
問題が待っている場合は、それもチェックしてください shopifyストアが遅い原因.
7.複数の幅だけでなく、複数のコンテキストをテストする
IPhone と Android
IPhoneでSafariを、AndroidでChromeをテストする.
Wi - Fi と モバイル ネットワーク
不安定な接続は、オフィス内の目に見えない摩擦を明らかにすることができます。
新しくて有名な訪問者
プライベート ウィンドウ、接続された顧客、すでに充填されたバスケットを比較します。
毎回変更後
アプリケーション、テーマ、または新しいコードの後にコントロールを繰り返します。
Shopifyはまた、テーマにデフォルトを自動的に割り当てる前に、デバイスまたはブラウザでローカルの問題をチェックすることをお勧めします。 2番目のデバイスで再現し、変更内容を記録します。
どのSiteQuiVendサービスを選択する必要がありますか?
優先順位を特定するための 3 つの具体的な推奨事項。これは、徹底的な機能レシピや完全な監査に代わるものではありません。
1 時間の制限内で 3 件の単純なリクエストがあり、最初の応答は 48 ～ 72 時間の作業時間内に発表されます。複雑な修正はこの範囲外です。
5 ページまたはモデル、最大 10 個の製品と 3 個のコレクション。必要な要素を受け取ってから 5 ～ 7 営業日が目安となります。
広範なマルチデバイス テスト、特別な開発、および大幅な技術的回復には、適切な範囲が必要です。
Shopify モバイル認証チェックリスト
16 の重要なコントロール
- 375 px で家庭テスト済み。
- 横スクロールなし.
- メニューと検索を閉じる.
- ノンブロッキングクッキーバナー.
- 機能フィルターとソート.
- 画像とタッチギャラリー。
- バリアントは正しく更新されました.
- 追加ボタンは常にアクセス可能です.
- 理解可能なエラーメッセージ.
- 数量と削除をテストしました.
- 一貫したバスケットの合計.
- 支払いの開始にアクセス可能.
- キーボードはアクションをマスクしません.
- SafariとChromeのテストを実施しました.
- モバイルネットワークテストを実施しました.
- 保持された欠陥のキャプチャと段階。
FAQ: モバイルでShopifyストアをチェックしてください
Shopify モバイルプレビューで十分ですか?
いいえ レイアウトの制御に役立ちますが、タッチ、キーボード、ブラウザ、ネイティブ ウィンドウ、ネットワーク条件をテストするには実際のデバイスが必要です。
なぜ 375 px で正確にテストするのでしょうか?
この幅は、応答性の欠陥を見つけるための実用的かつ一般的な基盤を提供します。これは、訪問者が実際に使用している他の幅やデバイスに代わるものではありません。
どのページを最初にテストする必要がありますか?
ウェルカム、コレクション、バリエーションのある製品シート、バスケット、支払いの開始をテストします。次に、検索、顧客アカウント、アクティビティに固有のページを追加します。
本物の注文をする必要がありますか?
体系的ではない 検証せずに支払いまでの道のりを制御できます 完全なテスト注文は、誤った取引や在庫を避けるために計画された手順に従う必要があります。
水平オーバーフローを見つける方法は?
垂直方向にスクロールしてから、わずかに横方向のジェスチャーを試してください。テーブル、画像、長い URL、マップ、固定幅ブロックが一般的な原因です。
どのモバイルブラウザを確認する必要がありますか?
IPhoneのSafariとAndroidのChromeで始めます 次に、統計によって示される大多数のデバイスとブラウザを追加します。
モバイルテストを繰り返すのはいつですか?
テーマの変更、アプリのインストールまたは削除、カートの変更、大規模なキャンペーンの後、および各重要なリリースの前。
良い速度スコアは店が動作することを保証しますか?
いいえ テクニカルノートはバリアント、フォーム、またはバスケットを検証しません。手動ルートと実際のデータによって補足する必要があります。
公式の参考文献: shopify モバイル概要とWebパフォーマンス, shopifyテーマのトラブルシューティング そして google モバイル ベスト プラクティス.
