少しずつ変える
まとめて頼むと、原因が分からなくなる
v1 ができると、直したいところが一度に何個も見えてきます。色も変えたい、文言も変えたい、ボタンも足したい。それを1回で全部頼むと、こうなります。
プレーンテキスト
頼んだこと 色を紺色にして、見出しの文言を変えて、ボタンも足してください
返ってきた 色は変わったが文言はそのまま、ボタンは別の場所に付いたここで困るのは、直っていないこと自体ではありません。どこがどう伝わらなかったのか分からないことです。3つ同時に頼んだので、原因の候補も3つあります。
1回1変更
そこで、Vibe Coding には基本のルールが1つあります。1回の依頼で変えるのは1か所だけにします。
プレーンテキスト
1回目 合計の行の文字色を赤にしてください
画面を見る。赤くなった
2回目 見出しの文言を「わたしのおこづかい帳」にしてください
画面を見る。変わった
3回目 いちばん下に「追加」ボタンを置いてください
画面を見る。付いた遠回りに見えますが、実際にはこちらのほうが速く終わります。1回ごとに「通じた」「通じなかった」がはっきりするので、やり直しが1回ぶんで済むからです。まとめて頼んで全部やり直すのと比べてみてください。
変えるものと変えないものを、両方書く
もう1つ大事なことがあります。1か所だけ変えてほしいときは、それ以外は変えないでほしいと書き添えます。
プレーンテキスト
合計の行の文字色を赤にしてください。ほかの部分は変えないでください。この一言が無いと、AI は親切心で周りも整えてしまうことがあります。頼んでいない場所が変わると、あなたが確認すべき箇所が増えます。変更の範囲を自分で決めておくのは、こちらの仕事です。
色は名前ではなく、具体で指定する
色を頼むときは、言葉の印象ではなく具体的な色を書くと確実です。ここで1つ用語を足します。Webページの色は、赤・緑・青の3つの数字の組み合わせで表せます。この書き方を使うと、誰が読んでも同じ色になります。
プレーンテキスト
曖昧 目立つ色にしてください
具体 文字色を赤 (rgb(255, 0, 0)) にしてください数字の意味を覚える必要はありません。同じ色を指すための共通の書き方があるということだけ知っていれば十分です。
演習でやること
下の演習では、すでにできている画面に対して1か所だけ変更を頼みます。合計の行の文字色を赤にしてください。
見出しやリストは触らせないでください。「ほかは変えないでください」を必ず添える練習です。
完成条件
- 変えるのは合計の行の文字色だけです
- 色はちょうど赤 rgb(255, 0, 0) にしてください
- 見出しとリストは、いまのまま残してください