--- type: feature title: "ストアフロントの変更を確認できるAI Webサイトエディター" description: "ストアフロントの背景、参照画像、選択した要素、ソースファイルの変更、レスポンシブプレビューを使って確認できるAI Webサイトエディターです。" category: ai-websites h1: "ストアフロントのレビューに適したAI Webサイトエディター" image: "https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media" keyword: "ai website editor" legacyKind: structured --- **AI Webサイトエディター**には、依頼したストアフロントの変更を公開前に理解できる仕組みが必要です。Runner AIは、現在のストアプロジェクト、範囲を絞った要件、必要に応じた参照画像、選択した要素をもとに作業します。ソースファイルの変更とレスポンシブプレビューが返るため、公開とは切り離して内容を確認、修正、保存できます。 ![AI編集ワークスペースでストアフロントのヒーローを選択し、レスポンシブプレビューと変更ファイルを表示している画面](https://storage.googleapis.com/download/storage/v1/b/runner-blog/o/features%2Fai-website-editor%2Fhero.png?generation=1788075293992901&alt=media) ## AI Webサイトエディターに範囲を絞った要件を渡す 最初に、変更するページと顧客の行動を指定します。現在の問題、見える形で実現したい結果、維持する必要があるストアの部分を明記してください。たとえば、既存のナビゲーション、商品データ、カートへの導線、ブランド表現を保ったまま、ホームページから特定のコレクションを見つけやすくするようRunner AIに依頼できます。漠然と改善を求めるのではなく、確認してほしいデバイスの状態とクリック経路も追加します。 入力には、現在のストアフロントファイル、確認済みのカタログ情報、承認済みのコピー、ブランドルール、参照画像、対象のルートまたはセクションを含められます。参照画像は見た目の根拠であり、商品情報の代わりにはなりません。商品、価格、在庫ルール、ポリシー、リンク先、管理範囲が結果に関係する場合、Runnerには正確な情報が必要です。他者が所有する画像や例を使う場合は、プロジェクトに必要な権利と許可を得たものだけを使用してください。 1回の依頼では、一貫した成果を1つに絞ります。最初の結果が意図と異なる場合は、該当するセクションを特定し、期待する状態を説明して、必要であればより明確な参照情報を渡します。サイト全体を繰り返し生成し直すのではなく、具体的な変更を中心に確認の履歴を残せます。既存のストアセクションではなく、使用を許可された公開URLから始めるプロジェクトについては、[AI Webサイトクローン](/ja/ai-website-cloning) で、取得からコード化までの別のワークフローと権利の境界を説明しています。 ## ストアフロントの要素を選択し、コードの背景を保つ Runner AIのDesign Modeは、現在準備ができているストアフロントのバージョンに対して、範囲を絞った見た目の編集を行う機能です。デスクトップでストアフロントを開き、Design Modeに入って、見えている要素を選択できます。選択した要素と周囲のコード情報をAsk Runner AIの指示に添付できるため、実際に選んだコンポーネントへ依頼を絞れます。場所を記憶だけで説明するより、「この見出しを変更する」「この画像を置き換える」と伝える方が明確な場合に便利です。 直接操作では、対応している余白、画像、テキスト、要素の削除を変更できます。対応するメディア要素では、画像パネルにアップロードとAI生成の選択肢が表示される場合があります。テキスト操作では、サイズ、太さ、フォント、色、不透明度、配置などを調整できます。元に戻す操作とやり直しは、現在保存されていないDesign Modeの履歴に適用されます。AIへの依頼の処理が始まると、選択内容と未保存の直接編集履歴がリセットされるため、直接操作からAsk Runner AIへ切り替える前に、保留中の変更を保存してください。 利用できるかどうかはプロジェクトの状態によって異なります。最新のストアフロントバージョンの準備ができていない、古いバージョンをプレビューしている、別の依頼が実行中、ワークスペースで機能が有効になっていない、またはデスクトップレイアウトを使用していない場合、Design Modeを利用できないことがあります。複数ページにまたがる作業、新しい動作、より広い機能の変更には、通常のRunnerチャットが適しています。プロジェクトの準備状態や機能ゲートを回避できる汎用操作として、このエディターを説明するべきではありません。 ## ソースファイルの変更とレスポンシブプレビューを確認する 見た目の編集を保存すると、保留中の変更がプロジェクトに書き込まれます。現在のワークフローが対応している場合は、新しいバージョンスナップショットも記録できます。その後プレビューが再読み込みされ、表示結果をもう一度確認できます。PC、タブレット、スマートフォンの各レイアウトでページを確認し、要件で指定した顧客の行動をたどってください。ある幅では正しく見えるセクションでも、別の場所ではテキストが切れる、操作要素が隠れる、ルートが壊れる、商品の操作順が不自然になる可能性があります。 Runnerには、プレビューの背後にあるストアフロントファイルを調べるための、条件付きで利用できるコードエディターもあります。Gitビューでは、保存済みファイル、差分、ステージング、コミット、プッシュが分けられています。この区別は重要です。ファイルを保存しても自動的にはコミットされず、コミットしても自動的にはプッシュされません。また、いずれの操作もストアフロントの公開にはなりません。意図したファイルの差分を確認し、同じワークスペースにあるという理由だけで無関係な変更をまとめないでください。 レスポンシブプレビューは現在のプロジェクト状態を示す根拠であり、接続しているすべてのシステムが正しいことを証明するものではありません。実際の商品データ、リンク、検索、カートの動作、チェックアウトの管理主体、分析、アクセシビリティ、公開ルートは、それぞれ適切な情報源で検証してください。ナビゲーション、ページ階層、コンテンツを広く見直す一環であれば、[ECサイトリニューアル](/ja/ecommerce-website-redesign) で、一般的な見た目の刷新ではなく、現在のストアの根拠に沿ってリニューアルする方法を説明しています。 ## 保存、バージョン確認、公開を分けて扱う 重要な手順を一つずつ明示すると、AI Webサイトエディターをより安全に使えます。Design Modeでは、直接行った変更を元に戻す操作とやり直しで確認してから保存できます。保存後は、通常のストアフロントプレビューに現在の結果が表示されます。プロジェクトでバージョン履歴を利用できる場合、保存した提案をすべて最終的な公開版とみなすことなく、以前のストアフロント作業を確認または復元できます。 公開は別の判断です。公開前に、結果を元の要件と比較し、選択したセクションがカタログ、周囲のページ、各デバイスのレイアウト、顧客導線と引き続き正しく連動することを確認します。事実に関するコピーは、その情報を管理するシステムと照合してください。生成された説明は在庫を証明せず、プレビューは決済の利用可否を証明せず、ファイルの書き込み成功はすべてのルートや連携が正しく動くことを証明しません。 この確認の境界が、コマースチームにとってのRunner AIの有用な違いです。エディターはストアフロントプロジェクト内で作業し、選択した要素をソースの背景情報につなげられますが、運営者は変更内容を調べ、結果が準備できているか判断できます。成果物は平坦なモックアップや説明できない見た目の変化だけではありません。表示できるファイルとプレビューを備え、慎重な承認手順を支える編集可能なプロジェクト変更です。 ## AI Webサイトエディターのよくある質問 ### Webサイトを編集するとき、Runner AIに何を渡せますか？ 現在のストアプロジェクト、対象にするページまたは要素、改善したい顧客の行動、確認済みのカタログまたはコンテンツ情報、維持する必要がある境界を渡してください。見た目が重要な場合は、承認済みの参照画像も追加できます。Design Modeで要素を選択すると、その要素と周囲のコード情報を、範囲を絞ったAsk Runner AIの依頼に添付できます。 ### コードを手作業で変更せずにストアフロントを編集できますか？ Design Modeでは、対応している余白、画像、テキスト、要素の削除を直接操作でき、選択した要素についてAsk Runner AIへ依頼する入力欄もあります。より広い変更は通常のチャットで依頼できます。コードの確認や範囲を絞ったファイル編集が必要な場合は、条件付きで利用できるコードエディターもありますが、すべての見た目の調整に使う必要はありません。 ### 編集を保存するとすぐに公開されますか？ いいえ。保存するとプロジェクトのワークスペースが更新され、現在のプレビューが再読み込みされます。コミット、プッシュ、公開はそれぞれ独立した操作で、個別の権限と確認があります。ストアフロントを公開する前に、対象ページをデスクトップ、タブレット、スマートフォンで確認し、関連するファイルの変更と顧客導線を検証してください。 ### 一般的なAI Webサイトジェネレーターとは何が違いますか？ 一般的なジェネレーターは空のプロンプトから始め、最初に完成したサイトを重視することがあります。Runner AIの編集ワークフローは、現在のコマースプロジェクト、選択したストアフロント要素、周囲のソース情報、参照画像、確認済みのストア情報から始められます。確認可能な成果物には変更ファイルとレスポンシブプレビューが含まれるため、生成、保存、公開を同じ出来事とみなさずに、範囲を絞った修正を確認できます。 ## 現在のストアフロントを編集し、確認できる成果物を受け取る 現在のストアフロント、対象のページまたは選択した要素、確認済みのカタログとブランド情報、必要に応じた参照画像、維持すべき顧客の行動を用意してください。公開を決める前に結果を確認できるよう、変更したソースファイルとPC、タブレット、スマートフォンのプレビューをRunner AIに依頼します。 [Runner AIでAI Webサイト編集ワークフローを開く](https://www.runnerai.com/ja/auth/login?prompt=%E7%8F%BE%E5%9C%A8%E3%81%AE%E3%82%B9%E3%83%88%E3%82%A2%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%81%A8%E3%80%81%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%BE%E3%81%9F%E3%81%AF%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%9F%E8%A6%81%E7%B4%A0%E3%82%92%E5%AF%BE%E8%B1%A1%E3%81%AB%E3%80%81%E7%A2%BA%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AE%E3%82%AB%E3%82%BF%E3%83%AD%E3%82%B0%E3%81%A8%E3%83%96%E3%83%A9%E3%83%B3%E3%83%89%E6%83%85%E5%A0%B1%E3%82%92%E4%BD%BF%E3%81%84%E3%80%81%E5%BF%85%E8%A6%81%E3%81%AB%E5%BF%9C%E3%81%98%E3%81%A6%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B%E5%8F%82%E7%85%A7%E7%94%BB%E5%83%8F%E3%82%82%E8%B8%8F%E3%81%BE%E3%81%88%E3%81%A6%E3%80%81%E7%AF%84%E5%9B%B2%E3%82%92%E7%B5%9E%E3%81%A3%E3%81%9F%E7%B7%A8%E9%9B%86%E3%82%921%E4%BB%B6%E8%A1%8C%E3%81%A3%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82%E5%A4%89%E6%9B%B4%E3%81%97%E3%81%9F%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A8PC%E3%80%81%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%80%81%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E3%81%AE%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%82%92%E8%BF%94%E3%81%97%E3%80%81%E5%85%AC%E9%96%8B%E5%89%8D%E3%81%AB%E9%A1%A7%E5%AE%A2%E5%B0%8E%E7%B7%9A%E3%81%A8%E7%B5%90%E6%9E%9C%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%A7%E3%81%8D%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82) ## 関連機能 - [許可された参照情報をストアフロントコードに変換する](/ja/ai-website-cloning) - [現在のストアをもとにECサイトリニューアルを計画する](/ja/ecommerce-website-redesign) - [Runner AIの全機能を見る](/ja)