機能は、入門の4項目で頼む
何を作るか、誰が使うか、いつ使うか、合格ライン。「バイブコーディング入門」で持って帰った4項目を、ここで実際に使います。前のSTEPで決めた小物を、この形に流し込んでください。
自分専用の道具を1つ作ってもらいます。作り始める前に、まず内容を確認してください。
かっこの中を、前のSTEPで決めた自分の小物に書き換えてください。
【何を作るか】（ツールの概要。何をするものかをざっと） 【誰が使うか】自分だけ 【いつ使うか】（どういう場面で開くのか） 【合格ライン】 ・（YesかNoで答えられる形で、2〜3行） 私はコードが書けないので、出来上がったら動かし方も教えてください。 まだ作り始めないでください。足りない情報があれば、先に質問してください。
これで、だいたい動くものが一気に出てきます。機能の面は、本当にこれで足ります。出てきたら実際に動かして、ズレていたら入門の直し方で1つずつ言う。それだけです。
見た目は、「おしゃれにして」と言わない
曖昧な見た目の指示は、絶対に使わないでください。
おしゃれなデザインにして、かっこいい感じにして。 気持ちは分かるんですが、AIの「おしゃれ」とあなたの「おしゃれ」は別物なので、 返ってくるのは誰のものでもない平均的な見た目です。 で、そこから「なんか違う」を繰り返すうちに、どんどん崩れていく。
やることは1つだけです。参考になる見本を、絶対に用意して渡す。何かしら、何でもいいです。 用意の仕方は2パターンあります。
| パターン | やり方 |
|---|---|
| 1. 検索で探す | Googleで検索して画像タブを開き、「これ良さそう」という画面の画像を持ってくる |
| 2. 画像生成で作る | ChatGPTなどで、ボタンの感じや色合いなど、見た目のイメージを画像で生成して持ってくる |
最初は1のほうがおすすめです。画像生成は、それ自体の指示にも少し慣れが要るので。 とくに、作りたいものと同じようなツールがすでにあるなら、その元のツールや競合の画面を探して持ってくるのが一番ベストです。プロがデザインした完成済みの画面なので、渡すだけで一気に整います。
- 参考にしたい画面の画像を1枚用意する
- 「この画像を参考に、見た目を寄せてください」と画像ごと渡す
- 色だけ変えたいなど、ずらしたいところがあれば言葉で足す
つまずきやすいところ
「いい感じにして」でも、何回か往復すればいい感じになるはず。
なりません。曖昧な指示は、直すたびに向こうの解釈が入れ替わるので、往復するほど狙いから離れていきます。見本を1枚渡すほうが、往復ゼロで済むぶん圧倒的に早いです。機能は4項目、見た目は見本。この2つで曖昧さを消すのが、このコースの芯です。
ここまでのまとめ
- 4項目を埋めて頼み、動くものが出てきた
- 見本の画像を1枚渡して、見た目を寄せた
- 「おしゃれにして」と一度も言っていない