Canva × Antigravity 完全ワークフローガイド — デザインからコードへの最短ルート

取り組みの背景：Canva × Antigravity が実現すること

「デザインツールとコードエディタの間を何度も往復する」——個人開発者やスタートアップが抱えるよくある悩みのひとつです。Canva でバナーや LP のデザインを作り、それをスクリーンショットで保存して、Antigravity に「このデザインと同じ画面を実装して」と伝える……そんな非効率なサイクルから解放してくれるのが、Canva MCP × Antigravity の連携ワークフローです。

Canva は MCP（Model Context Protocol）サーバーを公式に提供しており、Antigravity からデザインデータに直接アクセスできるようになりましました。これにより、デザインのカラーコード・フォント情報・レイアウト構造を Antigravity が自動的に読み取り、対応するコンポーネントを生成できます。

Canva MCP の概要とできること

Canva MCP を Antigravity に統合すると、エージェントは以下の操作を自律的に実行できます。

デザインデータの読み取り: 指定した Canva デザインのカラー、フォント、レイアウト、テキスト内容を取得
アセットのエクスポート: 画像・SVG ファイルをプロジェクトに取り込む
デザイントークンの抽出: カラーパレット・タイポグラフィ・スペーシングをコードで利用可能な形式に変換
デザインの更新確認: デザインの差分を検出して影響するコンポーネントを特定

単なる「画像のコピー」ではなく、デザイン意図をコードに翻訳するパイプラインとして機能します。

Step 1：Canva MCP のセットアップ

前提条件

Antigravity IDE がインストール済みであること
Canva アカウント（無料プランでも利用可能）
Canva Developers ポータルで API キーを取得済みであること

Canva API キーの取得

まず Canva Developers Portal にアクセスし、新しいアプリケーションを作成します。ダッシュボードで「Create integration」をクリックし、アプリ名と説明を入力して、「Read design content」および「Export assets」スコープを有効化した後、生成された API キーをメモしておきましょう。

MCP サーバーの設定

Antigravity の設定ファイルに Canva MCP の情報を追加します。

// ~/.antigravity/mcp.json
{
  "mcpServers": {
    "canva": {
      "command": "npx",
      "args": ["@canva/mcp-server", "--port", "3100"],
      "env": {
        "CANVA_API_KEY": "YOUR_CANVA_API_KEY"
      }
    }
  }
}

注意: YOUR_CANVA_API_KEY の部分は実際のキー値に置き換えてください。API キーは .env ファイルで管理し、Git にコミットしないよう .gitignore に .env を追加する点が肝心です。

設定後、Antigravity を再起動すると MCP サーバーへの接続が確立されます。チャット欄で「@canva デザイン一覧を取得してください」と入力して、利用可能なデザインのリストが返ってくれば接続成功です。

Step 2：デザインデータの読み取りと解析

Canva MCP が接続されると、Antigravity エージェントはデザインの詳細情報を自動的に解析できます。Canva のデザイン共有リンクをチャットに貼り付けるだけで、エージェントがカラーコード・フォント・レイアウト構造・テキストコンテンツを構造化データとして返します。

エージェントは以下のような情報を抽出します。

{
  "colors": {
    "primary": "#2D6CDF",
    "secondary": "#1E3A5F",
    "accent": "#F59E0B",
    "background": "#F8FAFC",
    "text": "#1F2937"
  },
  "fonts": {
    "heading": "Poppins, 700, 48px",
    "body": "Inter, 400, 16px"
  },
  "sections": ["hero", "features", "testimonials", "pricing", "cta", "footer"]
}

この構造化データを元に、次のステップでコンポーネントを生成します。

Step 3：デザインからコンポーネントを自動生成

解析したデザインデータをもとに、Antigravity がコンポーネントを自動生成します。

Tailwind CSS × React コンポーネントの生成

先ほど解析した Canva デザインのヒーローセクションを、
Tailwind CSS + React コンポーネントとして実装してください。
- カラーコードは CSS Variables として定義
- モバイルファーストのレスポンシブ対応
- アニメーションは Framer Motion を使用

エージェントが生成するコードの例:

// Hero.tsx — Antigravity が Canva デザインから自動生成
import { motion } from 'framer-motion'
 
const colors = {
  primary: '#2D6CDF',
  secondary: '#1E3A5F',
  accent: '#F59E0B',
  background: '#F8FAFC',
  text: '#1F2937',
}
 
export const HeroSection = () => {
  return (
    <section
      className="min-h-screen flex items-center px-6 md:px-12 lg:px-24"
      style={{ backgroundColor: colors.background }}
    >
      <div className="max-w-6xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1
            className="text-4xl md:text-6xl font-bold leading-tight mb-6"
            style={{ color: colors.secondary, fontFamily: 'Poppins, sans-serif' }}
          >
            AIと一緒に、
            <span style={{ color: colors.primary }}>未来を作ろう</span>
          </h1>
          <p
            className="text-lg mb-8 leading-relaxed"
            style={{ color: colors.text }}
          >
            Canva でデザインし、Antigravity でコードを生成。
            アイデアから実装まで、かつてない速さで実現できます。
          </p>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.98 }}
            className="px-8 py-4 rounded-xl text-white font-semibold text-lg shadow-lg"
            style={{ backgroundColor: colors.accent }}
          >
            今すぐ無料で始める
          </motion.button>
        </motion.div>
      </div>
    </section>
  )
}
// 期待される出力: Canva デザインのヒーローセクションがブラウザ上に忠実に再現される

Step 4：アセットのエクスポートと最適化

Canva 上の画像・SVG・アイコンをプロジェクトに取り込む手順です。エージェントへの指示は以下のように行います。

Canva デザイン（URL: https://www.canva.com/design/XXXXX/view）から
以下のアセットをエクスポートして /public/images/ に保存してください：
- ヒーロー画像（PNG, 2x解像度）
- 機能アイコン一覧（SVG形式）
- ロゴ（SVG + PNG セット）

エクスポート後は画像最適化スクリプトを使って WebP 変換・リサイズを自動化します。

// scripts/optimize-canva-assets.ts
import sharp from 'sharp'
import path from 'path'
import fs from 'fs/promises'
 
async function optimizeCanvaAssets(inputDir: string, outputDir: string) {
  const files = await fs.readdir(inputDir)
  for (const file of files) {
    if (!file.match(/\.(png|jpg|jpeg)$/i)) continue
    const inputPath = path.join(inputDir, file)
    const outputPath = path.join(outputDir, file.replace(/\.[^.]+$/, '.webp'))
    await sharp(inputPath)
      .webp({ quality: 85 })
      .resize({ width: 1200, withoutEnlargement: true })
      .toFile(outputPath)
    console.log(`✅ ${file} → ${path.basename(outputPath)}`)
  }
}
 
// 期待される出力: ✅ hero.png → hero.webp (503KB → 89KB)
optimizeCanvaAssets('./public/images/raw', './public/images')

Step 5：LP 制作の実践例

「SaaS サービスのランディングページ」を Canva で作り、Antigravity で実装する一連の流れを紹介します。Antigravity への指示テンプレートは以下の通りです。

【タスク】Canva で作成した LP を Next.js + Tailwind CSS で実装してください

【Canva デザイン URL】https://www.canva.com/design/XXXXX/view

【要件】
- セクション構成: Hero / Features / Pricing / CTA / Footer
- レスポンシブ: モバイル（375px）/ タブレット（768px）/ デスクトップ（1440px）
- アニメーション: スクロール連動フェードイン（Framer Motion）
- パフォーマンス: Lighthouse スコア 90+ を目標

【ファイル構成】
src/components/sections/ 以下に各セクションのコンポーネントを作成し、
src/app/page.tsx でまとめてください。

まず Canva デザインを解析して実装計画を提示してください。
承認後に実装を開始してください。

エージェントはまずデザインを解析して実装計画を提示し、承認を得てからセクションごとに実装を進めます。Antigravity の Planning Mode を活用すると、このような複数ステップのタスクを確実に実行できます。大規模な LP 制作には「Antigravity Planning Mode — 大規模プロジェクトの AI 駆動設計戦略」の設計手法が特に参考になります。

デザイントークンの体系的な管理

Canva デザインが複数ある場合や、ブランドガイドラインを統一したい場合は、デザイントークンとして一元管理する方法が効果的です。

// src/lib/design-tokens.ts — Canva MCP で抽出したデザイントークン
export const tokens = {
  colors: {
    brand: {
      primary: '#2D6CDF',
      primaryDark: '#1E3A5F',
      accent: '#F59E0B',
    },
    neutral: {
      50: '#F8FAFC',
      100: '#F1F5F9',
      900: '#0F172A',
    },
    text: {
      primary: '#1F2937',
      secondary: '#6B7280',
    },
  },
  typography: {
    fontFamily: {
      heading: "'Poppins', sans-serif",
      body: "'Inter', sans-serif",
    },
  },
  spacing: {
    section: '6rem',
    component: '2rem',
  },
  borderRadius: {
    button: '0.75rem',
    card: '1rem',
  },
} as const

このトークンを tailwind.config.ts の extend に組み込むことで、Canva のデザイン値を Tailwind クラスとして利用できます。より複雑な MCP サーバー連携については、「Antigravity × カスタムMCPサーバー構築ガイド — 外部ツール連携をプロダクション品質で実装する」も参照してください。

よくあるトラブルと対処法

Canva MCP が接続できない

Antigravity を再起動して設定が読み込まれているかチェックし、API キーが正しく .env ファイルに設定されているか確認してください。Canva Developers Portal でキーが有効期限内であることも確認します。ターミナルで npx @canva/mcp-server --port 3100 --verbose を実行してエラーログを直接確認する方法も効果的です。

エクスポートした画像の品質が低い

Canva の無料プランでは高解像度エクスポートに制限がある場合があります。SVG 形式を優先的に使用するか、Canva Pro プランへのアップグレードを検討してください。SVG はベクター形式のため、解像度に関係なく常にシャープに表示されます。

フォントが正しく反映されない

Canva で使用したカスタムフォントは、Web フォントとして別途設定が必要です。Google Fonts の場合は next/font で読み込み、ローカルフォントの場合は @font-face で定義します。Antigravity に「使用しているフォントを Web プロジェクトに組み込む方法を教えてください」と質問すると、フォント種別に応じた設定コードを生成してくれます。

まとめ

Canva × Antigravity のワークフローを活用すると、デザインとコード実装の往復コストを大幅に削減できます。Canva MCP で直接デザインデータを取得できるためスクリーンショットが不要になり、カラー・フォント・スペーシングがコードに自動変換されてデザイントークン管理が楽になります。Antigravity のエージェントがセクション単位で実装を進めるためレビューもしやすく、デザインから実装までの時間を大幅に短縮できます。

より高度なデザインシステム連携に興味がある方は「Google Stitch MCP × Antigravity — Vibe Design から実装までを完全自動化するパイプライン」もぜひご覧ください。