リレーションシップ分析ダッシュボードのデザイン

相互のつながりダッシュボードの概要

この公式OpenDesignのデスクトップアプリ例は、「YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP」という一文のもと、リレーションシップ分析ダッシュボードを提示します。左のナビゲーションレールと広い指標ワークスペースを組み合わせ、アカウントの文脈から現在の指標、そして過去のアクティビティへと読み進められます。

このダッシュボードはOpenDesignが制作したもので、例示用のサンプルデータを使っています。表示される数値、名前、関係性に関する記述、解釈は、デザイン構成を説明するためのものであり、検証済みの個人分析や接続されたサービスを示すものではありません。

01

現在のスナップショット

9つの指標ブロックが、件数、割合、時間、関係カテゴリをひと目で把握できる一覧にします。

02

編集的な読み方

「the people who'd text back within a day」のようなイタリック体のメモが、生の値をデザインされた視点へ変えます。

03

過去への連続性

下部のパネルは、スナップショット指標から日ごとのバーと、より長期のマッチ率の説明へと続きます。

状況から文脈へ

ワークスペースの最初の行には「MUTUALS ON FILE」「REPLIES IN 24H」「COMMUNITIES」が並びます。続く行では「MATCH RATE」「2ND DATES」「EXES IN YOUR CIRCLE」、さらに「SHARED BLOCKS」「AVG RESPONSE」「LOGGED-OFF HRS」が加わります。この並びは、ネットワークの規模と応答性から、関係の履歴や行動へと進みます。

各指標は、ラベル、目立つ値、短いイタリック体の解釈で構成されます。たとえば「1,842」には「↑ 41 this wk · healthy growth」、「14%」には「above median for your cohort」が添えられています。この組み合わせにより、パネルは編集的な評価のように読めますが、付随する判断はサンプル内容の一部であり、実際の製品がどう算出するかを示すものではありません。

静かなサイドバーのアンカー

サイドバーには、「mutuals.」、@signals のプロフィールマーカー、「RATIO 22.9 · TIER III」、そして「TODAY」「YOU」「ARCHIVE」の各セクションがワークスペースの横に常に表示されます。「your stats」は淡い赤の背景で強調され、バッジが specimen、inbox、queue、notifications を区別します。これによりページには安定したナビゲーションの軸が生まれますが、キャプチャだけでは、これらの項目が操作可能であることや実際の状態と接続されていることは確認できません。

相互のつながりとマッチ率の読み方

「mutuals — last 30 days」パネルは日ごとの縦棒を使い、「MAR 18」「MAR 25」「APR 1」「APR 8」「APR 15」「TODAY」の日付の目印を置いています。ほとんどのバーは黒ですが、終盤の2本は赤です。注釈には「↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE」とあり、強調されたバーを最近の出来事に結びつけていますが、基になるデータの詳しい定義は示されていません。

視覚的な効果として、方向性をすばやく把握できます。バーの高さが変動を示し、赤が注目すべき区間を際立たせ、見出しが解釈を与えます。一方で、Y軸、日ごとの明示的な値、凡例がないため、正確な計測よりもパターンと強調を伝えることに向いています。

12週間の主張

次の見出しは「match rate — last 12 weeks」です。補足テキストには「STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4).」とあります。その下の大きな文は「A real climb, not a vibe.」で始まり、1件のコミュニティ参加と4か月分のプロフィール編集を対比させています。

トレンドのラベルの横に因果的なナラティブが置かれていますが、キャプチャには週ごとのプロット点、算出方法、裏付けとなる情報源がありません。そのためこのセクションは、分析デザインが説明を前面に出す方法の例として有用であり、数値と帰属は例示用のサンプル内容にとどまります。

サイドバーからトレンドパネルへ

ワークスペースの流れは、画面遷移ではなく順次的です。読み手はサイドバーから入り、選択中の「your stats」状態を見て、3列の指標グリッドを確認し、その下のアクティビティとマッチ率のパネルに至ります。CSSからは、3列グリッド、パネルのメタデータの最大文字幅56ch、パネル内SVGの全幅表示が確認できます。これらの制約は、すべてのラベルを1行に収めることなく、広いデスクトップの読み取り面を支えます。

主なトレードオフは密度です。各ブロックがラベル、値、メモに絞られているため、9つの指標をチャートの上に収められますが、読み手は多くの異なる定義を覚えておく必要があります。パネルの見出しと日付の目印が、長いキャンバスを読みやすく保つ切り替えの役割を果たします。

領域ごとの違い

概要部分では、繰り返される指標ブロックと水平罫線が比較をしやすくします。アクティビティパネルでは、繰り返されるバーとまばらな日付ラベルに変わり、マッチ率パネルでは編集的な文章に変わります。これらは、比較する、ざっと見る、そして解釈するという、異なる読み取りモードです。

錆色の赤は、選択中のナビゲーション、強調された2本のアクティビティバー、元恋人(exes)とlogged-off hoursの2つのサンプル値である4に使われています。緑は、47件の返信、14%のマッチ率、オンラインインジケーターに使われています。サンプルは、これらの色の背後にある普遍的なステータス体系を定義していません。

見えるデザインと機能の境界

このアーティファクトが示すのは、サイドバー、指標グリッド、棒グラフ、タイポグラフィ体系、色による強調、説明文という、ダッシュボードの視覚的な構成です。提供されたキャプチャからは、ライブデータの取得、永続的な保存、通知、アカウント状態、チャート操作、本番用のリレーションシップモデルは確認できません。したがって、再現する挙動は、別途実装・検証されるまでは提案段階のものとして扱ってください。

サンプルには「above median for your cohort」「two are now friends」「one community join moved your match rate」のように、意図的に具体的な記述も含まれます。これらはインターフェースに主張と具体性を与えますが、測定結果ではなく例示用の内容として提示すべきです。このデザインから最も応用しやすい教訓は、値、その時間範囲、付随する解釈の関係にあります。

パターンを慎重に応用する

新しいバージョンでは、サンプル値を明確に定義されたデータに置き換えつつ、3列の指標のリズム、30日間のバー系列、独立した12週間のナラティブを維持できます。各見出しに期間を入れ、各指標が何を数えるのかを定義し、視覚的な強調と検証済みのステータスを区別してください。

実装面では、キャプチャはCSSレイアウト、タイポグラフィ、色の変化、チャート描画といったローカルな視覚テクニックを裏付けます。接続されたサービスや有効性は確認できません。再現する際は、観察したレイアウトを視覚的な参考にしつつ、独自のデータと挙動を定義できます。