コース一覧
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分

自分らしさを足す

AIに任せると、どこかで見た画面になる

AIに「おこづかい帳を作って」と頼むと、たいてい似た画面が返ってきます。青系のボタン、角の丸い枠、無難な見出し。悪くはないのですが、誰が作っても同じ顔になります。作った本人が愛着を持てず、見た人の記憶にも残りません。

ここで足すのが、自分らしさです。自分らしさとは、センスの良さのことではありません。「この人が作ったんだな」と分かる要素が、画面のどこかに1つあることです。1つで十分です。多いほど良いものではなく、むしろ増やすほど散らかります。

足せる自分らしさの種類

名前や持ち主を出す

いちばん手軽なのは、見出しに持ち主の名前を入れることです。「おこづかい帳」ではなく「たろうのおこづかい帳」にするだけで、汎用品が自分の道具に変わります。誰かに贈るものなら、その人の名前を入れます。

一言を添える

見出しの下に、短い一言を置く方法もあります。「今月の目標は貯金2000円」のような文です。この一言は機能には関係ありませんが、画面に体温が出ます。

色を自分で決める

AIに任せず、自分で色を1つ決めて指定します。好きな色でも、部活のカラーでも構いません。色を指定するときは「あたたかい感じ」ではなく、色の名前か、色を表す番号で伝えます。色を表す番号は、# のあとに6文字が続く形で書きます。

絵文字ではなく記号や飾り

見出しの横に小さな飾りを置くのもよい方法です。ただし、飾りを増やすと本題が見えにくくなるので、置くとしても1か所までにします。

頼み方の型

プレーンテキスト

悪い例 自分らしい感じにしてください。

プレーンテキスト

良い例 次の2つを入れてください。 1. 見出しを「たろうのおこづかい帳」に変える 2. 見出しの下に「今月の目標は貯金2000円」という一言を1行入れる

自分らしさは、AIには絶対に推測できない情報です。あなたの名前も、目標の金額も、好きな色も、あなたしか知りません。ここだけは、あなたが具体的に決めて渡す必要があります。逆に言えば、決めて渡しさえすれば、置き方はAIが整えてくれます。

やりすぎを避ける

自分らしさを足したあとは、少し離れて画面を見てください。最初に目に入るものが、名前でも飾りでもなく、そのアプリの本題であれば成功です。飾りのほうが目立っているなら、色を落ち着かせるか、飾りを減らします。

この回の演習

おこづかい帳に、持ち主の名前と一言を足します。見出しを「たろうのおこづかい帳」に変え、その下に短い一言を1行入れてください。名前と一言はこの演習では共通のものを使いますが、自分のアプリでは自分の言葉に置き換えてください。

完成条件

  • 自分らしさはAIには推測できません。名前や一言は自分で決めて渡します
  • 足すのは1つか2つまでにすると、本題が埋もれません

依頼

おこづかい帳に自分らしさを足してください。見出しを「たろうのおこづかい帳」に変え、見出しのすぐ下に「今月の目標は貯金2000円」という一言を1行入れてください。

  • ・自分らしさはAIには推測できません。名前や一言は自分で決めて渡します
  • ・足すのは1つか2つまでにすると、本題が埋もれません

いまのコード

index.html

<h1>おこづかい帳</h1>
<ul id="list"><li>おやつ 300円</li><li>ノート 150円</li></ul>

script.js

style.css

body { padding: 24px; }

AI への指示

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

ヒント