チームワークスペース ダッシュボードデザイン

チームワークスペース ダッシュボードデザイン

OpenDesignのチームワークスペース ダッシュボードデザインは、Acme Studioのワークスペースをデスクトップ向けの運用画面として見せます。左のナビゲーションはWorkspace、Private、Connectionsの各エリアに分かれ、メインページには「Acme Studio / Workspace / Team Dashboard」というパスが表示されます。この構造により、ダッシュボードの内容に入る前に現在位置が分かります。

見出しは「Team Dashboard」で、その下に「Last edited by Sarah Chen」と「Last refreshed just now」が続きます。更新のコントロール「Auto · on」と「Refresh from Notion」は、このメタデータと同じ横帯に並びます。ページタイトルの近くで最新性と更新の意図が分かりますが、これらのコントロールはダッシュボード本体より視覚的な重みが小さく抑えられています。

サイドバーを常時表示するレイアウトの中で、最大幅1100pxのページを中央に置いています。この比率により、ワークスペースの切り替え用にナビゲーションを使える状態に保ちつつ、広い領域を運用情報のグループに充てられます。トレードオフは密度で、一度に複数のモジュールを表示できる一方、長いタスク名やアクティビティのメッセージは、限られた列幅の中で折り返さなければなりません。

チーム運営のためのシグナル

このダッシュボードは、作業量や例外事項をコンパクトに把握したい、日々のチームのチェックインに向いています。最初のサマリーブロックには、文字どおり4つの項目があります。「Total tasks 142」「Done this week 23」「Active members 11 / 14」「Docs awaiting review 7」です。各項目は意味の形がそれぞれ異なるため、この行は単一のスコアとしてよりも、別々のシグナルの集まりとして役立ちます。

矢印は3つの項目に比較の文脈を加えます。タスク総数は先週比で6増、完了した作業は4増、レビュー待ちドキュメントは2減です。「Active members 11 / 14 · Stable」は、前週比の差分ではなく、分母と定性的な状態を使っています。この違いは重要な設計上の判断で、すべての指標を同じ比較形式に押し込まず、メンバーの定員という定義を保っています。

表示されている値は、サンプルデータであることが明示されています。データが入ったダッシュボードがどう読めるかを示すものですが、Acme Studioの実績や、接続された本番ワークスペースの証拠ではありません。そのため、このインターフェースは情報同士の関係を明確に示せる一方、実際の指標の定義やデータの出所は、後の実装に委ねられます。

推移からActive Sprintへ

ページの中ほどでは、サマリーから説明へと内容が移ります。週間チャートのタイトルは「Tasks created · last 7 days」で、「98 total」を示し、横軸のラベルはWed、Thu、Fri、Sat、Sun、Mon、Tueの順です。折れ線は金曜まで上昇し、土曜に下がり、月曜に目に見える最高点へ達し、火曜に下降します。この並びにより、合計だけでなく直近のパターンを確認できます。

チャートの隣の「Recent activity」には、相対時間つきで操作が並びます。たとえば、Sarah Chenが「Q3 Roadmap planning」をIn progressに移したのが3 min ago、Mike Parkが「Fix mobile nav overflow on iOS」にコメントしたのが11 min agoです。人物、操作、対象、時間が繰り返されるパターンは、素早く目を通すのに役立ちます。トレードオフは、名前や対象のタイトルが長くなると、自然文のアクティビティ行の折り返しが予測しにくくなることです。

続いてページは、Tasks · Active sprintへ進みます。補足行には、Linked database · filtered by Status ≠ Done · sorted by Updated timeとあります。キャプチャした初期状態の行にDoneのものはなく、ローカルのレンダラーはサンプルの更新タイムスタンプで並べ替えています。ただし、後のシミュレーション更新でDoneになった行は取り除かれないため、このフィルタのラベルは完全に実装された動作ではありません。

列はName、Status、Assignee、Due、Priorityです。キャプチャした初期状態では、Fix mobile nav overflow on iOSはBlockedでHigh、Pricing experiment readoutはTo doでLowです。こうした組み合わせにより、状態と緊急度が区別されます。タスク名は折り返さず省略記号で切り詰められます。980px未満では、元のデザインはサイドバーとDue、Priorityの項目を隠すため、それらの詳細は見えにくくなります。

見た目の設計と機能の境界

元のデザインが実装しているのは、ローカルのサンプルデータによるシミュレーションであり、接続されたNotionワークスペースではありません。初期のKPI値と週間チャートは、キャプチャした状態と一致します。オープン時の更新タイマー、手動のRefresh from Notionボタン、30秒ごとの自動更新ループは、ローカルのフィクスチャ値、タスクの状態、アクティビティの項目を書き換えます。ソースには、コネクタへのリクエスト、認証されたワークスペースへのアクセス、永続的な保存は含まれていません。

Auto · onはオフに切り替えられ、相対タイムスタンプはローカルで更新され、更新後もインターフェースにはSample dataバッジが残ります。フッターにはNotion APIとcomposio.notionの名前がありますが、これらのラベルが実際の連携を示すわけではありません。初期のトースト用マークアップにはSynced — 3 changes from Notionとありますが、実行中の更新ハンドラーはこれをサンプルデータ向けのメッセージに置き換えるため、初期のテキストは同期結果の証拠にはなりません。

このローカルのシミュレーションは、表示とデータのルールがずれうる箇所も示しています。行はDoneになっても、表示されているactive-sprintフィルタから取り除かれないことがあり、前週比の固定ラベルはKPIの値が変わっても再計算されません。実際に応用するには、これらの表示をチームの意思決定に使う前に、指標の定義、フィルタ、比較の計算を明確にする必要があります。