Google Stitch×Geminiでストア用UIモックアップを生成する

取り組みの背景

アプリ開発において、App StoreやGoogle Play Store用のスクリーンショットやモックアップ制作は、デザイナーの負担が大きい作業です。ここでGoogle StitchとGeminiを組み合わせることで、ストア提出用のUIモックアップを効率的に生成する実践的な方法をご紹介します。

Google StitchはUIコンポーネント管理ツール、GeminiはGoogle最新のAIモデルです。この2つを連携させることで、デザイン案から実装済みのモックアップまで、迅速なプロトタイピングが実現できます。

Google Stitch × Geminiの基本概念

Stitchについて

Google StitchはUIコンポーネントライブラリ管理とデザインシステム構築を支援するツールです。事前に定義されたボタン・入力フォーム・ナビゲーションバーなどのコンポーネントを組み合わせて、統一性のあるUIを素早く組み立てられます。

Geminiとの組み合わせ

Geminiはテキストと画像の両方を理解できるマルチモーダルAIです。Stitchで設計したコンポーネントを画像として送信し、「App Store用スクリーンショットを生成してほしい」と指示すれば、Geminiが現在のUI設計を理解した上で、改善案や複数バリエーションを生成できます。

この循環によって、手作業による試行錯誤を大幅に削減でき、イテレーションスピードが飛躍的に向上します。

Stitchのセットアップ

1. Stitchプロジェクトの初期化

Stitchをまだ導入していない場合は、公式ドキュメントに従ってプロジェクトを初期化してください。基本的にはNode.js環境で以下を実行します。

# Stitchプロジェクト初期化
npx @google-stitch/cli init my-app-design
 
# 依存パッケージのインストール
cd my-app-design
npm install

2. アプリ向けコンポーネント設計

App StoreやGoogle Play用のモックアップには、実際のアプリで使用されるコンポーネントを反映させる点が肝心です。Stitchの設定ファイル（stitch.config.json）で、以下の項目を定義します。

カラーパレット: ブランドカラー・背景色・テキストカラー
タイポグラフィ: 見出し・本文・キャプションのフォントサイズ・ウェイト
基本コンポーネント: ボタン・カード・入力フォーム・モーダル

3. テンプレート作成

ストア提出用の標準的なスクリーンレイアウト（ホーム画面・ディテール画面・設定画面など）をテンプレートとして保存しておくと、後のGemini連携時に効率が良くなります。

Geminiを使用したUIモックアップの生成

プロンプト設計

Geminiへの指示が明確であるほど、希望に沿ったモックアップが生成されます。以下のテンプレートを参考に、プロンプトを作成してください。

あなたはUI/UXデザイナーです。
添付されたStitchコンポーネント図を参考に、以下の要件でApp Store向けスクリーンショットを3パターン生成してください。

【要件】
- アプリ名: MyApp
- カテゴリ: ファイナンス・ツール
- ターゲット: 25～50代の個人投資家
- ストアガイドライン: 1242×2208px（iPhone）
- 表示要素: アプリアイコン・タイトル・短い説明文・スクリーンショット3枚

【デザイン指針】
- 信頼感を醸成する深い青を基調に
- 数値データはグラフで視覚化
- CTA（Call-to-Action）は明確に配置
- 既存Stitchコンポーネントとの統一性を保つ

【出力形式】
各パターンについて、以下をJSON形式で説明してください。
- パターン名
- 狙う訴求ポイント
- 使用コンポーネント一覧
- カラースキーム詳細

マルチターン対話による改善

1回のプロンプトで完璧なモックアップが得られない場合、Geminiとの対話を通じて段階的に改善します。

初回生成:

「上記のモックアップを生成してください」

フィードバック1:

「パターン1は良いですが、パターン2のCTAボタンが小さすぎます。iPhone SE（375×812px）でも見やすいサイズにしてください」

フィードバック2:

「グラフの配置が変わりました。素晴らしい。最後に、このモックアップで使用されたすべてのStitchコンポーネントをリストアップしてください」

このように対話を重ねることで、要件に合致したモックアップへと収束していきます。

エクスポートとストア提出準備

Stitchから画像エクスポート

完成したUIモックアップをStitchから画像形式でエクスポートします。App StoreとGoogle Playの推奨フォーマットは以下の通りです。

App Store（iOS）:

解像度: 1242×2208px（6.7インチ用）、1125×2436px（6.1インチ用）
フォーマット: PNG または JPEG
最大ファイルサイズ: 5MB

Google Play（Android）:

解像度: 1080×1920px（縦）
フォーマット: PNG または JPEG
最大ファイルサイズ: 8MB

Stitchのエクスポート機能で、これらの仕様に合わせたファイル生成が可能です。

テキストオーバーレイの追加

ストア掲載用のスクリーンショットには、機能説明のテキストが必要な場合があります。Geminiの出力をもとに、Figmaやその他のデザインツールでテキストをオーバーレイしましょう。

以下のポイントを押さえることで、ユーザーの目引き効果が高まります。

見出し: 最も大切な機能を2～3語で
説明文: 40文字以内で機能の利点を説明
フォント: アプリ内で使用しているものと同じ（統一性）
カラー: 背景とのコントラスト比4.5以上（アクセシビリティ基準）

手作業設計との比較

従来の方法（手作業）

メリット:

クリエイティブな自由度が高い
ブランド独自の表現が容易

デメリット:

デザイナーの工数が膨大
イテレーション回数が限定される
デバイス別の対応に時間がかかる

Stitch × Gemini方式