ダッシュボードデザイン成功の7つのポイントとは？効果的な実装手順を解説
複数のデータを1つの画面にまとめた「ダッシュボード」。社内の意思決定の質を左右する一因にもなりますが、見やすさや分かりやすさといったデザインまで考慮されたものになっていますか？
直感的に使用できるデザインを目指したくても「どのような考え方をすればよいのか」「どのようなポイントを改善するべきか」悩んでいる方も多いのでは。本記事では、ダッシュボードデザインの考え方や7つのポイント、具体的な手順について解説します。
グッドパッチは2011年の創業以来、デザインファームにおけるパイオニアとして多くのUI/UXデザインを支援してきました。ユーザーに愛されるダッシュボードデザインを目指すためにも、ぜひ本記事をご覧ください。
専門人材による高度なデータ分析でPdM/PMMを強力サポート
プロダクトを成長させるには、あらゆる定量データを元にしたデータドリブンな意思決定が欠かせません。このサービスではグッドパッチのPdMエキスパートがデータ取得の環境を整え、データを活用したプロダクト改善をサポートします。
データ分析だけにとどまらない専門人材による二人三脚のサポートで、プロダクトの成長を加速させる中長期的な土台を構築することが可能です。
このような方におすすめです
- ・ データは取得しているがプロダクトロードマップや施策作成時に活用できない
・意思決定に関わるデータをダッシュボードなどで整理できていない
・定量データの結果をプロダクト改善に活用しきれていない
目次
ダッシュボードデザインとは
ダッシュボードデザインとは、ユーザーが目的に応じたデータ活用ができるようにサポートするデザインのことです。
そもそも、ダッシュボードとは、1つの画面にさまざまなデータをまとめて分かりやすく可視化するツールを指します。意思決定やデータ分析など多岐にわたるケースで活用されており、目的に応じたデザインが求められます。
優れたデザインのダッシュボードは、数値を基に現状のビジネスやプロダクトなどの状況を理解しやすく、意思決定の質が向上します。社内で共通認識を持ちやすくする効果もあり、より良い行動につなげられるでしょう。
良いダッシュボードデザインのための考え方
情報を正しく伝達するダッシュボードデザインには、次の2つの考え方があります。ダッシュボードデザインの基本的な考え方を理解するためにも、参考にしてみてください。
| 【良いダッシュボードデザインのための考え方】 ・知りたいことがすぐ分かるデザインにする ・誤解を生まないデザインにする |
知りたいことがすぐ分かるデザインにする
まずは、知りたいことがすぐ分かるデザインにすることを意識しましょう。ダッシュボードは直感的にデータを理解できるよう可視化して、迅速な判断につなげる役割を担います。
だからこそ、知りたい情報にすぐにアクセスできるデザインを意識することが大切です。特に下記の4つは、ダッシュボードデザインに反映するようにしましょう。
| 知りたいことがすぐ分かるデザインのポイント | |
|---|---|
| シンプルにする | 不必要な情報をできる限り取り除いて理解しやすくする |
| 意味のある順列にする | 必要な情報がすぐ見つかるように配慮してデータを並べる |
| 強弱をつける | 重要な情報がすぐに見つかる表現（色やサイズ、文字の太さなど）を意識する |
| 待たせすぎない | 画面表示にかかる時間や操作の反映時間をできる限り短くする |
必要な情報がしっかりと伝わるようにするためにも、例えば、冗長な説明や過度な装飾を避けるほか、グラフの目盛線やタイトルの説明など、不要な情報は取り除くようにしましょう。
また、必要な情報にアクセスしやすい順列を意識することも大切です。データを単に羅列するのではなく、数の大小順や更新日順など、理解しやすい並び順を採用しましょう。
誤解を生まないデザインにする
もう一つ大事なのは、誤解を生まないデザインにすることです。ユーザーの誤解を生むデザインは誤った結論を導きやすく、的確な判断がしにくくなるためです。
多くのユーザーが同じようにデータを理解して共通認識を持てるように、下記の点を意識するようにしましょう。
| 誤解を生まないデザインのポイント | |
|---|---|
| 分かりやすく表記する | タイトルや系列名、数値の単位を丁寧、簡潔に表現して誤解を生まないようにする |
| 表現を歪曲しない | 数量の差が実際よりも誇張、矮小化されて見えないようにグラフ軸の値範囲を設定する |
| データを定義する | 参照するデータの定義を明確にする |
| メタ情報を記載する | 使用するデータのソースや更新日、注釈などの補足情報を記載する |
例えば、グラフ軸の値範囲を恣意的に設定すると、誤解を生む可能性があります。特に棒グラフの場合は、原点を0にしないと数値が誇張または矮小化されて見えるので注意が必要です。
下記左図のように、原点を0にすることで、誤解を生むことなく比較ができるようになります。
効果的なダッシュボードデザインを実現する7つのポイント
ここでは、効果的なダッシュボードデザインを実現するためのポイントをご紹介します。ダッシュボードデザインで意識すべきことが分かるので、参考にしてみてください。
【効果的なダッシュボードデザインを実現する7つのポイント】
- 目的に合うグラフを選択する
- 一貫したストーリーを持たせる
- できる限り不要な要素は入れない
- カラーの使い方に注意する
- タイトルや凡例のわかりやすさを意識する
- 背景色とグラフ色面のコントラスト比を3：1以上にする
- 意思決定につながる比較情報を提供する
1. 目的に合うグラフを選択する
ダッシュボードデザインでは、目的に応じたグラフを選択しましょう。ダッシュボードデザインで使う主なグラフは、下記のとおりです。
| グラフの種類 | 伝える情報 | 概要 |
|---|---|---|
| 折れ線グラフ | 時間変化・傾向 | ・時系列などの連続的な変化を示すときに使用する ・折れ線グラフの変動から変化の度合いを読み取れる |
| 棒グラフ | 数量比較 | ・棒の高さでデータの大小を比較する ・値の大きい項目、小さい項目を選別したいときに有効 |
| 面グラフ | 時間変化・傾向・構成比 | ・複数のデータ系列を積み上げて使用する ・数値と構成比の時間変化を同時に伝えられる |
| 円グラフ | 構成比 | ・円全体を100％として項目ごとの構成比を示す ・全体の総量が明確で構成比の変動にインパクトがある場合に有効 |
例えば、時間の変化に伴う傾向を伝える場合は折れ線グラフ、数量の大小を比較したい場合は棒グラフが向きます。
グラフごとに伝える情報の特性が異なるので、選択を誤ると必要な情報を正しく伝達できません。ユーザーが直感的に情報を認識できるように、伝えたい情報に応じて最適なグラフを選びましょう。
2. 一貫したストーリーを持たせる
ダッシュボードデザインには、一貫したストーリーを持たせることが重要です。
ただグラフが羅列されているだけでは、ユーザーは適切にダッシュボードを理解することはできません。情報の比較方法がそろっていない、情報の並び順が不規則で理解しにくいと、ユーザーの理解を妨げてしまうからです。そのためには一貫した情報のストーリーを持たせて作成することが重要です。具体策としては、下記のようなことを意識しましょう。
| 一貫したストーリーを持たせるためのポイント | |
|---|---|
| 階層構造を意識する | 最初に全体像が理解でき、その後に詳細にたどり着ける導線設計をする |
| 情報をZ型に配置する | ユーザーは視線を左上→右上→左下→右下の順に動かすので、大切な情報から順にZ型に配置する |
| 各グラフの並び順に意味を持たせる | ユーザーが知りたい情報順や比較しやすい順など最適な順序を選択する |
例えば、ビジネスのKGIやKPIなどの重要度の高い情報から順に深掘りできるようにしたい場合、それらの情報をZ型に配置すると、ダッシュボードに一貫したストーリーを持たせやすくなります。
3. できる限り不要な要素は入れない
ダッシュボードには、できる限り不要な要素は入れないようにしましょう。ユーザーの視認性を高めて、直感的に情報を理解できるようにするためです。
具体的には、下記のような点を意識しましょう。
【直感的に情報を伝えるポイント】
- 3D表現やドロップシャドウなど余計な装飾をしない
- 情報の重複を避ける
- 数値と直接関係のないテキスト情報は薄い色にする
- 直感的に見にくくなる場合は、グラフの情報量を減らす
例えば、下記右図のように立体的な表現を使うと、かえって情報が読み取りにくくなります。余計な装飾を避けて、情報を誤解なく伝えられるように意識しましょう。
また、グラフから読み取れる情報が似ている場合や、必要以上に細かい情報を記載している場合も情報を整理しましょう。不要な要素を取り除くことで、理想的な見やすいダッシュボードデザインに近づきます。
4. カラーの使い方に注意する
ダッシュボードデザインでは、カラーの使い方が重要です。取り扱う色は、下記のような点に注意して選定しましょう。
| カラーの使い方のポイント | |
|---|---|
| 基本カラーは3色に絞る | ・ベースカラー、メインカラー、アクセントカラーの3種類に色数を絞る ・「ベースカラー：メインカラー：アクセントカラー ＝ 7：2.5：0.5」の黄金比を意識して配色する |
| データを色のみで分類しない | ・色覚多様性を考慮して色だけで情報を伝えない ・データ点の形やグラフの塗りの模様など色以外からも系列が識別できるようにする |
ダッシュボードにさまざまな色を使うと、重要な部分が分かりにくくなります。閲覧しているユーザーの目も疲れるので、基本的なカラーは3種類に絞りましょう。
また、色の見え方には個人差があります。人によって色の違いを識別しにくい場合があるため、データを色だけで分類することは避けるべきです。白黒印刷をしたときにもデータの系列が識別しにくくなります。
下記右図のように複数の色だけを使うのではなく、線のデザインや強弱も使いデータの系列を区別するとよいでしょう。
5. タイトルや凡例のわかりやすさを意識する
ダッシュボードデザインでは直感的に情報を認識できるように、タイトルと凡例を分かりやすく記載するのが一般的です。
下記左図の例では、直感的に理解できない複雑なタイトルを避けて、必要な前提知識を分かりやすくまとめています。
また、下記左図の例では、データの誤認を避ける工夫をしています。グラフタイトルが「国産自動車」だけでは、いつのどのような数値なのかあいまいです。「国産自動車の出荷台数（月次推移）」と明記して、データの前提知識を正確に伝えています。
6. 背景色とグラフ色面のコントラスト比を3：1以上にする
ダッシュボードデザインではアクセシビリティに考慮し、背景色とグラフ色面のコントラスト比は3：1以上を目標にしましょう。
3：1以上を確保することが難しい場合は、下記の工夫を検討します。
- グラフの色面領域の近くに数値を記載する（数値のカラーは背景色に対して4.5：以上のコントラスト比にする）
- 色面領域をマウスオーバーもしくはキーボードで触れた時（フォーカス時）に数値が表示される仕様にする
ダッシュボードも、アクセシビリティ対応が欠かせません。配色後には色覚特性シミュレーションツール（CUDチェックツール）を使い、識別しにくいカラーはないか確認しましょう。
アクセシビリティについては、下記の記事で詳しく解説しています。
【関連記事】ウェブアクセシビリティとは？取り組むべき6つの理由と対応に向けた5つのステップ
7. 意思決定につながる比較情報を提供する
ダッシュボードは、データを正確に把握して意思決定の質を向上させるためのツールです。質の高い意思決定につなげるために、下記のような比較情報を提供しましょう。
- 目標値や平均値、前年の値を併記する
- その他、関連性のあるデータを併記する
例えば、数値単体では意思決定の難しいデータには、目標値や平均値を併記すると比較できるようになります。目標値や平均値と比較して現状はどうなのか把握できるので、意思決定しやすくなるでしょう。
ダッシュボードデザインを成功させるための2つのステップ
ダッシュボードデザインのポイントが分かったところで、実際に取り組むためのステップをご紹介します。
【ダッシュボードデザインを成功させるための2つのステップ】
- 要件を整理する
- プロトタイプを作成する
ダッシュボードデザインの全体像を理解して、取り組み方を把握しておきましょう。
ステップ1：要件を整理する
まずは、ダッシュボードの要件を整理します。下記の2つをポイントに、ダッシュボードの要件定義をしましょう。
| ダッシュボードの要件定義のポイント | |
|---|---|
| 目的を定義する | 何を達成するためのダッシュボードなのか、何のために使用するのかなど目的を明確にする |
| 制限条件を理解する | 必要な情報などを確認してどのような制約があるのか理解する |
後になって目的を見失ってしまうことがないように、「何のためにダッシュボードを作成するのか」を明確に定めておきます。
また、ダッシュボードデザインでは、目的に応じて必要な情報と制約の双方を理解することが重要です。ダッシュボードに必要な情報量が多い場合には、どのような制約をかけるのか検証します。必要なデータに欠損がある場合は、問題になりそうな部分を事前に検討しておきます。
要件定義の段階でダッシュボードに掲載する情報を精査しておくと、プロトタイプが作成しやすくなるでしょう。
ステップ2：プロトタイプを作成する
要件定義ができたところで、プロトタイプを作成します。要件定義の内容をそのまま当てはめるのではなく、周囲と話し合いながら取り組み、ダッシュボードの質を高めます。
プロトタイプの作成は、下記のプロセスに沿って進めるといいでしょう。
| プロトタイプを作成するプロセス | |
|---|---|
| 1.掲載情報を整理する | 要件定義をもとに必要な情報を一覧化し、グラフの種類を選定する |
| 2.プロトタイプを作成する | ダッシュボードをデザインして具体的に図示化する |
| 3.フィードバックを得る | プロトタイプのフィードバックをもらい、改善を重ねる |
まずはダッシュボードに必要な情報を整理して、使用するグラフの種類を決めます。次に、ダッシュボードのデザインを反映させたプロトタイプを作成します。その後は、プロトタイプを基にフィードバックを収集して、改善を重ねていくとよいでしょう。
フィードバックを重ねてデザインが決定し、必要なデータが揃ったら、実装をします。実装してみて違和感がある場合は、適宜調整を行います。
グッドパッチのダッシュボード改善事例
ここでは、グッドパッチが手がけたダッシュボードデザインの事例を紹介します。UIの観点から改善し、よりユーザーに寄り添ったダッシュボードデザインになった事例です。ダッシュボードデザインの進め方や改善方法が分かるので、ぜひご覧ください。
株式会社ダーツライブ
株式会社ダーツライブは、ダーツマシンを世界で展開しているエンターテイメント企業です。グッドパッチではアプリリニューアルのUX設計とUIデザイン、アプリ開発、リリース後のサービス改善をサポートしました。
β版リリースまでにユーザーテストを繰り返し改善した例に、ダッシュボードが含まれています。自分が気になったデータだけをダッシュボードに追加し、カスタマイズできる機能を実装しました。
ユーザーテスト前は、さまざまな画面からダッシュボードに追加できるボタンを用意していました。しかし、ユーザーテストでは混乱があったので、追加できる導線を1つに絞りました。利便性を配慮して導線を増やしたことが、逆に混乱を生んでいたのです。それをUIの観点から改善し、よりユーザーに寄り添ったダッシュボードになりました。
ダーツライブの事例は下記でも詳しく紹介しています。
【関連記事】DARTSLIVE 詳細なプレイデータを上達のヒントに。
意思決定を後押しするダッシュボードデザインが求められている
本記事では、ダッシュボードデザインの考え方やポイントをまとめてご紹介しました。ダッシュボードには、意思決定を後押しする使いやすいデザインが求められています。
必要な情報を整理して分かりやすく伝えるために、ダッシュボードデザインのポイントを押さえることが大切です。この記事を参考に、必要とされるダッシュボードを作成するデザインを身につけましょう。
専門人材による高度なデータ分析でPdM/PMMを強力サポート
プロダクトを成長させるには、あらゆる定量データを元にしたデータドリブンな意思決定が欠かせません。このサービスではグッドパッチのPdMエキスパートがデータ取得の環境を整え、データを活用したプロダクト改善をサポートします。
データ分析だけにとどまらない専門人材による二人三脚のサポートで、プロダクトの成長を加速させる中長期的な土台を構築することが可能です。
このような方におすすめです
- ・ データは取得しているがプロダクトロードマップや施策作成時に活用できない
・意思決定に関わるデータをダッシュボードなどで整理できていない
・定量データの結果をプロダクト改善に活用しきれていない