--- type: feature title: "AI EC ホームページビルダー | Runner AI" description: "Runner AI で、カタログ情報、レスポンシブプレビュー、公開前に確認できる変更を使い、プロンプトからストアフロントのホームページを作成・修正します。" category: ai-websites h1: "実用的な AI EC ホームページビルダーのワークフロー" legacyKind: structured image: "https://images.unsplash.com/photo-1556740758-90de374c12ad?q=80&w=1000&auto=format&fit=crop" keyword: "AI EC ホームページビルダー" --- AI を使った EC ホームページビルダーは、ショップ運営者がマーチャンダイジングの brief を、公開前に確認できるストアフロントのトップページへ変換するのに役立ちます。Runner AI で実際に行うのは、ページの目的を説明し、プロンプトからページを作成または修正し、さまざまなデバイスサイズで結果を確認し、空のレイアウトから始めるのではなく意図的な変更を加えることです。 ホームページには、商品ページやキャンペーン用ランディングページとは異なる役割があります。ショップを紹介し、買い物客を役立つカテゴリーや商品へ案内し、現在の優先事項を目立つ場所に示します。ただし、すべての商品を一度に見せようとはしません。そのため、何を目立たせるべきか、どの情報が正確か、ショップの準備が整うまで何を表示しないかについて、運営者が判断する必要があります。 ## AI EC ホームページビルダーの目的 ホームページは、ストアフロントの案内役です。訪問者は、ブランドの主軸を理解したり、関連するカテゴリーを見つけたり、注目商品をいくつか比較したり、現在の新商品を見つけたりする必要があるかもしれません。どのコレクションを最初に置くか、ヒーローで1つの商品を紹介するか幅広いカテゴリーを紹介するか、初めて訪れた人が進む先を選ぶまでにどの程度の情報が必要かを決めるのが、運営者の役割です。 Runner AI は、プロンプトを使ったストアフロントの作成と修正によって、この作業をサポートします。ページを単なる汎用ブロックの集合として扱うのではなく、運営者はページの目的を伝え、実際のカタログに照らして提案された構成を評価できます。季節商品、新しいカテゴリー、またはベストセラー商品によって、買い物客がショップを見る順序を変える必要がある場合に、特に役立ちます。ただし、出力には編集面と商業面での確認が必要です。適切なマーチャンダイジング戦略をツールが自動的に決めるわけではありません。 ![(Runner AI がホームページ構成、カタログ証拠、CRO 信号を整える)](https://images.unsplash.com/photo-1556740758-90de374c12ad?q=80&w=1000&auto=format&fit=crop) ![カタログデータでコピーを正確に保つ](https://images.unsplash.com/photo-1556761175-b413da4baf72?q=80&w=800&auto=format&fit=crop) ## 確認可能なワークフローで作成・確認・修正する まず、新しいコレクションを紹介する、買い物客を少数のカテゴリーへ案内する、主力商品を見つけやすくするなど、ホームページで実現したい結果を明確に説明するプロンプトを作成します。Runner AI は、そのプロンプトからストアフロントページを作成・修正できます。その後、運営者はデスクトップ、タブレット、スマートフォンでページをプレビューできます。商品グリッドが密集している、見出しが長い、画像が目立ちすぎるといった場合は、画面サイズに応じて別の調整が必要になることがあります。 変更はチャットで相談することも、Design Mode で行うこともできます。これにより、運営者は具体的で確認可能な修正を依頼できます。ヒーローメッセージを短くする、コレクションセクションの順序を変える、ビジュアルを差し替える、ファーストビューに表示する商品数を減らす、といった変更です。役立つワークフローは反復型です。プロンプト、プレビュー、修正、承認という流れで進めます。AI が生成したコピー、レイアウト、クリエイティブ上の判断は、公開前にブランドとショップの責任者が確認してください。 ![目標に応じたセクション生成](https://images.unsplash.com/photo-1556155092-490a1ba16284?q=80&w=600&auto=format&fit=crop) ![流入元と買い物段階を構造に変える](https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?q=80&w=800&auto=format&fit=crop) ## まず商品情報と制約を準備する 有用な brief は、正確なショップ情報に基づきます。Runner AI の商品レコードには、商品名、説明、カテゴリー、画像、価格、バリエーション、在庫、SEO フィールド、公開ステータスなどを含められます。運営者はこれらの情報を個別に追加・更新したり、適切な場合は CSV インポートを使ったりできます。ホームページで使用する前に、掲載する商品について、商品名、画像、価格表示、利用可能なバリエーションが正しいことを確認してください。 制約はコンテンツと同じくらい重要です。未公開、在庫切れ、重要なバリエーションの欠落、古い画像の使用などに該当する商品を、ホームページの前面に出すべきではありません。色、サイズ、パック、構成の選択肢が多いショップでは、ホームページに代表的な商品画像を1枚だけ表示するのか、バリエーションを適切に検討できるカテゴリーへ訪問者を案内するのかを決めます。季節商品のカタログでは、コレクションをいつ導入し、目立たせる度合いを下げ、または削除するかを決めます。これは現在のカタログと在庫状況に基づく運営者の判断であり、AI が推測すべきことではありません。 ![カタログに基づく証拠](https://images.unsplash.com/photo-1542744173-8e7e53415bb0?q=80&w=600&auto=format&fit=crop) ![ホームページの学習をストア全体へ](https://images.unsplash.com/photo-1556742111-a301076d9d18?q=80&w=800&auto=format&fit=crop) ## 公開前にページを確認する 公開前の確認では、見た目の仕上がりだけを見るべきではありません。現在のショップデータと照らし合わせて、すべての見出し、商品への言及、価格表示、CTA を読み直します。注目カテゴリーの名前がカタログと一致しているか、商品画像が意図した商品を表しているか、リンクが正しいストアフロントの遷移先につながっているかを確認します。デスクトップ、タブレット、スマートフォンでページを確認し、途切れたコピー、混み合ったセクション、画像のトリミングの不統一、小さな画面で見つけにくくなる CTA がないかを確認してください。 また、ストアフロントの公開とチェックアウトの準備完了は分けて考えてください。ホームページを公開しても、Stripe のチェックアウトが設定済みであることや、買い物客が購入を完了できることの証明にはなりません。運営者は、購入経路とローンチに必要なショップ設定を個別に確認する必要があります。公開ステータスも実務上の確認項目です。プロモーションする商品が表示対象であることを確認してください。慎重な最終確認により、ホームページを、チームが後で提供したいものではなく、現在ストアフロントで実際に提示できるものと一致させられます。 ![入口導線の最適化](https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?q=80&w=600&auto=format&fit=crop) ## ホームページのワークフローが適する場面と、その範囲 このワークフローは、継続的な入口を新設または更新する必要があるショップに適しています。新しいカタログに最初のストアフロント構成が必要な場合、成長中のショップにわかりやすいカテゴリー導線が必要な場合、季節の変化に合わせて注目商品の順序を見直す場合などです。ページの見た目が古くなった場合や、現在のマーチャンダイジング上の優先事項を反映しなくなった場合の、集中的な修正にも利用できます。ホームページは、商品固有の情報が必要な商品詳細ページや、より範囲が狭く一時的なキャンペーンページとは別のものです。 Runner AI の幅広い機能は、ホームページを作成しただけで自動的に利用できる結果ではありません。アナリティクス、SEO 分析、実験、プロモーション、自動化、連携、クリエイティブ生成は、ショップの状態、プラン、プロバイダー、役割、トラフィック、利用可能なデータ、段階的な提供状況などに左右される場合があります。公開ページがあることは、検索パフォーマンス、コンバージョン改善、収益増加の証拠ではありません。ショップで実験が利用できる場合でも、提案されたバリエーションと結果には運営者の解釈と承認が必要です。勝ちパターンが自動的に選択または公開される保証はありません。 ![ストアネイティブ公開](https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=600&auto=format&fit=crop) ## 具体的なホームページ brief を使う 具体的な brief があれば、確認プロセスで評価すべき対象が明確になります。「モダンな EC ホームページ」と依頼するのではなく、ショップの主な導線、注目する商品構成、制約を明示します。例えば、「スキンケアカタログのホームページを作成してください。新しい洗顔料コレクションを先頭に置き、洗顔料、保湿剤、セットの3つのカテゴリー導線を表示し、公開済みのベストセラー商品を1つ紹介してください。現在の商品画像と価格を使用してください。スマートフォンではヒーローを簡潔にし、在庫がない商品や公開済みのバリエーションがない商品には言及しないでください」といった内容です。 この brief によって、Runner AI が下書きを作成した後に確認すべき点が明確になります。商品選定を在庫と照合し、カテゴリー名が正しいか確認し、画像がブランドの見せ方に合っているかを確認し、ベストセラーを本当にファーストビューに置くべきか判断できます。ショップが CSV でカタログをインポートした場合は、これらのレコードを目立つ位置に置く前に、説明の不足、重複した商品名、画像の欠落を見つける良い機会にもなります。 ![空のテーマではなくストア意図から始める](https://images.unsplash.com/photo-1554224155-6726b3ff858f?q=80&w=800&auto=format&fit=crop) ## FAQ ### プロンプトからホームページを作成できますか？ はい。Runner AI では、運営者がプロンプトからストアフロントページを作成・修正できます。プロンプトには、希望するページ構成、注目商品やカテゴリー、優先したい訪問者の導線を記述できます。作成された内容はストアフロントのプレビューで確認し、必要に応じて修正してください。初めから完成版として扱うべきではありません。 ### ページを作成する前に何を用意すべきですか？ 明確なマーチャンダイジングの目標を用意し、関連する商品データが最新であることを確認してください。商品名、説明、カテゴリー、画像、価格、バリエーション、在庫、SEO フィールド、公開ステータスなどが役立ちます。また、未公開、不完全、または現在利用できないため、紹介すべきでない商品も特定してください。 ### ホームページをモバイルで確認できますか？ はい。Runner AI ではデスクトップ、タブレット、スマートフォンのプレビューを利用できます。3種類すべてを確認することが重要です。画面サイズによって、セクションの順序、画像のトリミング、商品の密度、CTA の見え方が大きく変わる可能性があるためです。プレビューを確認した後、チャットまたは Design Mode で確認可能な調整を依頼できます。 ### ホームページを公開するとチェックアウトも設定されますか？ いいえ。ストアフロントの公開とチェックアウトは別のものです。公開されたホームページがあっても、Stripe のチェックアウトが設定済みであることや、購入経路に必要なすべての設定が整っていることは確認できません。ストアフロントを実際の販売開始に利用する前に、チェックアウトを個別に確認してください。 ## 関連機能 - [キャンペーンページを出荷する AI Ecommerce Landing Page Builder](/ja/ai-ecommerce-landing-page-builder) - [モバイルファーストのための AI Ecommerce Mobile Store Builder](/ja/ai-ecommerce-mobile-store-builder) - [AI Eコマースプラットフォーム：リテール向けスマートソリューション](/ja/ai-ecommerce-platform) - [すべての機能を見る](/ja)