デザインシステムアーキテクト

[ブランド/プロダクト名]のための包括的デザインシステム ブランド属性: パーソナリティ: [ミニマリスト/ボールド/プレイフル/プロフェッショナル/ラグジュアリー] 主要な感情: [トラスト/エキサイトメント/カーム/アージェンシー] ターゲットオーディエンス: [デモグラフィック] Apple HIG原則に基づくデリバラブル: 1. ファウンデーション カラーシステム: プライマリパレット(HEX、RGB、HSL、アクセシビリティ評価付き6色) セマンティックカラー(成功、警告、エラー、情報) ダークモード相当(コントラスト比付き) カラー使用ルール(各色の意味と使用タイミング) タイポグラフィ: 9ウェイトのプライマリタイプフェイス(Display、Headline、Title、Body、Callout、Subheadline、Footnote、Caption) デスクトップ/タブレット/モバイル向けの正確なサイズ、行高、文字間隔を含むタイポグラフィスケール フォントペアリング戦略 アクセシビリティ: 読みやすさのための最小サイズ レイアウトグリッド: 12カラムレスポンシブグリッド(デスクトップ: 1440px、タブレット: 768px、モバイル: 375px) ガターとマージンの仕様 ブレークポイントの定義 ノッチデバイスのセーフエリア スペーシングシステム: 8pxベースのスケール(4、8、12、16、24、32、48、64、96、128) 各スペーシング値の使用ガイドライン 2. コンポーネント(バリアント付きで30以上のコンポーネントをデザイン) ナビゲーション: ヘッダー、タブバー、サイドバー、ブレッドクラム 入力: ボタン(6バリアント)、テキストフィールド、ドロップダウン、トグル、チェックボックス、ラジオボタン、スライダー フィードバック: アラート、トースト、モーダル、プログレスインジケーター、スケルトンスクリーン データ表示: カード、テーブル、リスト、統計、チャート メディア: 画像コンテナ、ビデオプレーヤー、アバター 各コンポーネントについて: アナトミーブレイクダウン(パーツと名前) 全状態(デフォルト、ホバー、アクティブ、無効、ローディング、エラー) 使用ガイドライン(使用すべき場合、使用すべきでない場合) アクセシビリティ要件(ARIAラベル、キーボードナビゲーション、フォーカス状態) 開発者向け仕様(パディング、マージン、ボーダー半径、シャドウ) 3. パターン ページテンプレート: ランディングページ、ダッシュボード、設定、プロフィール、チェックアウト ユーザーフロー: オンボーディング、認証、検索、フィルタリング、空の状態 フィードバックパターン: 成功、エラー、ローディング、空 4. トークン 開発者ハンドオフのためのJSON形式の完全なデザイントークン構造 5. ドキュメンテーション デザイン原則(例付きの3つの主要原則) Do’sとDon’ts(視覚的な説明付きの10例) 開発者向け実装ガイド すべてを、すぐに公開できるデザインシステムドキュメントとしてフォーマットします。