機能は、4項目で頼む
何を作るか、誰が使うか、いつ使うか、合格ライン。「喋れば創れる Vibe Coding」で持って帰った4項目を、ここで実際に使います。前のSTEPで決めた小物を、AIに聞かれる形でこの4項目に落とし込みます。
- 作業フォルダの中に、作る道具の名前で新しいフォルダを1つ作る
- Codex か Claude Code で、そのフォルダを渡して開く
- 下のプロンプトを貼って送る
自分専用の道具を1つ作ってもらいます。作り始める前に、まず内容を一緒に固めてください。 次の4項目のうち、誰が使うか以外の3つを、1つずつ私に質問してください。 ・何を作るか（何をする物かを、ざっと） ・誰が使うか（自分だけ。聞かなくて大丈夫です） ・いつ使うか（どういう場面で開くのか） ・合格ライン（YesかNoで答えられる形で、2〜3行。私の答えがあいまいなら、YesかNoで答えられる形に言い直して、合っているか確かめてください） 4項目がそろったら、一覧にして見せてください。私はコードが書けないので、出来上がったら動かし方も教えてください。 まだ作り始めないでください。ほかにも足りない情報があれば、先に質問してください。
補足 貼って送ると、3つを1つずつ聞かれます。前のSTEPで決めた小物のことを、思いついた言葉で答えてください。
4項目の一覧が出て、中身が合っていたら、「この内容で作ってください」と送ります。これで、だいたい動くものが一気に出てきます。機能の面は、本当にこれで足ります。出てきたら実際に動かして、ズレていたら、どこが・いまどうなっていて・本当はどうしたいか、を1つずつ言う。それだけです。
見た目は、「おしゃれにして」と言わない
曖昧な見た目の指示は、絶対に使わないでください。
おしゃれなデザインにして、かっこいい感じにして。気持ちは分かるんですが、AIの「おしゃれ」とあなたの「おしゃれ」は別物なので、返ってくるのは誰のものでもない平均的な見た目です。で、そこから「なんか違う」を繰り返すうちに、どんどん崩れていく。
やることは1つだけです。参考になる見本を、絶対に用意して渡す。何かしら、何でもいいです。用意の仕方は2パターンあります。
| パターン | やり方 |
|---|---|
| 1. 検索で探す | Googleで検索して画像タブを開き、「これ良さそう」という画面の画像を持ってくる |
| 2. 画像生成で作る | ChatGPTなどで、ボタンの感じや色合いなど、見た目のイメージを画像で生成して持ってくる |
最初は1のほうがおすすめです。画像生成は、それ自体の指示にも少し慣れが要るし、無料のままだと2〜3枚で上限に当たるので。とくに、作りたいものと同じようなツールがすでにあるなら、その元のツールや競合の画面を探して持ってくるのが、いちばん早いです。プロがデザインした完成済みの画面なので、渡すだけで一気に整います。
- 参考にしたい画面の画像を1枚用意する
- 「この画像を参考に、見た目を寄せてください」と画像ごと渡す
- 色だけ変えたいなど、ずらしたいところがあれば言葉で足す
自分だけで使う道具なら、ここまで寄せて大丈夫です。人に配ったり売ったりする時は、元のツールの画面をそっくりにせず、ロゴや画像も使わないでください。借りるのは、並びと余白の考え方までです。
「いい感じにして」でも、何回か往復すればいい感じになるはず。
なりません。曖昧な指示は、直すたびに向こうの解釈が入れ替わるので、往復するほど狙いから離れていきます。見本を1枚渡すほうが、往復ゼロで済むぶん圧倒的に早いです。機能は4項目、見た目は見本。この2つで曖昧さを消すのが、このコースの芯です。