# はじめに はい、どうもこんにちは。農民こと熊澤英道です。 今回はですね、AIによってプログラミングをする、みたいなところがどれくらい現実的なのか、みたいな話をちょっとしようかなと思います。 今回はですね、サクッと自分が一番やりやすくて自由に扱えるものなんだろうって思ったところで、自分の個人サイトをちょっと作り直してみました。 前回作ったのがですね、7年前くらいかな、のフラッターでウェブ作るの便利だよねっていうタイミングで作ったのが最後なのかな、とか思うんですけど、 まあ細かい内容は更新してたんですけれどもね、やってたと思うので、そこから先ですね、どれだけ進化したのかっていうところをちょっと自分で作りながらいろいろ感じてたところとか、 AIにプログラミングを任せるのってどれだけ現実的なの、みたいなところをですね、最新情報を踏まえてお話ししたいと思いますので、ぜひぜひ聞いていってください。 ちなみにですね、最近ホリエモンAI学校、こちらもですね、盛況でして、フランチャイズ、地域フランチャイズと業界フランチャイズ、まあ地域はね、イメージできると思います。 自分の地元でですね、会社に来てくれて教えてくれる、近くでセミナーやってくれる、安心ですね。直接聞けるし安心というところで、まあそういうフランチャイズと、もう一個は業界フランチャイズ、これはですね、例えば建築業界、僕とかはですね、AI専門家です。 業務効率化をするDXとかも含めてですね、この辺も専門家ではあるんですよ。詳しいんですが、建築の世界のですね、当たり前、細かい仕事のノウハウとかですね、フロー、こんなことにやってきます、こんなこと困ってます、みたいなですね、そこまではわからないので、 まあそういうところの知見をですね、建築業界の人と一緒にやることで解決していく。なんで建築業界特化のAI学校を作れますっていうのでですね、FC、業界FCも募集しておりますので、興味ある方はぜひぜひご連絡ください。 もちろん今、建築の例言ったんですけど、各業界募集してますんでね、ぜひぜひ募集に対して応募いただければと思います。 ということで、フランチャイズ作るぐらい今、盛況なんですけどもね、堀江もAI学校でも今後そういうAP作ってみようかなとか、ちょっとした児童会やってみようかなという講義をどんどん作ろうと思ってますので、個人の方もぜひぜひ気にしておいてください。 # なぜ今Web制作をAI活用しながら作るべきなのか ということで、今回クロードソネット4とかクロードコードとかが優秀になってきたので、 このタイミングでちょっと使ってみたんですけれども、他にもGoogle IOで、例えばStitchかなっていうので、 AIにお願いしてデザインが作れますと。それを使うと、なんとFigmaで使える出力がエクスポートができまして、 それをFigmaに渡すと、Figmaで使えるデザインデータになっていると。 それをとある拡張機能を入れると、なんとFirebase Studioっていう、これなんて言えばいいんですかね。 新しいプロジェクト、サービスとかを立ち上げるときの、みんながいつも分かっているなと思いながらも作る基礎部分ですね。 開発前の準備、これが一番めんどくさかったりするんですけれども、その準備をまるっとやってくれて、 デザインを実装したというか、このデザインのサイトをサクッと作りますよみたいな。 ウェブサービスの最初のスタートラインまでを爆速で作れますよみたいなサービスを、サービス群と言いますかね。 サービスいくつかを組み合わせるとそんなことができますよみたいなのをGoogleも出しているわけです。 もちろん、それだけで完成することはなくて、それで土台作ったら、それをさらにそこから修正していくみたいなところで完成に近づけていくんだと思うんですけれども、 とはいえですね、ウェブサイト、どんどん生成アイデアを作れるようになってきていますと。 今までもできるって言っている人がいたかもしれないんですけれども、あくまでですね、エンジニアがプログラミングをするのを楽にする、 代わりに手を動かしてくれるみたいなところが大きかったので、初心者が正直ですね、やろうとしても結構難易度が高かったんですよ。 プログラミング的な視点がないといけないとか、エンジニア的にわかりやすい、プログラミングがわかりやすい表現を使わなきゃいけないよねとかすごいあったんでね、めちゃくちゃめんどくさかったです。 ただ今回このタイミングでですね、普通の人でも結構使えるようになるんじゃないかっていう、そういう土台が整ったわけです。 本当にチャットGPT全般ね、オーラウンダーで優秀ですよね。 ジェミニとかもですね、いろんなGoogleがもともと持っているサービスを組み合わせて使うんだったらもうジェミニでしょっていうぐらい、 自分の良さをわかった上での展開、すごいしてきてます。 そこでですね、苦労度は何かっていうと、結構日本語の繊細な表現とか、文脈理解得意ですし、 それに合わせてですね、プログラミング、結構もともと得意だったんですよ。 僕が前に書いたのがですね、同人誌のやつで出したやつでいうと、ちょっと細かいタイトル忘れたんですけど、自作ゲーム入門みたいな本出したんですね。 それは苦労度を使って超簡単なゲームを作ろうよっていう本でした。 そういうのを数年前に出すぐらい、苦労度はやっぱりプログラミング得意だったんですね。 なんでですね、苦労度の進化の最先端、これがですね、ウェブ制作とか含めたプログラミングの最先端だと言っても過言ではない状態になっていて、 そこでですね、クロードソネット4、クロードコードが出てきたっていうことなので、これはですね、しっかりチェックしなければならないということで今回やらせていただいています。 ちなみにですね、さっきのね、自作ゲーム入門っていう本、確か検索すると農民か熊沢か忘れたんですけど、 それで検索してもらえると、自作ゲーム入門熊沢とかで検索してもらうと多分ね、出てくると思います。 出るかな、ちょっと今試してみましょう。自作ゲーム、自作ゲーム入門、多分熊沢とかでですね、検索すると、 はい、思ったよりも出てこないですね。出てこないので、農民ゼロKとか、僕がいつも使っているIDとかでやってみますか。 はい、そしたら出てきましたね。ブースとかで売ってます。基本的にはですね、これオンラインのものになっているので、 実際の本ではなくてですね、オンラインのもの、基本売る形、ダウンロード商品として売っているんですけれども、 確かメロンブックスとかかな、とかだと多分ものも売っているので、ぜひぜひそちらもですね、手に取って触ってみて、 今のクロードの方がめちゃくちゃ進化しているんですけれども、基本的な基礎でいうとですね、その頃使ったプロンプトと同じプロンプトでいい感じに動きますので、 ぜひぜひ触ってみてください。 # どんなふうに生成AIでWeb制作をしたのか詳細 ということで、実際作ってみてどうだったのかみたいな話しようかなと思います。 作り方はどうやって作ったかというと、クロードソネットを最初試しにクロードのウェブ版で話しかけて作ってみました。 クロードの課金かな?もした状態だといろいろ使えるんですけれども、僕は課金してやりました。 なぜなら制限で止められるとつらいからです。 ということで、いろいろ触ってたんですけれども、そうやってクロードのソネットを選びまして、個人サイトを作りたいですと。 その時には確かですね、僕は熊沢秀道って言うんですけれども、熊沢秀道について検索して、 ウェブサイト、個人サイトに含むべき情報を取得をして、それを用いてウェブ制作してくださいとお願いしました。 この手法を使えるのは、僕が自分の個人サイトを含めて、たくさん個人情報をばら撒いているからなんですね。 なので、僕のことを調べると僕の情報がたくさん出てきます。 その情報を元にサイトを作ってもらえれば、僕の情報を含めたサイトを作ってくれるだろうと思ってお願いしました。 クロードはですね、検索するっていう機能をオンにしてからプロンプトを入力してあげると、検索ちゃんとしてくれるようになりました。 これも結構最近ですね。 なので、最近増えたもの、検索機能とクロードソネット4っていうモデル、これを使うことによってですね、結構ざっくり作ることができたわけです。 正直この段階でもですね、それっぽいものはできました。 一般の人から見たら、ほぼほぼできたじゃん。これで終わりって思うようなものなんですが、やっぱりですね、ちょいちょい間違ってたり、デザイン的にきれいじゃねえなっていうところあったりとかですね。 あとは情報、あってるけどこの表現違うな。もうちょっとこここうしたらいいのにな。 一発で作ってもらった場合だと画像とかですね、なかったりするので画像を追加したいなとかですね。 画像がないとですね、よくウェブサイトの上のほうとかですね、パソコンで見るとタブの上のところにくっついてる画像だったりとか、スマホだと何だろうな、タブのところについてたり、 なんかそういうついてるファビコンっていうのがあるんですよ。 なんかお気に入り登録とかしたときに出てくる画像とか、あの辺ですね、とかも設定しなきゃいけないし、タイトルだったりとかも適切にしなきゃいけないとか、 なんかOGPの画像追加するかとかですね、細かいところもたくさんあるわけですよ。 全般としてはですね、内容間違ってる、なんかデザイン違うな、レイアウト違うなみたいなところが多いと思うんですけども、 そういう細かいところもですね、結構気にしなきゃいけないポイント等々たくさんあるわけです。 そういうの直さなきゃいけないなと思ってですね、まずは内容を整える。 僕が伝えたいこととAIが伝えたいことが違うなってところで、この内容はもっと入れたい、この内容はなしでいいとかですね、 AIと会話して、で、ちょっとずつ作り上げていきます。 で、なんかものによってはですね、そのまんまでいいなっていうものもあれば、今回はあえてデザインをほぼほぼそのまんま使わせてもらったんですね。 なんでAIが考えるかっこいいサイト、みたいな感じのデザインが適用されてます。 気になった人はぜひぜひ見てください。 そんな感じでですね、AIとやり取りするんですけども、途中で限界くるんですよ。 クロードソネット4、これはチャットGPTとかみたいにですね、1個のチャットでやり取りしてるんですね。 で、その過去の情報とか読みながら、プログラミングを書くってなると相当量じゃないですか。 っていうのを全部読み取ってるとですね、すぐにチャット上限きちゃうんですよ。 で、これに困ったので、僕はちょっと課金になっちゃうんで、みんながみんなお勧めできないんで、 これに関してはまた僕が堀山AI学校で講義作るときにはですね、最適な安いツールに作ろうって考えるんですけれども、 僕が使ってるのはCursorっていうですね、ツールを使いながら、その中にクロードのソネットの4ですね、使えるような状態で作業しました。 なんでCursorっていうですね、IDE統合開発環境って言われる、プログラミングをするアプリですね、を使ってやりました。 で、途中からはそっちに移行して、クロードのアプリのほうでやってたですね、ソースコードをコピーしてきて、 そのIDE、Cursorのツールにですね、貼り付けて、じゃあこっからどんどんちょっと作業していこうと。 で、エンジニアの方だったら分かる。普通の人は分かんないんですけれども、 HTMLとCSSとJavaScriptをファイル分けたほうがいいよねとか、 じゃあ、1ファイルじゃなくて、ページ分けしてもいいんじゃないとかですね。 結構そういうことをコチャコチャやって、で、また実際にCursorによってですね、話しかけると、 チャットでどんどん続いてて、これ以上しゃべれないよってなるのもあるかもしれないんですけれども、 お願いすることによってですね、チャット切り替えるとかをうまく使うと、結構ですね、費用削減しながら、 文章限界ですと言われて、話止められることもなく作業できるので、そういうツールを使ってやりました。 結局ですね、だらだらとほぼ1日ぐらいかけてやり取りしたんですけれども、 ちょっと5月の支払いなんで、今回のアプリ開発以外にもちょっとだけ使ったのであれなんですが、 おそらくですね、かかったとしても数千円、ちょっと5月中にもしかしたら別の作業をしたから、 ちょっと全然違うかもしれないんですけれども、でもCursorに関してはたぶん2、30円ぐらいでいけたのかな。 で、Cursor、クロードがそれくらいで、Cursorが結構1万いくらみたいなお金使ってて、なんだこれって思ったんだけど、 たぶん他のこともやってます。 で、他のこともやってて、なんか1、2項とかですね、なんかがっつりサイト作ろうとか思ってたらそんな感じになりましたっていうところで、 まあちょっとね、単体での費用関数はたぶん真面目に頑張れば出るんですけど、ちょっとそれやってないのでわからないんですが、 僕の見立てだとたぶん、ちょっといい感じのものをうまく使いこなせば、 1サイト僕が作ったみたいなレベルだったらですね、5000円ぐらいのAID容量でいけるんじゃないかなと。 僕っていう人間がですね、ずっと張り付いて死にしたので、実施してきてはコスパ合わないよねとかあるんですけれども、 やり方をしっかりですね、メンバーに覚えてもらってやると、もうちょっとですね、コスパよくできるんじゃないかなとか、 今回やってみて、ああこれ最初の方にこうやっていえば解決するなみたいなものもあったので、 これ慣れていくとですね、デザインが固定じゃないものとかだったら結構サクッとできたり、 デザインが固定なものもですね、最初に画像を渡してあげればいい感じのレイアウトにしてくれるんじゃないかなみたいなところあるので、 ちょっとその辺も含めてですね、結構チャレンジしやすいんじゃないかなと。 AIのね、API費用っていう、今回カーソルっていうアプリでクロードっていうのを使うために、 アクセスしてそれを使うための機能ですね、とか結構使ったんですけれども、それだとAPIの費用とかかかるんですよ。 そういう費用でですね、AI使うために5000円とかかけるんだったら高いよって思うかもしれないんですけれども、 最近はAIと会話するのに5000円じゃなくて、AIにもの作ってもらうのに5000円みたいな感覚で考えるとですね、 ウェブサイト一個5000円ぐらいで作ってくれたんだって思うと安いじゃないですか。 僕はプログラミングできるんで、コスパ悪いなって思う瞬間あるかもしれないんですけれども、 これプログラミング分かんない人でもできちゃうんですね。 って考えるとめちゃくちゃ有名あるような気がしませんか。 ということでですね、ぜひその観点で僕のサイト見てみてください。 ちなみにちょっとしたね、エンジニアとかじゃなきゃ分からないかなみたいな隠し要素もちょっと用意したので、 ぜひそんなのも探してみてください。 # つまりWeb制作の仕事はなくなるの？ はい、ということでですね、やり方を細かくしゃべってみましたが、いかがでしょうか。 実際ね、これ今だとIDとかプログラミングのツール立ち上げなきゃいけないんだけど、 もうちょっと経ったら多分チャットにお願いしてるだけで、なんかいい感じにできるみたいなサービスすぐ出てくる気がするんですよね。 ただ、今回も僕がプログラミングをかける人間だから、細かいところ指示しやすかった話をしたと思うんですが、 結局ですね、何やるにしてもAIを使いこなせるかどうかって、 例えばAIのことをよく知ってるっていうのは、まあ1個あるんじゃあるんですよ。 ただですね、そこから先、AIを使いこなせるようになりましたっていう基礎を抑えた後の状態っていうのはですね、 自分の専門分野の知識めっちゃ大事になるんですね。 なので、生成AIに何かを頼むっていうときのスキルは、AIに対する基礎知識だけじゃなくてですね、 実は部下に物をお願いする、人に物をお願いするお願いの仕方の解像度とか、 仕事できる人ってそういう解像度高くて、誰かにお願いするときにもすぐにその人がそれ言われただけで判断できるだけの情報を渡したりするんですよ。 っていう仕事力みたいなところが大事になってきたり、 で、その上でですね、ウェブのプログラミングしたい、させたいっていうときにはですね、 ウェブのプログラミングの知識とか、ウェブ制作の知識があった方が詳細にお願いできるわけです。 理想はこうなんだけどなーっていう理想像が明確にあるとかもめちゃくちゃ大事ですね。 なんで、ここで今後楽になるからこの知識いらないなっていうよりは、楽になったときにちゃんとそれらを使いこなせるようになる。 何かがあっても大丈夫なように対応できるみたいな力っていうのは結局ですね、仕事力というか、 それぞれの得分野をしっかりやっておくことっていうのがですね、めちゃくちゃレバレット効くことになるので、 この辺り勘違いしないようにですね、基礎をしっかり学んで、 自分のやってる仕事もですね、より解像度高く理解してですね、 AIが出てきたときに、AIが自分の代わりに働いてるから自分の仕事なくなって、辞めさせられるじゃなくてですね、 あ、あいつにAI使って仕事してもらうとめちゃくちゃコスパいいぞって思ってもらえる。 AI使いとしての能力をしっかり高めていけるとめちゃくちゃいいんじゃないかなと思います。 ということでですね、今回の話は実はAIの活用方法もそうだし、 AI活用したときに必要な人材、いらなくなる人材についてもサクッとですね、お伝えできたかなと思います。 で、できる人ができるまま触ってても面白くないんですよ。 僕がウェブサイト作るって別にそんなに、もうずっと慣れてるんでね、得意分野なんで別に難しくないんですよ。 簡単なものだったら。難しいものは難しいんですけど。 だから僕がやるんだったらあまり面白くないけど、僕がやれるようにAIに指示をする仕組みとかをあらかじめ作っておいて、一般の人が触れるようにする。 こうすると僕が何もしなくても一般の人がウェブサイト作れるようになるわけじゃないですか。 とかね、ちっちゃいツールってのをAI時代はすごい作りやすくなってるので、そういうところも意識しながらですね、 自分のノウハウをどうやってAIに渡せるのかとかもぜひ考えてもらえると面白いんじゃないかなと思います。 # おわりに はい、ということで今回の配信はいかがだったでしょうか。 ウェブ製作とかね、簡単なものだったら AIでできるようになりますっていうのは結構そうかなと思います。 今回はちょっとデザインザートに作ってるんでですね、 AIが言うままに作りましたみたいな感じなので、 ガチウェブ製作会社からはですね、 そんなんじゃ使えないと言われると思いますが、 実際のところちゃんと段階を踏んでデザインから作ってやるとですね、 まあまあそれっぽいものが出てきたりします。 今回もね、レスポンシブデザインちゃんと意識してくれたりとか、 SEO対策に必要なものとかですね、 各所最低限しっかり抑えて提案してくれたりしています。 で、まあっていう時に本当にね、さっきも言いましたが、 ウェブ製作の仕事なくなるかというとなくならないですし、 ウェブ製作の仕事してる人は分かると思うんですけれども、 作るのよりもですね、お客さんが欲しいものっていう要件の情報をしっかり引き出して、 その人たちが喜ぶものを提供するみたいなね、 この辺りが一番大変だよみたいなところあると思うので、 逆に実質的にそこまで楽になってねえな、 みたいなところもあるかもしれないです。 なんでですね、あくまでですね、 生成AIを使ってツール、 ツールとしてですね、うまく使ってウェブ製作、 プログラミング部分できるよう、これはできます。 なんで新しいツール武器を手に入れたと思ってもらえればなと思います。 依頼側はですね、逆にこれAIでできるんだから もっと安くできるでしょうって言うと多分荒れます。 なぜかというとですね、実際にプログラミングする部分の値段はこれくらいだとしても、 実際そのですね、相手が望んでいるものは何なのかっていうところをですね、しっかり聞き出して、 それをですね、実際にプログラムでウェブ製作をして、 ユーザーが求める形のものをユーザーが求めるレベル間で、 ユーザーが喜ぶですね、価格感で、あってます? ちょっとなんか今詰まっちゃったんで、 同じことを2回言ったかもしれないですけども、 本当にですね、そういうお客さんが欲しがっているものを 欲しがっている形でできるだけ渡す、ここが結構大事でですね、 プログラミング部分よりも、プログラミングする前に 何を作るのかの解像度を上げるとかね、 そういうところも含めていろいろ、もしかしたらね、 場所によっては画像の撮影から、 編集からやっているところもあるかもしれませんし、 さらにですね、そのSEO順位を上げるとか、 SNSの運用までやりますよとか、いろいろあるかもしれないですし、 本当にウェブ製作で、LPとか簡単なものを プログラミングするっていう技術はですね、 案外これだけじゃないと。ウェブ製作って言われると、 それがメインに見えるけど、そこだけじゃないっていうところ、 めちゃくちゃ多いので、これで変に、 知ってるふりして値下げ、これが一番ダサい感じになりますので、 ぜひ皆さんもですね、気をつけて、 値下げをするためというよりもですね、 これで楽になった分、しっかりいいものを作ろうとかですね、 SEOを良くしようとかですね、 ユーザーにもっと寄り添ったものを作るためには、 どうするかとかを考えてもらえると、 よりですね、世の中を良くしていく方向に なるんじゃないかなと。結局ウェブ製作の仕事をね、 安く叩き打ってね、なくしてやろうってことをやると、 ウェブ製作の知見を持っている人がいなくなって、 結局自分たちでAI使ってやればって話になるんですよ。 全然幸せじゃないので、ぜひぜひですね、 AI使ってできるようになったんだから、 安く買い叩けるではなくて、できることがめちゃくちゃ増える。 もっと気を使って対応できる場所が増えると思ってください。 結構大変なんですけれどもですね、 皆さんぜひ気をつけて、そこら辺取り間違えないように。 インフルエンサーの方々もですね、 バズるためには強い言葉が必要なので、 みんな強い言葉を使うこともありますが、 そういうのに揺らがず、しっかりとした価値を生み出すことを 皆さんも考えてみてください。 それでは今回以上になります。 またぜひ聞きに来てください。