デスクトップアプリ
SaaS収益ダッシュボードのデザイン
サブスクリプション指標、30日間の収益グラフ、アカウントのステータス、最近のイベントを1つの概要画面にまとめたSaaS収益ダッシュボードのデザインです。
ダッシュボードの活用シーン
- SaaS収益のレビュー収益、アカウント、解約、レイテンシの指標をまとめて確認できます。
- アカウントのモニタリングアカウント名、プラン、ステータスを1つの表で比較できます。
- サブスクリプションイベントの追跡最近のアカウントイベントを、時刻やプランとあわせて読めます。
ダッシュボードのレイアウトの見どころ
- 4つのサマリー指標MRR、アクティブアカウント数、解約率、P95レイテンシを冒頭に配置しています。
- 収益とアカウント幅広いトレンドグラフの隣に新規アカウントの行を並べています。
- 最近のイベント4件のサンプルイベントを表示時刻の順に並べています。
ダッシュボード画面
1 / 1SaaS収益の概要
画面の見出しは「Overview · April 2026」で、上部に「Last 30 days」コントロールと「+ New report」ボタンがあります。その下にMRR($48.2K)、アクティブアカウント数(3,184)、churn (30d)(2.1%)、P95 latency(182 ms)の4つの指標パネルが並び、それぞれに補助的な変化値が付いています。ビジネス指標と技術指標が最初のひと目で同時に確認できますが、これらの異なる指標がどう定義されているかは説明されていません。
色によって補助的な数値がすぐ見分けられます。3つは緑で、churnの「+0.4 pp」は赤です。符号だけでは変化が望ましいかどうかは分からないため、ラベルと単位が重要です。掲載されている数値とアカウントの詳細は例示用のサンプルであり、検証済みの運用結果ではありません。
収益パネルとアカウントパネルの読み方
次の行では「Revenue · 30 days」と「New accounts」が対になっています。CSSではこの行を2:1の列比率で定義しており、折れ線グラフにアカウント表より広いスペースを与えています。この比率により収益の形状が主役となり、同時にプランとステータスも手早いアカウント確認のために見られる状態が保たれます。
グラフは全体として上昇していますが、目に見える落ち込みもあります。軸ラベルやプロット値がないため、日ごとの正確な値ではなく、方向性とばらつきを伝えるものです。隣の表には、Account、Plan、Statusの3つの明示的な項目があります。たとえばLinearはTeamでactive、NotionはTeamでtrialです。プランとステータスを別の列に分けることで、サブスクリプションの階層とアカウントの状態を区別しやすくしています。
指標のスキャン
4つの主要な値とそれに付く変化を比較し、方向を解釈する前に各単位とラベルを確認します。
アカウントの確認
アカウント表を使って、プラン名をステータスのラベルと混同せずに、組織とそのプラン・ステータスを関連づけます。
サマリーから最近のイベントへ
視線の流れは4つの指標からグラフと新規アカウント表へ進み、その下の「Recent events」へ移ります。スタイルシートでは、このイベントセクションを2列パネルの下で行全体に広げています。表はTime、Account、Event、Planで構成され、記録された行動を組織とプランの両方に結びつけて読めます。
掲載例には、Acme Coの「Upgraded to Team」やGlobexの「Cancelled subscription」があります。これらの行は、サマリー指標やアカウントステータスの表にはない文脈を加えますが、イベントが表示中の指標とどう関係するかは画面では示されていません。並び順とサンプルのタイムスタンプは最近のアクティビティ表示であることを示すもので、完全な監査履歴の証拠ではありません。
| 領域 | 表示される項目 | 読み取りの目的 |
|---|---|---|
| 指標パネル | 指標、値、変化 | 主要な指標と、それに付く差分をひと目で確認します。 |
| 新規アカウント | アカウント、プラン、ステータス | アカウントの階層と表示されている状態を比較します。 |
| 最近のイベント | 時刻、アカウント、イベント、プラン | サンプルのアクティビティ項目をアカウントとプランに結びつけます。 |
見える範囲のデザインと機能の境界
このアーティファクトは、サンプル値と表示されるコントロールを備えたダッシュボードのデザインです。「Last 30 days」と「+ New report」は操作できるように見えますが、手元の根拠からは、日付範囲を変更する、レポートを作成する、ライブサービスに接続するといった動作は確認できません。したがって、グラフ、指標、表はデザインされたコンテンツとして読むべきであり、ライブデータ、保存、完了した操作の証拠ではありません。
ソースでは、メインのワークスペースの横に220pxのサイドバーが定義されています。キャプチャされた画面はメイン領域に焦点を当てており、2:1のグラフとアカウントの行の下に、全幅のイベント表が続きます。900px未満では、ソースはこの2つのパネルを縦に積み、指標カードを2列に変更しますが、スマートフォン専用の完全なナビゲーションレイアウトは用意されていません。
OpenDesignでSaaS収益ダッシュボードをデザインする方法
概要と指標の定義を設定する
日付入りの概要見出しと4つの指標パネルから始めます。対象となる読み手にとってまとまりのある指標を選び、各値と変化が何を意味するのかを、単位や比較期間も含めて指定します。サンプル値は、検証済みの運用データと明確に区別できるようにしてください。
推奨プロンプト日付入りの概要、MRR・アクティブアカウント数・30日解約率・P95レイテンシの4つの指標パネル、30日間の収益折れ線グラフ、新規アカウントの表、最近のイベントの表を備えたSaaS収益ダッシュボードのデザインを作成してください。例示用のサンプルデータであることを明確に示してください。表示される日付範囲と新規レポートのコントロールはデザイン要素としてのみ示し、動作するサービスやライブデータを暗示しないでください。
グラフとアカウントの文脈を配置する
収益グラフとアカウント表のバランスを調整します。アカウント、プラン、ステータスの区別を保ち、想定する読み取りタスクのためにグラフに軸や値の表示が必要かどうかを判断します。より詳細な表がトレンド表示の隣でも読みやすいことを確認してください。
イベントを文脈と結びつける
イベント一覧には時刻、アカウント、イベント、プランの項目を持たせ、サンプル行が完全な履歴を示唆せずに行動を伝えているか確認します。想定するワークスペース幅で、サマリー指標からグラフ、アカウント行、イベントへの流れを見直します。
エクスポートして共有リンクを取得
完成したデザインをエクスポートし、OpenDesignの「共有」機能を使って共有リンクを取得してください。別のブラウザウィンドウでリンクを開き、意図したバージョンとそのアセットが正しく表示されることを確認してから送付してください。
分析ダッシュボードのワイヤーフレームデザイン
OpenDesignのグレーボックス・ダッシュボードは、サイドバー、4つのKPIプレースホルダー、模式チャート、5行のテーブル、青いレイアウト注釈によって分析ワークスペースを構成します。
デスクトップアプリ
コードレビュー受信トレイアプリのデザイン
コードレビュー受信トレイアプリのデザインは、レビュー依頼、CI失敗、担当Issue、アクティビティを、日々のトリアージに適した一つのスキャン可能なワークスペースに集約します。
デスクトップアプリ
コンテンツパフォーマンスダッシュボードのデザイン
プラットフォーム別スナップショットを、チャートの詳細確認、下書きの計画、オーディエンスとコンバージョンのシグナルへの深掘りにつなげるダークテーマのコンテンツダッシュボードです。
デスクトップアプリ
日帰り旅行プランナーデザイン
架空の都市ソラーラ・ベイを舞台に、イラスト付きマップ、徒歩所要時間、役立つルート警告を備えた6つの時間指定スポットをプランニングします。
デスクトップアプリ