あやね
数値上は正しいグラフでも、読み取りにくいことがあります。凡例が色だけに頼っていたり、軸に単位がなかったり、正確な値がツールチップにしか表示されなかったりするためです。グラフを読む人の見え方、入力方法、言語、端末、データへの慣れはさまざまです。アクセシブルなデータ可視化では、意図した比較に複数の方法でたどり着けるようにします。
まず、指標と対象範囲を明記し、色以外の手がかりを用意し、重要な値をテキストでも読めるようにします。以下では、この三つをグラフのラベル、キーボード操作、欠測状態に当てはめます。グラフの種類を選ぶ際は、データ可視化のデザイン（英語）も参照してください。
グラフが支える判断を先に決める
グラフの種類を選ぶ前に、読み手が何を判断する必要があるかを書き出します。「売上を理解する」では曖昧ですが、「プラン別の更新率を比較し、今四半期に最も大きく変化したプランを見つける」ならグラフの役割が定まります。支える判断が決まっていないグラフには、注意を奪い合うラベル、色、操作部品が増えがちです。
対象読者、期間、単位、必要な精度を定義します。財務アナリストには正確な値とダウンロード可能なデータが必要でも、経営層には大まかな傾向の比較と例外の明示が必要かもしれません。同じデータから異なる二つの表示を作っても構いませんが、どちらも前提条件を隠さないようにします。
グラフの要件を短い表にまとめます。
| 項目 | 確認すること |
|---|---|
| 判断 | 読み手は何を比較し、何を判断する必要があるか？ |
| 指標 | 何を数え、平均し、または推定しているか？ |
| 単位 | 件数、割合、通貨、時間、指数のどれか？ |
| 範囲 | どの利用者、期間、フィルターを含むか？ |
| 不確実性 | 値に遅延、標本抽出、推定が含まれるか？ |
この要件表は、視覚表現とその意味を結び付けます。後でコンテンツ担当者や開発者がテキストによる代替表現を作る際にも役立ちます。
色だけで情報を区別しない
色は強調に役立ちますが、カテゴリ、状態、方向を色だけで伝えるのは確実ではありません。色が変わっても残る二つ目の手がかりを加えます。直接ラベル、形、線種、位置、模様、テキスト付きアイコン、常に見える注記などです。グラフと凡例の間で、同じ手がかりを一貫して使います。
折れ線グラフでは、離れた凡例より線の終点に置くラベルのほうが分かりやすい場合があります。状態を示す表では、赤・黄・緑だけを並べず、色のチップに状態名を添えます。地図では、色の段階に加えて境界線、ラベル、テクスチャを使います。
模様を増やせばすべて解決するわけではありません。複雑な模様は誰にとっても読み取りにくくなります。まず位置と直接ラベルを優先し、それでも区別しにくいカテゴリに、控えめな補助の手がかりを加えます。
グラフの文脈でコントラストを確認する
該当するWCAGの基準値を出発点にします。通常のテキストでは原則として4.5:1以上、基準上の大きなテキストでは3:1のコントラスト比が必要です。グラフの理解に必要な図形要素は、隣接する色に対して原則3:1が必要です。パレットの色見本だけでなく、実際のマークと背景の組み合わせに基準を適用します。ごく細い線は、元の色が基準を満たしていても、アンチエイリアス処理後に見えにくいことがあります。
製品で提供する通常、フォーカス、選択、ダークテーマ、印刷の各状態を確認します。直接ラベルや表示された値が情報を伝えているなら、低コントラストの装飾的なマークが同じ情報を担う必要はない場合があります。パレット全体を「アクセシブル」と判断するのではなく、その役割分担を記録します。選択状態にも、ラベル、マーカー、線の表現など、色がなくても分かる手がかりが必要です。
要件と例外については、W3Cのテキストのコントラストに関する解説（英語）と非テキストのコントラストに関する解説（英語）に説明があります。色の値を確認するだけでなく、想定する表示サイズで描画されたグラフをテストしてください。
何を比較するのかが伝わるラベルを付ける
「月次パフォーマンス」という題名だけでは、何の実績なのか分かりません。「プラン別更新率：2026年1月〜6月」のように、指標と範囲を含めます。副題には出典、更新時刻、適用中のフィルターを示せます。軸ラベルには単位と読み取りやすい目盛りを付け、略語には説明を添えるか、読者にとって意味が明確な文脈で使います。
すべてのデータ点ではなく、意味のある出来事に注記を付けます。判断に影響する変化や閾値を取り上げ、対応するマークの近くへ配置します。重要な値を知るためにホバーが必要なら、その値を常に見えるテキストか同等の表でも確認できるようにします。
小さなグラフを並べるスモールマルチプルでは、各グラフに目盛りを示すか、軸が共通かどうかを明記します。尺度が異なると小さな変化が劇的に見えることがあり、同じ尺度では有用な差が見えにくくなることもあります。どちらを選ぶかは、グラフの要件表に理由を残します。
利用しやすいデータ表とテキスト要約を用意する
複雑なグラフには、何を示すかを短く説明し、重要な比較を伝えるテキストを近くに置きます。正確な値が必要な場合は、系列、単位、日付、フィルターがグラフと一致する構造化された表を用意します。ダウンロードも役立ちますが、重要な情報を得る唯一の方法にしてはいけません。適切な表見出しとキャプションを付けます。表を画像にしただけでは、依然として画像です。
テキスト要約では、主な比較結果と例外を示せます。
4月から6月にかけて、TeamプランとBusinessプランの更新率が上昇しました。上昇幅が最も大きいのはBusinessプランです。Enterpriseプランの6月のデータは、まだすべてそろっていません。
正確なデータが重要な場面では、この一文で数値を置き換えることはできません。ただし、読み手が理解を始める手がかりになります。製品側で閾値が定義されていない限り、傾向を「良い」「悪い」と評価しないようにします。
ゼロ・欠測・遅延・推定値を区別する
空の状態とデータを利用できない状態を区別します。ゼロは測定値が0であることです。データがない場合は、事象がまだ発生していない、フィルターに一致しない、システムがその指標をまだ収集していない、などの理由が考えられます。遅延しているデータには時刻か説明が必要です。推定値は推定であることを示し、必要に応じて推定方法や範囲を添えます。
フィルターの結果が0行でも、軸とラベルは安定した位置に保ち、対象範囲が変わったことを説明します。グラフを完成した見た目にするためだけに、ゼロを示す水平線を描いてはいけません。データソースで障害が起きた場合は、影響を受けるグラフの近くに回復可能な状態を示し、選択中のフィルターを保持します。
ダッシュボードUIのデザイン（英語）の例はカードの情報階層を考える参考になりますが、状態の定義はデータの仕様に基づいて決める必要があります。製品が裏付けられない値を確かなもののように表示するより、落ち着いた空のパネルで状態を説明するほうが適切です。
細かなポインター操作に頼らず使えるようにする
フィルター、系列の表示切り替え、範囲コントロールを含め、グラフの機能をキーボードで操作できるようにします。重要な値を、ごく小さな点へのホバーだけに依存させてはいけません。単純な静的グラフなら、すべてのマークをTabキーの移動先にするより、値のラベルとアクセシブルな表を設けるほうが分かりやすい場合があります。操作できるグラフでは、フォーカスの順序、値の間の移動方法、キーボード操作で閉じ込められずにグラフから抜ける方法を定義します。
操作によってグラフが更新されたら、新しい対象範囲をテキストで通知するか、確認できるようにします。系列を非表示にできるなら、再表示の方法も説明します。スクラバーや範囲コントロールでは、つまみの位置だけに頼らず、選択した日付を読みやすい形式で表示します。
モバイルでは操作部品の密度も重要です。デスクトップ用グラフをラベルが重なるまで縮めるのではなく、要約カードや、対象を絞った詳細表示を使います。最小幅を固定する前に、長いラベルや翻訳後の単位で確認します。
意味に基づいて色の体系を組み立てる
色見本を個別に選ぶのではなく、色の役割を定めます。カテゴリ別のパレットには区別しやすく繰り返し使える系列色が、連続的な尺度には順序を表す意味が、発散型の尺度には明確な中点が必要です。強調色は選択中または推奨する系列に取っておき、周辺の文脈には中立的な色を使います。
パレットの色数よりカテゴリが多くなった場合のルールを記録します。出現頻度の低いカテゴリをまとめる、直接ラベルを使う、表に切り替える、といった選択肢があります。ほとんど区別できない色を増やして、凡例の読み解きを難しくしてはいけません。デザイントークンと共有値（英語）に関するデザインシステムの資料は役割の記録に役立ちますが、新しいデータが加わったときの表示ルールは、グラフごとに必要です。
パレットをグレースケール、低い不透明度、代表的な色覚の違いを想定した条件で確認します。自動ツールはコントラストに問題のある色の組み合わせを指摘できますが、グラフ全体を見て意図した比較が分かるかどうかは、人による確認も必要です。
同じ小規模なデータセットから、グラフと対応する表をPixsoで作ります。各棒の隣にカテゴリ名と値を置き、同じ名前と値を表にも記載して、色がなくても意味が伝わるようにします。共有のテキストスタイルとカラースタイルを使い、狭い幅で二つの表示を比較します。ホバー状態を加えたり開発用にデザインを書き出したりする前に、チームメンバーがすべてのカテゴリを識別し、正確な値を見つけられるかをレビューします。
タスクの状態を示す例では、両方の表示で同じデータを使います。予定が6件、進行中が4件、完了が2件です。「全12件のタスクの半分が予定段階で、2件が完了しています」と簡潔に要約できます。
| 状態 | タスク件数 |
|---|---|
| 予定 | 6 |
| 進行中 | 4 |
| 完了 | 2 |
実際の内容と制約の下でグラフをレビューする
グラフの種類、画面幅、テーマ、データ状態、操作状態、代替表示を軸にレビュー表を作ります。想定する最大カテゴリ数、最も長いラベル、最小値、欠測値、通常とは異なる外れ値を含めます。通常のズーム倍率と、テキストを拡大した状態で確認します。
スクリーンショットに賛成するだけでなく、レビュー担当者に具体的な作業をしてもらいます。
- 指標と単位を特定する。
- 比較に必要な値のうち、最大値と最小値を見つける。
- 選択した期間に何が変わったか説明する。
- 欠測値または推定値を特定する。
- フィルターを切り替え、前の表示に戻す。
デザイナーの説明がなければ作業を完了できない場合、ラベルを明確にするか、別の表現方法を用意する必要があります。
出典と解釈の情報をグラフの近くに置く
出典、更新時刻、解釈上の注記を、グラフの近くか、すぐに開ける詳細パネルに置きます。長いダッシュボードの末尾の脚注は、特にグラフをプレゼンテーションへコピーしたときに見落とされがちです。注記では、その指標が件数、比率、標本、推定のどれなのかを説明し、現在の表示に使っている期間を示します。
グラフをエクスポートまたは共有するときは、この対象範囲の情報も画像や表と一緒に渡します。単位や期間が切り落とされたスクリーンショットは、別の結果と誤解される可能性があります。デザイナーが一つの書き出し形式を指定する必要はありませんが、結果の解釈に必要な情報を引き継ぎ資料とUIで利用できるようにする必要はあります。見た目が整ったグラフが、製品の外では意味の曖昧な資料になってしまうことを防げます。
データとアクセシビリティの判断を開発へ伝える
データのフィールド、単位、並び順、フィルターの範囲、更新時刻、取得できない場合の代替状態をコンポーネントの隣に記録します。画面に表示する題名、テキスト要約、表の提供方針、キーボード操作も加えます。色と形のうち、どの手がかりが同じ情報を重ねて伝えているか、どの値を意図的にまとめたかも説明します。
デザインからコードへの引き継ぎ（英語）の工程は、こうした判断を記録するのに適しています。ただし、スクリーンショットの中に埋もれさせないでください。開発者には、データが変わっても理解できるグラフを実装するための、意味に関する取り決めと状態のルールが必要です。
グラフを元データと照合する
並べ替え、絞り込み、サイズ変更の後で、表示されるすべての値を元の表と照合します。タスクの例なら「予定」は、棒のラベル、凡例に対応するカテゴリ、表の行のいずれでも6件のままで、要約も全12件を対象にしている必要があります。次に色を使わない表示で、キーボード操作を確認します。値、ラベル、操作のいずれかにアクセスできなくなる場合は、その表現を修正してから完成と判断します。
