検証テーマ一覧 › 3. モダンUI・デザイン

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

モダンUI・デザイン｜業務ツールらしい情報密度とモダンなデザインを両立できるか

このテーマの成果物を左右で比較する

固定プロンプト（v2）

全AIモデルに一字も変えずに与える依頼文です。

架空のサブスクリプション型SaaSの「アナリティクスダッシュボード」を、単一のHTMLファイル（Tailwind CSS CDN利用可）で作成してください。ダークモードを基調とした極めて洗練されたモダンなデザインとし、主要KPIカード、グラフ描画エリア、直近のアクティビティ一覧を配置してください。

このカテゴリで測ること

• 配色
• タイポグラフィ
• 余白（Spacing）
• ダークモード
• グラフ描画

主な測定内容

• 要素の網羅（KPIカード・グラフエリア・アクティビティ一覧）
• Tailwind CDNの読み込みが正しく動くか（クラスの誤用・未反映）
• ダーク基調の配色の統一（コントラスト・階調）
• グラフを自作したか・軸や凡例があるか
• 390px/1280pxでの崩れ

評価ポイント

• デザインの統一感（余白・角丸・影・タイポ）
• 情報の優先順位が見た目に出ているか
• 「AIっぽさ」の少なさ
• そのまま製品に使えるか

登録済みの成果物（4件）

他の検証テーマ

• スイカゲーム風合体パズル （物理演算・衝突判定（2D））
• ピンボール （物理演算・衝突判定（2D））
• 特殊ルール付きリバーシ （ターン制・状態遷移）
• カードバトル （ターン制・状態遷移）
• グラスモフィズムLP（スクロール・ホバー演出） （インタラクション・演出）
• リアルタイム検索・ソート・CSV出力SPA （大量データ・テーブル操作）
• ノードベースのワークフローエディタ （2D幾何・ノード操作）
• 国家経営マルチエンディングシミュレータ （文脈維持・シナリオ設計）
• Three.jsパーティクルビジュアライザー （3D空間・数理レンダリング）
• 楽観的UI＋リトライ付きチャット通信モジュール（TypeScript） （非同期・通信耐障害性）
• 配送トラック巡回問題 （独自制約・数理最適化）
• 変則ナップサック問題 （独自制約・数理最適化）
• 複数ファイル構成のリポジトリへの新機能追加 （マルチファイル・既存改修）
• 法規制・規約に準拠した業務フロー＋DB設計 （ドメイン知識・仕様整合性）