自分のお店のサイトを、
Codexと作り始める。

できあがりと、必要なものを知る

最初に確認する環境

パソコン内のファイルを読み書きできるCodex、画像生成機能、インターネット接続が必要です。公開時にはCloudflareアカウントと、受信できるメールアドレスを使います。

Codexをまだ利用していない方は、OpenAI公式の導入案内から準備します。利用プラン・画像生成の有無はご自身の環境で確認してください。

販売価格：9,800円（買い切り・支払総額）
商品ZIPの代金です。Codex・画像生成などの利用料は別途。標準の公開URLは無料の pages.dev サブドメインです。lumiwingのBOOTHショップで購入し、入金確認後に商品ZIPをダウンロードできます。

フォローやメール登録なしでデモと準備確認を見られます。購入前に、下の確認範囲もお読みください。

ZIPを展開し、作業場所を用意する

1. パソコンに商品ZIPを保存します。WindowsはZIPを右クリックして「すべて展開」、MacはZIPをダブルクリックします（Mac実機は未検証）。
2. 展開したフォルダーを開き、スタートガイド.html と biz-homepage-autopilot があることを確認します。さらに後者を開くと、SKILL.md と references が直接見えます。
3. デスクトップなどに「お店のホームページ」という新しいフォルダーを作ります。その中に「受け取ったキット」というフォルダーを作り、展開した中身をすべてコピーしてください。
4. Codexで「お店のホームページ」を作業フォルダーとして開きます。通常のブラウザーのチャット画面ではなく、パソコンのファイルを読み書きできる環境を使います。

お店のホームページ ← Codexで開く場所
  受け取ったキット
    スタートガイド.html
    biz-homepage-autopilot
      SKILL.md
      references
    （ほかの説明書など）

ZIPを開いただけの画面で作業せず、先に展開してください。スキルを既に導入している方は、次の文章で既存の配置を確認します。

この文章をCodexに送る

隠れたフォルダーの作成と配置をCodexに依頼します。ここでは導入と環境確認まで進めます。

この作業フォルダー内の「受け取ったキット」にある、biz-homepage-autopilotを導入してください。

1. 今開いている作業フォルダーと、コピー元のSKILL.mdの場所を確認する。
2. SKILL.mdとreferencesフォルダーがそろっていることを確かめる。
3. 同名のスキルがすでに認識されていれば、その場所を教えて、重複配置や上書きの前に確認する。
4. 未導入なら、フォルダー全体を、この作業フォルダーの .agents/skills/biz-homepage-autopilot にコピーする。
5. 配置先のSKILL.mdと参照ファイルを読み、読み込んだ場所と予定する制作手順を教える。スキル一覧での認識が確認できない場合は、その点を明記する。
6. 画像生成、ファイル編集、ネット接続、Cloudflare Pagesへの公開に必要なツールが利用できるか、分かる範囲で確認する。不足は一つずつ案内する。

「受け取ったキット」と .agents は公開しないでください。この段階では、サイト公開・メール送信・有料契約は行わないでください。

この段階の完了目安：読み込んだSKILL.mdの場所が示され、画像生成・公開に必要な機能の確認結果が返ってくること。不足があれば、Codexの案内で先に準備します。

一覧に反映されない場合はCodexを再起動し、同じ作業フォルダーで新しいチャットを始めます。ファイルがあることと、スキル一覧に認識されることは別です。

配置場所と再読み込みの根拠：OpenAI公式のスキル案内。このZIPはローカルのCodex用で、プラグインストアからのインストールではありません。

お店の情報を入れ、制作を依頼する

【 】の部分を自分のお店の情報に置き換えて送ります。実写真やロゴがあれば、Codexにファイルを渡してください。

biz-homepage-autopilotスキルを使って、次のお店の1ページのホームページを作ってください。
実写真がない部分は画像生成で用意し、問い合わせフォームを付けて、Cloudflare Pagesの無料の店名入りURLで公開してください。
公開前に掲載する内容を私が確認できるようにしてください。フォームの有効化と、実際のメール受信確認まで手伝ってください。有料ドメインの購入は希望しません。

店名：【記入】
業種：【記入】
正確な住所：【都道府県・番地・建物名まで】
電話番号：【記入／掲載しない】
営業時間・定休日：【記入】
メニューと税込料金：【記入】
お店の強み・主なお客様：【記入】
希望する雰囲気・色：【記入／おまかせ】
問い合わせ受付メール：【自分で受信確認できるアドレス】
写真・ロゴ：【あり／なし】
URLに使いたい英字名：【記入／おまかせ】
Cloudflareアカウント：【ある／まだない】

未定の情報は質問してください。実績やお客様の声を創作して掲載しないでください。

住所・料金・電話番号・画像・文章を確認してから公開します。AI生成画像は、実店舗の写真と区別して表示します。

ログインとメール確認は自分で行う

1. Codexの案内に沿って、自分のCloudflareアカウントにログインします。アカウントがなければ作成方法を案内してもらいます。
2. 本番URLを受け取ります。標準は 店名の英字名.pages.dev。希望名が使用済みの場合は別名になります。
3. 受付メールに届いた、その本番URL用の最新の有効化メールで「Activate Form」を押します。完了したらCodexに「有効化できました」と伝えます。
4. 識別できるテストを1件だけ送り、受信箱で届いたことを確認します。届いたらCodexに「テストメールが届きました」と伝えます。

有効化メールを待つ間は繰り返し送信せず、迷惑メールとGmailの折りたたまれた最新メールも確認します。画面の送信成功だけでは、メールの到着確認にはなりません。

使える状態になったか確認する

0 / 4 項目を自分の環境で確認しました。

チェックはこの画面内だけのものです。保存・送信されません。更新するときは、同じ作業フォルダーをCodexで開いて依頼します。

止まった場所を、そのまま相談する

次を埋めると、問い合わせ用の文章を作れます。この画面から自動送信・保存はしません。宛先は igo.lschool@gmail.com です。

ファイルの不備や導入の質問を受け付けます。制作代行、個別コード開発、無制限のサポート、返信期限の保証は含みません。

動作確認について

既存のWindows環境で、旧配布版による架空カフェの画像生成・公開・フォーム有効化・テストメールの実受信を確認しています。v1.1で改訂したフォームは模擬応答試験14項目を確認済みで、v1.1.1でも同じコードを使用します。

Mac実機、新規PC・新規アカウント、初心者本人だけでの通し操作、改訂フォームによる新たな実サービス送信、BOOTHの実購入から受領までの通し試験は未検証です。完成時間や集客・売上を保証する商品ではありません。

購入前に、無料の記事で確かめる。

制作例・店舗情報の準備・費用とフォームの仕組みを、別サイトのブログで紹介しています。

カフェの制作例 ／ コピーできる準備シート ／ 費用とフォームの話