design-guide

name	design-guide
description	本プロジェクトにおけるUI/UXデザインの品質向上、およびフロントエンド実装におけるルールを定義します。

指示

フロントエンド側でTailwind CSSを用いたスタイリングを行う際に、以下のガイドラインに基づき、デザイン部分の実装を行なってください。

1. デザインの4原則 (C.R.A.P)

Tailwind CSSを用いる際も、常に以下の4原則を意識してレイアウトを構築してください。

• 近接 (Proximity): 関連する要素は gap-{n} や space-{y|x}-{n} を用いてグループ化し、情報のまとまりを視覚的に示してください。
• 整列 (Alignment): 全ての要素は flex や grid を活用し、意図のない配置を避けてください。視覚的にずれなく一貫性をもたせて要素を並べる用にしてください。
• 反復 (Repetition): 同じ役割のボタンやカードには同一のクラスセット（コンポーネント）を適用し、ユーザーに操作の規則性を学習させてください。
• 対比 (Contrast): 背景（sw-black）とアクセント（sw-orange）の明度差を活かし、重要な情報を劇的に目立たせてください。

2. タイポグラフィ

tailwind.config.ts でフォントを拡張し、情報の優先度で使い分けます。

Role	Font	Tailwind Class 例	Use Case
Display (魅せる)	"Zen Dots, Orbitron"	font-display tracking-widest	ロゴ、見出し、強調数値、SF演出
Body (読ませる)	"Inter, Noto Sans JP"	font-body leading-relaxed	説明文、リスト、長文、フォーム

3. レイアウトと「8pxグリッド」

• 一貫性: 余白（Padding/Margin）や要素間隔（Gap）は、Tailwindのデフォルト（1単位=4px）をベースに、「4の倍数（偶数）」 を基準に選択してください（例: p-2, gap-4, m-8）。
• 視覚的整合性: 1pxの絶対値に固執せず、画面全体で要素が「整って並んでいる」というリズム（空気感）を優先してください。

4. 作業プロセス

• リソースの参照: 実装の前に、必ず docs/screen-design/ 内の画像を解析し、既存のデザイン設計との整合性を確認してください。
• 独自性の追求: 一般的なAIが生成しがちな平凡なデザインを避け、グラデーション、ノイズテクスチャ、グリッド線などを用いて、記憶に残る独創的なUIを構築してください。

5. 配慮事項

• 常に可読性を考慮し、背景と文字の明度差を十分に確保してください。
• 実装する際は、機能性とデザインの美しさが両立されているか、プロの視点で常にチェックしてください。

6. 配色設計 (比率 70/25/5)

役割	割合	カラー定義	クラス名	使用箇所
ベースカラー	70%	#080808	sw-black	背景全体、大きな余白
メインカラー	25%	#2A323A	sw-steel	カード、サイドバー、入力フィールド
アクセントカラー	5%	#FF9100	sw-orange	決定ボタン、進捗、オーラ数値

余力があれば、背景には bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] を使い、中心から外側へ深まる宇宙の奥行きを表現してください。

7. 実装構造とアクセシビリティ

モバイル環境での操作障壁を無くし、片手操作でも快適に誰でも使える設計を目指します。

• コンポーネント化: クラス名が長くなる場合は、積極的に関数コンポーネントへ分割してください。動的なクラス操作には clsx や tailwind-merge を使用してください。
• タップターゲットの確保:
  • ボタンやリンクなどのインタラクティブ要素は、最小 44x44px 以上のサイズを確保してください（Apple/Googleのガイドライン準拠）。
  • 要素間の距離を適切に保ち、隣接する要素の誤タップを防止してください。
• コントラスト: 背景 sw-black に対し、テキストは最低でも text-slate-300 以上（コントラスト比 4.5:1）を確保してください。
• 動的フィードバック (Active State): タップした瞬間に要素がわずかに縮小する（active:scale-95）などの視覚的変化を与え、操作を受け付けたことを直感的に伝えてください。
• Altテキスト: 画像には alt 属性を必須とし、アイコンボタンには aria-label（例: aria-label="写真を撮影する"）を付与して、視覚情報がなくても操作可能にしてください。

8. エモーショナル・デザイン （褒める・ワクワクさせる）

ユーザーの「期待感」を煽り、「挑戦」を称賛する演出を組み込みます。

• スキャン中:
  • animate-pulse と shadow-[0_0_20px_rgba(255,145,0,0.2)] を組み合わせ、生命エネルギーが脈打つような演出を組み込んでください。
  • データ解析が進むインジケーターを表示し、「これから何かが起こる」高揚感を与えてください。
• 結果表示時:
  • 単なる「成功」だけでなく、ユーザーの「撮影という挑戦」を肯定するポジティブなフィードバックを設計してください。
  • オーラ確定時は animate-in fade-in zoom-in duration-700 を用い、暗闇からホログラムが浮かび上がるような演出を施してください。