# 【保存版】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で作る朝の家計ノート」です。最初の質問をしてください。
```
ここまでコピー