コース一覧
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 が手を抜いているのではありません。おしゃれの中身が決まっていないので、AI が代わりに決めているだけです。決めたのが自分でない以上、出てきた画面が自分の思いどおりになるのは偶然です。

曖昧な言葉には共通の形がある

困る言葉には共通点があります。人によって答えが変わる言葉です。

  • おしゃれに、いい感じに、モダンに
  • 見やすく、きれいに、スッキリ
  • 大きめに、ちょっと広く、少し明るく

どれも、10人に聞けば10通りの絵が出てきます。反対に、10人に聞いても同じ絵になる言葉なら、AI にも同じ絵が出せます。

数値と例に置き換える

やることは1つだけです。曖昧な言葉を、数値か具体例に置き換える。

プレーンテキスト

悪い例 おこづかい帳をおしゃれにして

プレーンテキスト

良い例 おこづかい帳の見出しを紺色にしてください。 色はちょうど #1e3a8a を使ってください。 見出しの下に、残高を表示する場所を1つ作ってください。

悪い例と良い例の差は、センスではありません。判断を自分でしたか、AI に預けたかの差です。紺色と決めたのは自分で、AI は置いただけになりました。

置き換えの型は3つあります。

  1. 色は色の名前か、# から始まる6桁の記号にする。この記号をカラーコードと呼びます。#1e3a8a のように書くと、世界中どこでも同じ色になります
  2. 大きさや間隔は数値にする。「広め」ではなく「24ピクセル」と書く。ピクセルは画面上の点の数で、px と書きます
  3. 文言はカギカッコで囲んで、そのまま書く。「わかりやすい見出し」ではなく「見出しはちょうど おこづかい帳 にしてください」と書く

決められないときは、選択肢を出させる

「紺色と言われても、何色がいいか分からない」という場面はあります。そのときに「おしゃれに」へ戻ってはいけません。代わりにこう頼みます。

プレーンテキスト

見出しの色の候補を3つ、色の名前とカラーコード付きで挙げてください。 まだ画面は変えないでください。

決めるのは自分のままで、材料だけ AI に出させる形です。第2章の最後で、この頼み方をもう一度使います。

この回でやること

おこづかい帳の見出しを、色まで指定して出します。曖昧な言葉を1つも使わずに書けるかが、この回の練習です。

完成条件

  • 「おしゃれに」ではなく、文言と色をそのまま書いて頼みます
  • 色は #1e3a8a と、カラーコードで指定します
  • 見出しの文言はちょうど「おこづかい帳」にします

依頼

おこづかい帳の画面を作ります。見出しに「おこづかい帳」と表示し、その見出しの文字色をカラーコード #1e3a8a の紺色にしてください。曖昧な言葉を使わず、文言と色をそのまま指定して頼んでみましょう。

  • ・「おしゃれに」ではなく、文言と色をそのまま書いて頼みます
  • ・色は #1e3a8a と、カラーコードで指定します
  • ・見出しの文言はちょうど「おこづかい帳」にします

いまのコード

index.html

<div id="app">ここに画面を作ります</div>

script.js

style.css

AI への指示

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

ヒント