stitch-ued-guide

Stitch UED ガイド

これはアクションスキルではなく、リファレンスガイドです。次のような場合に使用してください。

• Stitch のプロンプトに使用する具体的なデザイン用語（マソンリー、グラスモーフィズム、画面分割など）が必要な場合
• レイアウトパターンやビジュアルスタイルの説明方法がわからない場合
• 色とテーマの構成を一貫して適用したい場合
• プロンプト作成で、デバイス固有の制約を確認する必要がある場合

プロンプトエンジニアリング戦略

最も効果的な Stitch プロンプトは、次の4部構成に従います。

[Context & Style] + [Layout Structure] + [Component Details] + [Content & Data]

コンテキストとスタイル：

「ジムに通う人向けのモバイルフィットネスアプリ。ネオングリーンをアクセントにしたダークモード。サイバーパンクな美学。角丸。」

レイアウト構成：

「下部ナビゲーションバー（ホーム、ワークアウト、進捗、プロフィール）。スクロール可能なメインフィード。挨拶を表示する固定トップバー。」

コンポーネントの詳細：

「グラデーションの枠線、サムネイル、タイトル、所要時間バッジ、「開始」ピルボタンを備えたワークアウトカード。」

コンテンツとデータ：

「サンプルデータ：「上半身を鍛える」（45分）、「体幹を鍛える」（20分）、「朝のランニング」（30分、今日完了）。」

Stitch モデルの選択

モデル	使用する場面
GEMINI_3_1_PRO	高忠実度のデザイン、複雑なレイアウト、品質が重視される場合 — 推奨のデフォルト
GEMINI_3_FLASH	迅速な反復、ワイヤーフレーム、すばやい検討、速度が重視される場合
GEMINI_3_PRO	非推奨 — 引き続き動作しますが、削除される予定です。代わりに GEMINI_3_1_PRO を使用してください

カラーバリアントのリファレンス（colorVariant）

Stitch が primaryColor からカラーパレット全体をどのように導き出すかを制御します。

colorVariant	視覚効果	最適な用途
MONOCHROME	単色の、エディトリアルな印象	高級感、ミニマル、テキスト中心、ポートフォリオ
NEUTRAL	控えめでプロフェッショナル	企業、エンタープライズ、医療
TONAL_SPOT	ニュートラルなベースにバランスよくアクセントカラーを配置	SaaS、生産性、ダッシュボード
VIBRANT	大胆でエネルギッシュな色	消費者向けアプリ、ソーシャル、食品
EXPRESSIVE	多色でダイナミック	クリエイティブ、ゲーム、エンターテインメント
FIDELITY	ブランドカラーを正確に再現	ブランド重視、マーケティング、ランディングページ
CONTENT	コンテンツに合わせてパレットを調整	メディア、エディトリアル、写真中心
RAINBOW	全スペクトル	子ども向けアプリ、イベント、遊び心のあるデザイン
FRUIT_SALAD	温かみのある多色使い	食品、ライフスタイル、ウェルネス

余白スケールのリファレンス（spacingScale）

spacingScale	効果	最適な用途
0	余白を最小限に抑えた、非常に密度の高い表示	管理パネル、データテーブル、ターミナル風の UI
1	コンパクトで、空間を効率的に使用	ダッシュボード、情報量の多いモバイルリスト、SaaS ツール
2	標準的で、適度な余白	一般的なアプリ、消費者向け製品
3	ゆとりがあり、余白を広く確保	ランディングページ、マーケティング、ポートフォリオ、高級感のあるデザイン

DesignTheme API フィールドリファレンス

get_project が返すすべての DesignTheme フィールドのクイックリファレンス：

フィールド	型	説明
colorMode	LIGHT / DARK	ベースのテーマモード
customColor	hex 文字列	パレット生成のシードカラー
colorVariant	enum（9 種類）	シードからパレットを導出する方法
headlineFont	フォント enum（68 種類）	ディスプレイ／見出し用書体
bodyFont	フォント enum	本文用書体
labelFont	フォント enum	ラベル、キャプション、メタデータ用書体
font	フォント enum	非推奨 — headlineFont/bodyFont/labelFont を使用してください
roundness	ROUND_FOUR/EIGHT/TWELVE/FULL（ROUND_TWO も存在しますが、非推奨／未使用です）	角の丸みのプリセット
spacingScale	整数 0-3	レイアウトの密度
spacing	object	オプション。間隔トークン名 → CSS 値のマップ（例：{"sm": "8px"}）
typography	object	オプション。タイポグラフィレベル名（例：h1、body）→ タイポグラフィトークン（fontFamily、fontSize、fontWeight、letterSpacing、lineHeight）のマップ
namedColors	object（40 以上のトークン）	セマンティックカラーの完全なマップ（Material 3）
designMd	string	自動生成されたデザインシステムの Markdown
description	string	美的特徴の簡潔な説明
overridePrimaryColor	hex	明示的なプライマリカラーの上書き
overrideSecondaryColor	hex	明示的なセカンダリカラーの上書き
overrideTertiaryColor	hex	明示的なターシャリカラーの上書き
overrideNeutralColor	hex	明示的なニュートラルベースカラーの上書き
backgroundLight	hex	ライトモードの背景
backgroundDark	hex	ダークモードの背景

レイアウトパターン

モバイルパターン

• 縦スクロールフィード — コンテンツカードを無限スクロールで表示し、固定ヘッダーと下部ナビゲーションを配置
• タブナビゲーション — セグメントコントロールまたはタブバーを使い、コンテンツをインラインで切り替え
• ボトムシート — セカンダリコンテンツやアクション用の、下からスライドして表示されるパネル
• 全画面フォーム — 単一カラム、大きなタッチターゲット、固定送信ボタン
• 詳細 → アクション — 上部にヒーローコンテンツ、その下に説明、下部に固定 CTA

デスクトップパターン

• 左サイドバー＋メイン — 常時表示のサイドナビゲーション（200-280px）、メインコンテンツ領域、トップバー
• トップナビ＋コンテンツ — 水平ナビゲーションバー、その下にセクション分けされたメインコンテンツ
• 分割画面 — 2 つの均等な領域（フォーム／プレビュー、登録／製品スクリーンショット）
• ダッシュボードグリッド — KPI ストリップ、チャート、テーブル、ウィジェットをレスポンシブグリッドに配置
• ランディングページ — 全幅のヒーロー、機能セクション、料金、フッター CTA

汎用パターン

• メイソンリーグリッド — 高さの異なるカードを並べた、Pinterest 風レイアウト
• 弁当箱グリッド — サイズの異なる非対称のボックスに、それぞれ異なるコンテンツを配置
• ヒーローセクション — 背景画像、見出し、CTA を備えた全幅／全高のセクション
• カードグリッド — レスポンシブなカラムグリッドに均一なカードを配置

ビジュアルスタイル

スタイル	説明	用途
フラット	影を使わず、大胆な色とシンプルな形状	モバイルアプリ、イラスト
マテリアル	高さのあるカード、明確な階層、リップルエフェクト	Android スタイルのアプリ
ニューモーフィズム	同系色の背景に浮き出た要素、柔らかな影	ラグジュアリー、控えめな UI
グラスモーフィズム	すりガラス効果、ぼかし＋透明度＋境界線	モダンな SaaS、オーバーレイ
ブルータリズム	飾らず、高コントラストで、意図的に粗く、グリッドを崩すデザイン	エディトリアル、大胆なブランド
ミニマリズム	最大限の余白、単一のアクセントカラー、タイポグラフィを重視	ポートフォリオ、ランディングページ
サイバーパンク	ダークな背景、ネオンのアクセント、グリッチ要素、等幅フォント	ゲーム、テクノロジー、ダークモード

カラースキームの構成式

プロンプトで一貫性のあるプロフェッショナルなカラーパレットを指定するには：

[Domain/mood description] + [Background hex] + [Primary hex] + [Secondary hex] + [Text hex] + [Aesthetic mood]

例：

「モダンな SaaS 生産性アプリ。背景は Slate-50 (#F8FAFC)。プライマリカラーは Indigo (#6366F1)。セカンダリカラーは Violet (#8B5CF6)。テキストは Zinc-900 (#18181B)。すっきりと整理された、プロフェッショナルなデザイン。」

ダークモードの例：

「高級感のあるダークなダッシュボード。背景は Zinc-900 (#18181B)。ダーク背景でのプライマリカラーは Indigo-400 (#818CF8)。カードの背景は Zinc-800 (#27272A)。テキストは Zinc-100 (#F4F4F5)。集中しやすく、コントラストが高い、開発者に優しいデザイン。」

デバイスのガイドライン

デバイス	寸法	主な制約
モバイル	幅約375px	下部ナビゲーション、親指で操作しやすいタップ領域（最小44px）、1列レイアウト、大きめの文字
デスクトップ	幅約1440px	複数列レイアウト、サイドバーナビゲーション、情報量の多いデータテーブル、ホバー操作
タブレット	約768〜1024px	ハイブリッド：2列グリッド、折りたたみ可能なサイドバー、タッチ操作に適しつつ、より広いスペース
デバイス非依存	可変	レスポンシブ／可変レイアウト — 特定のデバイスに依存せず、ビューポートに適応

プロンプトにおけるアクセシビリティ

Stitch がアクセシブルな出力を生成できるよう、プロンプトに次のフレーズを含めてください：

• 「コントラストの高いテキスト、WCAG AA 準拠の色」
• 「タッチ操作に適したタップ領域、高さは最小44px」
• 「明確な視覚的階層、見出しは十分に大きく」
• 「テキストと背景の色に十分なコントラスト」

クイックリファレンス — Stitch のプロンプトで使う UI コンポーネント名

正確な名称を使ってください（曖昧な説明では結果の質が下がります）：

• 「フローティングアクションボタン（FAB）」。「角にあるボタン」ではなく
• 「セグメントコントロール」。「トグルグループ」ではなく
• 「ボトムシート」。「下から出てくるポップアップ」ではなく
• 「スケルトンローダー」。「読み込み中のプレースホルダー」ではなく
• 「スナックバー」。「画面下部の通知」ではなく
• 「パンくずリスト」。「ナビゲーションパス」ではなく
• 「ステッパー／ウィザード」。「複数ステップのフォームインジケーター」ではなく
• 「列を並べ替えられるデータテーブル」。「データのリスト」ではなく
• 「オートコンプリート入力欄」。「候補付き検索」ではなく

関連スキル

• stitch-ui-design-spec-generator — このガイドで説明しやすくなる、構造化された JSON を生成します
• stitch-ui-prompt-architect — この語彙を使って、最終的な Stitch プロンプトを作成します