react-native-design

React Native デザイン

何も指示しなければ、モデルは毎回同じアプリをデザインします。システムフォント、青いアクセントカラー1色、同じカードを縦に並べ、読み込み中はスピナーを表示します。このスキルを使うと、エージェントはまずプロジェクトを読み込み、このアプリに合った方向性を決め、トークンを使って構築し、React Native が実際に適用するルールに従って仕上げられます。

典型的な入力：テーマが必要なアプリのアイデア、パレット全体が必要なブランドカラー、デザインする画面、または「なんとなく違和感がある」既存の UI。

このスキルの構成

このファイルには手順を記載しています。詳細は参照ファイルにあります。タスクに必要なファイルだけを読み込んでください。

タスク	読み込むファイル
色やテーマの作成、拡張、監査	references/color-system.md
プロジェクトのスタックに合わせたスタイルやテーマファイルの作成	references/styling-stacks.md
特定の画面、そのナビゲーションやレイアウトのデザイン	references/screen-patterns.md
方向性、フォント、モーション、アイコン、ドメインパターンの選定	references/aesthetics.md
シャドウ、ぼかし、画像、キーボード、セーフエリア、リストに関する作業	references/platform-constraints.md

scripts/contrast.mjs は WCAG コントラスト比を測定します（Node、依存関係なし）。追加または変更するテキストと背景のペアごとに実行してください。

node scripts/contrast.mjs "rgba(255,255,255,0.6)" "#1C1C1E"

パスはこのスキルのフォルダーからの相対パスです。

---

ステップ 1 — デザインの前にプロジェクトを読む

技術的な基本情報

1. ランタイム — Expo か bare React Native かを確認します。package.json、app.json / app.config.*、エントリーファイルを確認してください。
2. React Native のバージョン — 0.82 以降は New Architecture のみで動作するため、boxShadow、filter、display: 'contents' を利用できます。古いプロジェクトでは、使用前に利用可能か確認してください。
3. コア UI ライブラリ — react-native-safe-area-context、react-native-reanimated、react-native-gesture-handler、expo-router / @react-navigation/*、expo-blur、expo-image。
4. スタイリングスタック — StyleSheet、NativeWind、styled-components、または Restyle（styling-stacks.md を参照）。

既存のスタックと規約に従ってください。ユーザーから求められない限り、新しいスタイリングシステムやテーマモデルを導入しないでください。

新規プロジェクトか、既存プロジェクトか？

新規プロジェクト（テーマも画面もない）：自由に設計できます。コンポーネントを書く前に、色、文字のスケール、スペーシング単位を定義してください（ワークフロー A）。

既存プロジェクト：テーマファイルと既存の画面を確認してから、次の問いを考えてください。既存のデザインシステムだけを使った場合、変更は目に見えるものになるでしょうか。それとも、単なるノイズでしょうか？

• デザインシステムに幅がある（サーフェスのレイヤー、本格的な文字のスケール、スペーシンググリッド）：その範囲内で作業します。
• デザインシステムがボトルネックになっている（単調なパレット、文字サイズが1種類、サーフェスに奥行きがない）：作業を止めて確認します。

「目に見える改善を加えるには、［ディスプレイフォントの追加／サーフェスのエレベーションの追加／パレットの拡張］が必要です。どちらにしますか？ A）既存のものだけで作業する（変更は小さく、安全です） B）まずデザインシステムへの追加を提案する（コードに手を加える前に提示します）」

デザインシステムを黙って拡張してはいけません。ピクセル単位の変更にしかならない場合に、黙って既存の範囲内だけで作業してはいけません。

---

Step 2 — 方向性を決める

コードを書く前に、以下の質問に答えてください（自分で推測するか、ユーザーに尋ねます）。

1. 目的と対象ユーザー — 画面が解決する課題、利用する人、利用状況（通勤中、ジム、デスクなど）、1回の利用時間が数秒か数分か。
2. 1つの美的方向性 — シネマティック、エディトリアル、ラグジュアリー、ブルータリズム、遊び心のあるスタイル、実用主義、オーガニック、ネオ・ブルータリズム（aesthetics.md の表を参照）。「クリーンでモダン」は方向性ではありません。
3. テーマ — ダーク、ライト、または両方。両方にする場合は、役割に対応したセマンティックトークンが必要です。
4. 記憶に残る唯一の決断 — ユーザーが最初に気づくこと、このアプリを最も近い競合アプリ10個と差別化するもの。

ミニマルでもマキシマルでも構いません。うまくいかないのは、方向性を中途半端に適用することです。

---

Step 3 — 適切なワークフローを実行する

A. テーマを一から作成する

1. カテゴリ、対象ユーザー、方向性を推測するか、尋ねます。
2. 感情的なトーンから基調色を選び、次に配色を選びます（デフォルトはスプリット・コンプリメンタリー）。color-system.md を参照してください。
3. トークンの構造をすべて構築します。サーフェス、アクセント（アクセント上の色を含む）、テキスト、ボーダー、セマンティックカラーを含めます。
4. スクリプトを使って、すべてのテキストとサーフェスの組み合わせを測定します。 先に進む前に、失敗した組み合わせをすべて修正します。
5. フォント：個性のあるディスプレイフォントを1つ、読みやすい本文用フォントを1つ選びます（@expo-google-fonts/*）。フォントファミリーは2種類までです。
6. 文字サイズのスケール（ディスプレイ、タイトル、見出し、本文、キャプション、ラベル）、スペーシンググリッド（4または8）、角丸のセット（none、sm、md、lg、full）。
7. 出力：完全なテーマファイル、型定義、フォント読み込みコード。

B. 既存のテーマを改善する

1. テーマ関連のファイル（カラー、タイポグラフィ、スペーシング、コンポーネント）をすべて読みます。
2. 監査します。サーフェスの段階は視覚的に区別できますか？ すべてのサーフェス上でアクセントは読みやすいですか？ セマンティックカラーはアクセントと区別できますか？ 文字サイズのスケールには十分な幅がありますか（最小と最大の比率が3:1以上）？ スペーシングはグリッドに沿っていますか？ コントラストは目視ではなく、測定されていますか？
3. 視覚的な影響が大きい問題を上位3つ選びます。
4. 修正案を、測定した比率とともに修正前 → 修正後の16進数カラー値で提示し、それぞれに理由を1行添えます。

C. ユーザーのカラーからテーマを作成する

1. 色をHSLに変換します。色相ファミリー、彩度、明度を確認します。
2. 最も彩度が高い、または最も特徴的な色をアクセントにします。
3. 不足している役割の色を生成し、それらを中心にサーフェスの階層を構成します。
4. すべての組み合わせを測定します。完全なテーマを出力し、ユーザーが指定した色を明記します。

D. 特定のビューをデザインする

1. 既存のテーマとコンポーネントを確認し、現在あるものを活用します。
2. screen-patterns.md からパターンを選びます。
3. テーマトークンのみを使用し、システムにない色は追加しません。
4. すべての状態をデザインします（下記参照）。
5. 出力：ビューの完全なコードと、プロジェクトで分割されている場合はスタイルファイルおよび型定義ファイル。

---

厳守事項

いずれもレンダリングまたはアクセシビリティを損ないます。修正方法を含む全リストは platform-constraints.md にあります。

• ❌ background: 'linear-gradient(...)' — 無視されます。expo-linear-gradient を使用してください。
• ❌ display: 'grid' または 'block'、CSS疑似セレクター（:hover、::before）、px / em / rem 単位。
• ❌ 大文字で始まる名前付きカラー（'Red'） — 小文字のみサポートされています。
• ❌ サイズを指定していないネットワーク画像 — 0×0で表示されます。
• ❌ react-native のコア SafeAreaView — 非推奨であり、Androidにも対応していません。react-native-safe-area-context を使用してください。
• ❌ エッジ・ツー・エッジ表示への対応漏れ — Android 16ではコンテンツがシステムバーの背後に描画されます。インセットで余白を設定してください。
• ❌ Androidで blurMethod を指定せずに BlurView を使う — ぼかしではなく、半透明のビューとして表示されます。
• ❌ 親の範囲外に配置されたタップ可能な要素 — Androidではタッチを受け付けません。
• ❌ カスタムフォントでの fontWeight: 'bold' — 正確なウェイトのフォントファイルを読み込んで設定してください。
• ❌ コントラストの目視判断 — スクリプトで測定してください。
• ❌ トークンではなく、コンポーネントに色をハードコードすること。
• ❌ タップしやすい位置に破壊的な操作を配置すること、または確認なしで実行できるようにすること。
• ❌ フォントファミリーを3種類以上使うこと。

すべての画面に状態があります

次の状態をすべて設計するまでは、画面の設計は完了していません。

状態	デザイン
読み込み中（初回）	実際のコンテンツに合わせた形のスケルトンを表示し、シマーアニメーションを付けます。中央にスピナーを置くのは避けます
読み込み中（更新時）	プルして更新する方式かインラインインジケーターを使い、コンテンツは表示したままにします
空（初回利用時）	アイコンまたはイラスト＋説明＋メインCTAを表示します
空（削除後）	状況に合わせた文言にします（「お気に入りはまだありません」など）
エラー（ネットワーク）	わかりやすいメッセージと再試行手段を表示します。スタックトレースは表示しません
エラー（入力検証）	フィールドごとにインラインで、アイコン＋テキストを表示します
成功	トーストまたはアニメーションを表示し、2〜4秒で消します
オフライン	バナーを表示し、キャッシュ済みのコンテンツは引き続き表示します

スケルトンはコンテンツの形に合わせます。暗い背景では rgba(255,255,255, 0.05-0.08)、明るい背景では rgba(0,0,0, 0.04-0.08) を使用します。約2秒経過したら、代わりに部分的なコンテンツまたは進行状況を表示します。

---

スタイルファイルを安全に編集する

スタイルを編集するときによく起きる失敗は、宣言の重複です。新しいブロックを挿入しても、古いブロックが残ったままになります。

1. 編集前にファイル全体を読み、置き換えるブロックを正確に見つけます。
2. export const から閉じるバッククォートまたは波かっこまで、ブロック全体を置き換えます。部分一致での置き換えは避けます。
3. コンポーネントごとにバージョンは1つだけにします。新しいブロックを先頭に追加して、古いブロックを下に残してはいけません。
4. 編集後にエラーを確認します。 Cannot redeclare block-scoped variable は重複を意味します。古い方を削除してください。

置き換え対象が見つからない場合は、ファイルをもう一度読み、リテラルテキストで再試行します。

---

出力要件

生成するコードは、次の要件を満たす必要があります。

• そのまま実行できること。プレースホルダー、// TODO、不足しているインポートがないこと。
• プロジェクトで既に使われているスタイル設定方法を使用すること。
• セーフエリア、エッジツーエッジ、該当するiOS／Androidの違いに対応すること。
• フォントを導入する場合はフォント読み込みコードを含め、テーマを作成する場合はトークンファイル全体を含めること。
• プロジェクトで意図的に無効にしている場合を除き、フォントスケーリングに対応すること。
• 幅375pt（iPhone SE／13 mini）と約430pt（Pro Max）の両方で適切に表示できること。

提出前のチェックリスト

• すべてのテキストと背景の組み合わせを scripts/contrast.mjs で測定し、サイズに応じたAA基準を満たしている
• すべての色にトークンを使用している。コンポーネント内に16進数カラーがない
• タッチターゲットが44pt以上（iOS）／48dp以上（Android）
• 余白が基本グリッドに沿っている
• 読み込み中、空、エラーの各状態が設計されている
• セーフエリアとエッジツーエッジに対応している
• Web専用のCSSがない
• 3段階以上の異なるタイポグラフィレベルが視覚的に確認できる
• ユーザーがひと目で気づく工夫が1つある