最近のトレンド
最近はAIを使った開発が増えていて、実際に私もそれを体験している最中です。
今回は、AIを使ったウェブサイトの開発方法として、コンポーネントごとに分けてやるとどうなるのか見ていきたいと思います。
この記事で何か発見があると幸いです。
元のサイト
元のサイトは、私が超低クオリティーで作成した適当なNext.jsのサイトです。
これに対してOpus5.5とかに丸投げするとめちゃめちゃいい感じになるのは試したのですが、じゃあ、コンポーネントごとにやったらどうなるのか気になったので見ていきます。
Claude Codeに入れる
まずは黒子くん(Claude Code)にフォルダに入ってもらいます。
(この右下のちょこんといるのが割と好き）
そして、ヘッダーだけを見て、適当に改善してもらいましょう。
↓プロンプト↓
ヘッダーを見て、自分なりのスタイルで直してみて
なんとも適当なプロンプト笑
globals.css にあった header { ... } のルールは削除しました。レイヤー外の CSS は Tailwind のクラスより優先されてしまい、上書きできなかったためです。フッターの CSS はそのままなので、ヘッダーとフッターの見た目は揃っていません。キャッチコピーや色は好みで変えてください。
気に入らなかったのか、global.cssが消されちゃいましたけど、いい感じの見た目になってます！
ただ、色味が気に食わないので、もうひとひねりお願いしてみます。
もっと自分の色出していいよ
ゼロから作り直しちゃって
こちらも結構お気に入りの適当プロンプト（思考放棄）
そしてできたのがこちら↓
サイトタイトルと帯が動く謎仕様にしてくれました笑
ここまでくると、逆にこのスタイルでサイトを作りたくなってしまう...が、おしゃんなサイトにしたいのでもう少し頑張ります
ヘッダーのスタイルを、もっと高級感あふれるものにして。
写真やフォントを外部のフリーサイトからとってきていいからさ
今度は高級感あふれさせる路線で、実際に写真やフォントを変えるようにお願いしました。
やっぱりデフォだと、平均によりがちなので、路線を変える程度のユニークなプロンプトを入れると効果的。
そして...！
なぜかサブタイトル的なのを勝手に追加されましたけど、、高級っぽいですね
この、謎の文言を入れてくるのが最近の悩みではあります。
細部の修正
望んでいない文言や写真だった時に、少しずつ変えるにはどうしたらいいか考えていきます。
まずは言葉だけのプロンプト
バックグラウンドの写真を街の写真に変えてほしい
今回は割とまともじゃないですか？笑
お、なかなかいい感じ。思った通りの修正でしたね。
続いて文言を修正
「Atelier of curious websites」ってあるけど、「Hen na website」に変えて。
「少し変わった、極上のひととき」も、「この違和感に、酔いしれろ」に変えて。
と指定すると、
結構思った通りに変わりますね。
一気にやってみる
このスタイルで一気に作ってみましょう。
Opusに切り替えてみました。やっぱり大きい規模はOpusのほうがいいかなって思っちゃうんですよね。
このスタイルでサイト全体を仕上げてみて
なんかめっちゃ高級感は出してくれてますね笑
何も指示していないのに、サイドバーやおすすめコンテンツ（リンクは貼られてない）を作ってくれました。
モックのたたき台としてはとてもいいかもしれませんね。
ちょっといろいろ遊んでみます。
まとめ
ヘッダーしか試行錯誤していないので、消費トークンがとても少なく感じました。
これまではサイト全体を作らせてから色々修正を加えていましたが、ヘッダーだけで最初の試行錯誤を行えば、トークンが少なくて済むかもしれないなと感じました。
これからはいかにトークンを少なくするかも大事になってくるので、いい発見だったと思います。