今さら聞けない!優れたダッシュボードデザインのコツと参考例を解説 /* Template Name: singlenew(2019.11.12) */    

今さら聞けない!優れたダッシュボードデザインのコツと参考例を解説

最終更新日:2020-4-28

ダッシュボードは、写真共有アプリからビジネスイシーンまで、毎日利用している多くのWebサービスやモバイルアプリに存在します。美しいダッシュボードは注目を集めるからといって、ダッシュボードをデザインする時にまず視覚効果を念頭に置くわけではありません。

本記事は、優れたダッシュボードデザインの基準と注意すべきポイントを解説し、そしていくつかのダッシュボードデザインの参考例を挙げます。

ダッシュボードデザイン

優れたダッシュボードデザインはどんな感じ?

2012年に開催された世界ダッシュボード設計大会で、有名なデータ視覚化設計の専門家Stephen Few氏が優れたダッシュボードデザインの基準を挙げました。

優れたダッシュボードの基準

 

日本語に翻訳しました。以下の特徴を基づき、設計したダッシュボードは良いかどうかを評価してみてください。

ダッシュボードの基準ー日本語.

良いダッシュボードをデザインするにはどうするの?

優れたダッシュボードデザインの基準に達するために、以下の4つのポイントを押さえる必要があります。

1.データの可用性を確認する

ダッシュボードをデザインする最初の段階は、様々なデータを収集することです。収集するデータは2つの条件を満たす必要があります。

①目的とユーザの明確化

ダッシュボードは特定のユーザの疑問を解決するために設計するというものです。ユーザがどのようなデータを必要とし、ダッシュボードを使ってどのような問題を解決したいかを理解した上で、データの収集をはじめましょう。

参考:ダッシュボードの種類と特徴

②情報源の種類と信頼性

情報源は一次または二次情報ですか?より多くの一次情報を採用した方が良いと思います。例えば、マーケティングダッシュボードのデータとして、一次情報は、売上データや顧客データといった内部データと特定テーマを目的としたマーケティング・リサーチによって得られるデータであり、二次情報は官公庁や業界団体あるいは特定企業が一般に公開することを前提とした調査データなどの外部データです。

ダッシュボードデザインの情報源

(画像出所:ameblo.jp

2.有効な指標を設定する

本格的にダッシュボードをデザインする前に、集めるデータを有効な指標に分解しないと、意思決定にも役立たないでしょう。指標を設定するには、因数分解の方法を使います。

起きている現象を、いくつかのさまざまな切り口で因数分解することで、その現象を引き起こしている原因となっている要素を見つけ出すことができます。例えば、以下は「売上高」を分解してみます。

ダッシュボードデザインの指標

売上高という目標に対して直接因果関係がある指標は「顧客の数」と「平均客単価」「平均購入頻度」となります。つまり、このどれかを向上させれば、売上高は向上するという関係です。売上高を分析するダッシュボードをデザインする時、この三つの指標をユーザに示すべきです。

3.ビジュアルデザイン

ダッシュボードは主にグラフや表によって組み立てられますが、そのビジュアルデザインはグラフだけではなく、位置、配色、アニメーション、文字なども含めます。グラフにはそれぞれの役割があるので、目的に応じて選択しましょう。

参考:【図解】グラフの種類と作り方まとめ

それから、色の数と使い方を確認しましょう。1つのセクションのデータとチャートに同じ色を使えば、ユーザがこれらの内容がグループされているを理解するようになります。また、色が持つイメージは異なるので、勝手に使ってはいけません。例えば、「危険」を意味する赤色を異常値に使ったほうがいいのではないでしょうか。配色が苦手な方は、HUE/360、PalettonなどのWeb配色ツールを利用できます。

ダッシュボードデザインの色使い

(画像出所:FineReport)

場合によって、アニメーションを加えることもできます。一般に、ユーザの注意を引きつけたい部分にアニメーションをつけます

ダッシュボードデザインのアニメーション

(画像出所:FineReport

四、インタラクションを重視する

ダッシュボードをデザインする時、読み手とのインタラクションに気を配りましょう。例えば、ユーザはダッシュボードを見て、さらに詳しく知りたければ、データを深掘りすることができます。ゆえに、インタラクションは視覚的ななデザインに限らず、データ間の関係も考えるべきです。

ダッシュボードデザインのインタラクション

(画像出所:FineReport)

インタラクションはユーザに豊富な情報を提供しますが、インタラクションを頼りにするのが間違いです。一番犯しやすいミスは長いスクロールダッシュボードをデザインすることです。結局、ユーザがダッシュボードの上部の情報のみに注目することになります。下部の情報はユーザに発見される可能性が低いです。

では、どうすれば余計なインタラクションを避けますか?1つの方法はユーザーが知りたい情報に優先順位をつけることです。スクロールバーを使わず、コアな情報を1つの画面に表示し、6~7のウィジェットに押さえます。それから、サイドバーやドリルダウンなどのインタラクションをデザインし、ユーザに詳細なデータを示します。

ダッシュボードデザインのサンプル

上記のポイントを読んでも、やはり優れたダッシュボードデザインをイメージできない方がいいると思います。皆さんが実際にデザインする時に参考できるように、以下はFineReportによる設計したサンプルを紹介します。

売上分析ダッシュボード

セールスマネジャーとセールスマンが全体状況の把握だけでなく、顧客、商品、支社などの区分けで売上の管理ができるように、以下のダッシュボードを設計しました。爽やかな配色と、区分けごとの売上を見るための上部のボタンが特徴です。

ダッシュボードデザインサンプル

(画像出所:FineReport)

財務KPIダッシュボード

余計の情報を除いて、収入、利益、回収金額、収入構成など、鍵となる財務指標だけ表示するのはは、以下のダッシュボードの良いところです。そして、ダッシュボードをデザインする時に暗い背景を使うと、思いがけない効果が得られるかもしれません。

ダッシュボードデザインサンプル

(画像出所:FineReport)

サイトアクセス分析ダッシュボード

マーケティング担当者が簡単にサイトのアクセス状況を確認できるダッシュボードデザイン。表だけではなく、漏斗図、円グラフ、地図を用いて、異なる次元からアクセス状況を分析します。また、逆ピラミッドのレイアウトはわかりやすく情報を伝えるには最適です。

ダッシュボードデザインサンプル

(画像出所:FineReport)

まとめ

ダッシュボードはユーザに見せるためにデザインするので、インタラクションとビジュアルデザインを注意することが当たり前です。しかし、データの可用性と指標の有効性を軽視することがよくあります。それはダッシュボードがユーザのどの課題を解決するのかを忘れてしまうからです。どちらかというと、インタラクションとビジュアル効果もユーザ視点からデザインしなければいけません。常にユーザのニーズを考えましょう。

無料BI体験

トップへ

Copyright@2020 Fanruan Software Co.,Ltd

All Rights Reserved