TsumuBibolog
このブログを生成AIに任せて数時間で作った話
はじめに
このブログは Cloudflare Pages + Astro で作っています。
私は普段 CGエンジニア をやっており、メインは Unity。
触ろうとしたこともありましたが、結局機会もなく、Web技術 は完全に未経験です。
- HTMLも書いたことなし
- 当たり前にCSSも知らない
- フロントエンドの知識ゼロ
一方で、
- 自宅にマイクラサーバーを立てた
- VPNやファイルサーバー、GitLabサーバーを建てたことはある
というレベルの ネットワーク周りは少し触ったことがある人 です。
そんな自分が「ブログ作ってみるか」と思い立ってから、
数時間でそれなりに満足できるブログができるまで の話を書いてみようと思います。
Cloudflare Pagesでブログを作りたいと思った
最初の動機はとても単純で、
せっかくなら自分の管理下でブログを持ちたい
というもの。
- せっかくだし外部ブログサービスは使いたくない
- サーバーを家に置くのは嫌
- 独自ドメインはすでに Cloudflare で管理している
- できれば維持費はかけたくない
この条件を満たすものとしてChatGPTが候補にあげてくれたのは、Cloudflare Pages でした。
まぁ、正直よくわからなかったんですが軽く調べて悪くなさそうだったのと、そもそもドメイン管理しているのでまぁいっかの気持ちで採用。
ChatGPTに聞いたら Astro をおすすめされた
とはいえ、どうやってブログを作るのかすらわからない状態。 そこで ChatGPT に
Cloudflare Pagesでブログを作るなら何がいい？
と聞いたところ、返ってきた答えが Astro でした。
この時点では、Astroって何？
という状態でしたが、
- 静的サイトに強い
- ブログ用途に向いている
- 学習コストが低い
- Cloudflare Pages と相性が良い
という説明を見て、とりあえず採用。
べつに今もAstroの詳しい仕組みはわかっていません。
一応、Astroチュートリアルを見る
完全に AI 任せでやるつもりではあったのですが
さすがに 最低限の概念理解は必要そう だったので、Astro公式のチュートリアルを一通り見ることにしました。
ちなみに、Astroのチュートリアルは神でした。
- Web未経験でも理解できる構成
- 何をしているのかをちゃんと説明してくれる
- 「なぜそうなるか」が省略されていない
HTMLもCSSもほぼ知らない自分でも、「なるほど、そういう構造なのねー」となれる内容でした。
動画教材とか見てられないタイプの人間なので、公式チュートリアルがしっかり整備されていたのは、ありがたかったです。
テストも兼ねて Google Antigravity で作ってみる
一通りチュートリアルを終えたあと、
一回、AIに任せて作らせてみるか
と思い、Google Antigravity を使ってブログを生成してみました。結果は
- レイアウト自体は悪くない
- コンポーネント構成もそれなり
ただし問題が一つ。
デザインがイメージと違う
UIレイアウトは悪くなかったのですが、
- 色
- 余白
- 雰囲気
が 自分のイメージと全然違う。
ここで気づいたのが、
そもそも自分の作るものに「デザインのトンマナ」が存在していない
ということでした。
これがない状態でなんとなく壁打ちで良い悪いを判断しても、無限に迷走するだけだな、と。
というわけで、
統一デザインの仕様書をAIに作ってもらうことにした
場当たり的に修正するのはやめて、
- このブログ
- 今後作るプロダクト
すべてで使える 統一デザインの仕様書 を先に作ることにしました。
ここからは Canvas機能 を使い、
- ショウケース（仮デザイン）を作ってもらう
- それにフィードバックを返す
- 修正 → 再提示
というループを回していきました。
Canvasを使ったショウケース作成は Gemini が圧倒的に優秀だった
Canvasを使ったデザインの壁打ちは ChatGPT より Gemini の方が明らかに優秀でした。
- デザイン案の提示が速い
- UI全体のバランス感覚が良い
- 修正指示への反映精度が高い
- ビジュアル表現力が高い
というか、ChatGPTは Canvasの挙動がかなり微妙だったので、そもそも使い物になりませんでした。
統一デザイン仕様書をブログに読み込ませる
仕様書が完成したら、それをAiに読み込ませています。
以降は、
- レイアウトは都度壁打ち
- デザインは完全に仕様書準拠
という形で、迷いなくコーディングしてもらいました。
数時間で、かなり満足のいくブログが完成
結果として、
- Web未経験
- Astro初見
という状態から、数時間でかなり満足のいくブログが完成しました。
AIの「本当の威力」を感じた制作だった
これまで、
- Unity
- CG
などで AI を使ってきましたが、
「確かに便利だけど、騒がれているほどは威力を感じないなー？」という感覚がありました。
しかし今回の制作は違いまして
- 知識ゼロの分野
- 仕様策定から実装まで
- 試行錯誤込みで短時間
この条件でここまで持っていけたのは、かなりAIの威力を感じた体験でしたね。
おわりに
正直な感想として、
メインで扱っている領域（Unity / CG）でも
このレベルでお手軽に威力が出るようになったら、かなり楽になるな
と思いました。
今回のブログ制作は、
普通のVideoコーディングの威力を体験できる、良い制作体験だったと思います。
というわけでこのブログは、しっかりと更新していくつもりです。
ちなみに記事はAIに任せるつもりはあんまりないです。