この記事は株式会社ビットキー Advent Calendar 2024 16日目の記事です。
Analytics Engineer / Data Analystをしている生田が担当します。
はじめに
-
私の所属しているData Platformチームでは、
継続的にBitkeyのプロダクトが価値提供できているか誰でも見れる状態を作り、プロダクトに対する意思決定をデータドリブンにする
というミッションを掲げています。
-
データドリブンな意思決定を導く手段として、プロダクトのデータを可視化したダッシュボード（Looker Studio）を構築・運用してきたのですが、スピードを重視してアウトプットを出し続けてきた結果、「なんか見づらい！」 という課題が残りました。
-
そこでデザインを見直し、ダッシュボードをもっと見やすく使いやすくしてみました。
-
この記事では、デザインを学んだことのないデータアナリストがダッシュボードのデザイン改善のために工夫したポイントを9つのTipsでご紹介したいと思います。
対象読者
- ダッシュボード（特にLooker Studio）を扱うデータアナリストやBIエンジニアの方
前提
- 私自身、統計分野が専門だったため、デザインに関する体系的知識はまだ持ち合わせておりません（美術のセンスも自信ないですｗ）
- そんな私が、 世の中のツールや事例を見て「こうしたらカッコいいじゃん」と実践したことを並べていきます。
【Tips 1】コンポーネントはブロックで囲って整理する
従来のダッシュボードでは、ある程度整理されて配置されているものの、表やグラフどうしのまとまりやフィルターの影響範囲が分かりづらい状態でした。
そこで世の中のダッシュボードデザインを見てみると、ほとんどのテンプレートで各コンポーネントをブロックで囲っていることがわかりました。
それを参考にしつつタイトルやヘッダー、グラフのサイズを調整してみた結果こんな感じになりました。
どんなまとまりで表やグラフが配置されているかがひと目でわかりますね。
フィルターもブロック内に配置することで、影響範囲がわかりやすくなりました。
ちなみにブロックの角丸の半径は、20°くらいに設定するとそれっぽくなります。
【Tips 2】ワンポイントの差し色でメリハリをつける
例えばこのように表を並べたとします。
ちょっと単調な印象がありますよね。もっとハッキリさせたい。
そこで、「紫色で塗りつぶした長方形」をタイトルの横につけてみます。
これすごくないですか？
有識者にとっては当たり前なのかもしれませんが、これだけで印象がハッキリとクールになるとはおどろきです。
このひと手間でこんなに変わるとは、デザインって奥深いですね。。
【Tips 3】フィルターはコンパクトに。
フィルターはプルダウン・入力ボックス・スライダーなどの種類があり、Looker Studio上では「コントロール」と呼ばれています。
従来のダッシュボードではフィルターが大きいがゆえに、見せたい表やグラフよりも目立ってしまう課題がありました。
では従来のフィルターはどうなっていたか見てみましょう。
このようにフィルターがページ上部を大きく陣取ったりしてました。
最初に特定の条件に絞り込む前提であれば悪くないのかもしれないのですが、そうでなければ目立ちすぎていますし、情報量が多くて圧迫感を与えてしまいます。
そこで、サイズをコンパクトに、配置場所も変えて情報量と優先順位の問題を解消してみます。
どうしても絞り込み要素が多かったりした場合や、絞り込み前提のダッシュボードであればこういう形↓でも良いかもしれません。
情報量も少なく、かなりスッキリ整理できたかと思います。
【Tips 4】表の列が多いときは水平スクロールを使う
どうしても表の列数が多く、列幅が詰まって見づらくなってしまうことはありませんか？
文字を小さくすると見えなくなるし、とはいえ削れる列がない…みたいな
そこでLooker Studioの水平スクロール機能を使ってみます。
表のプロパティから、「水平スクロール」にチェックを入れ、どの列までを固定するか入力します。
今回は「セグメントD」までを固定しましたが、「None」であれば、表全体がスクロールされることになります。
列幅を整えると、先程よりもかなり見やすくなりました。
注意点として、ファーストビューで情報が見切れてしまうリスクがあります。
なので、ひと目ですべて見せたい場合やスクショで活用したい場合は、重要指標を左側に、補足情報を見切れる部分に並び替えるなどの工夫が必要です。
【Tips 5】高さの自動調整使ってませんか？
【Tips 4】では、列幅が詰まって見づらい問題に触れましたが、次は行が詰まって見づらい問題についてです。
例えばこんな表があるとします。行間が詰まっていて少し圧迫感があります。
Looker Studioで表を新規作成すると「行番号を表示」と「高さの自動調整」は自動的にONになってしまうようなので、プロパティから「高さの自動調整」のチェックを外します。
すると行の高さを調整できる点線が表示されますので少し広げてみます。
文字の間隔が空いて見やすくなりました。
ちなみに水平スクロール機能を使っている場合は高さの自動調整が無効になるので、何もせずにそのまま行の高さを調整できます。
【Tips 6】フォントにこだわる
Looker Studioでは残念ながら日本語のフォントを変更できないのですが、それでも英数字で工夫することはできます。
Looker Studioで使えるフォント一覧はこちらで紹介してくれています。
私も知らなかったのですが、フォントによって文字の間隔が違うんですね。
ということでデフォルト設定の「Arial」と文字間隔が広い「Verdana」を比べてみます。
←デフォルトで設定されているArial 文字間隔が広いVerdana→
変化が分かりづらいかもしれませんが、Verdanaのほうが（特に数字が）見やすくなったと思います。
またタイトルはいろいろ試した結果、Ubuntuがカッコいいなと思い採用しました。
お気づきかと思いますが、同じ文字サイズでもフォントによって大きさが違います。
なので、Boldにしたら文字が潰れちゃったときなどは違うフォントに変えてみるというのも一手です。
早く日本語フォントにバリエーション増えないかな….
【Tips 7】マウスオーバーツールチップで情報量をコントロール
どうしても補足情報を置きたいとき、どこに配置していますか？
私は右上とか表の下とかが多いです。
ただこれだと、少し情報量が多くて圧を感じたり、表本体よりも目立ってしまうことがあります。
そこで、Community VisualizationのMouseOver Tooltipという、有志の方が作ってくれたツールを使ってみます。
このツールは文字通りマウスオーバーするとテキストを表示してくれるというツールです。
<手順>
MouseOver TooltipはLooker Studio上部タブの項目から探すことができます。
設置したら、スタイルタブでマウスオーバー時に表示するテキストの設定や、常に表示させるアイコンの設定をします。
※マウスオーバー時にマウスが邪魔で１文字目が見えづらいことがあるので、行の先頭に空白をつけておくと全文が見えやすくなります。
配置とサイズを調整して完了です。
マウスオーバーするとこんな感じ
めちゃくちゃスッキリしました！目立ちすぎず表本体を引き立てる事ができています。
注意点として、このツールチップはフィルターなど他のコンポーネントと重なった部分が選択できなくなるなどのクセがあるので、配置場所は少し考える必要があります。
【Tips 8】 色使いはツールとテンプレで解決
色使いを感覚で決めたときに「色ちょっと微妙じゃない？」と思ったり、言われたりしたことありませんか？
そんなときにツールやデザインテンプレートを使ってカッコいいデザインに近づく方法をお伝えします。
例として、「サブ指標に掛かっているグレーの色をもっとかっこよくしたい」という状況を考えていきます。
メインカラーは右端の紫色に決まっている想定です。
※メインカラーが決まってない場合はColor HuntやScheme Colorなどのツールが有用です。
1. 配色ツールを使って合う色を絞り込む
まず使うのが、特定の色に合った配色パターンを生成してくれるColorbaseというツールです。
特定の色を入力すると、類似色や補色などいろんな配色パターンを吟味できます。
実際にメインカラー（Medium Purple: #7551ff）を入力してみるとこんな感じ。
補色や代替色などいくつかの配色パターンが表示されます。
2.世の中で使われてる色使いをリサーチ
Colorbaseを見てビビっと色を決められる方は問題ありません。しかし非デザイナーの私はどれを選べばいいかわかりませんでした。
なので、いったん世の中のお手本を見てカッコいい配色を参考にすることにします。センスを外付けするのです。
ポイントはダッシュボードのテーマを事前に決めておくことです。
スタイリッシュなのか、ポップなのか、賑やかな方が良いのか、ダーク系なのか…
世の中には大量のデザインテンプレートがあるので、先に絞り込まないと時間が溶けます。
というわけで今回は、サブ指標の色として「メインカラーの紫に合ってクールな印象を与える。でも目立ちすぎない色」をこちらのサイトで調べてみました。
▼たとえば、captions.aiという企業のwebページ（https://www.captions.ai/ ）を見てみると、薄紫やより明るい紫が合いそう...
▼たとえば、CARAFULという企業のwebページ（https://www.caraful.co.jp/ ）を見てみると水色や青、ピンクなどの色も合いそう...
3.再び配色ツールを使って合う色を導き出す
最後に、見つけた色をベースに試行錯誤してしっくり来る色を探していきます。
事前にカラーピッカーを用意しておくとこの先楽です。
Chromeを使ってる方はこの拡張機能がオススメ → ColorZilla
これでPC画面上のカラーコードを取得することができるようになります。
【試行１】
まず、captions.aiという企業のwebページに使われていた薄い紫色（#CDA0FC）をピックして試してみます
悪くないですが、もう少しパターンを試したいですね
【試行２】
明度を明るくして試してみます。
ColorbaseのTintという項目ではより明るいトーンを選択できます。
少し明るめの#d7b3fdにしてみます
明るすぎて文字が見えづらくなってしまいました。。
【試行３】
逆に明度を暗くして試してみます
ColorbaseのShadeという項目ではより暗いトーンを選択できます
少し暗めの#b990e3にしてみます
少しくすんだ色になり、全体的に暗い印象になってしまいました。
もう少しパキっと鮮やかな色にしたい。
【試行４】
視点を変えて、少しメインカラーに寄せてみます。
PALETTE GENERATORというツールを使うと、2色間のグラデーションを作れます。
メインカラー(#7551ff)と薄い紫色（#CDA0FC）を両端にセットするとグラデーションが自動的に表示されました。
では#b17ffdを使ってみます
とてもクールな印象になりました。これカッコいい👏
まとめ
以上のアプローチで、クールな印象を与えるカッコいい色を見つけることができました。
■Before
■After
いかがでしょうか？明らかによりクールな印象を与えるとしつつメイン指標を邪魔しない色を選べたと思います。
このように先人たちが残してくれたツールやデザインテンプレを使うことで、センスの外付けができるようになるのです！
同様にアクセントを持たせたい指標に使う色を検討した結果、こちらのブルー系の色を見つけました。
【Tips 9】使う色を5色くらい決めてしまう
【Tips 8】では色を探索する方法について述べましたが、その上でどこにどんな色を使うかというルールを決めておくと、特に複数人で運用している場合は色使いのズレが起きないため楽です。
また、使う色は5~6種類に抑えておくことで、ユーザーの認知負荷を軽減することができます。
ということで、弊チームでは下記の5色でダッシュボードの色使いを定義しました。
- メインカラー ：Medium Purple（
#7551FF） - サブカラー ：Lavender（
#B17FFD） - アクセントカラー１：Dodger Blue（
#24B2FC） - アクセントカラー２：Razzle Dazzle Rose（
#EF4DCD） - アクセントカラー３：Texas Rose（
#FFBB51）
↑色の組み合わせを横断で見るときは、coolors.coのPalette Generatorというツールがおすすめです
まとめ
今回はダッシュボード（Looker Studio）の 「見づらい！」 という課題を改善する取り組みの中で得た学びをTipsとして紹介しました。
これらはデザインの体系的な理論を1から学習して導き出したものではないかもしれませんが、ツールや事例を活用してダッシュボードデザインを改善することができました。
これら以外にもダッシュボードのデザインに関する工夫は皆さん実践されていると思いますので、ぜひ発信してくれるとありがたいです。
さて、明日の株式会社ビットキー Advent Calendar 2024は、homehub開発部の@sunadiusが担当します。お楽しみに👏
[デザインツール]
[参考資料]
Discussion