UIスクリーンショット分析およびデザインブリーフジェネレーター

{ // デザインブリーフ "overview": "AuditFlowは、現代的な政府監査アプリのダッシュボードです。監査プロジェクトの進捗、リスク指標、タスク管理を一元化し、監査官が迅速に意思決定できるよう設計されています。", "layout": { "desktop": "左サイドバー（ナビゲーション）、中央メインエリア（統計カードとチャート）、右サイドパネル（最近のアクティビティ）の3カラム構成。", "tablet": "サイドバーを折りたたみ可能なアイコンバーに縮小し、メインエリアを2カラムに再配置。右パネルは下部に移動。", "mobile": "サイドバーはオフキャンバスドロワー化。統計カードは横スクロールのカルーセル、チャートは縦積みに変更。" }, "light_mode": { "background": "#F8FAFC", "surface": "#FFFFFF", "text_primary": "#0F172A", "text_secondary": "#475569", "border": "#E2E8F0" }, "dark_mode": { "background": "#0F172A", "surface": "#1E293B", "text_primary": "#F1F5F9", "text_secondary": "#94A3B8", "border": "#334155" }, "typography": { "font_family": "Inter, system-ui, sans-serif", "headings": "font-semibold, tracking-tight", "body": "font-normal, leading-relaxed", "mono": "font-mono for audit codes and timestamps" }, "spacing": "8px base grid, consistent with Tailwind spacing scale", "radius": "rounded-lg (8px) for cards, rounded-full for badges and avatars", "shadows": "subtle elevation for cards, stronger for modals and dropdowns", "motion": "200ms ease-in-out for hover states, 300ms for panel transitions" } ``` ```jsonc { "tokens": { "colors": { "primary": { "50": "#EFF6FF", "100": "#DBEAFE", "200": "#BFDBFE", "300": "#93C5FD", "400": "#60A5FA", "500": "#3B82F6", "600": "#2563EB", "700": "#1D4ED8", "800": "#1E40AF", "900": "#1E3A8A" }, "secondary": { "50": "#F0FDF4", "100": "#DCFCE7", "200": "#BBF7D0", "300": "#86EFAC", "400": "#4ADE80", "500": "#22C55E", "600": "#16A34A", "700": "#15803D", "800": "#166534", "900": "#14532D" }, "gray": { "50": "#F9FAFB", "100": "#F3F4F6", "200": "#E5E7EB", "300": "#D1D5DB", "400": "#9CA3AF", "500": "#6B7280", "600": "#4B5563", "700": "#374151", "800": "#1F2937", "900": "#111827" }, "accent": { "warning": "#F59E0B", "danger": "#EF4444", "info": "#06B6D4", "success": "#10B981" }, "gradients": { "header": "linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%)", "risk_high": "linear-gradient(135deg, #EF4444 0%, #F97316 100%)", "risk_medium": "linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%)", "risk_low": "linear-gradient(135deg, #10B981 0%, #34D399 100%)" }, "shadows": { "card": "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)", "elevated": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)", "modal": "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)" }, "svg": { "chart_line": "#3B82F6", "chart_area_fill": "rgba(59, 130, 246, 0.1)", "chart_grid": "#E2E8F0", "chart_tooltip_bg": "#0F172A", "chart_tooltip_text": "#F1F5F9", "icon_default": "#64748B", "icon_active": "#2563EB" } }, "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "components": { "sidebar": { "width": "256px", "collapsed_width": "64px", "bg_light": "#FFFFFF", "bg_dark": "#1E293B", "border_light": "#E2E8F0", "border_dark": "#334155" }, "stat_card": { "padding": "16px", "icon_size": "40px", "icon_bg_light": "#EFF6FF", "icon_bg_dark": "#1E3A8A", "value_font_size": "24px", "label_font_size": "14px" }, "chart_container": { "padding": "20px", "border_radius": "12px", "bg_light": "#FFFFFF", "bg_dark": "#1E293B" }, "activity_item": { "avatar_size": "32px", "dot_size": "8px", "spacing": "12px" }, "badge": { "padding": "4px 8px", "border_radius": "9999px", "font_size": "12px", "font_weight": "500" } }, "typography_scale": { "display": "30px/36px", "h1": "24px/32px", "h2": "20px/28px", "h3": "16px/24px", "body": "14px/20px", "small": "12px/16px", "caption": "11px/14px" }, "spacing_scale": { "xs": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px" } } } ``` ```markdown # 実装プロンプト このUIを実装する際は、以下のトークンルールに厳密に従ってください。 ## トークンルール 1. **カラーパレット**: プライマリ（青系）とセカンダリ（緑系）の2つのメインパレットのみを使用。グレーはニュートラルな背景・境界・テキスト用に自由に定義可能。アクセントカラーは警告・危険・情報・成功のステータス表示にのみ使用。 2. **グラデーション**: ヘッダーとリスクレベル表示にのみ使用。それ以外の要素にはグラデーションを適用しない。 3. **シャドウ**: カードには軽いシャドウ、モーダルやドロップダウンには強いシャドウを使用。ホバー時はシャドウを一段階上げる。 4. **角丸**: カードは8px、バッジとアバターは完全な円形。ボタンは6px。 5. **タイポグラフィ**: 見出しはセミボールドでトラッキングをタイトに。本文は通常ウェイトで行間をゆったり。監査コードやタイムスタンプは等幅フォント。 6. **スペーシング**: 8pxを基本単位とし、すべての余白・間隔はこの倍数で設定。 7. **レスポンシブ**: 640px未満はモバイル（サイドバー非表示、カード縦積み）、640-1024pxはタブレット（サイドバー折りたたみ、2カラム）、1024px以上はデスクトップ（3カラム完全表示）。 8. **ダークモード**: すべての色はダークモード用に定義済み。`dark`クラスまたはメディアクエリで切り替え。テキストと背景のコントラスト比はWCAG AA基準を満たすこと。 9. **アイコン**: SVGアイコンは24pxサイズを基本とし、デフォルトはグレー、アクティブ時はプライマリ色。 10. **アニメーション**: ホバーは200ms、パネル切り替えは300msのイージング。過度なアニメーションは避け、機能性を優先。 これらのルールを守ることで、一貫性のあるアクセシブルなUIが実現できます。