AIが席捲してきているため、どこまでAIでサイト制作が可能かの調査も含めてサイトをリニューアルしました。
デザイン
Google Labs が出している Stitch というAI搭載のUIデザインツールでサイトデザインを生成しました。
サイトの構成とページの内容、会社の特徴やメッセージなどを伝えた上で生成したデザインをほぼほぼリニューアルサイトに適用しました。
HTMLのコードも同時に生成できるのでコード開発時の参考にしています。
フロントエンド
Cursor の Agent モードを使用して開発しました。全体的な枠組みは採用して、それをもとに細かい調整は手打ちで行いました。
ヒーローイメージのアニメーションはgsapを用いて、アニメーションのコードも Cursor の Agent モードで生成しました。
技術構成
- フレームワーク: Nuxt 4（Typescript）
- CMS: Nuxt Content
- 問い合わせフォーム: Google Form
インフラ
Nuxt を SSG で吐き出したファイルを AWS の S3にアップロードして、CDN は CloudFront を使用しています。
デプロイは github actions で main ブランチにマージされたら S3 に自動デプロイするようにしています。
所感
AIを用いてデザインからコーディングまでひととおり実装することができる時代が到来したんだとつくづく感じています。
現状はまだコーディングなども多少調整が必要なのとプロンプトをしっかり考えてAIにかませないと意図したものができてこない雰囲気があります。
が、それもざっくりと伝えたら意図を汲み取ってしっかりしたものを生成してくれる未来がすぐそばにきているとも感じました。