アイデアを言葉にする
頭の中の絵は、そのままでは伝わらない
作りたいものは、たいてい頭の中では絵として浮かんでいます。ところが AI に渡せるのは文章だけです。絵を文章に翻訳するこの作業が、Vibe Coding でいちばん最初にやることになります。
うまくいかない人の多くは、ここを飛ばしています。浮かんだ絵をそのまま短く言ってしまうのです。
プレーンテキスト
浮かんだ絵 おこづかいを管理するやつこれでは、AI は何を画面に置けばいいのか決められません。決められないと、勝手に決めます。
3つの文に分けて書く
翻訳のやり方は、型にしてしまうのが早いです。誰が / 何を見て / 何ができるかの3つに分けて書きます。
プレーンテキスト
1 誰が おこづかいを自分で管理したい中学生が
2 何を見て その月に使ったお金の一覧と、残りの金額を見て
3 何ができる 使った金額をその場で追加できる3つ書けたら、それをつなげるだけで AI に渡せる説明になります。逆に、この3つのどれかが書けないなら、まだ自分の中でも決まっていないということです。書けない部分は、AI ではなく自分が決めるところです。
画面に出るものだけを書く
もう1つコツがあります。画面に出るものを書いてください。気持ちや目的だけを書いても、画面には何も出ません。
プレーンテキスト
画面に出ない お金を大事に使えるようになりたい
画面に出る いちばん上に「おこづかい帳」という見出しを出す
画面に出る その下に、使った項目を上から順に並べる目的が悪いわけではありません。ただ、目的だけでは形が決まらないので、必ず目に見える形まで落として書きます。「一覧を出す」なら、何がいくつ並ぶのかまで書けるとさらに確実です。
一覧という言葉は具体にする
ここで1つ用語を足します。画面に項目を縦に並べたものを、Webページではリストと呼びます。買い物メモのように、行が上から順に並んだ形のことです。
プレーンテキスト
曖昧 使ったものを一覧で出してください
具体 使ったものを、上から順に3行のリストとして並べてください下の書き方なら、返ってきた画面を見て「3行あるか」を自分の目で確かめられます。確かめられる形で頼むのは、この先ずっと使う考え方です。
演習でやること
下の演習では、おこづかい帳の説明を文章にして、画面を作ってもらいます。必要なのは見出しと、使った項目のリストです。
1文で全部詰め込む必要はありません。「見出しはこれ」「その下にリストで3行」と、分けて書いて構いません。分けて書いたほうが、たいてい正確に伝わります。
完成条件
- 見出しの文字は、ちょうど「おこづかい帳」にしてください
- リストは3行以上にしてください
- 各行の中身は、おこづかいの使い道なら何でも構いません