品質ラダーで主観評価をキャリブレーションするワークショップ手法
“画質が荒い/十分” の感覚差はロールや経験で乖離します。Quality Ladder ツールを中心に 短時間で合意 を形成するためのワークショップフォーマットを紹介。
TL;DR
- 代表画像をカテゴリ別に 3×3 (写真/UI/イラスト)
- 品質グレード 5段 (例: 95/90/85/80/75) を比較
- 匿名スコア → 差異理由共有 → 再投票で収束
- 合意段を “基準タイル” としてスクリーンショット保存
1. 事前準備 (20分)
- 代表画像収集: 写真/UI/イラスト 各≥3枚 (用途/背景/細部量タグ)
- 各画像を 5品質 (例: AVIF cq 38/40/42/44/46) で書出し
- 匿名投票フォーム + 集計スクリプト
- 進行役(Facilitator) / 記録係(Scribe) 任命
Facilitator は結論を出さない。プロセス健全性を担保。
1.5 投票データ構造
1票=1行 JSON Lines で履歴と再解析容易性を確保。
{ "image":"hero_ui", "candidate":"cq42", "rater":"anon-7c2", "time":1725601112 }
interface Vote { image:string; candidate:string; rater:string; time:number }
export function consolidate(votes:Vote[]){
const by = new Map<string, Vote[]>();
for (const v of votes){ if(!by.has(v.image)) by.set(v.image,[]); by.get(v.image)!.push(v); }
return [...by].map(([image, vs])=>{
const counts = Object.entries(vs.reduce((a,c)=> (a[c.candidate]=(a[c.candidate]||0)+1, a), {} as Record<string,number>)).sort((a,b)=>b[1]-a[1]);
return { image, top: counts[0][0], spread: counts[0][1] - (counts[1]?.[1]||0), total: vs.length };
});
}
2. 実施フェーズ (50分)
- 個別観察 (静寂) 5分: 発言禁止で初期直感取得
- 匿名投票 第1回
- 中央値±1 外れ票理由共有 (15分)
- 再投票 → 収束判定 (票差 ≤2)
- 未収束: 品質1段追加 or 代表画像差替
2.5 外れ値可視化
spread (最多票 - 次点票) < 2 の “僅差” 画像のみ議論し時間節約。
export function outlierImages(votes:Vote[], threshold=2){
const by = new Map<string, Vote[]>();
for (const v of votes){ if(!by.has(v.image)) by.set(v.image,[]); by.get(v.image)!.push(v); }
return [...by].filter(([img, vs])=>{
const counts = Object.values(vs.reduce((a,c)=> (a[c.candidate]=(a[c.candidate]||0)+1, a), {} as Record<string,number>));
const sorted = counts.slice().sort((a,b)=>b-a);
return (sorted[0] - (sorted[1]||0)) < threshold;
}).map(([img])=>img);
}
3. 成果物 (20分)
- golden/quality-ladder/<image>.png (代表合意品質)
- 合意ログ Markdown (外れ票理由 + 最終理由)
- PSNR/SSIM/VMAF レンジを thresholds.json に記録
- 再現スクリプト (ladder-regenerate.ts)
3.5 自動化スクリプト例
// scripts/export-golden.ts
import fs from 'node:fs';
import cp from 'node:child_process';
const ladder = JSON.parse(fs.readFileSync('votes-consolidated.json','utf-8'));
for (const r of ladder){
const src = `renders/${r.image}_${r.top}.png`;
const dest = `golden/quality-ladder/${r.image}.png`;
cp.execSync('cp '+src+' '+dest);
}
4. 失敗パターン
- 議論先行 → 先に“静寂観察” 時間を確保
- カテゴリ過少 → 汎化不能閾値
- 投票公開 → 同調圧力
- 画像1枚のみ → 過適合
4.5 ドリフト監視
CI で最新 Q 選択がゴールデンとの差分閾値 (ΔQ ≤ 1) 超なら失敗。
node scripts/ladder-q-pick.js --image hero_ui.png --out current.json
node scripts/ladder-diff.js golden/quality-ladder/hero_ui.png current.json --delta-q 1
関連ツール
5. まとめ
主観基準は口頭/議事録では腐敗しがち。ラダーで“具体的な画素差付き合意物”を生成し、CI と組み合わせ drift を防ぐ。
公開日: 2025-09-06編集: gazou-compressor.jp
FAQ
FAQ(よくある質問)
1画像形式の基本方針は?(写真/スクショ/透過)
写真は AVIF / WebP(画質80–85%目安)、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
2圧縮しても画質を落とさないコツは?
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes
を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。