こんにちは、GOEMONです。
まずは成果物を見てもらった方が早いので御覧ください。
バブルの歴史：https://benricho.net/bubbles/
CursorというエディターとClaudeを組み合わせれば、ほぼ全自動でサイトが作れるということで試してみました。
初めてだったこともあり、１日３時間×３日間、トータルで９時間ぐらいかかった気がします。
これぐらいのサイトであればノーコードのHP制作ツールでパパッと作れちゃうので、逆に効率は悪いかもしれませんが、慣れとプロンプトや制作手順を今回学べたので次からは2~3時間で作れそうです。
とりあえず、今回はこのくらいのミニサイトを問題なく作りきれるかどうか、というのをテーマに試してみたので、気になる方向けに下記メモです。
なお、僕はエンジニアじゃないのでエンジニアの方が読んでも微妙かと思われます。僕と同じく非エンジニアでこれからAI活用をしながらなら、サイトやサービス、アプリを作れるんじゃ！？とワクワクしている方にとって参考になればと思います。
Cursor Pro × Claude 3.7 Sonnetで全部コード生成
この「バブルの歴史」というミニサイトはすべてCursorの中でClaude 3.7 Sonnetを使って作りました。僕がやったことはAIとのチャットと最後の方に画像を用意しただけです。
他のAIモデルも試しましたが、ダントツでClaude 3.7 Sonnetが良いので現状はこれ一択ですね。
基本的には
1.チャットで欲しい機能やサイトを伝える
2.出てきたものをチェックする
3.修正の指示出し
を繰り返す感じです。
途中でAIが自分でやったことを忘れたり、意味不明な修正をしたり、頼んでもないことを全力で実装したり、色々とツッコミどころはありますがとりあえず、このぐらいのミニサイトなら全部まかせても出来るということがわかりました。
バブルの歴史：https://benricho.net/bubbles/
下準備が超大事
このサイトをCursorにお任せしてみて思ったのは、下準備の大切さです。
最初に
・サイト全体の構成
・デザインの方向性や指定
・実装してほしい機能、いらない機能
・チャットや作成時のルール
などをガッツリと決めた方がいい。
こうした決まりを伝えておかないと、途中で勝手に方向転換したり意図していないデザインや機能が出てきたり、勝手に暴走しちゃって大変です。
まずは作りたいもののイメージを決めたら、Cursorでアレコレする前にChatGPTの頭の良いモデルとお話して、要件定義や必要機能の洗い出し、デザインの方向性について可能な限りまとめた方がいいです。
そして、ChatGPTで最後に「今まで決めた◯◯をテキストファイルにまとめて」と言うと、コピペ可能なテキストにしてくれるのでそれを使ってCursorに渡していきます。
CursorにはProject Rulesというプロジェクト単位でルールを設定できる機能があるので、サイトやサービスごとにこのルールを設定しておくと毎回同じような指示を出さずに済みます。
今回僕はこの機能を知らなかったので、何回も同じ指示を出してました。これが時間かかった大きな理由のひとつでもあります。
特に一回で大量の作業をお願いすると必ずエラーになります。その際に「エラーが起きています。エラーが起きないように小分けにして作業して」と伝えていたのですが、ルールに入れておけば全部のタスクを小分けにして作業してくれてエラーは吐かないはずです。
テンプレートをまずは完成させる
今回のサイトでは、ほぼ全ページ、同じような構造になっています。
バブルの歴史：https://benricho.net/bubbles/
それにも関わらず、最初にHTMLとCSS、Javascriptで作ってもらったので全ページ手動更新前提になっています。笑
PHPで作ってもらっていれば、例えばヘッダーやフッターを全ページ共通化できるのですが、このサイトはトップページのヘッダーの一部を変更しても他のページのヘッダーは変わりません。超絶非効率です。
今回は試しに作ったサイトで更新を前提としていないので良いですが、更新する場合は地獄の作業が発生してAI活用の意味がなくなります。
そのため、色んなページや機能を作る前に、基本的にはテンプレートを作ってもらい、そのテンプレートを完成形まで持っていくのを優先した方が良さそうです。
テンプレートが完成したら、色んなページや機能を作ってもらってそこへテンプレートを利用して編集していく。そうすれば後からの変更も楽です。
こうしたテンプレートについても、最初の下準備段階でAIと相談し、どのような開発手順であれば効率的かを議論しておけば良いと思います。
なんやかんや知識はあった方が楽
Cursorはチャットを繰り返していると微妙なスペックのPCだとPCがフリーズするレベルで重くなります。
僕はゲーマーなのでそこそこ良いスペックのデスクトップを使っていてメモリも32GB積んでるのですが、それでもしばらくCursorを使ってるとメモリ使用量が60%ぐらいになり、ガックガクになります。
その度にCursorのチャット履歴を消去するのですが、消去すると過去のやり取りをAIが忘れちゃうんですよね。
そうすると、次に指示を出した時に以前作った機能や配置を忘れて、内容が重複する項目を作ったり、それまで話してた内容と全然違う方向性のものを作ったりします。
そんな時は自分でコードを見て削除や編集ができると非常に楽です。
僕はHTMLとCSSぐらいならゼロから作るのは無理だけど、見てコピペや削除なら出来る程度の知識ですが、途中から上記のようなAI挙動の際には自分で見て削除してました。
そんな作業をしながら、ちゃんとしたウェブサービスやアプリを作る際には、なんやかんや一定の知識があればもっと効率的だなぁと思った次第です。
コードは基本AIに書いてもらうけど、どこが違うのか、どこをどう修正したいのかはわかる程度に知識があると開発効率は段違いに上がりそうだと思いました。
たぶん、100%自分でかける知識を持った人と0%の知識ではめちゃくちゃ差があるのはもちろんですが、30%ぐらいの知識まで持っていけばAI活用しながらであれば100%の人に近いパフォーマンス出せるんじゃないかと思っています。
この辺は少し時間をかけながらでもAI開発しながら、わからないことはググったりAIに聞いたりして知識を付けて、を繰り返すのが良さそうです。
次はCMS（コンテンツ管理システム）付きのポータルを作ってみる
という感じで、今回は静的なミニサイトを作ってみました。
初心者ができる限界となんとなくCursorの使い勝手を知れたので、次はWordpressのようなCMS付きのポータルサイトを作ってみようと思っています。
少し規模が大きくなりますが、素人がWordpressクローンのようなものを作れるか頑張って試していきます。
ニュース記事やイベント情報の更新に加えて、訪問者が利用できる比較ツールなども入れたポータルサイトを検討中です。
どれくらい工数がかかるか、そもそも完成まで持っていけるのか定かではありませんが、制作過程で学んだことはこちらのブログに適宜アップしていきますので、よかったらたまにチェックしてみてください。
それでは！