---
title: デザインモードを使用
description: ストアフロント要素を選択し、Runnerのビジュアル編集コントロールを安全に使用します。
---

**エントリパス:** ワークスペース → ストアを選択 → **ストアフロント** → **デザインモード**

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

## このガイドの内容

最新のストアフロントバージョンでデザインモードを開き、1つの表示要素を選択し、制御された変更を加え、現在のプロジェクトの一部として保存します。

## デザインモードを使用する理由と時期

デザインモードは、説明するよりも指すのが簡単な焦点を絞ったビジュアル変更に使用します。見出しを書き直す、画像を置き換える、間隔を調整する、タイポグラフィを変更する、または表示要素を削除します。

複数のページにまたがる、ストアの動作を変更する、または新しい機能が必要な広範な作業にはRunnerチャットを使用します。

## 可用性と前提条件

デザインモードは条件付きです。以下の場合に利用可能です。

- デスクトップレイアウトを使用しています。
- 最新のストアフロントバージョンが準備完了で選択されています。
- 古いバージョンをプレビューしていません。
- Runnerは現在別のリクエストを処理していません。そして
- デザインモード機能がワークスペースに対して有効になっています。

プレビューがまだ準備中の場合、古いバージョンが選択されている場合、またはRunnerが作業している場合、ボタンは非表示または無効になる可能性があります。

## デザインモードを開く

1. プロジェクトを開きます。
2. **ストアフロント**を選択します。
3. バージョンラベルが**現在**と表示され、プレビューが準備完了であることを確認します。
4. ストアフロントツールバーで**デザインモード**を選択します。
5. 別の**デザインモード**コントロール付きの下部編集バーが表示される場合は、それを選択して要素選択を有効にします。
6. ストアフロント上を移動して、変更する要素を選択します。

## デザインモードコントロール

| コントロール | 使用する理由 | 選択時の動作 |
| --- | --- | --- |
| ストアフロントツールバーの**デザインモード** | 専用の編集ビューに入る | Runnerは現在のストアフロントをデザインパネルで開きます。 |
| 下部バーの**デザインモード** | 要素検査をオンまたはオフにする | オンの場合、選択可能な要素がアウトラインされ、1つを選択すると編集バーが開きます。オフにすると、現在の編集セッションがクリアされます。 |
| **Runner AIに質問**フィールドと送信矢印 | 選択した要素の変更を説明 | Runnerは選択した要素で命令を受け取ります。Runnerが開始すると、選択がクリアされ、未保存の直接編集とそれらの取り消し/やり直し履歴がリセットされるため、送信する前に保留中の直接編集を保存します。 |
| **間隔** | 要素の内側または周囲のスペースを変更 | 水平および垂直のマージンとパディングのパネルが開きます。 |
| **画像** | 選択した画像または背景画像を置き換える | その要素がメディア編集をサポートする場合、**アップロード**と**AI生成**オプション付きのパネルが開きます。 |
| **テキスト** | タイプスタイルを変更 | サポートされている場合、フォントサイズ、太さ、ファミリー、色、不透明度、配置のパネルが開きます。 |
| **要素を削除** | 現在の編集から選択した要素を削除 | 要素はエディターで直ちに消えます。これが誤りの場合は**取り消す**を使用し、保存する前に確認します。 |
| **取り消す** | 最新の未保存のビジュアル編集を逆にする | Runnerは現在のデザインモード編集履歴を逆にステップします。 |
| **やり直す** | 取り消したばかりの編集を再度適用 | Runnerは現在のデザインモード編集履歴を前にステップします。 |
| **保存** | 現在のビジュアル編集を保持 | Runnerは保留中の変更を書き込み、可能な場合は新しいバージョンスナップショットを記録し、このセッションの取り消し/やり直し履歴をクリアし、プレビューを再度読み込みます。保存するものがない場合、ボタンは無効になります。 |
| **閉じる** | 専用デザインパネルを離れる | Runnerは通常のストアフロントプレビューに戻り、未保存の編集とコマンド履歴をクリアします。変更を保持する場合は最初に保存します。 |

## 安全なビジュアル変更を加える

1. デザインモードを開く前に、通常のプレビューでターゲットページに移動します。
2. デザインモードに入り、1つの要素を選択します。
3. この変更のために1つのパスを選択します。
   - 直接編集の場合は、**間隔**、**画像**、**テキスト**、または**要素を削除**を使用してから、**取り消す**または**やり直す**で確認して**保存**を選択します。
   - AIリクエストの場合は、最初に保留中の直接編集を保存し、必要に応じて要素を再度選択してから、**Runner AIに質問**に命令を入力して送信します。Runnerが開始すると、選択と未保存の直接編集履歴がクリアされます。
4. 選択した保存またはRunnerリクエストが完了するまで待ってから、通常のプレビューでページを確認します。
5. **PC**、**タブレット**、**スマートフォン**レイアウトでページを再度確認します。
6. 保存されたプレビューがレビューに合格した後にのみ公開します。

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

| 表示内容 | 意味 | 対応方法 |
| --- | --- | --- |
| **デザインモードを開始中...** | Runnerは編集可能なプレビューを準備しています。 | 最新バージョンを選択したままにします。 |
| **デザインモードが開始されませんでした** | 編集可能なプレビューが準備完了になりませんでした。 | **もう一度試す**を選択します。繰り返される場合は、通常のプレビューに戻り、更新します。 |
| **Iframeはまだ読み込み中です** | 要素検査の準備ができていません。 | ストアフロントが読み込み完了するまで待ちます。 |
| **AIが処理中の間、ビジュアルエディターが無効になっています** | Runnerは別のリクエストを処理しています。 | リクエストが完了するまで待ってから、要素を再度選択します。 |
| **Runner AIリクエスト**後にRunnerが開始 | ビジュアルエディターは新しいタスク用にリセットされます。 | 未保存の直接編集とそれらの取り消し/やり直し履歴は破棄されます。リクエストを送信する前に直接編集を保存します。 |
| **動的コンテンツではAI編集が利用できません** | 選択したコンテンツはそのコントロールを通じて変更できません。 | 通常のRunnerチャットでページと目的の結果を説明します。 |
| **取り消す/やり直す/保存するものがありません** | 現在のデザインモードセッションに一致するアクションがありません。 | 編集可能な要素を選択して最初に変更を加えます。 |
| **ソースファイルへの変更を保存しました** | Runnerはデザインモード保存を完了しました。 | プレビューが再度読み込まれるまで待ってから、変更されたページを再度確認します。 |
| 編集は保存されていますが、ライブではありません | 保存変更はプロジェクトを更新し、公開されたストアフロントは更新しません。 | 現在のバージョンを確認してから、**変更を公開**を選択します。 |

## 関連ガイド

- [コンテンツ、ページ、メディアを編集](./edit-content-pages-and-media)
- [ストアをプレビュー](./preview-your-store)
- [バージョン履歴を使用](./version-history)