【保存版】Codexで商品紹介デモを作る実装指示文キット

第1章：受け取ってくれてありがとう🙌

受け取ってくれてありがとう。碧です。渡すのはCodexで商品紹介デモを作る実装指示文キットです。 設計シート1枚と紹介ページ1枚を、AIへ3本の依頼文を貼るだけで作れます！

第2章：画面を見ながら進める手順

ステップ1：アプリを開いてサインインする ChatGPTのデスクトップアプリをダウンロードして開き、ChatGPTのアカウントでサインインします。

ステップ2：Codexを選び、作業フォルダを追加する 画面でCodexを選び、「New chat」を押します。手元のファイルを扱うので、ローカルプロジェクトの「Add folder」で商品紹介デモ用の作業フォルダを選びます。

ステップ3：本体1を貼って送る 入力欄(チャット欄)に貼って送り、AIの質問に答えます。終わったら、本体2、本体3の順に同じ新しいチャットへ貼ります。

ステップ4：確認が出たら承認する 「Ask for approval」のままにします。アプリに確認が出たら内容を見て、承認を押します。

第3章：本体｜Codexに送る依頼文

本体1｜設計シートを質問しながら作る依頼文

ここからコピー(この枠の中だけ)

あなたは商品紹介ページの設計担当です。
作業フォルダに「設計シート.md」を作ってください。
次の6項目を、1問ずつ私に質問して埋めます。
1 商品名と、1文の説明
2 買う人の悩み(1つだけ)
3 買う前に試せること(1つだけ)
4 ページに載せる見出し(3つ)
5 使ってほしくない言葉
6 ページの色と雰囲気
私の答えが短すぎる時は、例を2つ出して聞き直してください。
全部埋まったら、シートの全文を見せて、作った物を一覧で教えてください。
最初の質問は「【あなたの商品(例:AIで作る朝の家計ノート)】」の確認からです。

ここまでコピー

本体2｜紹介ページを作る依頼文

ここからコピー(この枠の中だけ)

あなたはWebページ制作の担当です。
作業フォルダの「設計シート.md」を読み、商品紹介ページ「index.html」を1枚作ってください。
守ること:
・見出しは、シートの3つだけ
・買う前に試せる部分を、画面の一番上に置く
・シートの「使ってほしくない言葉」は使わない
・外のサイトや部品は使わない(インターネットを使う時は、先に私へ確認する)
・スマホの幅でも読める形にする
・完成イメージの画像が【画像の有無(例:ある/ない)】なら、その雰囲気に合わせる
作ったら、内蔵ブラウザで開いて画面を確認し、作った物を一覧で教えてください。

ここまでコピー

本体3｜見た目と紹介文を直す依頼文

ここからコピー(この枠の中だけ)

あなたは商品紹介ページの編集担当です。
「index.html」を内蔵ブラウザで開き、スクリーンショットを撮って確認してください。
1 スマホの幅とパソコンの幅の両方で、文字の重なりやはみ出しを直す
2 最初の文章を、買う人の悩みから始まる言葉に書き直す
3 作る側の言葉(機能名・専門用語)を、買う人の言葉に置き換える
4 直した所を、直す前と後で一覧にして教えてください
ページの色と見出しの数は変えないでください。

ここまでコピー

そのまま送れる入力例

ここからコピー(この枠の中だけ)

本体1の依頼文を始めます。商品は「AIで作る朝の家計ノート」です。最初の質問をしてください。

ここまでコピー