コース一覧
Vibe Coding入門
比べて選ぶ

Vibe Coding入門

作りたいものを言葉で伝え、AIとの対話だけでWebアプリを作り上げるVibe Codingを、毎レッスン実際にAIとやり取りしながら体験します。プログラミングの知識は不要です。最後は自分のアイデアをアプリの形にして公開し、AIが間違えた1行を自分の手で直すところまで進みます。

1
はじめてのVibe Coding
01. Vibe Codingとは5分
02. アイデアを言葉にする5分
03. 最初のアプリを作る6分
04. 少しずつ変える5分
05. つくる:v1完成6分
06. 第1章クイズ5分
2
要望の伝え方
01. 具体的に頼む6分
02. 見た目の指示6分
03. 動きの指示6分
04. 比べて選ぶ6分
05. つくる:思い通り化6分
06. 第2章クイズ5分
3
うまくいかない時
01. エラーはそのまま渡す6分
02. 期待と違う時6分
03. 大きな変更は刻む6分
04. 壊れたら戻す6分
05. つくる:復旧訓練7分
06. 第3章クイズ5分
4
作品を仕上げる
01. 仕上げの磨き6分
02. スマホ対応を頼む6分
03. 公開する6分
04. 自分らしさを足す6分
05. つくる:公開版完成7分
06. 第4章クイズ5分
5
AIの限界とコードの世界
01. AIが間違える所を見る6分
02. コードを覗いてみる6分
03. 1行だけ自分で直す7分
04. つくる:AIと手の合わせ技7分
05. 第5章クイズ5分
6
総合制作
01. マイアプリ完成8分
02. シェアと振り返り7分
03. 完成と次のステップ6分

比べて選ぶ

迷ったら、1案ずつ悩まない

見出しの色を何色にするか、ボタンを角丸にするか。こういう小さな決めごとで手が止まることがあります。頭の中だけで比べても答えは出ません。並べて見比べるほうが早いのです。

AI は案を出すのが得意です。1つ作らせて悩むより、2つ作らせて見比べるほうが、決断までの時間が短くなります。

2案を同時に出させる

頼み方は次のとおりです。

プレーンテキスト

おこづかい帳のボタンの案を2つ、同じ画面に並べて出してください。 A案は角を丸めない四角いボタン、B案は角を9999px 丸めた丸いボタンにしてください。 どちらも文字は「追加」にしてください。

大事なのは、同じ画面に並べることです。1つ作って、消して、また作って、では前のものを覚えていられません。横に並んでいれば一目で決まります。

2案を作るときのコツは3つあります。

  1. 違いを1か所だけにする。色も形も文字も違うと、何が効いているのか分からなくなります
  2. どちらの案かが画面で分かるようにする。A案、B案とラベルを付けさせます
  3. 選んだら、選ばなかったほうを消させる。並べたまま先へ進むと、そのうちどちらが本番か分からなくなります

選ぶのは自分

「どちらがいいと思いますか」と AI に聞くこともできます。答えは返ってきますが、それは平均的な好みであって、自分の好みではありません。

判断を預けてしまうと、第2章の最初に戻ってしまいます。材料は AI、決定は自分という分担を守ってください。理由は言葉にできなくてかまいません。「こっちのほうが好き」で十分です。

選んだあとの伝え方

決まったら、次の指示ははっきり書きます。

プレーンテキスト

B案を採用します。A案のボタンは削除して、B案だけ残してください。

「B案がいいですね」だけで止めると、AI は感想と受け取って何もしないことがあります。採用すると消すの2つを、動作として書くのがコツです。

この回でやること

おこづかい帳の追加ボタンを、四角と丸の2案で並べて出させます。並べて比べる形を実際に作ってみましょう。

完成条件

  • 2案を同じ画面に並べて出させます
  • 違いは角の丸みだけにします。A案は0px、B案は9999pxです
  • どちらのボタンも文字は「追加」です

依頼

おこづかい帳の追加ボタンを2案で見比べます。id が btn-a の四角いボタンと、id が btn-b の丸いボタンを同じ画面に並べてください。B案だけ角を9999px丸めます。どちらの文字も「追加」にしてください。

  • ・2案を同じ画面に並べて出させます
  • ・違いは角の丸みだけにします。A案は0px、B案は9999pxです
  • ・どちらのボタンも文字は「追加」です

いまのコード

index.html

<h1>おこづかい帳</h1>
<button id="btn-a">追加</button>

script.js

style.css

AI への指示

残り 3 回
AI に依頼するにはが必要です

ヒント