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