App Store や Google Play へのアプリ配信では、複数のスクリーンショット、アイコン、プロモーション画像といった多くのアセットが必要です。これらを手作業で制作・管理するのは非常に時間がかかります。Antigravity を中心に Stitch・Figma・MCP を統合して、効率的でスケーラブルなストアアセット制作環境を構築する方法を順を追って整理していきます。
統合ワークスペースが必要な理由
デジタル製品の開発では、多くのチームが以下のような課題に直面しています：
- ツール間の断絶: デザインツール、アセット管理、自動生成ツールがそれぞれ独立しており、データの二重管理が発生
- 手作業の多さ: スクリーンショットの撮影、リサイズ、テキスト追加などが手動で行われる
- バージョン管理の混乱: どのアセットがどのバージョンに対応しているか、どれが最新か不明確
Antigravity（AI画像生成・編集エンジン）に Stitch（UI 自動抽出）と Figma（デザイン統合）、MCP（コンテキストプロトコル）を組み合わせることで、これらの課題を一気に解決できます。
Antigravity + Stitch + Figma + MCP の統合構成
統合ワークスペースの基本構成は以下の通りです：
┌─────────────────────────────────────────────┐
│ Figma（デザイン・定義） │
│ ↓ 自動エクスポート │
├─────────────────────────────────────────────┤
│ Stitch（UI要素の自動抽出） │
│ ↓ メタデータ・スタイル情報 │
├─────────────────────────────────────────────┤
│ MCP Store Guide（アセット仕様書） │
│ ↓ プラットフォーム別要件（サイズ・形式） │
├─────────────────────────────────────────────┤
│ Antigravity（AI編集・生成・エクスポート） │
│ ↓ 完成済みアセット │
└─────────────────────────────────────────────┘
このフローによって、Figma で設計→Stitch で自動抽出→Antigravity で AI 編集・生成→各プラットフォーム向けに自動エクスポート、という一連のプロセスがシームレスに機能します。
ステップ 1: Figma との連携設定
最初に Figma をデザインソースとして設定します。
Figma 上でのファイル構成:
- プロトタイプ用フレーム（各画面の UIカンプ）
- コンポーネントライブラリ（再利用可能な UI パーツ）
- アセット用スライス（エクスポート対象マーク）
{
"figma": {
"fileKey": "YOUR_FIGMA_FILE_KEY",
"apiToken": "YOUR_FIGMA_API_TOKEN",
"exportFrames": [
"Onboarding",
"MainFlow",
"Settings"
],
"componentLibrary": "DesignSystem",
"autoSync": true,
"syncInterval": "1h"
}
}このコンフィグをプロジェクトルートに配置することで、Figma の定義が常に最新に保たれます。
ステップ 2: Stitch で UI メタデータを抽出
Stitch は Figma フレームから自動的に UI 構造を解析し、各要素のプロパティ（色・フォント・サイズ・配置）をメタデータとして抽出します。
Stitch の処理フロー:
- Figma コンポーネントを読み込み
- レイアウト・カラー・タイポグラフィを解析
- 構造化メタデータを生成
- JSON スキーマで出力
これにより、Antigravity は単なる画像生成ではなく、スタイル一貫性を保ったアセット生成が可能になります。
詳しい Stitch との統合方法については、「Stitch×Antigravity ワークフロー」をご参照ください。
ステップ 3: MCP Store Guide で仕様書を一元管理
各プラットフォーム（App Store・Google Play）にはアセットの仕様が細かく定められています。MCP Store Guide は、これらの要件を構造化して管理するコンテキスト情報です。
App Store のアセット仕様例（MCP で定義）:
- iPhone スクリーンショット: 1170×2532px（最大 5 枚）
- iPad スクリーンショット: 2048×2732px（最大 5 枚）
- アプリアイコン: 1024×1024px（必須）
- プレビュー動画: 最大 30 秒、H.264 エンコード
MCP を通じてこれらの仕様を一元管理することで、Antigravity はプラットフォーム別に最適なサイズ・形式でアセットを自動生成できます。詳細は「Antigravity MCP Store ガイド」をご覧ください。
ステップ 4: Antigravity で AI 編集・生成
ここが統合ワークスペースの核です。Antigravity は以下の処理を実行します：
- スクリーンショット自動生成: Stitch で抽出したメタデータをもとに、各画面のスクリーンショットを高精度で生成
- テキスト・要素追加: MCP Store Guide の仕様に基づいて、言語別テキスト、バージョン番号などを動的に追加
- AI ローカライゼーション: 複数言語に対応したプロモーション画像を自動生成
- バリエーション生成: A/B テスト用に複数パターンの画像を一括生成
Antigravity API の使用例:
from antigravity import AssetGenerator
# MCP Store Guide から仕様を読み込み
specs = load_mcp_store_guide("app_store_specs")
# Stitch メタデータから画像を生成
generator = AssetGenerator(specs)
screenshots = generator.generate_screenshots(
ui_metadata="./stitch_output.json",
languages=["ja", "en", "zh"],
variants=["light", "dark"]
)
# プラットフォーム別にエクスポート
generator.export_to_platform(
platform="app_store",
output_dir="./app_store_assets",
screenshots=screenshots
)このコードにより、Figma での設計が自動的に複数言語・複数プラットフォーム対応のアセットに変換されます。
ステップ 5: 多くのプラットフォーム向けにエクスポート
統合ワークスペースの最大の利点は、一度の設定で複数プラットフォームに対応できることです。
| プラットフォーム | アイコンサイズ | スクリーンショット | プレビュー動画 |
|---|---|---|---|
| App Store (iOS) | 1024×1024 | 1170×2532 (×5) | 30秒以内 |
| Google Play | 512×512 | 1080×1920 (×8) | 30秒以内 |
| Windows Store | 300×300 | 1920×1080 (×9) | なし |
| Samsung Galaxy Store | 512×512 | 1080×1920 (×6) | 30秒以内 |
Antigravity はこれらの仕様を自動認識し、各プラットフォーム向けに最適なアセットセットを生成します。
実例：ストアアセット制作ワークフロー
あるモバイルアプリ開発チームの実例を見てみましょう。
シナリオ: iOS・Android の両プラットフォーム向けに、日本語・英語の 2 言語で App Store・Google Play 用アセットを制作する必要があります。
従来の方法:
- デザイナーが Figma でデザイン
- 手作業でスクリーンショットを撮影（各言語・各デバイス）
- 画像編集ツール（Photoshop など）でサイズ調整
- テキスト追加（言語別に）
- 各プラットフォームにアップロード → 時間: 2-3 日、エラーのリスク: 高
統合ワークスペースでの方法:
- Figma でデザイン + MCP Store Guide で仕様を定義
- Stitch で UI メタデータ自動抽出
- Antigravity で全言語・全プラットフォーム向けアセットを一括生成
- 自動エクスポート → 時間: 30 分、エラーのリスク: ほぼ 0
次のステップ
本記事で紹介した統合ワークスペースを実装するには：
- 「Figma × Antigravity 統合ガイド」で詳細なセットアップ手順を確認
- 「Stitch × Antigravity ワークフロー」で UI メタデータ抽出を学習
- 「Antigravity MCP Store ガイド」でプラットフォーム別仕様を確認
小規模プロジェクトでも、大規模な複数言語対応プロジェクトでも、この統合ワークスペースはアセット制作の生産性を劇的に向上させます。ぜひお試しください。