第13回: 可視化の品質レビュー
資料のダウンロード
| ファイル | 内容 |
|---|---|
| exercise.py | ハンズオン演習スクリプト |
ヒントの使い方
python exercise.py --hint 1 # 方向性ヒント
python exercise.py --hint 1 --level 2 # より具体的なヒント
python exercise.py --hint 1 --level 3 # コード例
python exercise.py --check # 提出前の自己チェック
演習問題への取り組み方
- 下の講義ノートを読む（事前学習・2時間目安）
exercise.pyを実行してグラフを確認する- 演習問題（5問）に取り組む
python exercise.py --checkで確認するexercise.pyを提出する（締切は授業後1週間）
詰まったとき
解決しない場合は Q&A ページの投稿フォームを使ってください。
講義ノート
1. 本日の到達目標
- 作成した可視化の品質（可読性・認知負荷・アクセシビリティ）を自己評価できる
- ピアレビューを通じて、他者の視点からグラフの問題点を指摘できる
- 色覚多様性に対応したカラーパレットを選択・実装できる
2. 可視化品質チェックリスト（20項目）
グラフを提出・公開する前に、以下の20項目を確認してください。
A. 情報設計（5項目）
| # | チェック項目 | 確認のポイント |
|---|---|---|
| 1 | グラフタイトルはあるか | 「何を」「いつ」「どこで」が一文でわかるか |
| 2 | 軸ラベルと単位はあるか | 「幸福感スコア（0〜10）」のように単位を明記しているか |
| 3 | 凡例は必要最小限か | 系列が1種類なら凡例は不要 |
| 4 | グラフの種類はデータ型に合っているか | カテゴリ比較→棒、分布→箱ひげ、推移→折れ線 |
| 5 | データの範囲・スケールは適切か | y軸を0から始めているか（棒グラフの場合） |
B. 認知負荷（5項目）
| # | チェック項目 | 確認のポイント |
|---|---|---|
| 6 | 不要な3D・影・グラデーションがないか | 情報を加えない装飾は削除する |
| 7 | グリッド線は最小限か | 横軸のみ、薄い色で引く |
| 8 | 色数は4色以内か | 5色以上は記憶の負担になる |
| 9 | データラベルは必要な箇所だけか | 最大値・最小値・注目点のみ |
| 10 | データ-インク比は高いか | 装飾を除いたときデータが読めるか |
C. アクセシビリティ（5項目）
| # | チェック項目 | 確認のポイント |
|---|---|---|
| 11 | colorblind 対応パレットを使っているか | seaborn.color_palette("colorblind") 等 |
| 12 | 色以外の符号化を補っているか | 形状・線種・パターンで二重符号化 |
| 13 | 文字と背景のコントラスト比は十分か | WCAG AA 基準: 4.5:1 以上 |
| 14 | フォントサイズは十分大きいか | タイトル14pt以上、軸ラベル11pt以上 |
| 15 | 色覚シミュレーションで確認したか | Coblis 等のツールで検証 |
D. 可読性・デザイン（5項目）
| # | チェック項目 | 確認のポイント |
|---|---|---|
| 16 | 重要な洞察が注釈で示されているか | ax.annotate() で最大値・転換点を明示 |
| 17 | フォントサイズの階層は明確か | タイトル > 軸ラベル > 目盛り の順 |
| 18 | 余白（padding）は適切か | tight_layout() または constrained_layout |
| 19 | カラーマップの選択は適切か | 連続量→viridis/plasma、発散→RdBu |
| 20 | グラフは単体で自己完結するか | 図キャプションなしで内容がわかるか |
3. 色覚多様性対応の実践
3.1 日本における色覚多様性の割合
色覚多様性（色盲・色弱）は、視覚の多様性の一形態です。日本人男性の約5%、女性の約0.2%が色覚多様性を持つと推定されています（日本眼科学会）。具体的には以下の内訳です。
| 型 | 特徴 | 男性の割合 |
|---|---|---|
| P型（第1型・赤緑色覚） | 赤系の識別が困難 | 約1.5% |
| D型（第2型・緑赤色覚） | 緑系の識別が困難 | 約3.5% |
| T型（第3型・青黄色覚） | 青系の識別が困難 | 約0.1%未満 |
実践的な意味: 30人の教室で男性15人いれば、そのうち約1人が色覚多様性を持つ可能性があります。学術発表・業務報告では必ず対応するようにしましょう。
3.2 推奨カラーパレット
import seaborn as sns
import matplotlib.cm as cm
# 方法1: seaborn の colorblind パレット（カテゴリ変数向け）
palette = sns.color_palette("colorblind", n_colors=5)
# 方法2: matplotlib の viridis（連続量のヒートマップ向け）
cmap = cm.viridis
# 方法3: matplotlib の RdBu（発散型：正負・高低の対比向け）
cmap_div = cm.RdBu
3.3 シミュレーションによる確認方法
グラフを作成したら、以下のツールでシミュレーションして確認してください。
- Coblis (https://www.color-blindness.com/coblis-color-blindness-simulator/)
画像をアップロードするだけで各型の見え方をシミュレート - Color Oracle (デスクトップアプリ)
画面全体をリアルタイムでフィルタリング - Chrome拡張 "Colorblindly"
Webページを直接フィルタリング
3.4 色以外の符号化（二重符号化）
色だけに頼らず、形状・線種・パターンを組み合わせることが重要です。
markers = ["o", "s", "^", "D", "P"] # 円・四角・三角・菱形・プラス
linestyles = ["-", "--", "-.", ":", (0, (3,1,1,1))] # 実線・破線・点線など
for i, (pt, marker, ls) in enumerate(zip(place_types, markers, linestyles)):
ax.scatter(..., marker=marker) # 形状で区別
ax.plot(..., linestyle=ls) # 線種で区別
4. LMS非同期ピアレビューの手順
この授業のピアレビューはすべてLMS上で、自分のペースで行います。
対面で同時に話し合う必要はありません。
4.1 全体スケジュール
| タイミング | 誰が | 何をするか |
|---|---|---|
| 第13回授業中 | 自分 | exercise.py を実行し、自己評価シートを書いてLMSに提出 |
| 授業終了〜7日以内 | 自分 | LMSで割り当てられた担当者2名のグラフをレビューしてLMSに投稿 |
| レビュー受け取り後 | 自分 | コメントを読み、任意で1点改善して最終提出 |
4.2 提出物（授業内、LMSへ）
- グラフ画像 — exercise.py を実行して生成したPNGファイル（複数可）
- 自己評価シート — 下記チェックリスト20項目に自分で○×をつけたもの
（peer_review_form.mdをLMSからダウンロードして記入）
4.3 ピアレビューの書き方（LMSコメント欄）
peer_review_form.md をダウンロードし、テキストとして記入してLMSに貼り付けます。
口頭で説明する必要はありません。読んで伝わる文章で書けばOKです。
良いコメントの例
| NG（漠然としている） | OK（具体的・改善提案あり） |
|---|---|
| 「色が悪い」 | 「赤と緑の組み合わせは色覚多様性に配慮できていません。seaborn.color_palette("colorblind") に変更すると P型・D型の方にも識別しやすくなります」 |
| 「見づらい」 | 「軸ラベルにフォントサイズの指定がなく、デフォルトの小さい文字のままです。ax.set_xlabel("...", fontsize=13) のように明示すると改善されます」 |
| 「注釈が少ない」 | 「最大値のみ注釈されていますが、最小値（最も問題がある地点）にも ax.annotate() で説明を加えると洞察が伝わりやすくなります」 |
4.4 ピアレビュー ルーブリック（各5点満点）
| 評価軸 | 5（優） | 3（良） | 1（要改善） |
|---|---|---|---|
| 可読性 | タイトル・軸ラベル・単位がすべて揃い、フォントが読みやすい | いくつか欠けているが概ね読める | タイトルや軸ラベルがない |
| データ-インク比 | 不要な装飾が一切なく、データが前面に出ている | 軽微な装飾あり | 3D・グラデーション・過剰な色数がある |
| 色のアクセシビリティ | colorblind パレット＋形状の二重符号化がされている | colorblind パレットのみ使用 | 赤緑など識別困難な配色 |
| 注釈・強調 | 重要な洞察が注釈・矢印・ハイライトで明示されている | 一部の重要点に注釈あり | 注釈が全くない |
| 総合デザイン | グラフ単体で完結し、メッセージが瞬時に伝わる | メッセージはわかるが若干説明が必要 | 何を伝えたいか不明瞭 |
合計: _____ / 25点
5. Webアクセシビリティ（WCAG）とデータ可視化
5.1 WCAG とは
Web Content Accessibility Guidelines（WCAG） は W3C が定めるアクセシビリティ基準です。2024年現在、WCAG 2.2 が最新です。データ可視化に特に関連する基準を以下に示します。
| 基準 | レベル | データ可視化への適用 |
|---|---|---|
| 1.4.1 色の使用 | A | 色だけで情報を伝えてはならない → 形状・ラベルを補う |
| 1.4.3 コントラスト（最低限） | AA | テキストと背景のコントラスト比 4.5:1 以上 |
| 1.4.6 コントラスト（高度） | AAA | コントラスト比 7:1 以上 |
| 1.1.1 テキストでない代替 | A | グラフには代替テキスト（alt属性）が必要 |
5.2 matplotlib での対応
# コントラスト比を意識した配色例（白背景に対して）
DARK_BLUE = "#1565c0" # 白背景でのコントラスト比 ≈ 7.5:1（AAA適合）
DARK_RED = "#c62828" # 白背景でのコントラスト比 ≈ 6.8:1（AA適合）
DARK_GREEN = "#2e7d32" # 白背景でのコントラスト比 ≈ 6.5:1（AA適合）
LIGHT_GRAY = "#bdbdbd" # 白背景でのコントラスト比 ≈ 1.9:1（不適合 → 使用禁止）
# フォントサイズの推奨値
plt.rcParams.update({
"axes.titlesize": 16, # グラフタイトル
"axes.labelsize": 13, # 軸ラベル
"xtick.labelsize": 11, # x軸目盛り
"ytick.labelsize": 11, # y軸目盛り
"legend.fontsize": 11, # 凡例
})
5.3 静的グラフを Web に掲載するとき
スクリーンリーダー対応のために、グラフには必ず代替テキストを付与します。
<!-- HTML での alt 属性の例 -->
<img src="fig_happiness_by_place.png"
alt="場所種別ごとの平均幸福感スコア棒グラフ。
公園が最高（7.2点）、オフィス街が最低（5.5点）。">
6. まとめ
| キーワード | 内容 |
|---|---|
| チャートジャンク | データを伝えない視覚的ノイズ（3D・グラデーション・過剰グリッド） |
| データ-インク比 | （データ表現のインク）÷（全インク）。1.0 に近いほど優れた設計 |
| 二重符号化 | 色＋形状など、複数の視覚変数で同じ情報を符号化すること |
| WCAG | Webアクセシビリティの国際基準。コントラスト比・色の使用などを規定 |
| ピアレビュー | 他者の視点でグラフを評価し、改善案を伝え合うプロセス |
参考文献
- Tufte, E. R. (1983). The Visual Display of Quantitative Information. Graphics Press.
- Cairo, A. (2016). The Truthful Art. New Riders.
- W3C. (2023). Web Content Accessibility Guidelines (WCAG) 2.2.
- 日本眼科学会. 色覚異常について. https://www.nichigan.or.jp/
- Okabe, M. & Ito, K. (2002). Color Universal Design (CUD). https://jfly.uni-koeln.de/color/