AIでオンラインストアを作る方法

小さなストアは、先に基本を決めておくと作りやすくなります。AIはコードをすばやく生成できますが、明確な指示は依然として必要です。

以下を書き出しましょう。

• 何を販売するのか
• バージョン1で何商品にするのか
• 顧客が直接購入できるのか、それとも問い合わせのみか
• 必要なページは何か
• 各商品に必要な情報は何か

シンプルなストアの初期版に必要なのは、通常次のようなものです。

• ホームページ
• ショップまたはカタログページ
• 商品詳細ページ
• カートページまたは購入ボタン
• 会社情報またはお問い合わせページ

商品データの扱いも決めておきましょう。商品数が少ないなら、最初はサイト内にハードコードされた商品コンテンツで始められます。後で商品管理、顧客アカウント、注文データを扱いたくなったら、そこでデータベースの出番です。

最初の構築は狭く保ちましょう。3〜6商品あれば、導線を検証するには十分です。

Moremadeでは、Webサイトを自然な言葉で説明すると、AIエージェントがReactとTailwindのコードを書いてくれます。その後、ライブプレビューを確認しながら、チャットでサイトを変更し続けられます。

最初のプロンプトでは、構成、スタイル、主要な操作をカバーしましょう。ページに何を置くべきかは具体的にしつつ、細部のピクセル単位まで決めようとしすぎないのがコツです。

役立つ最初のプロンプトに含める内容は次のとおりです。

• ストアの種類
• 生成したいページ
• 表示する商品フィールド
• レイアウトのスタイル
• 購入時の動作
• ブランドや文体の制約

例:

ハンドメイドキャンドルブランドの小さなオンラインストアを作ってください。ホームページ、ショップページ、商品詳細ページ、カートページ、お問い合わせページを作成してください。暖かいニュートラルカラーと見やすい商品カードを使った、すっきりしたミニマルなレイアウトにしてください。name、price、short description、scent notes、product images のプレースホルダー付きで、6つの商品例を追加してください。商品ページには画像、説明、ingredients、add-to-cartボタンを表示してください。カートでは数量変更と小計の表示ができるようにしてください。サイトはレスポンシブにし、モバイルでも使いやすくしてください。

最初の構築が終わったら、ライブプレビューを編集ツールとして使いましょう。構成が完全に間違っていない限り、最初からやり直す必要はありません。多くの場合は、小さく具体的な依頼を重ねるほうがよい結果になります。

Moremadeでは、チャットで変更を依頼したり、ビジュアルインスペクターで要素を指して編集したり、コードビューで何が変わったか確認したりできます。

良い追加入力は、具体的で局所的です。1回に1つの改善を依頼しましょう。

例:

• "商品グリッドをデスクトップでは3列、タブレットでは2列にしてください。商品カードの高さをそろえ、add-to-cartボタンを下部に固定してください。"
• "商品ページでは scent notes を ingredients の上に移動し、add-to-cartボタンの下に小さな配送メモを追加し、メイン画像をデスクトップで少し大きくしてください。"
• "ホームページのヒーローをシンプルにしてください。見出しを短くし、補足文を1文だけにして、ショップページへリンクする主要ボタンを1つ置いてください。"

この段階で、品質の大半が決まります。余白、商品の階層、ボタンのラベル、空状態、カート導線が分かりやすいかを確認しましょう。

最初のバージョンに、必ずしもフルバックエンドは必要ありません。

商品紹介だけのショップやクリックできるデモで十分なら、商品をフロントエンドのコードに保持したまま進められます。顧客が支払いできるようにしたいならStripeを追加します。サインイン、保存されたユーザーデータ、注文記録が必要ならSupabaseを追加します。

Moremadeには、両方の組み込みコネクタがあります。

以下が必要ならStripeを使いましょう。

• 自分で設定した実価格でのチェックアウト
• 小さなカタログ向けのシンプルな決済導線

以下が必要ならSupabaseを使いましょう。

• 顧客のサインイン
• 商品や注文用のデータベース
• ファイル保存

小さなストアの多くでは、最初に追加する本格的な連携はStripeです。実践的な追加入力の例は次のとおりです。

• "サイトに表示されている商品価格を使って、チェックアウトをStripeに接続してください。カートページはそのままにし、チェックアウト前に注文サマリーを表示し、モバイルでもチェックアウトボタンを分かりやすくしてください。"

後から顧客アカウントや在庫関連データが必要になったら、バージョン1に無理やり詰め込むのではなく、Supabaseを導入するのが自然です。

小さなストアは、デスクトップでデザインしていても、まずモバイルで評価されることが多いです。

次の部分を丁寧に確認してください。

• ホームページのヒーローの高さとボタンの見え方
• 商品カードの読みやすさ
• 商品ページでの画像のトリミング
• カートの数量コントロール
• チェックアウトボタンの配置
• フォームの入力欄とタップしやすさ

修正は平易な言葉で依頼しましょう。たとえば次のように伝えます。

• "モバイルメニューをもっとシンプルにして、タップ領域を大きくし、ヘッダーにカートアイコンを表示したままにしてください。"
• "スマホでは商品画像を商品詳細の上に積み、左右の余白を少し減らしてください。"

何が変なのかうまく説明できない場合は、まずビジュアルインスペクターで要素を指してから変更を依頼しましょう。

サイトの見た目が整ったら、公開しましょう。

Moremadeでは、1回のクリックで無料の yourname.moremade.ai サブドメインに公開できます。有料プランではカスタムドメインを接続できます。ドメインはMoremade内で購入することも可能です。

シンプルな公開手順は次のとおりです。

• 無料サブドメインに公開して確認する
• リンク、カート導線、チェックアウトをテストする
• ストアの準備ができたら本番ドメインを接続する

プラットフォームの外にもコピーを残したい場合は、いつでも完全なソースをZIPでエクスポートするか、GitHubにプッシュできます。Webサイトは実際のReactとTailwindのコードで作られるため、独自形式に縛られることはありません。

最大の失敗は、AIに最初からやりすぎを求めることです。

次のようなミスは避けましょう。

• シンプルなカタログとチェックアウトではなく、最初から20個の機能を入れようとする
• "オンラインストアを作って" のように、商品やページの詳細がない曖昧なプロンプトを書く
• 顧客がなぜアカウントを必要とするのか分からないのに、先にサインインを追加する
• 1回の依頼で複数のデザイン方向を混ぜる
• 最後までモバイルテストをしない
• 問題のデバッグ中に、構成とスタイルを同じプロンプトで同時に変える

より良い進め方は、段階的に作ることです。

1. 基本のストア構成を生成する。
2. レイアウトとコンテンツを修正する。
3. 今すぐ顧客が支払う必要があるならStripeを追加する。
4. 保存データやサインインが必要なときだけSupabaseを追加する。
5. 公開し、テストし、その後で改善する。

この進め方なら、プロジェクトが分かりやすく保てて、不要な書き直しにBuild Unitsを使わずに済みます。