はじめに
XRエンジニア / クリエイターとして活動している「はまちゃん」です。
最近、AIトレンドの進化が速すぎて情報のキャッチアップが追いつきません……。
次々と新しい技術が登場し、昨日までの常識が今日には塗り替えられている、なんてこともざらですよね。
今回は、GoogleのAntigravity（Gemini搭載のエージェント機能）を活用し、自分のポートフォリオサイトをわずか2時間で爆速構築した話を共有します。
https://hamachan64.github.io/
この記事を最後まで読むとわかること
- Antigravityとは？（GitHub CopilotやClaude Code等との立ち位置の違い）
- AI駆動開発のフロー（コンセプト決定からデプロイまで）
- 爆速かつ高品質に作るためのポイント
技術検証を兼ねて軽率に作ってみたので、ぜひ気軽に目を通してみてください！
Antigravityとは？
Antigravity (https://antigravity.google/) は、Gemini 3 Flashを搭載したGoogleの次世代AIエージェント型開発ツールです。
最大の特徴は、単なるコード補完にとどまらず、プロダクトの「意思決定」をサポートする点にあります。
GitHub Copilotが「行単位のコーディング支援」を得意とし、Claude Codeが「既存コードの高度な解析・修正」に強いのに対し、Antigravityは仕様駆動開発（Specification-Driven ）に特化しています。
要件定義から基本設計、そして実装までを一貫したストーリーで実行できるため、開発者は「何を書くか」ではなく「何を届けたいか」という本質的な設計に集中できます。
制作の流れ
主に以下の5ステップで進めました。
- コンセプト決め（Geminiと対話）
- 初回プロンプトの作成＆実行（AIにプロンプトを書かせる）
- 要件定義と基本設計のレビュー
- AIエージェントとのペアプロ
- GitHub Pagesへのデプロイ・完成
1. コンセプト決め
まずは「自分をどう見せたいか」の言語化から始めました。
XR（AR/VR/MR）を主軸にするクリエイターとして、Geminiと相談して導き出したコンセプトがこちらです。
"AR Immersive Business Card Person"
訪れた人が、ブラウザ越しに「拡張現実」への没入感を感じられるデザイン。
- Theme: Cyberpunk (Black × Neon)
- 漆黒の背景に、シアンやパープルのネオンが映える近未来的な配色。
- 一般的なホワイトベースのサイトとは一線を画す、ダークモード特化の世界観。
- Motion: Elegance & Immersion
- 激しいグリッチではなく、ゆったりとした光の明滅やフェードを採用。
- 単なる「情報の記録」ではなく、ユーザーの「記憶」に残る体験を重視。
2. プロンプト作成&実行
次に、Antigravityへの初回プロンプト（インテント）を作成します。ここが最も重要なフェーズです。
ポイントは、プロンプト自体をAIに書かせること。
「サイバーパンクなサイトを作って」という短文ではAIの解釈が広すぎて修正コストが増えますし、逆に細かすぎる指定はAIの最適な提案を阻害します。
そこで、自分の「やりたいこと（ミニマムな要望）」を一度AIに伝え、「Antigravityが最も理解しやすいMD形式の指示書」として出力し直してもらうのが正解です。
AIが読む文章は、AIに最適化させるのが一番間違いありません。
納得のいくプロンプトが完成したところで、Antigravityに実行を指示します。
3. 要件定義と基本設計のレビュー
指示を投げると、AIが即座に「要件定義」と「基本設計」を提案してくれます。
こだわりたい部分はしっかり反映させつつ、専門外や迷う部分はAIの提案に乗るのが爆速化のコツです。
例を挙げると、今回、私は下記の感じで使用技術をAIにお任せしました。
使用技術の選定
今回はスピードと「数年後も動く堅牢性」を重視し、あえてフレームワークを使わない構成にしました。
とAI君に言われ、スピード重視だったので一旦これは飲んで進めました。
技術スタック
- HTML5 / CSS3 / Vanilla JavaScript
- GitHub Pages (Hosting)
採用理由：
- メンテナンス性: フレームワークの破壊的変更に依存せず、長期的に動作する。
- パフォーマンス: ライブラリ不要で圧倒的に軽量・高速。
- 親和性: GitHub Pagesとの相性が良く、ビルド不要で即座に公開可能。
4. AIエージェントとのペアプロ
設計に合意したら、いよいよ実装です。
フロントエンド開発は「実際に動くもの」を見ないと判断できない部分が多いため、ここからはAIエージェントとリアルタイムに対話しながら細部を詰めていきました。
レスポンシブ対応やUIの微調整、アニメーションの挙動など、「もう少し穏やかなフェードにして」といった抽象的な指示もしっかり汲み取ってくれます。
↑レスポンシブデザイン化したスマホ版
5. GitHub Pagesへのデプロイ・完成
構想からデプロイまで、トータル約2時間。
AIのサポートにより、実装の「作業」ではなく、プロダクトの「体験」に集中して進めることができました。
AI駆動開発の重要ポイント
今回の開発で得た、AIエージェントを使いこなすための知見をまとめます。
-
初回プロンプトはAIと共作する
- AIが解釈しやすい構造（Markdownなど）に整形させる。
-
ルールファイルを活用する
- 「会話は日本語」「変数はキャメルケース」といった規約をあらかじめ定義しておくことで、手戻りを最小限に抑える。
-
指示のコンテキストを絞る
- 関連するファイルパスやコード範囲を的確に指定することで、AIの回答精度を最大化する。
おわりに
AIとのペアプログラミングにより、構想から実装、デプロイまでを驚異的な短期間で駆け抜けることができました。
これからの開発において重要なのは、「どんなコードを書くか」よりもどんな体験を届けたいかを定義し、それをAIにいかに正確に伝えるかという設計能力だと痛感しています。
完成したポートフォリオは以下で公開中です。PC・スマホそれぞれで異なる「拡張現実の雰囲気」をぜひ体験してみてください！
🔗 Portfolio: https://hamachan64.github.io/