gazou-compressor.jp

品質ラダーで主観評価をキャリブレーションするワークショップ手法

“画質が荒い/十分” の感覚差はロールや経験で乖離します。Quality Ladder ツールを中心に 短時間で合意 を形成するためのワークショップフォーマットを紹介。

TL;DR

1. 事前準備 (20分)

  1. 代表画像収集: 写真/UI/イラスト 各≥3枚 (用途/背景/細部量タグ)
  2. 各画像を 5品質 (例: AVIF cq 38/40/42/44/46) で書出し
  3. 匿名投票フォーム + 集計スクリプト
  4. 進行役(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分)

  1. 個別観察 (静寂) 5分: 発言禁止で初期直感取得
  2. 匿名投票 第1回
  3. 中央値±1 外れ票理由共有 (15分)
  4. 再投票 → 収束判定 (票差 ≤2)
  5. 未収束: 品質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分)

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. 失敗パターン

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 を見比べるのがおすすめです。
3CLSを悪化させない画像の置き方は?
すべての画像に width/height(または親に aspect-ratio)を与え、広告・埋め込みは 予約サイズを先に確保します。詳しくは CLSゼロ設計ガイド を参照。

gazou-compressor.jp 編集部

画像圧縮・変換・背景除去などの実践テクニックと、Webで“速く・軽く・崩さない”ためのノウハウを発信しています。

関連記事

トピック/更新日の近いコンテンツ