自社の公開済みSEO記事のサムネイル画像を素材に、メガネの画面に映すとどれくらい劣化するのかを検証した。劣化の主因はリサイズではなく、16階調のポスタライズ（色・階調情報の破棄）だと分かった。
今回は、その検証の方法と、切り分けで見えてきた原因を振り返る。
この記事でわかること
- 劣化の主因はリサイズではなく16階調ポスタライズだった実情（2026年9月時点の検証）
- 検証の方法とデータサイズ
- 読めたものと読めなかったもの
- 切り分けで分かった本当の原因と、表示用素材の設計指針
劣化の主因はリサイズではなくポスタライズだった
最初はサイズを縮めすぎたせいだと疑ったが、犯人はそこではなかった。 216×144へのリサイズだけを目視で確認すると、この段階では文字もイラストも問題なく読み取れていた。次の章から、その検証の方法を振り返る。
検証はこういう方法で行った
検証には、自社の公開済みSEO記事「SEOとは？最初の一歩」のサムネイル画像を使った。白背景に大見出し・小見出し・コールアウト・水彩風イラストを配置した素材だ。
これを、BLE転送用の画面サイズ制約に収まる216×144へ、縦横比を保ったまま最大化してリサイズした。続けて16階調にポスタライズし、PNGにエンコードしてグラスへ転送する処理を検証した。
データサイズは思ったより軽かった
ポスタライズ後のPNGは、216×144の解像度で16,044バイトだった。BLE帯域10〜30KB/sとの兼ね合いでは、単体転送で0.5〜1.6秒程度の見込みになる。
同じ条件のraw形式（1ピクセル1バイト）なら31,104バイト固定になるため、ポスタライズ後のPNG圧縮の方が明確に軽い。
読めたものと読めなかったもの
実際に転送した画像を見比べると、要素によって読みやすさがはっきり分かれた。
黒太字の大見出しやイラストの輪郭ははっきり残った
背景とのコントラストが大きい黒太字の大見出しは、はっきり読み取れた。イラストの輪郭や図形のシルエットも、うっすらとだが判別できる程度に残った。
小見出しや彩色イラストはほとんど判別できなかった
一方、大見出しより小さく細い小見出しの文字は、ほぼ判読できなかった。コールアウトの短い文字も同様に視認できなかった。
彩色イラストの部分は白背景と輝度が近く、16階調のモノクロ化でほとんど背景色に同化し、輪郭線でしか判別できなかった。
切り分けて分かった本当の原因
リサイズ単体の劣化と比べると、情報を大きく損なっていたのは色・階調情報を捨てるポスタライズの工程だとはっきりした。 コントラストの低い細かい文字や淡い色のイラストほど、階調を落とす影響を受けやすいと分かった。
表示用素材はこう設計すればいい
グラス表示用の写真素材は、コントラストを主役にして設計する。 白地に黒の太字見出しのような高コントラスト要素を中心に据え、小さい文字や淡い配色の装飾要素は読めなくなる前提で扱うことになる。
見た目の劣化は工程を分解して確かめるしかない
ぱっと見の印象だけでは、どこで壊れているのか分からなかった。 リサイズ・ポスタライズ・エンコードと工程を1つずつ切り分けて見比べて、はじめてどこで情報が失われているかが分かった。
この確かめ方は、MOCO Worksのサービスでも実践している。
参考・出典情報
（本記事は社内技術ドキュメントによる裏取り起点のため、外部出典なし）