03. Stitchで配色とUI部品を決める

アプリの画面レイアウトと画面遷移（導線）が決定したら、次はアプリの「表情」となるデザインシステム（配色・タイポグラフィ・共通UI部品のスタイル）を決定します。

本サイトが提唱する「ユーザーを感動させるプレミアムなデザイン」は、なんとなく選んだ色やブラウザ標準のUIパーツからは生まれません。

Google Stitchの中にデザインルール（トークン）をあらかじめ定義しておくことで、アプリ全体に強固な統一感が生まれ、コーディング編で Spec Kit に渡したときに生成されるReact NativeのStyleSheetスタイルも、プロレベルに磨き上げられます。

この記事のサブコンテンツ

この記事では、Stitchを活用して配色と共通UI部品のルールを決める方法を以下の構成で解説します。

プレミアム感を醸し出すカラーシステムの構築（Figma変数インポート含む）
タイポグラフィと文字情報の優先順位設計
共通UI部品（ボタン・カード・入力フォーム）のスタイル定義
インタラクション（タップ・アニメーション）とダークモード
外部ツールへデザインを渡す
スタイルシステム構築のチェックリスト
まとめと次のステップ

1. プレミアム感を醸し出すカラーシステムの構築

配色はアプリの第一印象や読みやすさに影響します。Stitchでは、アプリ全体のカラーパレット（デザイントークン）を事前に定義します。

避けるべき色と目指すべき色

避けるべき色：純粋な赤（#FF0000）や純粋な青（#0000FF）など、原色そのままの彩度が高すぎる色。本ガイドの落ち着いた作例では控えめに使います。原色そのものが悪いわけではなく、ブランドや用途に合わせて選びます。
目指すべき色：彩度を少し抑え、明度を調整した調和の取れた色（例：ロイヤルインディゴ、深みのあるエメラルド、温かみのあるスレートグレーなど）。

カラー定義のカテゴリー

Stitchで定義するべき主要なカラーは以下の4系統です。

Primary（プライマリー）：アプリの最も重要なブランドカラー（例：進捗完了時のチェックマークや、メインボタン）。
Secondary/Surface（セカンダリー/サーフェス）：カードの背景や枠線、非アクティブな状態を示す控えめなカラー。
Background（背景）：画面全体のベースとなる色（ライトモード時の薄いグレーや、ダークモード時の深いスレート）。
Status（ステータス）：警告（Warning）やエラー（Danger）、成功（Success）を伝えるための機能的なカラー。

Stitchでのカラー定義プロンプト例

「この習慣トラッカーのメインテーマを『インナーピースと習慣化』に設定します。このテーマに合った、落ち着いたフォレストグリーン（Primary）と、目に優しい温かいベージュ系（Background）、カード用のオフホワイト（Surface）の3色をベースにした、プレミアムなカラーパレットを定義してください。」

Figma変数・スタイルのインポートと同期

既存のFigmaデザインがある場合は、カラートークン・フォント・余白を DESIGN.md に書き出し、Stitchの参考情報として渡します。Figma変数の自動インポートや継続的な同期については、利用する連携機能が何を引き継げるか確認してください。

2. タイポグラフィと文字情報の優先順位設計

タイポグラフィ（文字の書体・サイズ・太さ）は、画面の「情報の読みやすさ（リーダビリティ）」を決定します。

Stitchでは、文字サイズ（fontSize）や行高（lineHeight）、太さ（fontWeight）の階層（スケール）を定義します。

モバイル向け標準スケール案

Title (大見出し): 24px / Bold (主要な数値、ダッシュボードの挨拶)
Subtitle (中見出し): 18px / Semi-Bold (各セクションのタイトル、カード内の習慣名)
Body (本文): 14px / Medium (説明文、設定の項目名)
Caption (注釈): 12px / Regular (日付、小さなカウンター、ヒント情報)

文字の周りの余白（letterSpacing：文字間）を少しだけ広げる（iOS/Androidシステムフォントの場合 0.5px〜1px 程度）だけで、UI全体の洗練度が劇的に向上します。

3. 共通UI部品（ボタン・カード・入力フォーム）のスタイル定義

Stitchの画面案の中の要素を「コンポーネント（共通部品）」として再利用できるようにスタイルを共通化します。

ボタン (Buttons)

Primary Button: 背景がブランドカラーで塗られ、文字が白。角丸は borderRadius: 12 以上の大きめに設定し、角に丸みを持たせてモダンにします。
Secondary Button: 背景は透明か薄いグレーで、枠線（borderWidth: 1）のみがあるボタン。
FAB (Floating Action Button): 画面の右下に浮いている丸いボタン。わずかなドロップシャドウを効かせて、画面から浮き上がっているように見せます。

カード (Cards)

習慣リストやグラフを表示するための囲み。背景はSurfaceカラーを用い、境界線を目立たせる代わりに、非常に繊細な影（ドロップシャドウ：shadowOpacity: 0.05 程度）で立体感を作ります。

4. インタラクション（タップ・アニメーション）とダークモード

インタラクション（操作時のフィードバック）

スマホアプリは、タップした瞬間にボタンが「へこむ」「半透明になる」などの反応（フィードバック）がないと、ユーザーは「本当に押せたのか？」と不安になります。

Stitchでは、ボタンやリストをタップした際の「アクティブ状態」のビジュアル変化（例：透明度が 0.7 に変化する、またはわずかに縮小するアニメーション）を定義しておきます。

ダークモード（Dark Mode）の設計

ダークモードは利用場面に応じて検討します。対応する場合は、ライト・ダークそれぞれで文字や操作状態を読み取れることを確認します。

この作例では、背景を深いグレー、カードを少し明るいグレーにして面の階層を表します。純粋な黒を禁止する共通ルールはありません。色だけで状態を伝えず、文字・形・アイコンも使い、コントラストとOSの文字サイズ拡大を確認してください。

5. 外部ツールへデザインを渡す

外部ツールへ渡す際は、利用中のStitchのエクスポートメニューで、対応する形式と連携先を確認してください。.fig の往復、Figma変数の完全な保持、特定サービスへのワンクリック公開は、本ガイドの実装に必要な前提ではありません。

本ガイドでは、画面案・画像・DESIGN.md を開発エージェントへ渡し、Expo側でReact Nativeとして実装します。MCPやSDKで連携する場合も、渡されるデータと書き込み権限を確認します。GoogleのStitch紹介を参照してください。

6. スタイルシステム構築のチェックリスト

Stitchでのスタイルシステム策定が終わったら、次のポイントを確認してください。

カラーコントラスト：背景色と文字色のコントラスト比が十分で、屋外や暗い場所でも視認できるか？
サイズの一貫性：ボタンの高さ（Height）や余白（Padding）のルールが、全画面で共通化されているか？
角丸（Border Radius）の調和：カードの角丸（16px）とボタンの角丸（12px）のように、アプリ全体で丸みのトーンが揃っているか？
影の表現：影が濃すぎて不自然になっていないか？（スマホアプリのプレミアム感は「ごく薄い影」から生まれます）

7. まとめと次のステップ

この記事では、Google Stitchを使ってアプリのカラーパレット、タイポグラフィ、および共通UI部品（ボタン、カード）のプレミアムなスタイルガイドを作る方法を解説しました。

デザインルールが定義できたら、いよいよ「このデザインをExpo (React Native) コードで組み立てるにはどう分割すればいいか」という、開発の一歩手前の設計作業に移ります。

次の記事では、StitchデザインをReact Nativeのコード構成にマッピングする「04. StitchのデザインをExpoで作れる形に分解する」に進みましょう。