スマホをターゲットにしたWebデザイン環境をつくる

 SEOに注力しWebサイトに来てもらっても、ポチってもらわなければ収益は生まれない。そこに説明文の見やすさや、商品写真の出来が影響することが想像つく。

 これまで色再現は印刷の世界がメインだったが、最近は液晶パネルの品質が向上し、商品写真の色合いをわりと正確に消費者に伝えることが可能になってきた。商品の魅力を正確に消費者に伝えることで、販売成約やクリック率の向上が期待できる。Webサイトのカラーも、今より見やすくできれば滞在時間を長くできるかもしれない。

 写真の色やWebサイトのカラーについて最適化するためには、色やコントラストを正確にチェックできる環境が必要だ。そこで、PC画面やスマホの表示を最終OutPutに想定したWebデザイン環境の構築を検討してみた。

 

 

Webデザインに適したモニターの選び方

 Webデザイン用のモニターとして求められる機能性能は印刷業界と共通するが、少し違う部分もある。ポイントは以下の通り。

 

適切なサイズ

 Webデザインでは文章を見ることが多い。画面の情報量と文字の見やすさがバランスする画素ピッチは経験上、0.24mm前後なのでこの条件になるサイズと解像度の組み合わせが候補になる。
 目の前に1台だけポン置きする場合は、20~22インチのFHD(1920×1080)か、27インチのWQHD(2560×1440)2台並べる場合は20~22インチの FHD(1920×1080)とする。

 この条件を大きく外すと、精細すぎてみずらい、広い割に情報が薄い、視線移動が大きく使いずらい、などの問題が起きる。サイズは27インチが限度で、これ以上大きいと視差による色ムラ輝度ムラが目立つようになる。

 

価格帯と品質

 1~2万円台のローコストな商品の内容はそれなり。キャリブレーションすれば使えるが、電源や映像回路がコストダウンされていて絵が安定しない(輝度や色が微妙に変動する)、明るさの設定によって階調が変わる(おそらくLUTのビット数が少ないことで起こる)などの問題がみられる。

 

パネルの方式と画質

 必ず、「IPS」と書かれたものを選ぶ。6ビットFRC(色を疑似的に生成)を嫌ったり、LUT(内部色変換)のビット数を気にする人もいるが、Webデザインでは均一な背景を表示することが多いので、チャートを出して目を凝らさとわからない性能より、全体的な色ムラや輝度ムラが少ないことを重視したい。

 

実例1:BenQカラーマネジメント液晶ディスプレイSW2700PT

 高いコストパフォーマンスで人気がある機種。機能性能は評判通りなので、ここでは他のサイトであまり書かれてないことだけ記載する。

 見た目に白の画面をデジカメで撮ると赤っぽく映る。広い色域を出すため赤外線が出ている模様。

 

 カメラのWBをディスプレイに合わせて撮ったところ。写真は反射があってわかりずらいが、画面左にかけて微妙に赤っぽい。コストを抑える為、ある程度のバラツキを許容した作りのようだ。

 ほか、1画素に満たない微小な輝点が4か所あった。

 

 

実例2:EIZO FlexScan EV2451

 フレームレス設計の商品。本機に限らずこのタイプのディスプレイには周辺の輝度落ちが見られるようだ。

 角部の輝度落ち。最も暗い部分は正常な部分に対し50%近く輝度が落ちている。
 フレームレスパネルは構造上、視差による周辺減光が目立ちやすい。バックライトも十分な幅が取れないため、端っこの隅が暗くなりやすいようだ。

 見た目以外でフレームレスのメリットはあまりない。隅の輝度落ちを考えると四辺に太い枠が付いた商品を選ぶのが無難。

 

 FlexScan EV2451には今時珍しいドット欠け(暗点)も見つかった。

 

 FlexScan EV2451 には他の機種にはない、周囲の明るさに応じて輝度を変える自動調整機能がある。動作が自然で調整範囲をカスタマイズでき「使える」機能になっている。

 

  今回はじめて中級機を購入してみたが、どれも若干の問題がみられる。安く大量に作られているLGの21.5インチパネル方が品質が高く安定しているように思えてならない。
 正確な色が必要な人は今まで通り ColorEdge、アマチュアは中途半端な中級機を買うよりLGの21.5インチを2台買ってキャリブレーションして使った方が幸せになれるかもしれない。

 

 

ブルーライト・フリッカーについて

 ブルーライト、私には商売のネタを業者が増やしただけに思える。今回のように色を適切に調整して使うケースでは無視していい。

  フリッカーで目が疲れる、という話は、上で書いたローコストモニターの不安定な動作が原因かもしれない。

 人間の目の応答は60Hzくらい(滝などを1/60secで撮ると水流が見た目に近くなる)なので、60Hz以上の明滅は連続して光っているように見える。ディスプレイのリフレッシュレートは60Hz以上だから、本来なら問題は起こらないはずだ。

 

 

ディスプレイキャリブレーションツールの選び方

 このツールは正確な色を得るための必需品。定評ある X-Rite i1Display Pro を導入した。この機種はOEMでEIZOをはじめいろんなディスプレイメーカーに供給されている模様。校正シートなど添付されないが、アマチュアに手が届く金額で買える。

 キャリブレーションツールがあればローコストなモニターでもそこそこ正しい色の設定ができる。

 製品登録はWebサイトからだとややこしい。付属ソフト(i1 PROFILER)から入力した方が簡単でスンナリいく。

 

 

 

スマホの色温度と輝度はどの程度か

 手元にあるいくつかの端末について、i1Display Pro を使い測定してみた。

 付属ソフトを起動し、輝度-測定-比較用ディスプレイの測定 と進み、ホワイトパッチ(白い画像)を表示させてxy色度と輝度が測れる。xy色度がわかると、次のグラフから色温度を算出できる。

 

xy色度図上の黒体軌跡と等色温度線(出典:コニカミノルタ 色色雑学IV[1]

 黒体軌跡と等色温度線。「黒体軌跡」で画像検索するとより高精細なチャートを入手できる。

 

測定結果は次の通り。

TONE m15

ピクチャーモード標準:x=0.289,y=0.301 (約8500K)。
色温度スライド最低:x=0.305,0.327(約6800K)
輝度(Max):459cd/m2

AQUOS( SHV31)

画面モード標準:x=0.298,y=0.315 (約7500K)。
ナチュラル:x=0.308,0.319(約6800K)
リラックス:x=0.338,0.347(約5300K)
輝度(Max):368cd/m2

iPod touch(ME978J/A)

x=0.289,0.289(約9000K)
輝度(Max):424cd/m2

 

 以上の結果からすると、私たちが目にするスマホの色温度は6800K~9000K。高い輝度は屋外での視認性を確保するためで通常は眩しすぎる。室内で見やすい明るさに調整した結果70~100cd/m2 だった。

 

尿液晶について

 店頭に並ぶスマホを見比べると、画面が青っぽく見える機種と、黄色っぽく見える機種(俗にいう尿液晶)がある。これは液晶の不良ではなく単に色温度が違うだけ。ネットの写真をもとに色差を測ったところ、500~600Kだった。

 ヒトの目は6500Kあたりを境界に黄色に見えるので、製品のバラツキによって6500Kあたりの個体ができると「尿液晶だ」「ハズレを掴んだ!」と騒がれるのかもしれない。

 色温度による着色は画面が暗いとき目立つ。この問題は、画面を暗くした状態で白く見えるよう色の設定を見直せば解決する。

 

 

キャリブレーションの手順

 

事前準備

 キャリブレーションを始める前にやることが2つある。ディスプレイのOSDメニューが「真ん中」に出る場合はそこからズラすこと、コントラストや輝度のおおまかな調整だ。

 後者が要るのはキャリブレーションで輝度を大きく変えると白色点がズレてしまう為(安いモニターほど大きくズレる)。
 一般的には現状(見やすく調整した状態)スタートでいい。よくわからない場合は、ディスプレイのOSDメニューでコントラストと輝度をフルスケールの中間値にセットする。

コントラストについて(補足)
 リアルを追及すればコントラスト比は高いほど良いという[2]。普通のディスプレイでは1000:1が多い。屋外で高い視認性が求められるスマホなどのモバイルデバイスでは1400:1~2000:1。
 キャリブレーションのコントラストはターゲットに合わせた方がイメージ通りの結果を得やすいが、ディスプレイの特性をゆがめる結果になっては本末転倒なので能力に応じた値にしておくのが良い。

 

キャリブレーションの設定

 i1 PROFILERの設定を次のようにする。

 白色点=D65(6500K)、輝度=80cd/m2、ガンマ=標準(2.2)、コントラスト比(固有の値)。
 上記スマホの色温度の測定結果からすると、最終ターゲットをスマホに絞る場合は、D75(7500K)とするのがよさそうだ。

 

キャリブレーションとその後の管理

 設定したらi1Display Proの付属ソフトの指示に従って操作するだけ。キャリブレーションが終わると自動的にそれが適用されるので、特に何もする必要はない。具体的な操作はstudio9[3]が詳しい。

 キャリブレーション終了後はデスクトップの壁紙にShuffle by COMMERCIAL PHOTO[4]で公開されているチャートを設定しておくといい。色味や輝度チェックが常時できる。

 

 

D50(5000K)基準で作られた創作物をWebで見せる場合の問題

 D65やD75のディスプレイを想定すると、印刷物や絵画、模型作品などD50の下で意図した色が出るよう作られた創作物を見せるとき色味の違いが問題になることがある。

 「大して違わないのでは?」と思うかもしれないが、創作物によっては商品価値を伝えるうえで無視できない影響を与えることがある。
 D50で調整した写真をD65やD75のディスプレイで見ると青っぽくなる。色補正すれば解消するが、色をゆがめる操作には抵抗を感じる。
 そこで、「このサイトの写真は、色温度5000Kで調整されたディスプレイで見た時、正確な色をご確認いただけます」といった但し書きを書いておくのが一解だ。

 

<参考購入先>
X-Rite i1Display Pro 並行輸入品もあるが1年保証のつく正規品が無難。故障したら修理ではなく新品交換(メーカー確認)
Color Edge 画質を追及すると、結局これしかないようです
ドット抜けがカバーされる交換保証を付けて買うと安心です

<参考文献>
1.色色雑学IV,コニカミノルタ
2.輝度とコントラスト比は高いほど良いのか?,EIZO株式会社
3.i1 Display Proを使ってモニターキャリブレーションする方法と設定,studio9
4.色調補正を正しく行なうためにPC環境を整える,Shuffle by COMMERCIAL PHOTO