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

データ駆動型の意思決定において、ダッシュボードはチームが洞察を共有するための重要な手段です。美しくプロフェッショナルなダッシュボードは信頼を高め、データの理解を容易にします。DatabricksのAI/BIプラットフォームは、ブランドスタイルに合わせたダッシュボードを迅速に作成できる強力なテーマカスタマイズ機能を提供します。この記事では、架空の旅行会社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などのウェブセーフフォントをネイティブサポートし、ローカルフォントのアップロードも可能です。

フォント色は背景とのコントラストを高く保ちます。Adobe Colorのコントラストチェッカーで検証します。ライトモードでは#000000と#FFFFFFの組み合わせを避け、#08141Aと#EBEBEBがおすすめです。ダークモードでは#EBEBEBと#08141Aを使用します。

3. UIカラーの定義：60-30-10ルール

60-30-10は色彩理論の基本ルールです：60%がベース色（背景、キャンバス、ウィジェット境界）、30%がセカンダリ色（フォント、データ視覚化パレット）、10%がアクセント色（フィルター、タブ、ボタンなどのインタラクティブ要素）。

背景色はニュートラルに保ち、データ視覚化に影響を与えないようにします。ライトモードではウィジェット背景に#FCFCFD、キャンバス背景に#EBEBEBを使用します。境界色をウィジェット背景に合わせると、視覚的な乱雑さが減ります。特定のウィジェットを強調する場合は、テーマ設定を上書きし、背景と境界を#1F354B、フォント色を#EBEBEBに設定します。

選択色はインタラクティブ要素をハイライトするために使用し、テキストや背景と明確に区別できる色を選びます。ブランド色から派生させるか、青色（#2272B4）が安全な選択です。

AI/BIテーマはライトモードとダークモードの両方をサポートします。ダークモードでは、キャンバス背景に#1E343F、ウィジェット背景に#08141A、フォント色に#E8EFF1を設定します。

4. 自分だけの視覚化パレットを構築

視覚化パレットは5〜9色で構成し、色覚障害に配慮します（世界人口の約4.5%が何らかの色覚障害を持ちます）。赤と緑の隣接は避けます。

ブランド色#15AFDDを起点に、Adobe Colorで「スクエア」カラーハーモニーを適用し、#83DE14、#DE7914、#BE14DE、#3A7689を派生させます。その後、色相と明度を微調整し、隣接する色が明確に区別できるようにします。色覚障害シミュレーター（Deuteranopia、Protanopia、Tritanopia）でテストし、AI/BIの実際のダッシュボードで確認します。最終パレットは#15AFDD、#2375A8、#52A870、#C85070、#C89930です。

結論

小さなデザインの決定が積み重なって大きな効果を生みます。一貫したフォント、意図的なカラーパレット、読みやすさを考慮したレイアウトが、ダッシュボードを信頼できるツールに変えます。ワークスペーステーマを使用すれば、一度設定するだけで全ダッシュボードに適用され、効率が大幅に向上します。さあ、AI/BIで美しいダッシュボードをデザインしましょう。