AIを活用したサイト制作は「指示出し」から「自動建築」のフェーズへ。
本業でECサイトの設計からコーディングまで一人で担うWebデザイナーの私が辿り着いた「Googleエコシステム最強の制作ワークフロー」を徹底解説します。
なぜ「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アカウント（一つのサブスク）でシームレスに行き来できる体験は、Geminiだからこそできる高速フローです。
制作効率を10倍にする「右脳と左脳」の役割分担
「右脳」を担うGemini Canvas：直感的なデザイン生成
Canvasの最大の武器は、「コードを書かずに、プレビューを見ながらデザインをこねくり回せる」点です。
- リアルタイム・スタイリング: AIが即座に反映し、プレビュー画面で確認可能。
- 曖昧な指示の具現化: 「もっと春らしく」「20代女性に刺さる配色で」といった感性的なオーダーを視覚化。
- デザインの「こねくり回し」: デザイナーが一番時間をかける「0→1」の試行錯誤を、数分という驚異的なスピードで回せます。
「左脳」を担うAntigravity：論理的な実装と自動建築
Googleが開発した次世代AI IDE「Antigravity」は、VS Codeをベースにしながらも、ディレクトリ構造を自律的に理解してくれるので、一度の指示で関連ファイルをディレクトリ内で探して編集してくれる優れたエディターです。
- Windows環境での親和性: WSL2やPowerShellを介した環境構築も、AIエージェントがコマンドを提案・実行してくれるため、環境構築のストレスが激減します。
- 構造化のプロ: Canvasで作った「一枚岩のコード」を、Next.jsのApp Routerに基づき適切にコンポーネント分割し、適切なディレクトリへ自動配置することもできます。
【実践】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に依頼。この「仕上げ」の精度が、プロの仕事としてのクオリティを左右します。
【実例紹介】AIと作った次世代プロトタイプ
さて、ここまで大きな制作の流れをご紹介しました。
今度は、この後ご紹介するGemやプロンプトでどんなものが作れるのか、イメージを用意しました。
それぞれCanvasで作成したときのイメージを共有リンクとして貼り付けてあるので、全容をご覧ください。
例1. 可愛らしいインテリアECサイト
20～30代女性をターゲットとしたインテリアECサイトをCanvasで作成しています。
例2. 堅実なシステム開発会社のコーポレートサイト
シンプルな構成ですが、カウントアップを加えた遊び心のあるトップページになっています。
例3. スタイリッシュなデザイナーのポートフォリオサイト
シンプルかつスタイリッシュなビジュアルに余白を大きく設けたデザイナーらしさのあるページです。
例4. モダンなエンジニアのポートフォリオサイト
フリーランスとしてWeb制作会社から高単価案件を獲得するためのプレゼンテーションツールをイメージ。
実装力をアピールするような演出とスタイリッシュさが目を引くデザインになっています。
このポートフォリオのメインビジュアルには、高度なアニメーションを実装できるThree.jsを指定して作成させています。
ライブラリを指定して実装も簡単にできて、かつクリエイティブなサイトが作れてしまうのは驚きでした。
それでは、ここからサンプルページを作成したプロンプトと流れをご紹介します！
現場で即戦力になる「専用Gem」と「秘伝のプロンプト」
これまでの解説でフローの重要性は理解いただけたかと思います。
しかし、一番の壁は「AIにどう指示すれば、高品質な設計書が出てくるのか？」という点ではないでしょうか。
そこで、私が実務で磨き上げた「設計サポート専用Gem」と、コピペで使える「プロンプトサンプル」を公開します。
気になる方は、ぜひ私を応援すると思ってこの続きを購入していただけると嬉しいです。