バイブコーディングの概要
おはようございます。フリーランスの学校のしゅうへいです。今日はですね、今話題のバイブコーディングについて解説をしたいと思います。
で、まあバイブコーディングとかね、AIって言われても、ちょっとややこしくてわかりませんという方も多分いらっしゃると思うんですよ。もうついていけないみたいなね、流れが早くて。
で、今日はあのわかりやすい事例、こういうことができるよっていうのを具体的に解説していきますので、
それでね、なんかピンときた方は、よかったら初期設定とかの動画とかも案内しますので、実際にトライしてみてください。
で、バイブコーディング簡単に言うと、まずコードを一文字も書かずに、いわゆる自然言語、この喋り言葉でチャットで打っていくと。
いわゆるこう、チャットGPTとかも、なんかこれマーケティング案考えてみたいな感じで打つじゃないですか。
あんな感じで、いわゆるプログラミングができてしまう、ウェブサイトとかの制作ができるということなんですね。
で、ただウェブサイトって言われても、ウェブページ、ウェブサイトって言われても、ちょっとあんまりピンとこないじゃないですか。
で、そんな別に普段から作ってるものじゃないからね、急にそれを作れるって言われても、何だろう、例えば所展の作り方が簡単になりましたって言われても、いや別に所展いつも作ってるわけじゃないんでみたいな。
ちょっとピンとこないな、これね。
そうなんですよ。
で、ちょっと事例があった方がわかりやすいと思うので、昨日ね、実は広島でセミナーがあったんです。
ゼロからのフリーランス講座in広島ということで、17名の方に参加いただきました。
で、実はそのセミナーの内容をまとめたウェブページ、簡単に言うとウェブサイトみたいなものですよね、簡易ウェブサイトをセミナー中に作りました。
で、それは作ったっていうのは、もうリンクがちゃんとあって、誰でも見れるような状態で作ったっていうことです。
いわゆるこれがデプロイ、公開って言ったりするんですけど、そうすごくないですか、セミナーして終わった時にはそのセミナーのウェブページができてて、そのウェブ上のレポートみたいになってるんですよ。
これPDFとかじゃないですよ、写真とか画像とかそういうものが入って、ちゃんとスクロールでスマホでもね、パソコンでも見れると。
今日実際にリンクを入れてますので、よかったら見てみてください。
で、ただ、今もしかしたらそのリンクをした時に表示されない可能性もあります。
僕が何かね、いじってたらちょっと変わってるとかあるんですけど、一番最初のデザインではなくて、僕は結構その後デザインをちょっと変えたんですよ。
変えてより良くしてます。
見やすくしてます。
なので、一番最初そのセミナー終わってすぐ出したやつは、この今、多分ページよりかはちょっとデザインが微妙というかね、それも全然読めるんですけど、文字とかがちょっと違ってたりとか、内容が少し違うって部分があるんですが、本当にね、セミナー前半撮ったんですよ。
セミナーの前半が終わって、ポンと後半に実は作ったっていうね、それでこのレベルでできるっていう。
プラスその後ちょっと30分、1時間デザインちょっといじっただけっていうようなところで見てみてください。
で、じゃあこのウェブサイト、ウェブページ、ウェブ上のレポートを作るにあたって何をしたかっていうことなんですけど、今日ステップバイステップでちょっとねお伝えできたらいいかなと思います。
なんかステップバイステップって言ってる自分がなんかすごい気持ち悪かったですね。
今なんかそういう、なんかね、かっこつけた感じでちょっと言っちゃいました。
はい、いらないですね。
これね、まずセミナーやりました。もう普通にリアルセミナーやりました。
で、その時にXの、いわゆるツイッターですね。
Xのスペースっても一緒にやってたんですよ。
セミナー中の音声をツイッターで配信すると。
で、あれアーカイブ残せるんですね。
で、それをダウンロードするサイトがあるんですよ。
Xスペースダウンローダーみたいな無料で使えます。
で、それを前半が終わった時にね、じゃあお疲れ様でしたって休憩入りました。
で、スペースダウンローダーにそのリンクをやって、そしたら音声がダウンロードできました。
その1時間ぐらいのね。
で、それをGoogleのノートブックLMに突っ込みました。
で、その音声ファイルをテキスト化してもらったんですね。
で、これ別にね、たぶんね、ノートブックLM突っ込まなくても文字起こしツールだったりとか、
あとはそれこそViveコーディングで、あの音声ファイルから文字起こしをするっていうこともできちゃうんですよね。
だからそこはちょっとサボってるんだけども、
でもまぁ一旦ちょっと外部ツールを使ってスペースダウンロードをして、
で、ノートブックLMにぶっ込み。
で、ノートブックLMから5000字のこのレポートを作ってくださいというようにお願いしてできました。
テキストファイルができました。
で、このテキストファイルできたやつを、クロードコードっていうね。
クロードコードっていう、いわゆるViveコーディングをするためのAIがあるんですよ。
クロードです。いわゆるチャットGBDとかと並んで人気のAIがあるんですけど、
あれのいわゆるコーディングバージョンがあって、
そのクロードコードをWindsurfっていうね、
これVSコードって言って、ビジュアルなんとかエディターです。
エディターです、簡単に言うと。
なんか編集するためのツールっていうのがあって、
Windsurfが使いやすくなってるんですね、それがね。
で、そのWindsurfにクロードコードが入ってるので、
そのクロードコードに、大丈夫?ついてこれてる?
これ難しいよね。音声だけで聞くの大変だよね。
これね、ちゃんとどういうふうに使ったらいいかって解説してるメルマガがあるので、
それ今日リンクつけておくので見てみてください。
さっきのウェブサイト、フリーランス学校のさっきの広島のレポートの中にもね、
Viveコーディング部っていうメルマガがあります。
それ登録してもらったら初期設定の動画とか、
どういうふうにサイトを作るかっていうところまで実演で動画が流れてますので、
それをまず見てくださいというところでちょっと一旦止めて。
で、今回一回で全部理解しなくても大丈夫なので何言ってるか分からなくて大丈夫です。
はい、大丈夫。で、クロードコードにさっきのコピペしたやつ、
レポート、ノートブックLMに出したレポート5000字をペーストしました。
そのまま。で、この内容でウェブサイト、ウェブページでレポート作ってっていうふうに入れました。
そしたらバーっともうだいたいテキストだけで前半の内容がまとまったウェブページができて、
で、それ今まだローカルにある状態でね、ローカルってパソコンの中にある状態で、
それをクリックすることによってウェブサイトっぽく開けるんですね。
で、それで確認して、で、プラス前半の時にツイッターでフリコとかフリコ広島でポストしてくれてる人がたくさんいたので、
そのポストの特に写真付きのポストとか気付きをスクショしました。
スクショして、で、それをパソコンのファイルに保存して、で、それをWindsurf、クロードコードが読み込めるようなフォルダのとこに置いてあげて、
で、そのフォルダを指定しながら、このセミナーの写真もいい感じにウェブサイトの中に組み込んでくださいっていうふうに追加の指示をいたしました。
そしたらそのテキストまとめがあったのに、プラスその参加者のツイートの文字が、文字というか写真が入って、
しかも角もちゃんと丸くとってくれて、デザインとして見やすくしてくれて、それでウェブサイトができましたっていう、もうほんとこれだけです。
デプロイの工程
で、これをバーセルっていうサービスがあるんですけど、バーセルでデプロイをするんですね。
いわゆるそのリンクを貸して誰でも見れるようにすると。
そこまではまだローカルにあるファイル、自分のパソコンにだけあるファイルでしか読み取ってないので、みんなが見れないわけですよね。
だからそれをバーセルっていうもので公開すると。
で、簡易ドメインみたいなの取ってくれます。
バーセルアップとかで最後ついちゃうんだけど、簡易ドメインで取ってくれて、で、バーセルにアップロードしてくれてみたいな。
で、これがデプロイ。
で、このリンクができたことによって、昨日セミナー終わった後に、ちょっとこのデプロイで少しつまずいてっていうかエラーが出たんで、すぐにはできなかったんだけど、お茶会があったんですね。
4時にセミナーが終わって、その後5時前ぐらいからお茶会をしたんだけど、お茶会の時にはもうデプロイができてリンクになってて、それをみんな読み取ってスマホで表示してくれてっていう感じでできたんですよ。
うん、すごくないですか。
で、そこから追加でやったことはそのデザインのやつ。
ウェブサイトの綺麗な事例みたいなのが実はウェブ上にあるので、それを僕は画像で保存して、その画像をまたクロードコードに読み取らせて、こんな感じのサイトでモダンにしてっていうふうに指示を出して、そしたらより良いデザインになりました。
プラスルートスさんってスタッフの方がいらっしゃったんですけど、マッサンさんって昨日主催だった方、マッサンさんとルートスさんがスタッフと主催でやってくれたんですけど、その方ルートスさんが一眼レフで撮ってくれた写真をTwitterにあげてくれてたので、それも保存して、そのセミナー写真をポポポってまた突っ込んで、この写真もあるんでやってください、全体写真もあるんで上手いことやってくださいっていうふうにして、そしたらウェブサイトの中にいい感じに入れてくれて、しかもモダンな感じ。
こんなウェブサイトのイメージでって言ったやつも入ってるし、あとフリコーのトーンとか色味とかも見てくださいって言ったらそのトーンとかも色味も使ってくれて、もちろんちょっとデザインの整合性が悪い部分もまだまだあるんですけど、とはいえ全然サッと見た時に見れるサイトにはなってるんですよね。
そう、だからデザインってやっぱり余計なことしないってすごい大事なんだけど、やっぱり余計なことしちゃうんで、なるべくシンプルで余計なことしないようなプロンプトがすごい大事なのかなと思います。なかなかまだできてないんだけどね。
あとね、これはちふねこさんデザイナー、火曜日担当でね。ちふねこさんに教えてもらったっていうか、ちふねこさんのプロンプトで、そういうことも依頼できるのかと思ったのが、Googleのアイコン素材みたいなのあるでしょ、Googleのサイトに。そのアイコン素材があるリンクをクロードに渡して、このアイコン素材からいい感じのやつにしてみたいな、絵文字を雑に使ってくるんだけど、
絵文字じゃなくて、このサイトからいい感じのアイコンにしてって言ったら、そのアイコンから通ってくれて、ピクトグラムみたいにちょっと動きをつけてたら動きもつけてくれてっていう。そうだから多分みんな見たら動くと思うよ。ちょっともしかしたらバージョン変わって動かないバージョンになってるかもしれないけど、多分大丈夫だと思います。そうっていうことができるので、これなんかあのいわゆるね、なんだろう、いわゆる何でもできるんですよね、バイブコーディング。
でも、こうやってセミナーされてる方はセミナーのまとめページとか作ってもいいと思うし、その会場ごとに。それできちゃうからね、ほとんど。で、これ今日僕はなんかそのいろいろ初めて作ったんで、情報をバーってまた入れ直したりしたんだけど、1回情報入れとけばあと何個でも同じようなものが作れちゃうので、コードとか保存しておけばね。そうで、そうなんですよ、量産できちゃうんだよね。
だから、なんかこうセミナー回ってるけど、それがこう足元残ってないとか、結局フローで流れてるとか、セミナーのそういったレポートをウェブページでメルマガで送ってあげるだけでも全然違うし、メルマガもテキストだけで送ってる人は、あのHTMLでちゃんとデザインしたメルマガもあのコードを書いてくれるので、それで綺麗に送れちゃうんですよね。
Viveコーディングの活用
そう、だから、ほんとね、Viveコーディング使うことによって、別にアプリとか作ってもいいんだけど、作ってもいいんだけど、それしなくても普段やってることを、なんかフローのやつをちゃんとストック化していくってだけでも十分Viveコーディングは可能性があると思うので、もしフリーランス学受けてる方いたら、Viveコーディング部っていうのは無料でありますので、まずはそれ受けてみてください。今日のね、簡易、そのページの中にもあるし、リンクもつけときたいと思います。
はい、というわけで、何かね、2025年後半に向けて何かやりたいという方は、是非Viveコーディングやりながら、ただ何を作っていいかわからないという方は、マーケティング指向講座っていうのが7月8日から始まります。
で、ちょうど今日までですね、今日の23時59分まで募集で、もう30枠売り切れちゃってたんですが、10枠だけ追加してますので、先行案内まだ登録してない人は先行案内登録したらすぐセールの案内きますので、やっぱり7月から頑張るぞって方は、マーケティング指向講座も是非いらしてください。
30枠完売して、本当にいろんな方が参加してくれて楽しい夏の講座になりそうです。
はい、なので一緒にね、夏マーケティング指向を鍛えていきましょう。
ということで、そのあたり諸々リンク付けておきますので、よかったら覗いてみてください。
今日も聞いていただいてありがとうございました。
この後も心地いい時間を過ごしてください。
バイバーイ。
