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