見出し画像

ダッシュボードをデザインしよう!〜配置編〜

前作:「ダッシュボードをデザインしよう!〜概要編〜」

引き続き、自分で作成したこちらのVizを例に見ていきます。


ダッシュボード作成の手順

  1. ワークシートを作成する

  2. 配置を考える

  3. コンテナで配置する

  4. ベースカラー・メインカラーを考える

  5. アクセントカラーを考える

  6. 微調整

今回は太字になっている前半2つに注目し、ワークシートと配置に関して掘り下げていきます。

ワークシートを作成する

「Preattentive Attributes」やデータの「粒度」を意識してワークシートを作成します。

「Preattentive Attributes」に関してはDATA Saberの勉強中に知ったものになり、勉強中のためここでの説明は省略させていただきます。

データの「粒度」というのは、TableauのLODにおいても大切な概念です。
仕事を始めたばかりの私の辞書にはない言葉でした、何となくわかる気はするけど説明はできないかも…となっていた単語です。

当時の私に「MECE」や「ロジックツリー」の概念を教え、「粒度」を意識することの大切さを説きにいきたいです。

少し遠回りにはなりますが、自分の考えを整理するためにも「フレームワーク」に関することから触れていきます。

MECE

「Mutually Exclusive and Collectively Exhaustive」でMECE、ミーシーと読む造語です。論理的思考・ロジカルシンキングの基本です。

  • Mutually「互いに」

  • Exclusive「排他的」

  • Collectively「まとめて」

  • Exhaustive「網羅的」

MECEとは、「漏れなく、ダブりなく」という状態です。

ロジックツリー

課題解決に使うことのできる「フレームワーク」です。
フレームワークとは、ビジネスに幅広く使うことができる構造化された枠組みです。説明の際にフレームワークを用いると伝わりやすくなります。

ロジックツリーを作成することで、原因の特定や解決策の発見を行うことができます。MECEを意識することが大切です。

ロジックツリーの種類も載せておきます。

  • Whatツリー(要素分解ツリー)

  • Whyツリー(原因追求ツリー)

  • Howツリー(問題解決ツリー)

  • KPIツリー

KPIツリーの例

データ粒度

データの「粒度」とは、データの粒の大きさのことです。
データをどこで切るか(どこで集計するか)を意識する必要があります。

サンプルスーパーストアを使っている人にとってわかりやすい例をいくつかあげておきます。

  • 年 / 月 / 日

  • カテゴリ / サブカテゴリ

  • メーカー / 商品名

  • 国 / 地域 / 県

配置を考える

配置を考える際のポイントについて考えていきます。

視線誘導

ワークシートの配置では、視線誘導を意識する必要があります。
人の視線誘導は大きく分けて2種類あります。

  • 上から下へ

  • 左から右へ

今読んでいるnoteで考えると分かりやすいです。
1行単位で見ると左から右に文字が書かれていて、全体で見ると上から下へ流れていることがわかると思います。

配置の種類

  • Z型

  • F型

N型もありますが、縦書きの日本語に特化したものなのでここでは省略します。
アラビア語など右から左に書くものに関しては、視線誘導も右から左になるようです。

配置の種類以外にも、粒度の粗いものから細かいものへ移動することや大切なものは初めの方に配置することを意識すると良いです。

フィルターやナビゲーションの配置

ダッシュボード全体にかかるフィルターについては、一番初めに目に入る場所にあった方が良いです。

図のように左側か上部に置くことをお勧めします。

フィルター位置

まとめ

東京の最深積雪に関するダッシュボードで意識したことを見てみましょう。

  • Z型の配置

  • ナビゲーションは上部へ配置

  • 粒度の粗いものから細かいものへ

より見やすいダッシュボードを作るために、今回の記事で触れた「配置」を意識して作ってみてください。

いいなと思ったら応援しよう!