# チャプター1 みなさんこんにちは。フリーランスの学校に在籍しているKONと申します。 本日は、これからの時代に絶対身につけておきたいバイブコーディングについて解説をしていきたいと思います。 私は普段AIコンテンツラボというコミュニティを運営しておりまして、週に1回AI活用の無料ウェビナーを運営していたり、 コミュニティの中では、AIを活用して記事制作とか、それこそ動画講座の資料制作とか、 そういったコンテンツを作る方法について、日々コミュニティの中で情報交換しているというような活動を行っています。 そんな私がいろんなAIツールに触れてきたんですよ。一応触れてきました、私も。 画像生成、動画生成、音楽生成、さまざまな生成に触れてきた中で、 これは本当に画期的だって感じている。なおかつ、最近さらにGoogleやチャットGPT、オープンAIですね、 クロードという運営会社はアンソロピックというところなんですけども、そこがこそって大型アップデートをしてきて、 このバイブコーディングに力を入れてきたんです。そもそもこのバイブコーディングとは何なのかということなんですけども、 雰囲気でコーディングしようというまさに直訳なんですけど、皆さんプログラミングやったことありますか? ちなみに私は大学の時にちょこっとだけLispという言語に触ったことがあるんですけども、本当に経験としてはそれだけで、 今ちょっと作ってみてって言われても、何やったっけみたいな、最初に何を入れるのかすら覚えてないような状況なんですね。 そんなド文系な私でもウェブアプリが作成できるという、そんな紙システムなんです。 具体的には今までAIを使ったことがある方、これ画像生成、動画生成とかだけじゃなく、 チャットGPTに相談したことがあるとか、何かチャットをしたことがあるって方はイメージ通りです。 あのままで、例えばですね、私はメールマガジンのランディングページを作りたい。 これずっと言ってる話なんですけど、ランディングページを作りたくて、色はカラーはシンプルに白と黒でお願いしたいと。 最後にメールマガの申し込みページのボタンが付いているような、そんなランディングページを作ってくれませんかと言うんですよ。 コード生成ができるツールに。有名なところだと、今だとすごく簡単にできるのはCanva AIです。 Canvaでコード生成できますから、あとWindsurfとか、あとV0とかCreateあたりも結構前々から、1年前ぐらいから言われていますし、 かなりコード生成ができるツールっていうのはたくさんあるんですね。そこに投げかけるんです。 日本語で全然OKです。対応してるところ。そうすると、AIが自動的にコードを作ってくれるんです。 これ本当に見ていただければすごいわかるんですが、カタカタカタカタって作ってくれて、プレビュー画面を出してくれるわけです。 これ覚えてる方は、以前クロードの1年ぐらい前からアップデートしたときに、クロードがゲームを作れるようになったという驚きがあったと思うんですよ。 ゲームを作ってプレビューして、そのプレビューでゲームができるようになったという、そういった画期的なアップデートが入ったときの感動を思い出してください。 まさにアリです。アリがもっと進化したバージョンです。 こちらとしては、コードとかわかんないんですよ。HTMLとか、なんとなくこうかなって、なんとなくこんな感じだなって、昔やったことがあるので、 わかるとしても、何を修正したらいいかとか、わかんない状態の、まさにド文型。ド文型ですよ、私とか。 単語の意味もわかんない。私ですら、簡単にランニングページが作れるようになるんですね。 そこで修正をしたいと。なんかうまくリンクが貼れてないから、ここのボタン、最後のボタン、リンクはこのリンクでお願い、 っていうだけで勝手にリンクを挿入してくれるんです。やっぱり色味なんか白黒だとちょっと物足りないから、やっぱりちょっと緑を入れて、 そして全体的に緑ベースで作ってくれるわけですよ。信じられます。これ今、ランディングページだけの話をしましたけど、 特に初心者は私キャンバーAIをお勧めしているんですが、キャンバーAIですとタイマーを作れる。 あとですね、ちょっとなぜサンプルにあるのかわかんないんですが、天体観測ゲームっていうのが作れるのと、あと神経衰弱も作れます。 驚きじゃないですか。今まで自分でランニングページを作るとか、ちょっとしたウェブゲームを作りたい、ウェブアプリを作りたい、 こういったかゆいところに手が届くツールが欲しいんだよって思ったときって、大体やっぱり課金してたと思うんですよね。 が、外注をしていたかと思います。それらは全て今、AIでまかないるってことなんですよ。ここで疑問があります。 でも、つまずいたり、バグがわからない。何がエラーなのかわからない。何かエラーが発生して何かうまくいかないんだけど、これどうしたらいいかわからない。 そんなときあるじゃないですか。どうやったら直せるのって、これも皆さん安心してください。自分一人で解決できます。 簡潔に言うと、ChatGPTとかGeminiとかのAIツールに聞くんですよ。こういうエラーが出ました。 もしくはスクリーンショットをとって、こういうふうに出て、こういう仕様にしたいんだけど、どうしたらいいかって聞くんですね。 そしたら、ここがおかしいと思うので、こういうふうに指示をしてみてください。とか、もうどうしても直んないようでしたら、 最初にその仕様も含めたプロンプトも最初に作るので、これで実行してみてくださいというように解決策に導いてくれるわけですね。 分かんなかったらAIに聞けばいいんです。つまり私たちがやることって、まずどんなものを作りたいかをちゃんと自分の中で明確にしておくこと。 具体的にどんな動きになってほしいのかをちゃんと言語化しておくこと。できればWindowsサーフとかCanva AIとかですね。 そういったツールに投げる前に、お願いする前に、ChatGPとかGeminiなどで、例としてWindowsサーフでポモドールタイマーを作ろうと思います。 全体的なカラーリングはピンク。時間が経つごとにちゃんとアラームが鳴るように、通常音が鳴るようにしてくださいと。 使用としては、最初の時点で何回、何サイクルやるかというのを入力して、そこからスタートを押しますと。 そうすると、1回ずつサイクルが巡ってくるごとにちゃんと通知音が鳴って、今休憩時間ですが、また作業を開始してくださいというメッセージが表示されます。 一番最後まで行ったら、作業終了です。お疲れ様でしたというメッセージを出してください。その後、リセットボタンを押すと、もう一度最初から戻ります。 こういう仕様のポモドールタイマーを作りたいので、ウェブ上で公開したいので、Windowsアフにどのような指示を出せばいいですかと、 私だったらChatGPTのオンスリーに聞いちゃうんですけども、そのChatGPTに聞くとすると、そのためのプロンプトを出してくれるんですね。 コツとしては、Windowsアフ、この実際にプログラムを組むコード生成をしてくれるツールと直接やり取りをすることもできるんですけども、 そこでうやうややるよりは、別のところでちゃんとプロンプトを整えて、仕様を整えてからコード生成AIに投げ込む。 これが正直最短です。やり方としてはこれが一番スムーズです。 なので、私がやるとき、1回、2回ぐらいかな、作ったときにつまずいたんですよね。めちゃめちゃつまずいたんですけど、 やっぱりもう一度作り直したほうが早いってことが分かって、これWindowsアフだったかな、もう一度作り直したことがあります。 Windowsアフは何がいいって、無料の範囲内でできるんですよ。 Windowsアフは無料で使える部分と、あとクレジットを消費する部分があるんですけど、 まずは始めてみたいって方は、そのWindowsアフの無料の部分をCascadeかな、 言語がCascadeって言語を使えれば無料でできるので、そちらを試してみるとか、またCanva AI、無料アカウントでも、 これ確かコード生成できるので、まずはそこから試していただくのが良いかと思います。 でも今一番コード生成機能、エンジニアも唸らせたコード生成機能がすごいって言われてるツールがCloudなんですよ。 Cloud Codeっていう。これCloudのMax Planに加入すると使えるようになる機能なんですけど、Max Planが何度も月額100ドルかかるんですね。 多分1万5000ぐらいかかるんです。ちょっといきなり何か使えるかどうか分からないのに、 課金は難しいよなっていうふうに考えてる方、きっぽーです。 実は今回フリーランスの学校のメンバーであるケイスケさんが、AI漫画家のケイスケさん、元々エンジニアのケイスケさんですが、 Cloud Codeの解説動画をUdemyで作ってくれたんですね。しかも、これ聞き逃さないでください。 しかも6月3日まで無料クーポン配布中です。2時間の講座です。 ちょっと課金する前に1回この無料クーポンを受け取って、Cloud Codeがどんなものか、 Vive Codingってどんなものなのかというものをぜひ掴んでいただければと思います。 こちらのチャプターにケイスケさんのNixのポストを貼りますので、ぜひ受け取ってください。 こちら、フリコーUdemyという形で、今無料クーポン配布中ですけども、今後販売していく形になりますので、 この期間中にぜひ受講していただければと思います。 ということで、本日もお聞きくださりありがとうございました。 このVive Coding、もうコードはエンジニアじゃないとできないなんて言えなくなります。 自分への便利ツールを自分で作る時代がやってきます。ぜひ今のうちに身につけておきましょう。 それでは、またね。バイバイ。