デザイナーのためのデータビジュアライゼーション:本当に伝わるチャートの作り方

多くのプロダクトダッシュボードはノイズです。チャートが12個、カラーパレットが6種類、明確な階層はなし。ユーザーは1つ1つを見つめて、そもそも何を測っているのかを解読しなければなりません。チームは「データドリブン」と呼んでリリースしました。ユーザーは「わかりにくい」と呼んで無視します。

このペーパーは実践版です。本当に伝わるチャートの種類、小さなサイズでも崩れない色のルール、ユーザーが3秒でデータを理解できる階層の決め方、そして使えるものに保つためのアクセシビリティの基準。D3のチュートリアルもチャートギャラリーもありません。あるのは、実際のプロダクトの中でのデータビズというデザイン規律だけです。

データビズとは何か

データビジュアライゼーションとは、数値を、脳が文章を読むより速く目が比較できる形へと視覚的にエンコードすることです。 棒グラフは数値の列を、高さを目が一瞬で比較できる長方形に変えます。折れ線グラフは時系列を、目がストーリーとして読める傾きに変えます。エンコードこそが仕事のすべてです。

悪いチャートとは、エンコードがデータと喧嘩しているチャートです。11スライスの円グラフは、目が比較できるものを何もエンコードしていません。3D棒グラフはデータをエンコードしたあと、見た目のために歪めます。二軸の折れ線グラフは2つのストーリーを1つのように見せます。どれも数学の失敗ではなく、デザインの失敗です。

ビジュアルヒエラルキーデザインの解説では、目が静的なページをどう読むかを扱っています。データビズは、数値に適用されたヒエラルキーです。

なぜプロダクトでデータビズのデザインが重要なのか

ほとんどのプロダクト画面には、1画面あたり1つか2つの情報しかありません。ダッシュボードには何十もあります。デザインの規律がなければ、ダッシュボードは競合するシグナルの壁になり、ユーザーは大事なものを見つけられません。

データビズは、他のデザインとは失敗の仕方も違います。色を間違えたボタンは見た目が悪いだけです。種類を間違えたチャートは誤解を招きます。ユーザーはチャートがこう言っていると思って判断を下しますが、実際のチャートは別のことを言っていたのです。誤解を招くチャートのコストは、単なる美観の悪さではなく、誤った意思決定です。

2026年、あらゆるプロダクト画面は5年前よりデータ量が増えています。AI機能はモデルの確信度、利用指標、コストの内訳を公開します。分析画面はどこもかしこもテーブルとチャートです。データビズのシステムを構築できるデザイナーは、単機能アプリより複雑なプロダクトでは今や不可欠です。

---

問いに合うチャートを選ぶ

チャート選定はデータビズ作業の8割です。チャートを間違えれば、どれだけ磨いても救えません。正しいチャートを選べば、デザインはほぼ勝手に完成します。

プロダクト作業の大半をカバーする5つのチャートファミリー

プロダクトのデータビズの大半は5つのチャートファミリーに収まります。これを習得すれば、ダッシュボード作業の9割以上はルーティンになります。

画面上のチャートがこのどれにも当てはまらないなら、ユーザーはおそらくそのチャートが何の問いに答えているのかわかっていません。問いに合わせてチャートを変えるか、問う内容のほうを変えましょう。

単一の数値を使うとき

プロダクトデザインで最も活用されていないチャートは、チャートなしです。ラベルと比較を添えた大きな数値1つ(「売上:$124,500、先月比12%増」)は、12個のチャートを並べたほとんどのダッシュボードより多くを伝えます。

単一の数値を使うのは次のようなときです。

• ユーザーが気にするのは最新の値だけで、トレンドではない
• トレンドが比較の文脈から読み取れる
• 画面の面積が限られている(モバイル、サイドバー、ステータスバー)

太いタイポグラフィと明快なラベルを備えた単一の数値の視覚的な重みは絶大です。ほとんどのダッシュボードは、チャートの半分を単一の数値に置き換えたほうが良くなります。

スモールマルチプルを使うとき

スモールマルチプルとは、同じ種類のチャートをカテゴリごとに繰り返して並べたグリッドです。絶対値ではなく、多くの項目にわたるパターンを比較したいときに使います。

地域ごとの売上を示す12個のスパークラインのグリッドは、12本の線が交差する1つのチャートよりずっと速くスキャンできます。目はまず各地域を単独で読み、次にグリッド全体で形を比較します。この手法はEdward Tufteによるもので、プロダクトのダッシュボードではいまだに活用不足です。

上限は1ビューあたり16〜20個ほどです。それを超えると目はすべてを比較できず、グリッドは壁紙になります。

---

プロダクトでほぼ機能しないチャート

スクリーンショットでは見栄えがするという理由で生き残っているチャートの種類があります。実際のプロダクトでは、ほとんどうまく伝わりません。見かけたら切りましょう。

4スライス以上の円グラフ。 3、4スライスを超えると、目は角度を正確に比較できません。代わりに積み上げ棒グラフかツリーマップを使いましょう。円グラフが機能するのは2スライスの比率(はい/いいえ、オン/オフ)くらいで、ほかはほぼありません。

3D棒グラフ。 3次元目がエンコードを歪めます。手前の棒は実際より大きく、奥の棒は小さく見えます。常に2Dを使いましょう。

二軸の折れ線グラフ。 1つのチャートにy軸が2本あると、2本の線を比較すべきだと示唆しますが、それぞれの軸のスケールが違うので比較は無意味です。ユーザーは存在しない相関を読み取ってしまいます。2つのチャートに分けるか、1つの軸で指数化した値を使いましょう。

中にラベルを入れたドーナツチャート。 ドーナツチャートは、手間が増えた円グラフです。中のラベルは、すでに画面上にある情報の重複であることが多いです。代わりに単一の数値と小さな棒グラフを使いましょう。

ワードクラウド。 データのように見えて、何も伝えません。文字の大きさは頻度とゆるく相関するだけで、目は大きさを正確に比較できず、長い単語はピクセルが多いぶん大きく見えます。見つけ次第カットです。

レーダーチャート。 ごく特定の比較(同じスケールの多次元評価)には有用ですが、一般的な比較にほぼ必ず誤用されます。目は不規則な多角形の面積を比較できません。特定の既知のユースケースのためでないなら、棒グラフを使いましょう。

---

データビズにおける色

データビズの色は装飾ではありません。エンコードの一部です。色の選び方を間違えると、チャートの意味が明快から誤解を招くものへ反転しかねません。

色の3つの用途

チャートの中のすべての色は、次の3つのうちどれかの仕事をしています。

カテゴリカルカラー は、順序のない離散的なカテゴリを区別します。各地域、各プロダクト、各顧客セグメントに異なる色相を与えます。6〜8個の区別できる色相のパレットを使いましょう。8を超えると、目が似た色を混同し始め、エンコードは破綻します。

シーケンシャルカラー は、1つの次元に沿った順序のある値を示します。明るいものから暗いもの、低彩度から高彩度へ。複数ではなく、1つの色相のランプを使います。シーケンシャルパレットは、色相ではなく明度で量を伝えます。

ダイバージングカラー は、意味のある中間点を中心に負から正へ広がる値を示します。赤から白、青への変化が古典的な例です。中間点は、見た目の都合ではなく、本物のゼロやしきい値でなければなりません。

3つを混ぜるとチャートは死にます。量のエンコードに使われたカテゴリカルパレットは読めません。カテゴリのエンコードに使われたシーケンシャルパレットは混乱を招きます。データに合ったものを選びましょう。

デザイナーのための色彩理論の解説では、より広い色の原則を扱っています。カラーパレットの用語集では、パレットがどう構成されるかを扱っています。

小さなサイズでも生き残る色のルール

ほとんどのチャートの色は、プロダクトUIでチャートが実際に置かれる小さなサイズで破綻します。60ピクセルのスパークラインには、8つのカテゴリカルカラーをはっきり描画する視覚的な余裕がありません。

通用する5つのルール:

• 1チャートあたりのカテゴリカルカラーは6色までにする。 6を超えると、目は諦めます。
• ハイライト用にアクセントカラーを1色だけ確保する。 ユーザーが最初に見るべき線や棒に、ブランドカラーか高コントラストの色相を与えます。ほかはすべて抑えます。
• 二次的なデータは抑える。 背景、グリッド線、軸ラベルは不透明度40〜60%に。前景のデータはフル彩度に。このコントラストが階層です。
• モノクロでテストする。 チャートをグレースケールに変換して、階層がまだ読めるか確認します。色があるときだけ機能するチャートは、色に頼りすぎです。
• ダークモードでテストする。 ほとんどのプロダクトのチャートは、明るい背景と暗い背景の両方で機能する必要があります。同じ色相でも、暗い背景では彩度が高すぎ、明るい背景では色あせて見えることがよくあります。モードごとにペアになったパレットを作りましょう。

ダークモードデザインの解説では、より広いダークモードの規律を扱っています。チャートは、ダークモードで最も正しく仕上げるのが難しい要素の1つです。

色覚特性はニッチではない

男性の約8%、女性の約0.5%が何らかの色覚特性を持っています。デザイナーには問題なく見えるカテゴリカルパレットの多くが、こうしたユーザーには読めなくなります。

解決策は、色だけで情報をエンコードしないことです。色を形、位置、ラベル、パターンと組み合わせましょう。3色の線がある折れ線グラフには、各線への直接ラベルも付けるべきです。棒グラフには、ユーザーが比較する必要のある棒に値のラベルを付けましょう。

パレットは色覚シミュレーターでテストしましょう。最も多い失敗は、2型色覚(緑色盲)のユーザーにとって赤と緑が区別できないことです。代わりにカテゴリカルなペアとして青とオレンジを使いましょう。どちらも、最も一般的な色覚特性の across でうまく機能します。

アクセシブルな色のコントラストの解説では、コントラストの基準を扱っています。コントラスト比の用語集では、コントラストがどう測定されるかを扱っています。

---

チャートの中の階層

すべてのチャートには階層があります。ユーザーの目はまずデータに、次にラベルに、3番目にグリッド線と軸に着地する必要があります。ほとんどのプロダクトのチャートはこれを逆転させていて、ユーザーはデータを探すために苦労します。

何を強調し、何を抑えるか

データが主役です。棒、線、点が最も強い視覚的な重みを持ちます。フル不透明度、フル彩度で、適切ならブランドカラーやアクセントカラーを使います。

ラベルとタイトルは脇役です。読める強さは必要ですが、データと競うほど強くはしません。通常、データの視覚的な重みの50〜70%です。

グリッド線、軸線、目盛りは舞台です。ユーザーが探したときだけ見えればいい。通常、ラベルの視覚的な重みの20〜40%です。

ほとんどのプロダクトのチャートは、グリッド線がフル強度のまま出荷されます。あらゆるチャートライブラリのデフォルトがそうだからです。修正はグリッド線を抑えるCSSの上書き1つで、チャートはたちまちテンプレートではなくデザインされたものに見えます。

凡例より直接ラベル

チャートの脇にある凡例は、ユーザーの目を凡例とデータの間で往復させます。各線、棒、セグメントへの直接ラベルなら、ユーザーは1回の視線移動でチャートを読めます。

直接ラベルは実装が難しく、チャートライブラリのサポートも貧弱です。それでも作りましょう。右端にラベルが付いた3本線の折れ線グラフは、隅に凡例がある同じチャートより劇的に読みやすくなります。

例外は、直接ラベルが収まらないほど系列が多い場合です。その場合は、インタラクティブな凡例を使います。凡例の項目にホバーまたはタップすると、その系列がチャート内でハイライトされ、残りは抑えられます。

---

3秒ルール

プロダクト内のすべてのチャートは、3秒でその問いに答えるべきです。ユーザーがチャートを study しなければならないなら、デザインは失敗です。

3秒ルールのテスト方法

そのダッシュボードを見たことがない人にチャートを見せます。「このチャートは何を教えてくれますか?」と尋ね、答えるまでの時間を計ります。

3秒以内に答えが返ってくれば、そのチャートは機能しています。それより長くかかるなら、何が足を引っ張っているのかを探します。たいてい次のどれかです。

• チャートの種類が問いに合っていない
• 階層が逆転している(グリッド線がデータより主張している)
• 凡例が目の往復を強いている
• 色のエンコードが不明瞭
• 系列が多すぎる

失敗を直して、再テストしましょう。すべてのチャートが3秒テストに合格するダッシュボードは、ユーザーが実際に使えるダッシュボードです。

3秒ルールが当てはまらないとき

探索的な分析ツール(BIツール、データサイエンスのノートブック)は別です。ユーザーはちらっと見ているのではなく、調査しています。あらゆる変数、あらゆるディメンション、あらゆるフィルターを求めます。3秒は3分になり、それで構いません。

間違いは、BIツールの規律でプロダクトのダッシュボードを作ることです。プロダクトのユーザーは調査していません。確認しているのです。予算は3秒です。

---

データビズにおけるインタラクション

プロダクトUIのチャートはインタラクティブです。ホバーでツールチップ、クリックでフィルター、ブラシでズーム。インタラクションにも、静的なエンコードと同じくらい意図的なデザインが必要です。

ツールチップのデザイン

チャートのツールチップは「この点の正確な値は何か?」という問いに答えます。ほとんどのチャートライブラリは、すべての系列を一度に表示するツールチップがデフォルトで、ホバーすると文字の壁になります。

より良いデフォルト:

• ツールチップは全系列ではなく、系列ごとに1つ。 気にしている線にホバーすれば、その線の値が見えます。チャートの背景にホバーしても何も表示されません。
• ツールチップには単位を含める。「1240」ではなく「$1,240」。
• 役に立つ場面では、ツールチップに比較の文脈を示す。「$1,240(先週比+8%)」でツールチップがストーリーになります。
• ツールチップはデータを決して隠さない。 チャートの端への近接に応じて、カーソルの上か下に配置します。

フィルタリングとブラッシング

ダイレクトマニピュレーションに対応したチャートは、別のフィルターパネルが必要なチャートにはない、反応の良さを感じさせます。x軸の日付範囲をブラッシングしてズームする、凡例のカテゴリをクリックして絞り込む、しきい値の線をドラッグして行をフィルターする。それぞれにエンジニアリングの作業が必要ですが、ユーザーの信頼という形で報われます。

リスクは作り込みすぎです。役に立つために5つのインタラクションが必要なチャートは、もっとシンプルな複数のチャートに分割すべきチャートです。インタラクション1つ1つが認知的なコストです。

プログレッシブディスクロージャーの用語集では、より広い原則を扱っています。チャートは、ユーザーが意図を示すまで高度なコントロールを隠すことで、これをうまく活用できます。

---

注意すべきデータビズの失敗

ダッシュボード監査で見つかる失敗は、毎回同じです。プロダクトがこれらのどれかを抱えたまま出荷されるなら、データビズのレイヤーがプロダクト全体の足を引っ張っています。

変化を誇張する切り詰められたy軸。 y軸が0ではなく95から始まる棒グラフは、2%の変化を視覚的な断崖に変えます。明確な理由がない限りフルレンジの軸を使い、切り詰めがあれば明示的にラベルを付けましょう。

棒グラフでゼロのベースラインがない。 棒の長さがエンコードです。棒がゼロから始まらなければ、エンコードは嘘をつきます。棒グラフでは譲れません。折れ線グラフは、時間にわたる小さな範囲を見せるチャートなら、切り詰めた軸を使えます。

1つのダッシュボードでのチャートタイプの不一致。 向きが違う2つの棒グラフ、軸の範囲が違う2つの折れ線グラフ、同じデータを示す積み上げ棒グラフの隣の円グラフ。問いごとに合ったチャートの種類を選びつつ、ダッシュボード全体で視覚的な扱いは一貫させましょう。

ページの他の部分より読み込みに時間がかかるチャート。 レイアウトを200msで描画し、チャートに2秒かかるダッシュボードは壊れて感じられます。すべてのチャートにスケルトン状態を作りましょう。フォールドより下のチャートは遅延読み込みに。完全なペイロードを待たず、データをストリーミングしましょう。

ブランドを無視したチャート。 チャートライブラリのデフォルトの色を使ったダッシュボードは、テンプレートに見えます。チャートのパレットは、アクセシビリティと小さなサイズでの可読性を調整したうえで、ブランドのカラーシステムから導き出すべきです。デフォルトのChart.jsやRechartsのカラーパレットのまま本番に出荷してはいけません。

ブランドカラーパレットの解説では、より広いブランドカラーの規律を扱っています。データビズのパレットは、発明するものではなく、導き出すものです。

---

2026年の条件下でのデータビズ

3つの変化が、データビズのデザインのされ方を変えました。仕事のほうが適応する必要があります。

AIは数秒でチャートを生成する。 ChatGPTやClaudeのようなツールは、1回のプロンプトで生のデータからチャートを生成できます。リスクは、AIが選んでくれるので、デザイナーがチャート選定を考えなくなることです。AIはほぼ必ず、実際の問いに合わない汎用的なチャートタイプを選びます。AIは初稿に使い、そのあとユーザーが抱いている問いに基づいてリファクタリングしましょう。

リアルタイムデータが当たり前。 ダッシュボードは今や、60秒ごとの更新ではなくライブデータをストリーミングします。デザイン上の含意は、モーションにもデザインが必要だということです。更新のたびにちらつくライブチャートは使い物になりません。データポイント間のなめらかな補間と、明確な「ライブ」インジケーターが最低ラインです。

モバイルのダッシュボードが一般的。 デスクトップだけを想定したダッシュボードは、週末や移動中の利用の大半を失います。モバイルのチャートには別の判断が必要で、多くはよりシンプルなチャートタイプ、少ない系列、圧縮されるグリッドレイアウトではなくスクロールする縦長のレイアウトになります。

レスポンシブデザインの解説では、より広いレスポンシブの規律を扱っています。データビズは、真にレスポンシブにするのが最も難しいレイヤーの1つです。

---

FAQ

どのチャートタイプを使うべきですか?

ユーザーが抱いている問いにチャートを合わせましょう。カテゴリ間で値を比較する:棒グラフ。時間の変化を示す:折れ線グラフ。全体の構成を示す:積み上げ棒グラフまたはツリーマップ(円グラフはほぼ使わない)。2変数の関係を示す:散布図。分布を示す:ヒストグラムまたは箱ひげ図。画面上のチャートがこのどれにも当てはまらないなら、ユーザーはそのチャートが何の問いに答えているのかわかっていません。

円グラフを避けるべきなのはいつですか?

ほぼ常にです。円グラフが機能するのは、比率がストーリーのすべてである2〜3スライスの場合(はい/いいえ、オン/オフ、単純な二分割)です。3スライスを超えると、目は角度を正確に比較できず、チャートは装飾になります。代わりに横向きの積み上げ棒グラフかツリーマップを使いましょう。

チャートには何色使うべきですか?

カテゴリカルカラーは最大6色、それにハイライトする系列用のアクセント1色です。6色を超えると、目が似た色相を混同し始め、エンコードが破綻します。シーケンシャルなデータ(低から高)には、明から暗への1つの色相のランプを使います。ダイバージングなデータ(負から正)には、意味のある中間点を中心にした2色相のランプを使います。

チャートをアクセシブルにするには?

色だけで情報をエンコードしないこと。色を形、位置、ラベル、パターンと組み合わせます。パレットは色覚シミュレーターでテストしましょう(2型色覚が最も一般的です)。チャート要素と背景の間でWCAGのコントラスト最低基準を満たします。可能なら、凡例だけの参照ではなく直接ラベルを提供します。スクリーンリーダー向けに、チャートコンポーネントにアクセシブルな名前を付けましょう。

チャートの3秒ルールとは?

プロダクトのダッシュボードのすべてのチャートは、初めて見るユーザーに見せたとき、3秒以内にその問いに答えるべきです。ユーザーがチャートを study しなければならないなら、デザインは失敗です。ダッシュボードを見たことがない人にチャートを見せ、チャートが言っていることを要約するまでの時間を計ってテストしましょう。3秒を超えるなら、チャートは単純化が必要です。

チャートライブラリを使うべきですか、それともカスタムで作るべきですか?

初稿やプロトタイプにはチャートライブラリを使いましょう。プロダクトUIの本番のチャートの多くは、デフォルトを直すために、ライブラリの上にカスタムレイヤーを重ねるのが有効です。抑えたグリッド線、直接ラベル、ブランドのカラーパレット、カスタムツールチップなど。D3やcanvasによる完全なカスタムのデータビズが正当化されるのは、どのライブラリもサポートしないほどチャートタイプが特殊な場合だけです。

データビズは装飾ではなくデザインである

規律あるデータビズを備えたダッシュボードは、ユーザーの時間を尊重するプロダクトに感じられます。それがないダッシュボードは、たまたま数字を含んでいる装飾の壁に感じられます。その2つの距離は小さく、前者にたどり着く唯一の道は、チャート選定、色、階層、インタラクションに適用されるデザインの規律です。

問いに合うチャートを選ぶ。グリッド線は抑え、データを際立たせる。色は装飾ではなくエンコードとして使う。3秒ルールでテストする。色覚特性でテストする。モバイルとダークモードでテストする。

規律あるデータビズを出荷するプロダクトは、真剣なものとして読まれます。デフォルトのチャートライブラリの出力をそのまま出荷するプロダクトは、テンプレートとして読まれます。ユーザーは、理由を言葉にできなくても、その違いに気づきます。

プロダクトUIの他の部分と並行してデータビズのシステムを構築するチームが必要なら、Brainyに依頼してください。どのプロジェクトでも、チャートはデザインシステムのファーストクラスの一部です。

関連記事

• ビジュアルヒエラルキーデザイン
• デザイナーのための色彩理論
• ダークモードデザイン
• アクセシブルな色のコントラスト