---
title: コンテンツ、ページ、メディアを編集する
description: ストアフロントページに移動し、表示されているコンテンツまたは画像を更新して、結果を保存します。
---

**エントリーパス:** ワークスペース → ストアを選択 → **ストアフロント** → 対象のストアフロントページを開く → **デザインモード** → 要素を選択

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

## このガイドの内容

変更したい正確なストアフロントページを開き、サポートされているテキスト、レイアウト、またはメディア要素を1つ編集し、公開前に保存された結果を確認します。

## このワークフローを使用する理由と時期

このワークフローはページレベルの調整に使用します。コピーの修正、タイポグラフィの変更、間隔の調整、写真の置き換え、代替画像の生成、または不要な要素の削除を行います。対象ページと選択された要素を明確に保ちます。

ナビゲーション動作、製品データ、チェックアウト、または複数ページの変更については、ビジュアルコントロールのみに頼らず、Runnerに通常のリクエストを送信してください。

## 利用可能性と前提条件

- [デザインモードを使用する](./design-mode)では、エディターの開き方、デスクトップレイアウトの要件、コントロールが利用できない場合を説明しています。
- 生成されたまたは動的な要素の一部はインラインで編集できません。Runnerはこれらの要素に対してより少ないコントロールを表示します。
- AI画像生成はクレジットを使用できます。Runnerは画像パネルで実行前に適用可能な通知を表示します。

## ページとエディターを開く

1. プロジェクトを開き、**ストアフロント**を選択します。
2. 通常のプレビューで、ストアフロントリンクを選択して、目的のページに到達します。
3. ルートがわかっている場合は、パスフィールドを選択し、`/about`などの同一サイトパスを入力して、**Enter**キーを押します。
4. 正しいページが表示されていることを確認します。
5. **デザインモード**を選択し、対象要素を選択します。

## メディアコントロール

[デザインモードを使用する](./design-mode)では、共通の**Runner AIに質問**、**間隔**、**テキスト**、**要素を削除**、**アンドゥ**、**リドゥ**、**保存**の各コントロールを説明しています。以下のコントロールは、選択された要素がメディアをサポートしている場合にのみ表示されます。

| コントロール | 変更内容 | 使用時の動作 |
| --- | --- | --- |
| **画像 → アップロード** | 選択された画像またはサポートされている背景画像。 | **画像をアップロード**を選択し、画像ファイルを選択すると、Runnerはアップロード成功後に選択されたメディアを置き換えます。製品で表示される現在の制限は、画像あたり5 MBです。 |
| **画像 → AI生成** | 生成された置き換え画像。 | プロンプトを入力して**実行**を選択します。最初の結果の後、**もう一度実行**で別の結果をリクエストし、**履歴**でこの編集セッションの結果を開きます。 |
| **履歴** | 現在の画像編集セッションから生成された画像。 | アイテムを選択して検査します。**このバージョンを復元**でその画像とプロンプトを適用します。ダウンロードアイコンで個別の結果をダウンロードします。 |

## 1つのページを安全に編集する

1. 現在のページパスを記録して、戻ることができるようにします。
2. 要素を選択し、どのコントロールが表示されるかを確認します。コントロールは要素によって異なります。
3. 一度に1つの変更を行い、**アンドゥ**、**リドゥ**、または画像**履歴**で結果を比較してから、**保存**を選択します。
4. 選択した保存またはRunnerリクエストが完了するまで待ちます。
5. デザインモードを閉じ、ページを再度開き、**PC**、**タブレット**、**スマートフォン**レイアウトで確認します。
6. 最初のページが正しくなった後でのみ、次のページを繰り返します。

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

| 表示内容 | 意味 | 対応方法 |
| --- | --- | --- |
| 選択された要素に一部のコントロールのみがある | Runnerはその要素でサポートされているコントロールを公開します。 | 利用可能なコントロールを使用するか、より広い変更についてRunnerにチャットで質問します。 |
| アップロードが拒否されました | ファイルが見つからない、画像ではない、表示された制限を超えている、またはアップロードが失敗しました。 | 別の画像を選択してもう一度試してください。 |
| **生成中…** | Runnerが要求された画像を作成しています。 | パネルを開いたままにして、完了するか失敗を報告するまで待ちます。 |
| **履歴**がない | このセッションでAI生成画像がまだ存在しません。 | 最初の画像を生成するか、代わりに自分の画像をアップロードします。 |
| ルートが開かない | パスが無効、外部、またはプレビューの一部ではありません。 | `/`に戻り、表示されているストアフロントリンクを使用するか、Runnerにページの作成または修復を依頼します。 |
| 保存されたページがモバイルで異なる | 編集がレスポンシブレイアウトに影響しました。 | デザインモードを再度開くか、公開前にRunnerにデバイス固有の修正を依頼します。 |

## 関連ガイド

- [デザインモードを使用する](./design-mode)
- [ストアをプレビューする](./preview-your-store)
- [公開と再公開](./publish-and-republish)