どのOTTプラットフォームにも、どこかに同じ「目立たない不具合」が潜んでいます。それは、一見するとほぼ正しいように見える画像です。
幅が数パーセントだけ広すぎるポスター。テレビで見ると端が切り取られてしまうヒーローバナー。ノートパソコンでは問題なく見えるのに、スマホで見るとどこか違和感があるサムネイル。何が問題なのかを具体的に指摘できないため、誰もチケットを提出しない――ただ、どこか少しおかしいように見えるだけだからだ。
解決策は、より優れた目ではありません。嘘をつかないテスト画像こそが解決策なのです。
なぜ「見た目は問題ない」というのはテストにならないのか
アスペクト比に関する不具合が見過ごされがちなのは、写真によってそれらが隠されてしまうからです。風景写真を4％引き伸ばしても、見る人は気づきません。しかし、顔やロゴ、円を4％引き伸ばすと、誰の目にも明らかになります。
それがテストカードの根本的な考え方です。フレーム内に、正しさが一目瞭然な図形を配置することで、誤ったレンダリングが隠れてしまうことなく、すぐに目につくようにするのです。
Vodlixテストカード
自社でのQA用に1つ作成したのですが、これを無料で提供することにしました。というのも、どのストリーミングチームにもこれが必要であり、多くのチームが金曜日の午後になると、これよりひどいものを手描きで作成してしまうからです。
そこに載っているものはすべて、特定のバグを意図的に誘い出すための罠です：
正方形に内接する円が、4つの緑色の点に接しています。円が真円であるのは、ある特定の縦横比の場合のみです。枠を縮めると、円は楕円になり、2つの点から離れていきます。
対角線は正確に45度になっています。スケールが均一でない場合、角度が変わり、印刷されたラベルが指し示す線と一致しなくなります。
正確な正方形がチェッカーボードのように並んでいる。比率がわずかにずれた瞬間、正方形は長方形へと変わる。
真のエッジに沿ったヘアライン、コーナーピクセル上のコーナーブラケット、そして4つの「EDGE」ラベル。これらがいずれか1つでも欠けている場合、フレームが切り取られていることになります。
四辺すべてに0～100％の目盛りが付いています。0より後に始まったり、100より前に終わったりする場合は、その画像はトリミングまたはズーム処理が施されていることになります。
測定も、重ね合わせも、参照ファイルも不要です。円が丸く、4つの縁がすべて読み取れれば、レンダリングは正しいと言えます。
実際にレンダリングが失敗した場合は、どのような状態になるのか
同じ画像が4つの状態になっています。正しく表示されているのは最初のものだけです。
この2つの不具合は、原因も解決策も異なるため、区別しておく価値があります。
押しつぶされた、あるいは引き伸ばされた つまり、何らかの要因によって画像が形の合わない枠に無理やり収められてしまったことを意味します。例えば、CSSで幅と高さが固定されている場合や、サイズを「フィット」ではなく「埋め尽くし」にするスケーリングモードが設定されている場合などです。その結果、円が楕円になってしまいます。
トリミングまたはズーム つまり、アスペクト比は維持されたものの、フレームがコンテナからはみ出してしまったということです。トリミングされた例では、円が完全に丸いままになっていることに注目してください。そこが落とし穴なのです。トリミングによって形が歪むことはなく、単に端の部分が静かに切り取られるだけです。端のマーカーがなければ、気づくことさえなかったでしょう。
縦向きは横向きよりも重要だ
16:9の比率は、あらゆるものがこの比率に合わせて作られているため、通常はそのまま使われます。縦長フォーマットでは、ReelsやShorts、モバイル用のヒーローアート、スマートフォンのロック画面など、アセットが崩れてしまうことがあります。そのため、このカードは9:16の比率でも用意されています。
9:16のアセットを、フィルスケールモードで16:9のスロットに配置すると、高さの約3分の1が失われます。このカードを使えば、議論に時間を費やすことなく、一瞬でそのことが一目瞭然になります。
ダウンロード
無料でご利用いただけます。出典の明記は不要です。PNG形式、正確なピクセルサイズ、明るいバージョンと暗いバージョン：
16:9 横長、1920 × 1080 - 明るい部分と暗い部分
9:16 縦長、1080 × 1920 - 明暗
両方の比率に関する故障モード参照シート
16:9 ライト（1920 x 1080） · 16:9 ダーク · 9:16 ライト (1080 x 1920) · 9:16 暗い
テスト自体には、JPEGではなくPNGを使用してください。JPEG圧縮を行うと、2ピクセルのエッジの細い線がぼやけてしまい、小さいサイズではその線が見えなくなることがあります。その結果、実際には存在しないトリミングの不具合を探し回ることになってしまいます。
正しい使い方
デスクトップ上ではなく、実際のパイプラインで処理してください。テストタイトルにアートワークとしてアップロードし、リサイザー、CDNによる変換、アプリのレイアウトをすべて通過させてみてください。バグの原因はそこにあります。
実際のデバイスで動作させてみてください。テレビアプリ、スマートフォン、タブレット、そしてウェブプレーヤーでは、それぞれ異なる不具合が発生します。
その結果を写真やスクリーンショットで撮影し、カードに印刷されているチェックリストと照らし合わせて確認してください。
テストのタイトルはそのままにしておいてください。これにより、恒久的な回帰テストの指標となります。次に誰かがスケールモードを変更した際、すぐにその変化に気づくことができるようになります。
なぜこれが重要なのか
VodlixはホワイトラベルのOTTプラットフォームであり、つまり、プラットフォーム上のすべての画像（お客様の投稿、ブランディング、サムネイルなど）は他者の所有物です。図形の配置を誤ることは、単なる見栄えの問題ではなく、お客様のアートワークを損なうことになってしまいます。
つまり、このカードは当社独自の品質保証（QA）の一環です。この問題は当社に限ったものではないため、公開することにしました。
