---
lastModified: 2026-10-10
type: feature
title: "ストア向けレスポンシブサイトテスト"
description: "Runner AIでストアのページをデスクトップ、タブレット、スマートフォンのプレビューで確認します。表示崩れが起きるページ、操作、期待する結果を伝え、保存した修正を各画面で再確認してから公開を判断できます。実機での確認が必要な操作や、決済などの接続先の検証は、レイアウトの確認とは分けて進めます。"
category: ai-websites
h1: "公開前に行うストアのレスポンシブサイトテスト"
keyword: "レスポンシブサイトテスト"
legacyKind: structured
---

Runner AIの**レスポンシブサイトテスト**は、現在のストアと、お客様が完了すべき具体的な操作から始めます。デスクトップ、タブレット、スマートフォンのプレビューを切り替え、同じページを確認します。不具合はページのパスと期待する結果を添えて伝えます。得られるのは確認可能なストアの修正であり、ひとつの画面設定ですべてのブラウザーや購入手順を保証するものではありません。

## レスポンシブサイトテストの対象をひとつの操作に絞る

ページのパスと、そのページで完了してほしい操作を決めます。商品ページなら、購入可能なバリエーションを選んでカートに進む操作が対象になります。コレクションページなら、フィルターが検索結果を隠さず商品を探せるかを確認します。実際の商品データと承認済みの文章を使い、お客様が目にする画像や長い商品名も確認対象に含めます。

開始前に期待する結果と、変更してはいけない部分を記録してください。問題が起きる操作部品と画面も明記します。表示を整えるためだけに長い商品名を短いサンプルに置き換えないでください。[AIモバイルストアビルダー](/ja/ai-ecommerce-mobile-store-builder)は最初の設計を扱います。このページは既存ストアの確認と修正依頼に焦点を当てます。

## デスクトップ、タブレット、スマートフォンを比較する

Runner AIのストアプレビューには3種類の表示があります。デスクトップは利用可能なプレビュー領域を使い、タブレットとスマートフォンは固定の枠を使います。枠の切り替えはプレビューの表示領域を変えるもので、別のストアプロジェクトを作成する操作ではありません。同じ内容が狭い画面でどう配置されるかを比較できます。

見出しから最後の操作までページを確認します。文字の欠け、商品が見えなくなる画像の切り抜き、ボタンの重なり、横スクロールに注意してください。メニューを開くなど、操作部品も実際に使います。ボタンが見えるだけでは次の状態に進める証拠になりません。各画面で同じ操作を繰り返してください。枠は最初の確認用であり、実機のシミュレーターや全ブラウザーの検証ではありません。タッチ操作、モバイルキーボード、決済画面などは、別の幅や実機でも確認が必要です。

## 表示崩れを具体的な修正依頼にする

再現できる報告には、ページのパス、画面、開始時の状態、操作、期待した結果、実際の結果を含めます。スクリーンショットで重なりを示す場合も、どのお客様の操作を妨げるか説明してください。商品ページ全体の作り直しではなく、スマートフォン表示でバリエーション一覧がカートボタンを隠す、といった限定した問題を伝えます。

確認済みの商品情報、承認済みの文章、ブランドのルールとともに依頼をRunner AIへ渡します。関係のないセクションは維持し、対象のソース変更を確認できるよう求めます。[AIウェブサイトエディター](/ja/ai-website-editor)は編集手順と、Design Modeが利用可能な場合の要素指定による依頼を説明しています。保存後に更新されたプレビューが準備できたら、元の問題を再確認し、その後ほかの画面も確認します。スマートフォンの修正がタブレットやデスクトップの間隔を変えることもあります。

## 結果を確認してから公開を判断する

プレビューでの成功は、確認したシナリオに対する証拠です。正しいページが表示され、重要な内容が残り、操作が期待した状態に到達したかを確認します。古いスクリーンショットではなく現在のバージョンを見てください。在庫、検索、カートに依存するページでは、それらを管理するシステムの情報も確認します。

公開は別の判断です。表示が整っていても、支払い方法、配送、税金、分析が正しく動作する証明にはなりません。購入の確認には許可されたテスト環境を使い、重要なモバイル操作は実際のスマートフォンでも確認します。[モダンなウェブサイトデザイン](/ja/modern-website-design)はナビゲーションやページ構成の大きな変更を扱います。未解決の問題を残したまま合格扱いにせず、修正後に同じ操作を繰り返してください。

## よくある質問

### レイアウト修正のために何を伝えればよいですか？

ストア、ページのパス、画面、開始時の状態、操作、期待する結果を伝えてください。実際の不具合を説明し、必要に応じてスクリーンショットを添えます。確認済みの商品情報と、維持すべき部分も指定します。レスポンシブサイトテストには、一般的なデザイン改善依頼ではなく観察できる合格条件が必要です。

### スマートフォンのプレビューは実機テストの代わりになりますか？

いいえ。枠はレイアウト確認に役立ちますが、すべての端末やモバイルブラウザーを再現しません。タッチ、キーボード、画面の向き、ブラウザーの表示、決済が重要な操作は実機でも確認してください。プレビューは端末の認証や性能測定ではありません。

### プレビューの確認で変更が公開されますか？

いいえ。確認と公開は別の手順です。保存した修正をデスクトップ、タブレット、スマートフォンで確認し、お客様の操作と接続先のシステムを検証します。レイアウトの合格が示すのは観察したシナリオだけで、すべてのページや購入条件ではありません。

[Runner AIの全機能を見る](/ja)