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

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

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

Google Stitchの中にデザインルール（トークン）をあらかじめ定義しておくことで、アプリ全体に強固な統一感が生まれ、AIエージェント（GitHub Spec Kit）が記述するReact NativeのCSS/StyleSheetスタイルもプロレベルに磨き上げられます。

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

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

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

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

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

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

避けるべき色：純粋な赤（#FF0000）や純粋な青（#0000FF）など、原色そのままの彩度が高すぎる色。これはチープ（安っぽい）な印象を与えます。
目指すべき色：彩度を少し抑え、明度を調整した調和の取れた色（例：ロイヤルインディゴ、深みのあるエメラルド、温かみのあるスレートグレーなど）。

カラー定義のカテゴリー

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

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

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

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

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

StitchはFigmaで定義された「スタイル」や「変数（Variables）」のインポートに対応しています。 Figmaのカラートークンやフォント設定をインポートすることで、StitchのAIデザインキャンバスが自動的にあなたの既存のデザインシステムに沿った配色やタイポグラフィを選択するようになります。これにより、既存のブランドカラーをそのまま活かしながら、迅速にAIにデザインバリエーションを作らせることができます。

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）の設計

現代のモバイルアプリにおいて、ダークモードの対応はほぼ必須です。

Stitchでダークモードを設計する際の重要なルールは、**「背景を純粋な黒（#000000）にしない」**ことです。純粋な黒の背景の上に白い文字を載せると、コントラストが強すぎて目が疲れます。背景には深いスレートグレー（#121212 や #1A1A24 など）を使用し、その上に載せるカード（Surface）を少しだけ明るいグレーにすることで、美しい奥行きを表現できます。

5. 多彩なインポート・エクスポート連携（.fig, Netlify, Lovable, Bolt）

Stitchで策定したスタイルやコンポーネントデザインは、他の多くのデザイン・開発プラットフォームとスムーズに連携（インポート・エクスポート）することができます。

.figファイルのインポート/エクスポート：Figmaのネイティブ保存形式である.figファイルの読み書きに対応しています。Figmaで作り込んだデザインをStitchにインポートしてAIで編集したり、Stitchで生成した配色ガイドをFigmaに戻して保存・共有することがシームレスに実施できます。
Netlifyへのワンクリックデプロイ：Stitch上で動作するHTMLプロトタイプ（Web版）を、ワンクリックで直接Netlifyにパブリッシュ（ホスティング）可能です。チームやテスターに実際のスタイルやカラーの仕上がりをWebリンクで瞬時に配布できます。
LovableやBolt.newへのコード連携：StitchのデザインデータやHTML/CSSコードを、LovableやBolt.newといった外部の自律型コーディングプラットフォームにエクスポートして連携させることができます。本サイト推奨の「GitHub Spec Kit」によるローカル開発だけでなく、クラウド型のAI開発ツールへ素早く連携できるため、用途に応じたマルチプラットフォーム開発が可能です。

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

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

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

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

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

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

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