最初のストアを手順に沿って作成する
キャンドルショップを例に、サインイン、最初のプレビュー、具体的な修正、公開前の確認を進めます。スクリーンショットと短い録画付きです。
確認や修正ができ、共有に向けて準備できるストアフロントを作成します。順番に進めるか、目次から必要な手順に戻ってください。
この例では、手作りキャンドルのストア Quiet Mornings を作ります。自分のビジネスのアイデアに置き換えても構いません。スクリーンショットと音声なしの録画は英語の画面です。質問や使える操作はストアによって異なります。
エントリーパス: Runner AI → 無料で始める → サインイン → ワークスペース。
手順の概要
- ストア名のメニュー → 店舗を作成 を開きます(空のワークスペースでは + 店舗 が表示される場合もあります)。新規作成 が表示されたら新規作成を選び、既存の Shopify ストアには Shopify に接続 を選びます。
- プロジェクトの会話で、事業内容、対象顧客、見た目の方向性、必要なページを伝えます。リクエストを送信し、Runner の質問に答えます。
- 最初のビルドが完成したら、ストアフロント を開いてプレビューを確認します。プレビューが完成しても、サイトはまだ公開されていません。
- 公開する準備ができたら 公開 を選び、すべての準備項目を解決してから確定します。公開とチェックアウトの動作は別々に確認してください。
始める前に
- 利用できるメールアドレスまたは Google アカウントを用意します。
- ストアの作成枠と、リクエストに必要なクレジットが残っているワークスペースを選びます。プランやアクセスの制限がある場合は、新しいストアを作る前に解消してください。
- 何を誰に売るのかを一文で用意します。デザインは最初のプレビューを見てから調整できます。
ストアフロントを確認するために決済サービスを接続する必要はありません。プレビューできる状態、公開済み、支払いを受け付けられる状態は別々に確認します。
1. サインインする
- Runner を開き、無料で始めるを選択します。サインイン済みの場合は、ワークスペースを開くを選択します。
- Googleで続けるを選んでアカウントを選択するか、メールアドレスを入力して続けるを選び、Runner からのメールに記載されたコードを入力します。
- アカウントに関する質問が表示されたら回答します。Runner がワークスペースを開くか、サインインを開始したページに戻ります。
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
確認: サインイン画面に戻らず、ワークスペースを開けます。コードやアカウント選択で問題が起きた場合は、サインインを参照してください。
2. ストアを作成する
- 左サイドバー上部のストア名を選び、店舗を作成を選択します。サイドバーが折りたたまれている場合は、先に展開してください。空のワークスペースでは、表示されている店舗を作成または + ストアを使います。
- フォームに選択肢がある場合は、新規作成を選びます。既存の Shopify ストアを引き続き使う場合は、Shopify を接続に進んでください。
- 店舗名に Quiet Mornings または自分のストア名を入力します。
- 作成を選択し、新しいストアが開くまで待ちます。処理中にもう一度選択しないでください。
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
確認: サイドバーに新しいストア名が表示されます。この時点では、ストアフロントの構築や公開はまだ行われていません。
3. 最初のバージョンを説明する
- ストアフロントを選択します。構築済みのバージョンがない場合は、希望する見た目を説明する入力欄が表示されます。新しいストアの会話から始めることもできます。
- 次の例を入力欄にコピーし、ビジネスの情報を変更します。
Build a store for Quiet Mornings, a handmade candle brand for people
who enjoy slow mornings. Use warm cream colors, forest-green accents,
and spacious product photography. Include a homepage, product pages,
About, and Contact. Start with three sample candles: Morning Light,
Cedar Cabin, and Lavender Dusk. Keep the store unpublished.
- 送信矢印(メッセージを送信)を選択します。開始画面に構築を開始が表示されている場合は、そちらを選びます。
- Runner が構築の会話を開き、作業を始めます。このストアを開いたまま結果を確認してください。
確認: 会話にリクエストが表示され、その下に進捗表示や追加の質問が現れます。サンプル商品は練習用です。販売前に実際の商品情報に置き換えてください。
4. 質問に答えて進捗を確認する
- 質問を読み、回答を選択します。自分の回答を入力したい場合は、その他… を使います。
- 残りの質問に答えます。この例では、キャンドルの価格と写真の方向性を選びます。
- Runner が作業を続けるまで待ちます。失敗や停止の原因を確認するには、詳細を開きます。
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
動画で確認:追加の質問に答える
録画では、価格を選び、写真の質問に進み、見た目の方向性を選択しています。回答済みになると選択が確定し、Runner が作業を再開します。質問の内容はリクエストによって異なります。
確認: 回答待ちの質問が残っていません。完了メッセージだけで判断せず、ストアフロントを開いて実際に読み込まれる内容を確認してください。
5. プレビューして1つ修正する
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
- ストアフロントを開くか、完了した構築カードにプレビューが表示されていれば選択します。
- ストアが表示されるまで待ちます。プレビューを準備中… の間は、まだ確認できません。
- ホームページ、商品ページ、概要ページ、お問い合わせページを開きます。文章、画像、価格、ナビゲーションを確認します。
- デバイスの切り替えで PC、タブレット、スマートフォンを確認します。文字の見切れ、ボタンの重なり、横スクロールがないか見てください。
- 会話に戻り、具体的な変更を1つ依頼します。
Change the homepage headline to “Make room for a slower morning.”
Keep the colors, layout, and product information unchanged.
- 変更を待ってから現在のプレビューを開き直し、新しい見出しが表示されることを確認します。スマートフォン表示も再確認してください。
確認: 依頼した変更をプレビューで確認できます。ストアはまだ未公開です。デザインモードが利用できる場合は、要素を選んで部分的に編集することもできます。
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
動画で確認:PC とスマートフォンのレイアウト
デバイスの操作は PC、タブレット、スマートフォン、PC の順に切り替わります。変わるのはプレビューの枠だけで、ストアの公開や編集は行われません。
6. 公開前のチェックを確認する
公開には有料プランや追加のワークスペースアクセスが必要な場合があります。公開を選んでアップグレードの案内が表示された場合は、現在のプランを確認するか、プレビューに戻ってください。この制限を解消してから公開確認に進みます。
英語の注釈で操作箇所を示しています。画像を選択すると拡大できます。
- ストアフロントのツールバーで公開を選択します。アクセスと準備状況のチェックが始まりますが、これだけでは公開されたことにはなりません。
- デプロイの確認を読み、ビルドチェックを待ちます。
- 表示された項目を解消します。AIで修正は修復を依頼し、チェックを再試行はチェックを再実行します。ストア運営を開くが表示されている場合は、設定に進めます。
- 練習の場合はキャンセルを選択します。このバージョンを公開する場合は、警告を確認し、確認が有効になってから選択してください。
- 確認後は公開の成功を待ち、公開 URL を開いてページを確認します。公開に失敗した場合、変更が反映されたとは考えないでください。
スクリーンショットではビルドチェックに通過していますが、設定がまだ残っています。このまま公開する(設定は後で完了します)が表示される場合、チェックを入れると未完了の設定を了承したことになります。設定自体が完了するわけではありません。
動画で確認:公開せずにチェックを閉じる
録画ではビルド結果と設定の警告を確認した後、キャンセルを選んでプレビューに戻ります。例のストアは公開していません。
確認: プレビューが動作すれば、自分が構築結果を見られると分かります。公開が成功し、公開 URL が動作すれば、訪問者もアクセスできます。注文を受け付ける前に、決済サービスの接続とチェックアウトの確認も必要です。
商品、配送、ポリシーなどの設定は公開の準備を参照してください。続いて、公開と再公開、公開ストアとチェックアウトに進みます。
手順が完了しない場合
| 表示される状態 | 次の操作 |
|---|---|
| ストアがまだない | ストア名のメニュー、または空のワークスペースにある作成操作を開きます。 |
| ストア作成枠やプランの制限 | ワークスペースのプランを確認するか、枠に空きのあるワークスペースを選びます。作成を繰り返しても制限は解除されません。 |
| 回答待ちの質問 | Runner が作業を続けるには、先に回答してください。 |
| プレビューを準備中 | 現在のバージョンを開いたままにします。準備が進まなくなり、更新操作が表示されている場合は使ってください。 |
| 失敗、停止、または結果の食い違い | 詳細を開いて残っている問題を読み、実際のプレビューを確認します。成功の要約だけで判断せず、具体的な問題の修正を Runner に依頼してください。 |
| 確認が無効 | ビルドや実行中のタスクを完了させ、表示された要件を解消します。「変更なし」の場合は新しい変更を保存する必要があり、警告を確認するだけでは進めません。 |
| 公開ストアで支払いができない | アプリまたは公開後の案内に表示される、決済サービスの接続とチェックアウト設定を完了します。 |