ダークモード AI アナリティクスダッシュボード

{
  "type": "ダークモード SaaS アナリティクスダッシュボード UI",
  "product": {
    "brand": "[AICode]",
    "theme": "繊細なグラデーション、柔らかなグロー、角丸カード、極細ボーダー、モダンな開発者ツール風のダークネイビーグラスモーフィズムインターフェース"
  },
  "canvas": {
    "aspect_ratio": "16:9",
    "background": "かすかなビネットとソフトなラジアルライトを伴うディープミッドナイトブルー"
  },
  "layout": {
    "structure": "左側サイドバーおよびメインコンテンツエリア",
    "sections": [
      {
        "title": "サイドバー",
        "position": "左側",
        "count": 8,
        "labels": [
          "AICode",
          "Overview",
          "Projects",
          "AI Assistants",
          "API & Usage",
          "Code Quality",
          "Team",
          "Settings"
        ],
        "details": "上部にロゴ、紫色のハイライトで選択されたOverview、下部にPro Plan・残り12日で更新・75%の水平プログレスバーを表示するサブスクリプションカード、最下部にアバター付きユーザープロフィール、[Alex Morgan]、メール alex@morgan.dev"
      },
      {
        "title": "ヘッダー",
        "position": "メインエリア上部",
        "count": 4,
        "labels": [
          "Welcome back, Alex 👋",
          "Here's what's happening with your AI coding platform today.",
          "May 12 – Jun 12, 2024",
          "Export Report"
        ],
        "details": "左側に大きな挨拶文、右側に日付範囲ピッカーとエクスポートボタン"
      },
      {
        "title": "メトリックカード",
        "position": "ヘッダー下の最上段",
        "count": 4,
        "labels": [
          "Total Users",
          "Active Projects",
          "API Calls",
          "Code Quality Score"
        ],
        "values": [
          "12,842",
          "2,153",
          "1.28M",
          "876"
        ],
        "details": "各カードに小型カラーアイコン、大きな主要数値、vs Apr 12 – May 12, 2024 の比較テキスト、増加率 14.6%, 8.3%, 23.7%, 5.9%、下部にミニスパークラインチャート。アクセントカラーは紫、緑、アンバー、青"
      },
      {
        "title": "メインアナリティクスパネル",
        "position": "中段および下段",
        "count": 4,
        "labels": [
          "API Calls Over Time",
          "Top Projects",
          "User Activity Heatmap",
          "Code Quality Trends"
        ],
        "details": "API Calls Over Time は Daily ドロップダウンと約250Kで終わる紫の折れ線を描いたワイドエリアチャート。Top Projects はプログレスバーと変化率付きの5項目ランキング。User Activity Heatmap は12 AMから9 PMのラベル付き7段ウィークリーヒートマップ。Code Quality Trends は Weekly ドロップダウンと70から90台前半へ上昇する紫ラインの折れ線グラフ"
      },
      {
        "title": "トッププロジェクト一覧",
        "position": "中央右パネル",
        "count": 5,
        "labels": [
          "AI Code Assistant",
          "Smart Refactor",
          "Code Review Bot",
          "Doc Generator",
          "Test Builder"
        ],
        "values": [
          "485K",
          "321K",
          "214K",
          "132K",
          "98K"
        ],
        "details": "上位4項目は緑のプラス変動（+12.4%, +8.7%, +3.1%, +6.8%）、Test Builder は赤のマイナス変動 -1.2%。各行にカラーアイコンと薄いプログレスバー"
      }
    ]
  },
  "style": {
    "visual_language": "プレミアムフィンテックおよびAI開発者向けツールデザインモックアップ",
    "rendering": "シャープで高解像度のUIモックアップ、繊細なドロップシャドウ、ネオンエッジライト、洗練されたチャート、クリアなサンセリフタイポグラフィ",
    "primary_accent": "[エレクトリックパープル]",
    "secondary_accents": [
      "エメラルドグリーン",
      "アンバーイエロー",
      "シアンブルー"
    ],
    "density": "情報豊富で余白のあるレイアウト、調和の取れたモジュラーグリッド、高い可読性"
  }
}