31
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ZOZOAdvent Calendar 2022

Day 20

見やすいダッシュボードのために意識した7つのこと

Last updated at Posted at 2022-12-19

当記事のグラフはすべてダミー値です。実際の数値とは関係ありません。

結論、以下を意識しました。

  1. 目的を明確にする
  2. あれもこれも詰め込み過ぎない
  3. 視覚的に判断しやすいグラフにする
  4. いきなり完成系を目指さない
  5. 小さくつくって他人にみてもらう
  6. デザインの一貫性を保つ
  7. 他のダッシュボードを参考にする

それぞれどういうことをやったか紹介させていただければと思います。

1. 目的を明確に

ダッシュボードから何を読み取りたいのか決めるところから始めました。
分析、レポーティング、監視などさまざまな用途があると思いますが、これを意識したことで、以下のことが自ずと定まってきました。

  • 見るべき指標はなにか
  • ダッシュボードの構成イメージ
  • 意思決定しやすいグラフ表現

どんな用途で使うのかを意識してみると、この後のダッシュボード作成がブレにくくなるかなと思いました。

2. あれもこれも詰め込み過ぎない

例えばメール配信における指標は、送信数、開封数、クリック数、CV数、開封率、CTR、CVRが挙げられます。

これを1個のグラフに詰め込むとこうなります(数値はダミーです)。

スクリーンショット 2022-12-14 19.16.01.png

当然CV数とかまったく読み取れないグラフになりました。

送信>開封>クリック>CVのファネルでそれぞれ見たかったので、以下3つに分割しました。

  1. 送信数、開封数、開封率
  2. 開封数、クリック数、CTR
  3. クリック数、CV数、CVR

こんな感じに。

スクリーンショット 2022-12-14 19.18.38.png

意味のある単位で分割すると、グラフから読み取りたいものが1つに絞られて判断しやすくなりました。

3. 視覚的に判断しやすいグラフに

A/Bテストの分割が意図した比率になっているかを確認するためのグラフが欲しかったのですが、これをパターンごとに実数で色分けするとこうなります(数値はダミーです)。

スクリーンショット 2022-12-15 15.47.48.png

わからなくはないんですが、直感的に判断しにくかったので100%積み上げ棒グラフにしてみました。

こんな感じ。

スクリーンショット 2022-12-15 15.42.21.png

3パターンでおよそ均等に分割されていることが視覚的にわかるようになりホクホクです。

4. いきなり完成系を目指さない

「そもそも欲しかったもの、見たかったものと違うんだよね」となることを避さけるため、いきなり完成系を目指さないスタイルで進めました。

具体的には、全部の指標・グラフを揃えてから公開するのではなく、一部の指標・グラフだけに絞って作り始めました。

いきなり全部作ると、手戻りの可能性が高く修正の手間がかかる可能性が高いので、これを避けるように進めてみました。

5. 小さくつくって他人にみてもらう

「4. いきなり完成系を目指さない」に関連しますが、まずは小さくつくったものを人にみてもらいながら進めました。

例えば一部の指標・グラフだけつくって見てもらうのもいいと思います。実際に見せてみると、イメージのすり合わせや改善意見ももらえたりするのでおすすめです。

6. デザインの一貫性

僕はデザイナーではないのですが、一貫性のないデザインにならないように意識しました。
具体的には以下を統一しました。

  • フォント、カラー
  • 色使いを最低限にし、同じ指標は同じ色になるように
  • 階層化により上から下に向けてより詳細な粒度に

たとえば、以下のイメージになります(数値はダミーです)。

スクリーンショット 2022-12-15 16.34.04.png

フォント、カラーを統一しつつ、送信数、開封数、開封率は同じ色にし、全チャネル>チャネル別と階層分けし、上から下にかけて詳細になっていくようにしました。

7. 他のダッシュボードを参考にする

他のダッシュボードを参考にすると勉強になります。僕の場合、Looker Studioのテンプレートギャラリーをいくつか見て、ノウハウ的なものをいくつかパクりました。

スクリーンショット 2022-12-15 16.47.03.png

以上になります。

それでは、良いダッシュボードライフを!!

31
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?