結論と対象読者

変換前後比較は、元画像とDotLCD出力を同じ構図、同じ表示領域、同じ拡大率で見比べられるよう設計します。単なる見栄えの演出ではなく、論理解像度、4階調、パレット、残像が何を変えたかを確認する検証機能です。

30秒要約

  • 比較対象の切り抜き位置と縦横比をそろえます。
  • 左右並列、切替、スライダーの複数方式を用意できます。
  • キーボードとタッチでも操作できるようにします。
  • 動画比較では、両側の時刻を同期します。
  • プライバシーを守るため、比較用の元画像を自動保存・送信しません。

概要と背景

DotLCD変換では、細部が消え、輪郭がまとまり、明暗が4段階へ整理されます。パレットや残像だけを見ていると、どの処理が結果へ影響したか分かりにくくなります。

比較UIを使うと、低解像度化で消えた情報、階調化で変化した面、ディザーで補われた中間調を確認できます。

特徴・できること

左右並列表示

元画像と変換後を同時に表示します。広い画面で比較しやすく、操作も単純です。

押している間だけ原画表示

モバイルで表示領域が狭い場合に向きます。ボタンには現在の状態をテキストで表示します。

比較スライダー

境界線を動かして同じ位置を比較できます。ただし、ポインター操作だけにせず、範囲入力やキーボード操作を用意します。

処理段階ごとの比較

  • 原画
  • 論理解像度縮小後
  • 4階調化後
  • パレット適用後
  • 残像・欠陥適用後

この順番を表示すると、各処理の役割を確認できます。

現在の位置付けと利用上の前提

Canvas APIは画像を描画できますが、比較UIを自動提供しません。比較位置、同期、アクセシビリティ、保存方針はアプリ側で実装します。

カメラ映像を比較する場合、元映像側と変換側を別々にカメラ取得しないようにします。同じMediaStreamまたは同じ入力フレームから分岐し、権限と負荷を増やさない設計にします。

元画像を表示すること自体がプライバシー上の問題になる場面もあります。公共の場所や画面共有時には、原画を隠せる操作を用意します。

近い対象との比較

比較方式長所注意点
左右並列同時に全体を見られる小画面では狭い
上下並列縦長画面で使いやすい視線移動が大きい
瞬時切替差を認識しやすい状態表示が必要
スライダー同じ位置を比較しやすいアクセシブルな代替操作が必要
段階表示処理の役割が分かるUIが複雑になる

確認/試行の条件と注意点

  1. 元画像と変換画像の縦横比をそろえます。
  2. 切り抜き位置、回転、左右反転をそろえます。
  3. スライダーをキーボードで操作できるか確認します。
  4. 現在どちらを表示しているかテキストで伝えます。
  5. 動画ではフレーム時刻がずれないか確認します。
  6. 元画像の自動保存や外部送信がないか確認します。
  7. スクリーンショットや書き出しに原画を含めるか明示します。
  8. 小画面では比較方法を切り替えられるようにします。

比較画面そのものが加工結果の一部と誤解されないよう、書き出し対象とプレビュー対象を分けて表示します。

参考リンク

  • MDN: Canvas API
  • https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
  • MDN: Range input
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/range
  • W3C: WCAG 2.2
  • https://www.w3.org/TR/WCAG22/