AI/BIで美しいダッシュボードをデザインする

はじめに

すべての企業には、ロゴ、カラー、フォント、トーンによって形成され、その企業が表すものを反映するブランドアイデンティティがあります。RivianやWineshippingといった当社の代表的なお客様は、マーケティング、スライド資料、ウェブサイト、製品など、あらゆる接点でそのアイデンティティを一貫して適用しています。その一貫性こそが、顧客やパートナーからの信頼を獲得する鍵となります。

ダッシュボードは、ビジネスチームが意思決定者や外部パートナーとデータを共有するための重要な手段です。ダッシュボードの作成者は、閲覧者がデータを理解し、重要なインサイトを見出せるように、この体験を構築します。ダッシュボードが信頼でき、プロフェッショナルに見えるようにするには、作成者は統一感を持たせ、ブランドイメージに合わせる必要があります。ダッシュボードテーマを使用すると、個々のダッシュボードのルック＆フィールを更新して、思い描くイメージに合わせることができます。

ワークスペーステーマはこれをさらに進め、ワークスペース内のすべてのダッシュボードに一貫したテーマを適用し、自動的に継承させます。もちろん、これは必要に応じてローカルで拡張したり変更したりすることができます。本ブログ記事では、デザインのベストプラクティスをいくつか紹介し、ブランドを反映したカスタムテーマを作成します。

架空の企業「Wanderbricks」のブランドガイドラインを例にして、ダッシュボードを作成します。

一緒に試してみませんか？Wanderbricksは架空の旅行・ホスピタリティ企業で、すべてのDatabricksワークスペースでサンプルデータセットを利用できます。各セクションにあるGenie Codeのプロンプトを使用してダッシュボードを最初から再現することも、読み進めながらそのアイデアをご自身のダッシュボードに適用することもできます。まず、新しいダッシュボードを開き、このプロンプトを入力します。これにより、全体を通して使用するディメンションとメジャーを含む、samples.wanderbricksスキーマ上のローカルメトリックビューが作成されます。

#1 — エンドユーザーのニーズに基づいたレイアウトを作成する

グリッドの設定

ダッシュボードの目的に応じて、グリッドレイアウトの列数を決定する必要があります。AI/BIは柔軟な12列のグリッドを提供しており、ニーズに応じて3列、4列、または6列に分割できます。多数のウィジェットが配置された高密度でテクニカルなダッシュボードは、6列のレイアウトにすることで、より多くのウィジェットを視野に収めることができます。一方、エグゼクティブ向けのダッシュボードでは、認知負荷を軽減するために3列のレイアウトを使用するとよいでしょう。

階層の作成

ダッシュボードを表示するとき、人間の目は文章を読む前に、最も重要な情報を探すために自然と全体をスキャンします。ダッシュボードのデザインに応じて、視線は「Fパターン」または「Zパターン」のいずれかの経路をたどります。

画像やビジュアライゼーションが多いダッシュボードでは、視線は視覚的レイアウトをZパターンで自然に移動します。左上のタイトルやフィルターから始まり、斜め下に移動し、右下の詳細なビジュアライゼーションや表に着地します。

テキストや表が多いダッシュボードでは、Fパターンが現れることがあります。視線は最初の行を完全にスキャンした後、左側を下に移動します。どちらのパターンでも原則は同じです。最も重要なものを、最初に視線が留まる場所に配置することです。

サイズ変更による強調

ダッシュボード上のすべての要素が同じサイズである場合、何も目立ちません。閲覧者が最初にどこに注目すべきかを知るには、視覚的な手がかりが必要です。最も重要なメトリックや主要なビジュアルを大きくし、二次的な要素を背景に退かせることで、明確な階層を確立します。

これをWanderbricksのダッシュボードに適用してみましょう。最初のプロンプトは、先ほど説明した階層に従ってエグゼクティブ向けの概要ページを構築し、2番目のプロンプトは、同じ原則が異なるターゲット層にどのように適応するかを示すために、より高密度なテクニカルページを追加します。

#2 — トーンと読みやすさを考慮したフォントの選択

ダッシュボードのフォント選択は、美的な決定であると同時に機能的な決定でもあります。ブランドアイデンティティとターゲット層の両方をフォント選択の要素にする必要があります。よりテクニカルなターゲット層はSpace Groteskのような表現力豊かなフォントを好むかもしれませんが、エグゼクティブ向けのダッシュボードにはArialのような、より馴染み深くコンサバティブなフォントが適しています。目的は単なるスタイルではなく、トーンを設定することです。

ダッシュボードは情報が密集しがちであるため、読みやすさが最優先されます。視覚的な疲労を軽減するため、サンセリフ（ゴシック体）フォントをお勧めします。AI/BIは、Arial、Tahoma、Verdanaなど、いくつかのウェブセーフなサンセリフオプションを標準でサポートしています。

独自のフォントを使用したい場合は、ダッシュボードにローカルフォントを追加できるようになりました。これは、一貫性を保つためにダッシュボードを社内ツールに埋め込む場合に特に便利です。このダッシュボードでは、ローカルフォントを使用し、Space Groteskに設定します。

視認性を確保するために、ウィジェットの背景に対して高いコントラストを維持するフォントの色を選択してください。確認には、Adobeカラーコントラストチェッカーなどのアクセシビリティツールを使用してください。ライトモードでは、明るい背景（#FFFFFF）に対してきつく感じられることがあるため、純粋な黒（#000000）の使用は避けてください。ライトモードでは、#EBEBEBに対して#08141Aのような少し和らいだトーンを使用すると、より快適に読めるようになります。ダークモードでは、過度なコントラストを避けるために、#08141Aに対して#EBEBEBを使用してみてください。

AI/BIは、Genie Codeで適用できる一連のウェブセーフフォントおよびオープンソースフォントをサポートしています。ブランドフォントについては、［設定］>［フォント］>［ローカルフォントを使用］の下にあるローカルフォントオプションを使用してください。オープンソースのオプションから始めて、フォントの色を設定するには、このプロンプトを試してください。

#3 — UIカラーの定義

60-30-10の法則は、バランスの取れた視覚的に調和したデザインを作成するための、色彩理論における基本原則です。デザイナーは、部屋の色の選択から新しい会社のブランディングの確立まで、さまざまな文脈でこの法則を使用しています。このデザインルールは、3つのカラーカテゴリでカラーパレットを定義するのに役立ち、全体的なデザインにおいてそれぞれをどれだけ使用すべきか、パレットに適切なバランスをもたらします。

• 60%はドミナントカラー（主役となる色）で、ダッシュボード全体のトーンを決定し、キャンバス、ウィジェット、境界線の背景色になります。
• 30%はサブカラー（準主役の色）で、コントラストによって背景を引き立てます。ダッシュボードでは、フォントの色やデータビジュアライゼーションのパレットがこれに該当します。
• 10%はアクセントカラー（強調色）で、必要な場所で注意を引くためのものです。ダッシュボード内のフィルター、タブ、ボタンなどのインタラクティブな要素をハイライトするために使用します。

以下では、この原則を適用してダッシュボードに美しい色を選択する方法について説明します。

ニュートラルな背景色

背景色をニュートラルに近い色に保つことで、意図しないバイアスを排除し、データビジュアライゼーションの色が正確に情報を伝えられるようになります。ライトモードの場合、ウィジェットの背景は白（#FCFCFD）に近づけ、キャンバスの背景には少し暗い色（#EBEBEB）を使用します。これにより、煩雑さを避けながら要素を分離できます。コントラストを控えめにすると、ダッシュボードは孤立した要素のグリッドではなく、まとまりのある全体として認識されます。境界線の色をウィジェットの背景色に合わせることで、特に高密度なレイアウトにおいて視覚的なノイズを減らすことができます。

ウィジェットごとのカスタマイズ

特定のウィジェットを強調して目立たせるために、ウィジェットのテーマプロパティをオーバーライドできます。ウィジェットのスタイル設定で、背景と境界線の色を#1F354Bに更新します。さらに、高いコントラストを確保するために、フォントの色を#EBEBEBに更新します。

はっきりとした選択色

選択色は、フィルター、タブ、ボタンなどのインタラクティブな要素をハイライトするために使用されます。テキストや背景色から簡単に区別できる色を選択してください。ブランドカラーを使用して簡単に導き出すことができます。Adobe Colorでブランドカラーの#15AFDDをベースカラーとして使用し、カラーハーモニーを「正方形（スクエア）」に設定すると、#DE7914や#3A7689のような選択色を導き出すことができます。青系の色（#2272B4など）を選ぶのは、通常、無難な選択肢です。これは、ウェブ上のインタラクティブなリンクに関連付けられているハイパーリンクの色に類似しているためです。

ダークモード

すべてのAI/BIテーマは、ライトモードとダークモードの両方をサポートしています。ライト/ダークモードの切り替えトグルを使用して、両方のモードを設定します。ライトモードを設定するには、キャンバスの背景にブランドカラーの#1E343Fを、ウィジェットの背景に#08141Aを使用できます。ライトモードでは、高いコントラストが得られるため、通常はウィジェットに明るい色を使用することをお勧めします。フォントの色には、高い視認性を確保するために#E8EFF1を使用します。

Wanderbricksダッシュボードに60-30-10の原則を適用してみてください。このプロンプトは、ニュートラルなキャンバスとウィジェットの背景を設定し、境界線をウィジェットの色に合わせて非表示にし、インタラクティブな要素に補色となる青を追加します。

#4 — 自分だけのビジュアライゼーションパレットを構築する

ライトモードとダークモードの両方のインターフェースカラーが決まったら、最後のステップはビジュアライゼーションパレットの選択です。

バランスの取れたデータビジュアライゼーションパレットは、ダッシュボード全体をまとめ、活気を与えます。パレットにブランドカラーを含めることもできますが、ビジュアライゼーションには適さない場合があるため、調整が必要になります。世界人口の推定4.5%が何らかの色覚多様性（色盲・色弱）を持っているため、色覚に配慮したパレットを設計することが重要です。業界標準のパレットを試してみたい場合は、colorbrewerをチェックすることをお勧めします。独自のパレットを設計する際に考慮すべきいくつかの重要なポイントは以下の通りです。

1. ユースケースに応じて、パレットには5〜9色を含める必要があります。このダッシュボードでは、Adobe Colorを使用して5色のパレットを作成します。
2. ライトモードとダークモードの両方で色が識別できる必要があるため、極端に明るい色や極端に暗い色は避けてください。
3. 赤緑色覚多様性は一般的であるため、パレット内でこれらの色を隣り合わせに配置することは避けてください。

カスタムのDatabricksビジュアライゼーションパレットを作成するには、まずAdobe Colorでブランドカラー（#15AFDD）を設定します。「正方形（スクエア）」のカラーハーモニーを適用して、色相環上で等間隔に配置された4つの追加の色（#83DE14、#DE7914、#BE14DE、#3A7689）を導き出します。そこからAdobe Colorで、さらにいくつかの微調整を行うことができます。

• 個々のカラーコードをクリックし、色相スライダーを徐々に動かして色相をシフトします。
• カラーコードをクリックして明るさスライダーを更新し、パレット内の色の明るさを調整します。目的は、特に隣接するペアにおいて、色を明確に区別できるようにすることです。
• 作成された色をAdobe Colorの色覚シミュレーターで試し、第2色覚（Deuteranopia）、第1色覚（Protanopia）、第3色覚（Tritanopia）などの一般的な条件下でパレットがどのように表示されるかをシミュレートします。
• ライトモードとダークモードの両方で、実際のダッシュボードに対してAI/BIでテストします。

最終的なカラーパレットは、#15AFDD、#2375A8、#52A870、#C85070、#C89930になります。

パレットがアクセシビリティチェックをクリアしたら、それを適用してチャートに命を吹き込みましょう。これは、Adobe Colorの色覚シミュレーターを実行し、ライトモードとダークモードの両方でテストした結果、最終的に決定したパレットです。

まとめ

単体では小さく見えるデザインの決定も、積み重なると大きな違いになります。一貫したフォント、意図的なカラーパレット、そして閲覧者が簡単に読み取れるように構築されたレイアウト。これらが組み合わさることで、ダッシュボードは人々が信頼を寄せるものへと生まれ変わります。ワークスペーステーマは、これを組織全体にスケールさせるのに役立ち、優れたデザインの実践がすべてのダッシュボードの出発点になります。

今回紹介したダッシュボードは、ご自身で試してみたい方向けにこちらで公開されています。まだAI/BIダッシュボードを使用していない場合でも、Databricksにネイティブに組み込まれています。

アイデアやフィードバックはありますか？ぜひお聞かせください。

ダッシュボードをダウンロードしてご自身で試す

(このブログ記事はAI翻訳ツールを使用して翻訳されています) 原文記事