---
title: ストアをプレビューする
description: 現在のストアフロント プレビューを開き、公開前にページとレスポンシブ レイアウトを確認します。
---

**エントリ パス:** ワークスペース → ストアを選択 → **ストアフロント**

<Frame>

![Runner ストアプレビューと操作画面](https://ixft9x6szo.ufs.sh/f/Cc8uxBgAYTzgkyhbRgjXIfFwWx7Qu1lJBZMSPHcazYdR0voC)

</Frame>

## このガイドの内容

Runner 内で現在のストアフロントを確認し、そのページ間を移動し、公開する前にデスクトップ、タブレット、およびスマートフォン レイアウトでどのように見えるかを確認します。

## プレビューを使用する理由と時期

Runner がストアフロントを作成または変更した後、プレビューを使用します。顧客が見る前に、不足しているコピー、壊れたルート、不十分なモバイル レイアウト、または未完成のセクションをキャッチするのに最も安全な場所です。

プレビューはライブ ストアとは別です。ここで正しく見えるページは、パブリック URL、カタログ データ、インベントリ、支払い接続、またはチェックアウトが機能することを証明しません。

## 可用性と前提条件

- 既存のストアフロント アクティビティまたはプレビュー可能なバージョンを持つプロジェクトを開きます。
- ページが **ストアフロントはまだありません** と表示されている場合は、そのページのプロンプトを使用して Runner に最初のバージョンを構築するよう依頼します。
- **ストアフロントの最初のバージョンを構築しています…** または **プレビューを準備中…** と表示されている場合、プレビューはまだ準備できていません。
- 一部のワークスペースは、より新しいチェックポイント ベースのストアフロントを使用します。正確なバージョン コントロールはステージ化された可用性によって異なる場合があります。

条件付きの会話バージョン カードが有効な場合、完了した作業カードのストアフロント画像または **プレビュー** を選択すると、そのタスクで作成された準備完了バージョンが開きます。これは現在のバージョンではなく、履歴上のバージョンであることがあります。保存済みのバージョン履歴がない古いプロジェクトでは、最新のストアフロント作業カードにある **プレビュー** から、代わりに現在のライブ プレビューが開きます。編集や公開を始める前に、表示されている場合は **v…**、**現在のバージョン**、**公開済み** のラベルを確認してください。

タスクが完了したことやソースのビルドが成功したことだけでは、プレビューが更新されたとは限りません。Runner はタスクの完了後に、完成したストアフロントをプレビューへ反映します。この反映に失敗すると、プレビューには直前に成功したバージョンが残ります。以前に成功したバージョンがない場合は、構築済みのプレビューがない状態が表示されます。そのため、画面に表示されたバージョンとプレビュー結果を確認してください。

## プレビューを開く

1. Runner ワークスペースを開きます。
2. 確認したいストアを選択します。
3. プロジェクト ナビゲーションで **ストアフロント** を選択します。
4. 現在のバージョンがプレビュー領域に表示されるまで待機します。

プロジェクトにストアフロントがまだない場合:

1. **作りたいストアを説明してください…** に入力します。
2. **構築を開始** を選択するか、Shift なしで **Enter** を押します。
3. Runner は会話を作成し、その説明を最初のリクエストとして送信します。
4. 作成が失敗した場合、説明はフィールドに残るため、再試行できます。

## プレビュー コントロール

| コントロール | 使用する理由 | 選択時に何が起こるか |
| --- | --- | --- |
| **戻る** | プレビュー内で訪問した前のページに戻ります。 | プレビューは独自のページ履歴で後方に移動します。Runner プロジェクトを離れません。 |
| **進む** | 戻った後にページを再度訪問します。 | 後の履歴エントリが存在する場合、プレビューは前方に移動します。 |
| **PC / タブレット / スマートフォン** | レスポンシブ レイアウトを確認します。 | 選択したデバイス幅にプレビュー フレームが切り替わります。ライブ ストアフロントは変更されません。 |
| `/` などのパス フィールド | 既知のストアフロント ルートを開きます。 | パスを選択し、同じプレビュー サイトで別のパスを入力して、**Enter** を押します。無効なアドレスまたは外部アドレスは無視されます。 |
| **更新** | 変更後や表示が古いときにプレビューを再読み込みします。 | Runner は表示中のページを再読み込みし、アクティブなデザインモードの選択と元に戻す／やり直しの履歴を消去します。先に保留中のデザイン変更を保存してください。 |
| **新しいタブで開く** | より多くのスペースでプレビューを確認します。 | Runner はこのプレビュー URL を別のブラウザ タブで開きます。これはまだプレビューであり、公開されたストアの証拠ではありません。 |
| **v1 · 現在** などのバージョン ラベル | 確認しているものを特定します。 | ラベルは最新の現在のバージョンを履歴プレビューから区別します。 |
| **デザインモード** | ビジュアル編集を開始します。 | 最新バージョンが利用条件を満たす場合、Runner はデザイン ワークスペースを開きます。 |
| **バージョン履歴** | 以前のストアフロント バージョンを比較します。 | Runner は現在のストアフロントを変更せずにバージョン リストを開きます。 |
| **コード エディターを開く** | この高度なコントロールが利用できる場合、ストアフロントのソースを確認または編集します。 | Runner は画面全体の高さを使う **コード エディター** ダイアログを開きます。閉じると、ストアフロント パネルはプレビューに戻ります。表示結果はそこで確認します。 |
| コイン / **招待でポイント獲得** | 紹介プログラムの案内を開きます。 | Runner は紹介ダイアログを開きます。開くだけではクレジットは獲得されません。 |
| クレジット数 / **アップグレード** | クレジット、プラン、または使用状況オプションを確認します。 | Runner はワークスペース請求または使用状況につながる可能性のある利用可能なアクションを含むポップオーバーを開きます。 |
| **公開**、**変更を公開**、または **再公開** | 現在の状態に適切な公開フローを開始します。 | Runner は公開が開始される前にアクセスと準備状況チェックを実行します。 |

## ストアフロント ページをページごとに確認する

1. `/` で開始し、ヘッダー、お知らせ領域、ヒーロー、おすすめ製品、セクション、およびフッターをスキャンします。
2. すべての表示されるナビゲーション リンクを選択します。宛先が表示され、プレビュー パスが期待どおりに変更されることを確認します。
3. ストアフロントから製品ページを開きます。タイトル、メディア、価格、オプション、可用性、および購入コントロールが表示されることを確認します。
4. 現在のページからリンクされていない重要なルートについては、パス フィールドを使用します。
5. **PC**、**タブレット**、**スマートフォン**を順に切り替えます。切れたコンテンツ、重なったコントロール、読みにくいテキスト、横スクロールがないか確認します。
6. デザインモードでの変更を保存してから **更新** を選択します。
7. Runner チャットで、ページ パス、デバイス サイズ、および予想される結果を含む問題を記録します。

## 状態、制限、およびトラブルシューティング

| 表示内容 | 意味 | 実行すること |
| --- | --- | --- |
| **ストアフロントはまだありません** | Runner は既存のストアフロント アクティビティも保存されたプレビュー可能なバージョンも見つかりませんでした。 | Runner にストアフロントを作成するよう依頼します。 |
| **ストアフロントの最初のバージョンを構築しています…** | 最初のバージョンを準備しています。 | タスクの進行状況を確認し、完了状態になるまで待ちます。 |
| **プレビューを準備中…** | Runner は選択されたプレビューを開始しています。 | ページを開いたままにします。状態が進行を停止した場合にのみ **更新** を使用します。 |
| **このバージョンのプレビューを読み込めませんでした** | 選択されたバージョンを表示できませんでした。 | 現在のバージョンに戻るか、更新するか、バージョンとエラーを Runner に報告します。 |
| **プレビューを再接続中** | Runner はプレビュー接続を失い、再試行しています。 | プロジェクトを開いたままにして、再試行数に従います。復旧できない場合は、ワークスペースを再接続します。 |
| **修正** を含むプレビュー エラー バー | プレビューでエラーが発生し、Runnerが内容を確認できます。 | **修正** または **エラーを修正** を選択して、表示された診断情報をRunnerに送信します。**もっと見る**で詳細を展開し、**閉じる**でメッセージを非表示にします。 |
| コントロールが無効になっている | プレビューは現在そのアクションをサポートしていません。ワークスペースが切断されているか、Runner が作業しています。 | Runner を待つか、プロンプトが表示されたらワークスペースを再接続するか、最新の準備完了バージョンに戻ります。 |
| プレビューは正しく見えますが、ライブ ストアはそうではありません | 変更が公開されていないか、異なるバージョンを表示しています。 | バージョン ラベルを確認してから、[変更を公開](./publish-and-republish) を使用します。 |

## 関連ガイド

- [デザインモードを使用する](./design-mode)
- [コンテンツ、ページ、メディアを編集する](./edit-content-pages-and-media)
- [ストアフロント コードを検査および編集する](./inspect-and-edit-code)
- [バージョン履歴を使用する](./version-history)
- [公開の準備をする](./prepare-to-publish)