デスクトップアプリ
パーソナルダッシュボードデザイン
Life Systemは、週次スコア・ボディマップ指標・日次リズム・5つの実験を1つのデスクトップダッシュボードにまとめたUIです。レイアウトを詳しく解説します。
デザインのアイデア
- 個人向け計画ダッシュボード週次サマリーをオープンな意思決定事項や優先事項と並べて表示。
- 習慣・活動トラッカー日次パターンと週次平均を組み合わせて把握。
- 実験トラッカー各試行に仮説・目標・進捗指標を設定して管理。
ダッシュボードのハイライト
- 1つのサマリー、4段階の詳細度スコア・ドメインバー・週次平均・未処理ループがダークレールを共有。
- ボディマップを囲む8つの指標集中力・運動・回復の吹き出しが中央の人体図の周囲に配置。
- 5つの実験、6つのフィールド行ごとに仮説・指標・目標・進捗・ステータスを分けて表示。
パーソナルダッシュボードデザイン プレビュー
1 / 4このパーソナルダッシュボードの構成
Life Systemは、1つの密度の高いワークスペースを中心に構成されたデスクトップダッシュボードのコンセプトです。細いダークレールが「何に注意が必要か」に答え、広い白いパネルがその概要を裏付けるデータを保持します。各エリアの実際の内容を以下に示します。
| エリア | 画面上の内容 | 注目すべき点 |
|---|---|---|
| サマリーレール | 82/100 システムスコア、6つのドメインバー、4つの週次平均、8つのオープンループ。 | レールは全体スコアから具体的な未完了事項へと移行します。「Decisions 3」は82単体より行動につなげやすい情報です。 |
| Human System | 集中力・精神・心臓・エネルギー・運動・栄養・回復・長寿の8つの吹き出し。 | ラベルが人体図の周囲に配置されているため、解剖図の上に数値が重ならず読みやすい状態が保たれています。 |
| 日次リズム | 7日分のエネルギー・集中力・回復のバー、および睡眠ステージの別チャート。 | グループ化されたバーは各日の3系列を比較します。睡眠チャートは合計を要素に分解する形式をとっています。 |
| Experiments | 仮説・指標・目標・進捗・ステータスを持つ5つの試行。 | テーブル形式により、問いとその測定指標が並んで表示されます。各試行をプログレスバーだけに縮約しない設計です。 |
スコアをコンテキストで読む
このダッシュボードは複数種類の数値を使っていますが、それらはすべて同じ意味を持つわけではありません。スコアにはスケールが必要で、変化には比較期間が必要で、期間には単位が必要です。Life Systemはその一部のコンテキストを提供しますが、他の部分は未解決のまま残されています。
82/100と+6は異なる問いに答えている
サマリーは現在のスコアと「vs last 7 days」という比較ラベルを表示します。このレイアウトを転用する際は、比較期間をスコアの隣に残してください。6つのドメインバーは82の算出方法を説明していません。
時間数とスコアには異なるラベルが必要
週次平均はDeep Workを4.6 hr/day、睡眠を7h 18m、回復を74%で表示します。3つの数値の見た目をそろえることより、それぞれの単位を保持することが重要です。
6つのフィールドを持つ実験トラッカー
Deep Workの行をテーブルで横に読むと、試行名・「Blocks increase output」・Deep Work指標・+25%の目標・80%の進捗・On Trackが並んでいます。有効なデザイン上の判断はこれらのフィールドを分けている点で、弱点は後半3つが同じ結果の3つのバージョンに見えることです。
| 表示値 | わかること | まだ不明な点 |
|---|---|---|
| +25% Target | Deep Workの目標増加率。 | 起点となる値と測定期間。25%の増加にはベースラインが必要です。 |
| 80% Progress | 試行の進捗値が表示されています。 | これが経過時間・完了セッション数・目標への接近度のいずれを意味するか。プロトタイプでは定義されていません。 |
| On Track | 行にポジティブなステータスラベルが付いています。 | その判定の基準。サンプルの5行すべてがこのステータスを使用しているため、オフトラック状態は画面上で示されていません。 |
3つの視点でダッシュボードを検証する
上記の4つのギャラリービューを使って、同じワークスペースを異なるスケールで確認してください。これらは詳細クロップであり、4つの独立したアプリケーションページではありません。
サマリーから詳細へトレースする
サマリーレールでRecoveryを見つけます：7日間の平均は74%です。Human Systemを開き、Recoveryをもう一度確認します：見出しは75/100で、同じ74%の週次読み値がその下にあります。大きな吹き出しはスコアとその裏付け指標を区別しており、レールはコンパクトな読み値だけを保持しています。
パターンを示す2つの方法を比較する
全体像に戻り、Energy RhythmとSleep Architectureを見つけます。一方は日ごとにエネルギー・集中力・回復をグループ化し、他方は睡眠をステージに分解します。どちらのチャートを再利用する場合も、緑のアクセントだけでなく、グループ化とラベルも保持してください。
プログレスバーより先に試行を読む
Experimentsを開き、まず仮説を読みます。次に、それを検証する指標と目標を確認します。最後に進捗とステータスを見ます。この順序により、実データでサンプルを置き換える前にトラッカーがまだ必要としている定義が明確になります。
このダッシュボードデザインが示すもの
Life Systemはデスクトップ情報レイアウトのデモであり、接続された個人トラッキングサービスではありません。提供されているコードはサンプルの読み値を使用しています。時間範囲ボタンは選択状態を変更しますが、スコアやチャートを再計算しません。
レイアウト参考例であり、検証済み測定値ではない
健康・認知の読み値はインターフェイスの例示コンテンツです。スコアの計算式・ライブデータ連携・実験仮説の根拠は提供されていません。画面上のプライバシーラベルおよび同期ラベルは、それらの機能の検証ではありません。
OpenDesignの公式サンプル
このケースはハッカソンの公式サンプルとして制作されたものであり、参加作品でも受賞作品でもありません。レイアウトを参考にし、元のデザインをプレビューした上で、アセットを再配布する前に再利用の許諾を確認してください。
OpenDesignでパーソナルダッシュボードデザインを作成する方法
ワークスペースとデータを記述する
まず、ダッシュボードが答えるべき日次の問いから始めてください。Life Systemに着想を得たデザインであれば、サマリーレール・週次パターン・実験テーブルを指定します。装飾的なイラストを求める前に、サンプルデータと読み取り可能な単位を明示してください。
推奨プロンプト週次レビュー用のパーソナルダッシュボードデザインを作成してください。白い詳細パネルの隣に細いダークサマリーレールを配置します。週次ディープワーク時間・睡眠時間・オープンな意思決定事項・7日間のアクティビティチャート・仮説／指標／ベースライン／目標／完了セッション数／結果を含む実験テーブルを含めてください。ラベル付きのサンプルデータを使用してください。目標達成と試行完了は分けて表示してください。健康センサーやライブアカウント連携が接続されているとは示さないでください。
1つの指標をサマリーから詳細へ洗練させる
OpenDesignに対して、レールの週次読み値を詳細パネルへ引き継ぐよう指示してください。その際、単位や時間軸を変えないこと。スコアを別途追加する場合は個別にラベルを付けてください。ラベルと比較期間が読み取れるようになるまで、イラストは二次的な要素として扱ってください。
テーブルと小画面でテストする
オントラックの実験1件・目標未達の実験1件・まだ結果のない試行1件を求めてください。ステータステキストが各状態を説明しているか、進捗がセッション数を数えており成功を示唆していないかを確認してください。狭い画面ではテーブルをラベル付きの行に変換し、主要なコントロールが引き続き操作可能であることを確認してください。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
