データビジュアライゼーションのデザインとダッシュボードUI

Dardoは、Web向けのカスタムデータビジュアライゼーションを設計・開発しています。対象はダッシュボード、インタラクティブマップ、データストーリー、データ量の多いインターフェースです。公的なエビデンス、調査研究、業務指標など、見せる価値のあるデータを持ち、見る人が本当に知りたい問いに答え、それぞれの数値の出どころまで確認できるようにしたい組織に向いています。

WhatsAppでメッセージを送る
Dardo / エディトリアルイラスト
このページの内容

データビジュアライゼーションサービスの内容

どのプロジェクトも、ビューが答えるべき問いと、実際にお持ちのデータから始まります。ご依頼内容に応じて、次の内容が対象になります。

  • 問いとデータセットの整理:誰が何を判断する必要があるのか、それを裏づけるのはどの項目・単位・日付か
  • グラフ、表、マップ、フィルターのデザイン。目新しさではなく、わかりやすさを基準に選定
  • スマートフォンでも意味が損なわれない、レスポンシブなデータ探索の導線
  • 出典、日付、更新状況を、数値のすぐそばに表示
  • データが空、欠損、不完全、エラーの場合の画面も設計
  • データテーブルやテキストによる要約など、アクセシブルな代替手段
  • Webインターフェースとしてのフロントエンド実装、Power BIやTableauで構築するダッシュボード、またはドキュメント化されたデザイン引き継ぎ

カスタムのデータビジュアライゼーションか、Power BIやTableauのようなBIツールか

Dardoはどちらにも対応しています。カスタムのWebダッシュボードやビジュアライゼーションの設計・開発に加え、Power BIやTableauでのダッシュボード構築も行います。標準的なグラフを使う社内レポートであれば、すでにPower BIやTableauのライセンスをお持ちのチームには、そのツールで作るダッシュボードが向いていることが多いです。短期間で立ち上げられ、使い慣れたツールでもあるためです。カスタムのWebインターフェースが力を発揮するのは、公開向けや社外向けの場合、Webサイトやプロダクトの中に組み込む場合、ブランドを反映させる必要がある場合、ストーリーを順を追って見せたい場合、そしてマップ、インタラクション、レイアウト、アクセシビリティ、パフォーマンスを細かく制御したい場合です。

両方を組み合わせるプロジェクトも多くあります。社内ではPower BIやTableauのダッシュボードを使い、それを開くことのない人たちには、カスタムのWebインターフェースで整理・解説したビューを届ける形です。どちらが合うか迷う場合は、利用者、データ、すでにお持ちのライセンスをもとに、提案書でおすすめをお伝えします。データビューにとどまらずプロダクト全体のUX改善が必要なら、プロダクトデザインから始めるのが適しています。没入感のある3D体験が目的なら、インタラクティブ3Dウェブサイトをご覧ください。

まず問いから、次にデータへ

役に立つビジュアライゼーションは、人が下すべき判断から始まります。私たちは出典、日付、単位、地理、変換処理、欠損値を記録し、提供された事実と計算値、インターフェース上のラベルを区別します。そのため、将来データが更新されても、グラフの意味が気づかないうちに変わってしまうことはありません。

次にスケッチで、グラフ、マップ、表、ナラティブの各案を、極端な値や欠損を含む現実的なデータで比較します。並べ替えできる表のほうが、どんなグラフィックよりも問いにうまく答えられることもあります。その場合は、はっきりそうお伝えします。

読みやすいダッシュボード、マップ、データストーリーのデザイン

ダッシュボードには階層が必要です。文脈のある少数の指標、妥当な比較、そして状態が常に見えるフィルターです。マップは、分析を求める前にまず場所を示し、ズームやフィルター操作中も期間と出典が見えるようにします。データストーリーは、読み手を順序立てて導いたあとで、自由な探索へと開いていきます。

小さな画面では、すべてを縮小するのではなく、どのラベル、操作、比較を残すかを判断します。色だけで意味を伝えることはせず、キーボードフォーカスは使いやすい順序で移動し、モーションは視覚効果を減らす設定に配慮します。グラフを操作できない場合でも、表やテキストの代替によって情報にアクセスできます。

実績:ShiimainとJanus Observatory

Shiimainは、場所から始まる地域インテリジェンスのインターフェースです。ラ・グアヒラのマップビューから入り、その背後にあるエビデンスを探索型ダッシュボードで開いていきます。ViteとReactで作られた公開プロトタイプで、公開情報源のエビデンスを提示し、エビデンスが不足している箇所も見える化しています。本番用のバックエンド、認証、書き込み操作を持たないアーカイブ済みの学習プロジェクトであり、元となるデータセットを保証するものではありません。

Janus Observatoryは、仮説的な研究構造を、ブラウザ上の3Dの旅へと変えたものです。10の起こりうる未来を収めたアトラスと、それらを比較するための観測所があります。裏側には、Pythonのデータパイプライン、情報源マニフェストのチェック、引用とリンクの検証があります。シナリオは予測ではなく探索的なものであり、どちらのプロジェクトも、測定されたエンゲージメント、学習効果、導入実績を主張するものではありません。

データの正確性、所有権、運用

公開前に、データの管理者、更新方法、検証チェック、空・エラー状態、引用形式、古いデータの扱いを取り決めます。受け入れ確認では既知のテストレコードを使い、表示された値を出典の合計値と照合します。そのため、見栄えのよいインターフェースが、誤った変換処理を覆い隠すことはありません。私たちが検証するのは変換処理と画面上の値です。元データの正確性と公開する権利は、別途調査範囲を取り決めない限り、データの所有者に帰属します。

データビジュアライゼーション・プロジェクトの費用に影響する要素は?

費用を左右するのは主にデータです。情報源の数と状態、必要なクリーニングや正規化の量、ビューとインタラクションの数、静的データか更新型か、マップや3Dの有無、本番ツールにおけるユーザーの役割と認証、アクセシビリティの代替手段、対応言語などが挙げられます。お問い合わせフォームの予算帯は、5,000米ドル未満から60,000米ドル超まであります。代表的なデータサンプルをいただければ、最も早く信頼できる見積もりをお出しできます。

Dardoは、創業者主導の3人体制のスタジオで、ボゴタを拠点に英語とスペイン語で活動しています。米国東部時間・中部時間と重なる時間帯で稼働しています。

ご依頼前のご質問

データビジュアライゼーションスタジオは何をするのですか?

データを、読み取って行動につなげられるビューに変えます。グラフ、ダッシュボード、地図、インタラクティブなストーリー、そしてそれらを包むインターフェースが対象です。取り組む内容は、答えるべき問い、形式、ラベル、操作性、アクセシビリティに及び、Dardoの場合は、カスタムWebインターフェースやPower BI、Tableauのダッシュボードとしての実装までを含みます。データ分析やBIの運用管理は対象外です。スタジオは情報の見せ方を設計し、データそのものの責任はお客様のデータ管理者が引き続き負います。

カスタムダッシュボードやデータビジュアライゼーションの費用はどのくらいですか?

費用を左右するのは主にグラフではなくデータです。整理されたデータソースが少数で静的なビューであれば、ライブデータ、多数のインタラクション、地図、ロール別アクセス制御を含む場合よりずっと低く抑えられます。データインターフェースごとに、代表的なサンプルを確認したうえで範囲を決めます。提案書にはビュー、データソース、状態、受け入れ確認を記載するため、見積もりを比較しやすくなっています。

ダッシュボードとデータビジュアライゼーションの違いは何ですか?

ダッシュボードはデータビジュアライゼーションの一種で、何かを監視するために繰り返し見る指標をまとめたものです。通常はフィルターを備えています。データビジュアライゼーションはもっと幅広く、単発のグラフ、インタラクティブな地図、探索できるデータストーリー、レポートも含みます。設計で重視する点も異なります。ダッシュボードにはすばやく見渡せることと安定したレイアウトが必要で、データストーリーには導くような流れと文脈が必要です。

開始にはどんなデータが必要ですか?

完璧な最終エクスポートを待つよりも、実際のフィールドと扱いにくいケースを含むサンプルのほうが役立ちます。あわせて、データソースの管理者、フィールド定義、単位、更新頻度、想定する読者、ビューが答えるべき問いも必要です。欠損レコード、変則的な形式、エッジケースこそ設計で対処すべきものですので、先に整えず、そのままお送りください。

インタラクティブなグラフや地図もアクセシブルにできますか?

はい。構造、ラベル、コントロール、色、キーボード操作を最初からアクセシビリティを考慮して設計し、同じ情報を伝える表やテキストの代替も用意すれば可能です。系列の区別を色だけに頼らない、フォーカスを自然な順序で移動させる、動きは視差・動きの軽減設定に従う、といった配慮が必要です。適切なテスト方法はインタラクションと対象の読者によって異なるため、公開前に合意します。

Dardoはデータが正しいかどうかを検証してくれますか?

当社で行ったデータ変換を検証し、既知のテストレコードを使って、表示される値を提供いただいたデータソースと照合します。データの内容面の正確性と公開の承認については、別途リサーチ範囲を合意しない限り、指名されたデータ管理者が責任を持ちます。インターフェースでは数値の隣に出典と日付を表示するため、読者も確認できます。

ダッシュボードやデータストーリーを英語とスペイン語で作れますか?

はい。両言語で制作しているため、ラベル、数値や日付の形式、単位、注記、テキスト代替を、最後に翻訳するのではなく最初からローカライズします。バイリンガルのデータインターフェースでは、長くなりがちなスペイン語のラベルを収める余白と、ビュー間で統一された用語が必要です。これらは後から手直しするのではなく、最初のスケッチの段階から計画します。

関連する実績と事例

Dardoのプロジェクト、Shiimainのウェブサイト実践例/主な実績Shiimainプロジェクトを見る

データを、意思決定に答えるものに

まずは問い、データセット、更新の担当者から始めましょう。ダッシュボードとデータストーリーを比較し、代表的なビューと、空・エラー状態を試します。