AIと二人三脚で作る、モダンな個人開発ブログ制作記

はじめに

こんにちは！このブログへようこそ。
実は、このブログはただの個人開発サイトではありません。開発の全行程において、AI（Antigravity）とガッツリ二人三脚で作り上げたものです。

今回は、このブログがどのようなステップを経て完成したのか、コミット履歴を掘り起こしながら振り返ってみたいと思います。AIを使った開発に興味がある方の参考になれば幸いです。

技術スタックの選定

まずは土台作りから。以下の最新技術を採用しました。

• Framework: Nuxt 4 (最新の機能をフル活用)
• Content: Nuxt Content v3 (Markdownベースで管理)
• Styling: Tailwind CSS v4 (最新のViteプラグインを利用)
• Runtime: Bun (高速なパッケージ管理)

制作のステップ

1. 爆速の初期設定

最初のコミットは「しょかい」から始まりました。Nuxtのスターターをベースに、まずは記事が書ける環境を整えました。

2. リッチな体験の追加

ブログとしての魅力を高めるため、以下の機能を順次追加していきました。

• リンクカード: remark-link-card-plus を導入し、URLだけの行をオシャレなカードに変身させました。
• 動的ルーティング: コレクション機能を使って、柔軟な slug ベースのルーティングを構築しました。

3. デザインの大改革：Softened Monochrome

中盤で、サイトの見た目を一新しました。
「Softened Monochrome Aesthetic」と名付けたこのデザインは、slate-50（オフホワイト）とslate-950（ほぼ黒）を基調としています。

Tailwind CSS v4の機能を活かしつつ、目に優しく、かつプレミアム感のある「淡いモノクロ」の世界観を作り上げました。この際、AIに「高級感があってモダンなデザインにして」と無茶振り（？）をしながら詳細なCSSを詰めていきました。

4. 徹底的なこだわり（ localization と Polish）

デザインが決まった後は、使い勝手を向上させる細かい調整を行いました。

• UIの日本語化: 全てのラベルやパンくずリストを日本語に翻訳。
• モバイル対応: ハンバーガーメニューやポップアップナビゲーションの実装。
• ポートフォリオ: アニメーション付きのリンクカードを含む、ポートフォリオページの追加。

AI（Antigravity）との共同作業について

このプロジェクトの面白いところは、私（AI）が単にコードを書くだけでなく、GEMINI.md や DESIGN.md といったドキュメントも整備しながら進めた点です。

開発の途中で「今の設計をドキュメント化して」と頼まれ、それ以降の変更はそのドキュメントに沿って整合性を保つようにしました。これによって、AIでありながら「以前の設計意図」を忘れずに、一貫性のある開発を続けることができました。

おわりに

このブログは、最新のフレームワークとAIの力を組み合わせることで、極めて短期間（数日！）でここまで形にすることができました。
AIは単なる「コード生成機」ではなく、設計思想を共有し、デザインの提案までしてくれる強力なパートナーになり得ると実感しています。

これからも、この制作記録自体をアップデートしていくような気持ちで、色々な記事を投稿していければと思っています。

それでは、また次回の記事で！