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に基づき適切にコンポーネント分割し、適切なディレクトリへ自動配置することもできます。
Google Antigravity

Google Antigravity

Experience liftoff with the next-gen agent platform

favicon

antigravity.google

cover

【実践】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」という巨大なファイルにすべて記述させます。
  • 対話型修正: 「ヘッダーのロゴを左に寄せて」「スマホの時だけこの要素を非表示にして」といった微調整をプレビューを見ながら繰り返し、理想のビジュアルを確定させます。

直接コードを編集するほうが早い、軽微な修正が発生することもあります。その場合、わざわざプロンプトで指示すると逆に効率が悪いので、STEP3が完了した後に修正するのも手です。

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」と、コピペで使える「プロンプトサンプル」を公開します。

STEP 1：Canvasで「設計書」を作る

この最初のステップで「設計書（CONTEXT.md）」をどれだけ緻密に作れるかが、後のクオリティを左右します。

ただ、非デザイナーや「実はデザイン苦手なんよ・・・」というデザイナーの方にも安心で便利な設計書作成サポートGemをご用意しています。

‎Google Gemini

Meet Gemini, Google’s AI assistant. Get help with writing, planning, brainstorming, and more. Experience the power of generative AI.

favicon

gemini.google.com

cover

前述しましたが、できるだけGeminiに伝える情報に高い粒度を保たせるために、Geminiは一つ一つ丁寧にヒヤリングします。そのため、無料プランで使うとすぐにレート制限に達してしまう可能性が高いので、有料プランで使うのがオススメです。

レート制限が気になるよ、という方は、以下の指示書（プロンプト）サンプルを希望に合わせて調整して、 CONTEXT.mdというマークダウンファイル（指示書）を作らせてください。

ジャンル別に3つの実例を用意したので、作りたいものに近いものを選んでみてください。

パターンA：インテリアECサイト（B2C）

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。
出力内容は、開発AIが迷わず実装できるレベルまで詳細化してください。

【1. プロジェクト基本要件】
・サイトの種類: インテリアECサイト「トップページ」
・ターゲット: 20代〜30代の一人暮らしを始める女性（仕事で忙しいが、部屋にはこだわりたい層）
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React, Framer Motion
・レスポンシブ対応: 完全レスポンシブ必須（スマホ・タブレット・PC）。モバイルファーストで設計すること。

【2. デザインシステム定義】
・カラーパレット:
　・Primary: <em>#F5EBE0 (やわらかいベージュ系)</em>
　・Secondary: <em>#D1FAE5 (淡いミントグリーン)</em>
　・Accent: <em>#E5B1B1 (くすみピンク)</em>
　・Text: <em>#374151 (チャコールグレー)</em>
・フォント: Noto Sans JP (本文), Montserrat (見出し)
・UIルール:
　・角丸: rounded-lg (少し丸みを帯びた形状)
　・シャドウ: shadow-sm (控えめで上品な影)
　・余白: ゆったりと取る (Tailwindの gap-8, py-16 等を活用)
　・ブレークポイント: Tailwind標準 (sm, md, lg, xl) を使用し、デバイスごとに最適なレイアウトを定義すること。

【3. セクション構成と機能要件】
1. Hero: 画面いっぱいのスライダー。キャッチコピー「私らしい、春の部屋。」。CTAボタン配置。スマホでは画像比率を調整。
2. Category: 「ソファ」「テーブル」「照明」等のアイコンナビゲーション。横スクロールまたはグリッドで表示。
3. Concept: ブランドメッセージ。背景に薄いテクスチャ画像を使用。
4. New Arrivals: PCでは4カラム、スマホでは2カラムのグリッド。
5. Ranking: 1〜3位のランキング表示。王冠アイコン付き。
6. Instagram: グリッドレイアウトで画像表示。
7. Newsletter: メールアドレス入力フォームと登録ボタン。

【4. ディレクトリ・コンポーネント設計】
・ディレクトリ構成: Next.js App Routerの標準構成（/app）。
・コンポーネント分割ルール:
　・共通パーツは /components/ui (Button, Card等)
　・セクション単位は /components/sections (Hero, Features等)

【出力形式】
上記を整理し、エンジニアへの実装指示書として使えるマークダウン形式（CONTEXT.md）で出力してください。

パターンB：IT企業コーポレートサイト

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: システム開発会社のコーポレートサイト
・ターゲット: 企業のDX担当者、IT部門の責任者（信頼感と技術力を重視）
・技術スタック: Next.js (App Router), Tailwind CSS, Lucide React
・レスポンシブ対応: 完全レスポンシブ必須。ビジネスマンが移動中にスマホで見ることも考慮。

【2. デザインシステム定義】
・カラーパレット:
　・Primary: #0F172A (深いネイビー、知性と信頼)
　・Secondary: #3B82F6 (テックブルー)
　・Background: #F8FAFC (清潔感のある白グレー)
・フォント: Noto Sans JP (本文), Inter (英数字)
・UIルール:
　・角丸: rounded-sm (シャープでビジネスライクな形状)
　・ナビゲーション: PCはヘッダーメニュー、スマホはハンバーガーメニューに切り替え。

【3. セクション構成と機能要件】
1. Hero: オフィス風景の動画背景＋「技術で、未来を実装する。」。
2. News: 最新のお知らせ3件。
3. Service: 「Web開発」「アプリ開発」「コンサルティング」の3本柱。
4. Strengths: 数字で見る実績。カウントアップアニメーション。
5. Case Study: 導入事例のロゴスライダー。
6. Contact: 大きな電話番号とお問い合わせフォームへの誘導。

【4. ディレクトリ・コンポーネント設計】
ディレクトリ構成: 一般的なNext.js構成。

パターンC：デザイナーのポートフォリオサイト（クリエイター）

▼ プロンプト例（Canvasに入力）

以下の要件定義に基づき、Webサイト構築のための詳細な設計書（CONTEXT.md）を作成してください。

【1. プロジェクト基本要件】
・サイトの種類: Webデザイナーのポートフォリオサイト（トップページ）
・ターゲット: 制作依頼を検討中のクライアント、採用担当者
・技術スタック: Next.js (App Router), Tailwind CSS, Framer Motion

【2. デザインシステム定義】
・カラーパレット:
　・Base: #FFFFFF (白)
　・Text: #1A1A1A (ほぼ黒)
・フォント: Noto Sans JP (本文), Playfair Display (英語見出し)
・UIルール:
　・余白: 極めて広く取る。スマホでは適切な余白に調整。
　・線: 1pxの極細線を使い、グリッド感を強調

【3. セクション構成と機能要件】
1. Hero: タイポグラフィ重視。ふわっと現れるアニメーション。
2. About: 簡潔なフィロソフィーとプロフィール。
3. Works: 制作実績をグリッド（PC: 2カラム, SP: 1カラム）で表示。
4. Skills: 使用可能ツールをシンプルにリスト化。
5. Contact: SNSリンクとシンプルなフォーム。

【4. ディレクトリ・コンポーネント設計】
・コンポーネント分割ルール: WorkCard, SkillBadgeなどの粒度で分割。

プロンプトを実行して出力された「設計書」の内容を精査します。
これがこのプロジェクトの「憲法」になります。

これがあるだけで、後の工程でのAIの「勝手な判断」や「デザインのブレ」を徹底的に防げます。

ちなみに上記で紹介したプロンプトはあくまで例なので、より具体的な構想やルールがあればより詳細に書くことでクオリティーを高められます。

STEP 2：Canvasで「見た目だけの完成品」を作る

次に、STEP 1で作った「設計書」を元に、Canvasでデザインを作ります。 ここでの最大のポイントは、「設計書のデザイン要件は守るが、ファイル分割ルールは一旦無視する」ことです。

▼ デザイン作成のコツ Canvasに対しては、以下のように指示します。

設計書（CONTEXT.md）の要件（デザインシステム、セクション構成）に基づいて、サイトのデザインを作成してください。

【条件】
・ReactとTailwind CSSを使用すること。
・重要: 設計書で定義したディレクトリ構成は一旦無視し、すべてのコードを1つのファイル（Visual.tsx）にまとめて記述すること。
・コンポーネント分割はしないでください。ベタ書きで構いません。
・最重要: 完全なレスポンシブ対応（モバイルファースト）にしてください。Tailwindのプレフィックス（md:, lg:）を必ず使用してください。

ここでは、STEP 1で決めた世界観と、「スマホで見ても崩れないこと」を完璧に再現することだけに集中してください。

STEP 3：Antigravityで「合体＆自動建築」

ここが最大の山場であり、一番気持ちいい瞬間です。

Canvasで作った「設計書（STEP 1のCONTEXT.md）」と「デザインコード（STEP 2のVisual.tsx）」の2つを用意し、一つのディレクトリに入れたら、Antigravity（エディタ）で該当のディレクトリを開きます。

Antigravityのチャット欄に、この2つのファイルを読み込ませます（「@（メンション）」でファイル名を選択してください）。

その状態で、以下のプロンプトを投げてください。

▼ 自動建築プロンプト（Antigravityに入力）

あなたはシニアフロントエンドエンジニアです。
現在のディレクトリは空です。以下の2つの資料を元に、プロジェクトを0から構築してください。

【入力資料】
1. 設計書: CONTEXT.md（技術スタックと構成ルール）
2. デザイン: Visual.tsx（見た目の正解データ）

【タスクフェーズ】
1. 環境構築
・CONTEXT.md の技術スタックに基づき、Next.jsプロジェクトの初期化コマンドを実行してください。
・TypeScript, Tailwind CSS, ESLint は有効にしてください。
・必要なライブラリ（Lucide React, Framer Motion等）をインストールしてください。

2. 実装
・初期化されたプロジェクトに対し、CONTEXT.md で定義されたディレクトリ構成を作成してください。
・Visual.tsx のコードを適切に分割し（Header.tsx, Hero.tsx 等）、各ファイルに配置してください。

【実行指示】
まずはフェーズ1（環境構築）のコマンドを提案・実行し、完了後にフェーズ2（実装）へ進んでください。

これを送信すると、AIは「設計書」というルールに従って、デザインコードという「素材」を切り刻み、適切なファイルに自動で振り分けてくれるので、人間がエディタを行き来してコピペする必要はゼロです。

環境構築のプロセスでは、いくつかのコマンド実行が必要で、構築完了までノンストップで実行できれば良いのですが、Antigravityではセキュリティのため、コマンド実行前に「承認」ボタンのクリックが必要になります。

承認をポチポチと押して見守るだけで、環境構築からファイルの整理整頓まで全てAIがやってくれます。

STEP 4：AIエージェントで仕上げる

自動構築が終わったら、最後に「エンジニア」としての仕上げです。 おそらく、自動構築直後は「画像のパスが通っていない」とか「リンクが空っぽ」といった細かい不備があるはずです。

ここは、AntigravityのAIエージェント（チャット）を使って、対話形式で詰めていきます。

  • 「ヘッダーのロゴ画像が表示されていないので、public/images フォルダを作ってダミー画像を配置し、パスを通して」
  • 「商品カードをクリックしたら、商品詳細ページ（/products/[id]）に遷移するようにリンクを修正して」
  • 「スマホで見た時、ハンバーガーメニューが開かないバグを直して」

このように、全体構造ではなく「局所的な修正」にフォーカスして指示を出すのがコツです。

ここまで来れば、Gitでコミットしてデプロイするまであと一歩です。
※ここではGitでのコミット、デプロイの方法については割愛します。

サイトが完成してデプロイできたらお祝いしましょう！🎉
お疲れ様でした！

さていかがでしたでしょうか？

「サイトを作りたいけどデザインがなぁ・・・」と悩んでなかなか前に進めなかった方は、ぜひぜひ、この手順を試してみてください。
「今までの苦労は何だったんだ…」ってなること間違いなしです！

Author / 執筆者

mimihokuro

mimihokuro

ECのWebデザインからコーディング、マーケティングと幅広く担当している現役Webデザイナー兼コーダーです。futureshopを使ったサイト構築を得意としています。