AIを活用したサイト制作は「指示出し」から「自動建築」のフェーズへ。
本業でECサイト（futureshop等）の設計からコーディングまで一人でこなすWebデザイナーの私が、Windows環境で辿り着いた「Googleエコシステム最強の制作ワークフロー」を徹底解説します。
1. 2026年のAIサイト制作：なぜ今「Gemini」なのか？
現在、CursorやChatGPT、Claude Artifactsなど、多くのAIツールが存在します。
特にAIエディタの代名詞とも言える「Cursor」は強力ですが、プロの現場で私がGeminiエコシステムをメインに据える理由は、Googleの圧倒的な「連携力」と「コストパフォーマンス」にあります。
【比較】主要AIツールの特徴と使い分け
| ツール名 | 得意分野 | サイト制作における役割 | 課金体系のメリット |
|---|---|---|---|
| Gemini (Canvas) | 0→1のアイデア・プレビュー | 設計・プロトタイプ作成 | Google AI One（月額約3,000円）で完結 |
| Antigravity | 自律的なプロジェクト構築 | 実装・環境構築・デプロイ | 上記プランでIDE内AIも使い放題 |
| Cursor | 高度なコード補完・推論 | コーディング特化 | 月額$20〜。独自モデル等に強み |
| Claude / ChatGPT | 部分的なロジック生成 | 補助的なコード修正 | 単体契約が必要な場合が多い |
ポイント: Cursorは非常に優れたエディタですが、プロトタイプを作る「Canvas」と、実装を行う「Antigravity」を一つのGoogleアカウント（一つのサブスク）でシームレスに行き来できる体験は、制作スピードを極限まで高めてくれます。
2. 制作効率を10倍にする「右脳と左脳」の役割分担
「右脳」を担う Gemini Canvas：直感的なデザイン生成
Canvasの最大の武器は、「コードを書かずに、プレビューを見ながらデザインをこねくり回せる」点です。
- リアルタイム・スタイリング: Tailwind CSSのクラスをAIが即座に反映し、プレビュー画面で確認可能。
- 曖昧な指示の具現化: 「もっと春らしく」「20代女性に刺さる配色で」といった感性的なオーダーを視覚化。
- デザインの「こねくり回し」: デザイナーが一番時間をかける「0→1」の試行錯誤を、数分という驚異的なスピードで回せます。
「左脳」を担う Antigravity：論理的な実装と自動建築
Googleが開発した次世代AI IDE「Antigravity」は、VS Codeをベースにしながらも、ディレクトリ構造を自律的に理解します。
- Windows環境での親和性: WSL2やPowerShellを介した環境構築も、AIエージェントがコマンドを提案・実行してくれるため、環境構築のストレスが激減します。
- 構造化のプロ: Canvasで作った「一枚岩のコード」を、Next.jsのApp Routerに基づき適切にコンポーネント分割し、適切なディレクトリへ自動配置します。
3. 【実践】0から100まで駆け抜ける「4ステップ・ワークフロー」
ここからは、私がオススメする制作フローを詳しく解説します。
STEP 1：Geminiで「プロジェクトの憲法（設計書）」を作る
AIに丸投げするのではなく、最初にCONTEXT.mdという詳細な設計書を作らせるのが成功の8割を決めます。
- 内容の緻密化: 技術スタック（Next.js, Tailwind, Framer Motion等）の指定、ディレクトリ構成のルール、カラーパレットの16進数指定までをこの1ファイルに集約させます。
- AIへの制約: 「このルールを逸脱するな」という強い指示を書き込むことで、後の工程での「AIの勝手な解釈」を防ぎ、制作の一貫性を保ちます。
STEP 2：Canvasで「ビジュアルの正解」を確定
設計書を元に、Canvas内で動くプロトタイプを作成します。ここでは「構造」よりも「見た目」を完璧にすることに集中します。
- 1ファイルに集約: Canvasは単一ファイルでのプレビューが得意なため、あえてコンポーネント分割せず「Visual.tsx」という巨大なファイルにすべて記述させます。
- 対話型修正: 「ヘッダーのロゴを左に寄せて」「スマホの時だけこの要素を非表示にして」といった微調整をプレビューを見ながら繰り返し、理想のビジュアルを確定させます。
STEP 3：Antigravityで「自動建築」を開始
ここが一番の快感ポイントです。用意した「設計書」と「Visual.tsx」をAntigravityに読み込ませます。
- 自律的なプロジェクト初期化:
npx create-next-appからライブラリのnpm installまで、AIがコマンドを生成します。コマンドの実行承認をポチポチ押すだけで、目の前でプロジェクトの骨組みが出来上がっていきます。 - コンポーネントの解体と再構築: AIがVisual.tsxを解析し、
Header.tsxやHero.tsxといった部品に切り分け、設計書で指定したフォルダへ自動的に収納していきます。人間がコピペを繰り返す時代は終わりました。
STEP 4：AIエージェントによるデバッグと仕上げ
自動構築が終わった直後の「あと一歩」を、対話形式で詰めていきます。
- 局所的エラーの解消: 「画像のパスが通っていない」「Lucide Reactのアイコン名が間違っている」といった細かい不備を、Antigravityのチャットで指摘して直させます。
- レスポンシブの最終調整: 実機やブラウザのデベロッパーツールで確認し、気になる箇所の微調整をAIに依頼。この「仕上げ」の精度が、プロの仕事としてのクオリティを左右します。
4. 【実例紹介】AIと作った次世代プロトタイプ
まずは、今回ご紹介するGemやプロンプトでどんなものが作れるのか、イメージを用意しました。
例1. インテリアECサイトのトップページ
20～30代女性をターゲットとしたインテリアECサイトをCanvasで作成しています。
例2. システム開発会社のコーポレートサイト
シンプルな構成ですが、カウントアップを加えた遊び心のあるトップページになっています。
例3. デザイナーのポートフォリオサイト
シンプルかつスタイリッシュなビジュアルに余白を大きく設けたデザイナーらしさのあるページです。
例4. エンジニアのポートフォリオサイト
フリーランスとしてWeb制作会社から高単価案件を獲得するためのプレゼンテーションツールをイメージ。
実装力をアピールするような演出とスタイリッシュさが目を引くデザインになっています。
それでは、ここからサンプルページを作成したプロンプトと流れをご紹介します！
5. 現場で即戦力になる「専用Gem」と「秘伝のプロンプト」
これまでの解説でフローの重要性は理解いただけたかと思います。
しかし、一番の壁は「AIにどう指示すれば、高品質な設計書が出てくるのか？」という点ではないでしょうか。
そこで、私が実務で磨き上げた「設計サポート専用Gem」と、コピペで使える「プロンプトサンプル」を公開します。