Evidence - 🏆 グッドデザインデータ可視化ツール賞 2024

はじめに

この記事ではEvidenceというBIツールのデザイン的に優れているなぁと思うところを紹介していきます。勝手にグッドデザインデータ可視化ツール賞 2024を授与します🏆 おめでとう〜🎉 (JDPによるGOOD DESIGN AWARDとは何の関係もありません)

この記事も「Evidence使ってみた」をEvidenceで書いてみたと同じようにEvidenceで書いてみました。

この記事で紹介する内容

EvidenceのUIデザインやユーザー体験の観点で優れているところを実例を交えて紹介します。

サンプルで使用するデータは嵐のCD・DVDの売上枚数のデータです (手打ちで作りました)。

ちなみに、このデータ+αを使って嵐のダッシュボードもEvidenceで作ってます: ARASHI Songs

特徴や使い方は、「Evidence使ってみた」をEvidenceで書いてみたや下記の記事を読んでみてください。

受賞理由

グッドデザインデータ可視化ツール賞の受賞理由として、デザイン的に優れているところを3つ紹介します。

優れたUIを目指している

特に評価しているところは、Evidenceがコンセプトとして優れたUIを目指しているところです。

公式ドキュメントのMotivationページには、「Our mission is to give you the tools to deliver production-quality data products that look and feel more like the New York Times' data journalism than a drag-and-drop dashboard. (私たちの使命は、ドラッグアンドドロップダッシュボードよりもNew York Timesのデータジャーナリズムのような外観と感触の品質のデータ製品を届けるためのツールを提供することです。)」と明記してあります。

実際に、New York TimesのGraphicsを見てみると、なんとなくEvidenceと似てる気がします。A Nation of Homebodiesにある棒グラフとかEvidenceっぽいです。

New York Timesの棒グラフ by A Nation of Homebodies

Evidenceの棒グラフ

標準でUIコンポーネントが用意されている

EvidenceはUIコンポーネントが豊富に用意されているので、作りたいと思うUIの大半は標準のコンポーネントの組み合わせだけで作ることができます。公式ドキュメントのAll Componentsによると、グラフの種類が多いだけでなく一般的なUIで必要なアラートやモーダル、タブ、ボタンなど様々なUIコンポーネントが用意されています。

UIコンポーネントが豊富にあることは、車輪の再開発を防ぐという側面もあると思います。標準のコンポーネントでいい感じのUIが作れることで、データ可視化というコアの実装に集中できるようになっていると感じました。

また、EvidenceはMarkdownベースで、タイトルやボタンなどの要素が正しいセマンティックなHTMLでレンダリングされるので、ウェブアクセシビリティの確保も自然と取り組めると思います。(参考: アクセシビリティを考慮したHTMLコーディングガイド, Webアクセシビリティですべきことをまとめてみる（HTML限定）)

この記事では、いくつかのUIコンポーネントを紹介します。

モーダル

アラート

Info: You are my SOUL! SOUL!

Warning: This tornado from the east's gonna hit your town

Negative: 此処に現るのはこの"夢の布陣"

ボタングループとドロップダウンメニュー

All Sales

59,586,708

レスポンシブルなUI

EvidenceはレスポンシブルなUIなので、特に個別対応することなく、PCやスマホ、タブレットにUIが最適化されます。このページをPCやスマホなどのさまざまなデバイスで見てみてください。いい感じに表示されていると思います。

この辺はSteepというBIツールと思想が似ているところだと思いました。今やPCだけでなくスマホやタブレットなどのさまざまなデバイスでデータを見る時代です。Evidenceはモダンなツールであるため、今の時代に合ったUIを提供してくれていると感じました。

ダークモードに対応している

2024年12月のアップデートで、カラーテーマの設定とダークモードに対応しました。カラーテーマは、YAML形式の設定ファイルにカラーコードを書くだけで設定できます。また、ダークモードもYAMLの設定ファイルで制御できます。特別な対応をせずにダークモードに対応できるのもEvidenceがモダンなツールであるためだと思います。

おわりに

この記事では、勝手にグッドデザインデータ可視化ツール賞 2024という賞を作り、勝手にEvidenceに授与し、受賞理由っぽくEvidenceのデザイン的に優れたところを紹介しました。New York Timesのデータジャーナリズムのような外観と感触の品質を提供するというコンセプトが最大の受賞理由です。

優れたUIやユーザー体験を提供することで、ユーザーがよりデータを活用しやすくなります。デザインの力で、データを価値あるものにするためには、Evidenceのようなデータ可視化ツールが必要なのでは?と感じました。