バイブコーディング入門講座、今回は第8回目。
バイブコーディングでWebサイトを作った「くまたくん」は、喜んで、Webサイトをチェックもせずに出ていきました。その後、やってきたのは、なんと…!?
くまみさん、「ただ」という言葉につられ、あっさりバイブコーディング学校にはいっちゃいました。ここからWebサイトの修正作業が始まりそうです。
なお、今回お見せしている「くまみさんの英語塾」は、実際にバイブコーディングで作成した例となります。こちらが実際のページの画像です。
【トップページ】
【講師紹介ページ】
このサイトを作った時には、Claude Codeに、次のように指示しました。
[トップページ]
– メインビジュアルに lesson.png（プロジェクトに用意済み）を使用
– キャッチコピー：「絶対あきらめない！大人の英語塾」
– コンセプト文：「TOEICや資格のためじゃない、自分の言いたいことを言えるようになるための教室」
– 「無料お試しレッスンはこちら」というテキストのボタンを設置し、お問い合わせフォームページへリンク
– レッスン料金プラン表示
– 月額3万円プラン
– 月額1万円プラン
– 「お試しレッスンは無料。ご希望の方はお問い合わせフォームへ」という案内文を表示[講師紹介ページ]
– kumami.png（プロジェクトに用意済み）を講師プロフィール画像として使用
– 講師名：「くまみ先生」
– 紹介文：「男の子のお母さん。子供が生まれた後に英語学習を再開し、英語を話せるようになった経験を持つ。自分の経験を活かし、大人が楽しく学べる英語塾を運営。」
– 親しみやすい雰囲気で作成
トップページは良い感じでしたが、講師紹介ページの指示はスルーされたようです。生成AIは、勝手に、「立派な英語講師としてのくまみさん」の経歴を次のように作り上げてしまいました。
【講師紹介ページ（拡大版）】
トップページがなかなか良い感じだっただけに、くまたくん、気づけなかったようですね。
生成AIは、これまでにトレーニングされた内容などをもとに、勝手に情報を作り上げます。生成AIが作業を行ったものは、絶対に、人間がチェックをする必要があります。
チェックした後は、引き続きClaude CodeやGemini CLIで修正しても良いですが、エディタツールでコードを確認しながら行うほうがラクだし、確実だと思います。
次回は、エディタを使った修正作業について、バイブコーディング学校の状況と共にご紹介していきますね。
続きが気になったら、次回も、ぜひ見に来てください。
「面白い」「続きみたい」と思っていただけたら、ぜひ、Xでフォローしてください。新しくマンガを書いたら、Xに投稿していきます。
第１話からからすべて通して読みたい方はこちらから↓↓
なお、わたしのほうでは、生成AIを使った開発業務効率化や内製化のための研修・コンサルティングのご相談を承っています。ご興味があれば、「お問い合わせ」ページをご覧ください。
ご紹介動画もご用意しています♪
★期間限定のお知らせ★
来週、バイブコーディングのお試しセミナー開催します。詳細はこちら。
「くまみさんの英語塾」を、生成AIを使いながら、一緒に作っていく内容です＾＾
限定４名で無料なので、すぐ枠が埋まってしまう可能性が高いです。気になったらお早めにお申し込みくださいね。
