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

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

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

 写真の色やWebサイトのカラーについて最適化するためには、色やコントラストを正確にチェックできる環境が必要だ。そこでWebデザインに適したモニターを検討してみた。

 


選ぶ際のポイント

モニターのサイズはデスクの奥行で決める
階調(ビット数)は画質にほとんど影響しない
ユニフォーミティー(均一性)に注意
視差による色ムラの増幅・相殺現象
フレームレスの問題
キャリブレーションツールが必要
内蔵GPUではなく外付けグラフィックカードを
モニターの候補

モニターの実例

実例1:BenQ SW2700PT(27インチWQHD ) 
実例2: LG 27UD58-B(27インチ4K)
実例3: DELL P2416D(24インチWQHD)
実例4: LG 22MP57VQ-P(21.5インチFullHD)
実例5: EIZO EV2436W-ZBK(24インチWUXGA) 
実例6: BenQ PD2700Q(27インチWQHD) 
モニター比較まとめ

キャリブレーションツールの選び方

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

尿液晶について

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

事前準備
キャリブレーションの設定
キャリブレーション後の管理

 

 

スポンサーリンク

 

選ぶ際のポイント

 

 

モニターンのサイズはデスクの奥行で決める

 Webデザインでは文章やプログラムコードを見ることが多い。プログラムコードなどの文字を見やすく表示できる最小画素ピッチは経験上0.3mm前後。この条件を満たす画面サイズと解像度の組み合わせには次がある。

 視距離70cm 27インチWQHD(2560×1440) 画素ピッチ0.27mm
 視距離63cm 24インチWUXGA(1920×1200)画素ピッチ0.32mm
 視距離58cm 20~22インチFullHD(1920×1080)画素ピッチ0.28mm

 上記の視距離は最大視差角が同じ26°になる条件。視距離はデスクの奥行にほぼ等しくなるので、デスクの奥行がモニターサイズを選ぶ際の基準になる。

 この条件を大きく外すと、精細すぎてみずらい、広い割に情報が薄い、視線移動が大きく使いずらい、視差で色ムラや光漏れが目立つ、などの問題が起きる。

 

階調(ビット数)は画質にほとんど影響しない

 6ビットFRCは8bitと見分け困難。チャートを目を凝らして見ないと解らないような微妙な性能差はWebデザインではどうでもいいことなので、気にしなくてよいといえる。LUTのビット数も同じ。

 「この文字見える?あなたのモニターでは見えないでしょう」といった記事もあるが、適切に調整されていれば、どのモニターでもほとんど差はない。
 HDMIでは16~235階調のレンジ設定がある。白潰れ黒潰れで見えない場合はこの設定になっている可能性があるので確認してほしい。

 

ユニフォーミティー(均一性)に注意

  Webデザインでは均一な背景を表示することが多いので、画面の色ムラや輝度ムラに関するユニフォーミティーが悪いと目立つことがある。視差による色変化を最小限にするためにも、パネルの方式は必ず「IPS」と書かれたものを選ぶ。

 写真はユニフォーミティーに問題のあるモニター(DELL P2416D)。D65で正しく調整されたモニターで見ると右上が青暗く、左下が黄色っぽく見える。

 

 

 ユニフォーミティーを求めるとパネル個体差の問題に行き当たる。ほとんどメーカーが規定を設けていないので、アタリもあればハズレもある。
 ユニフォーミティーの補正は技術的に可能だが、高価な機種に限られる。私の経験上、LGとEIZOのパネルは無補正でユニフォーミティーに優れた傾向がある。

 ユニフォーミティーの評価基準にISO12646がある。 i1 Display Proというキャリブレーションツールと付属ソフトを使うとこの規格に沿った測定ができる。i1 Display Proでは輝度と色温度の偏差が測れる。経験的には輝度偏差10%以下、色温度偏差100K以下で人間の目にほぼ知覚されない。

※:ISO12646のモニター要求性能は 輝度10%以内(奨励5%)、色度u’v’ 0.01 以内[6]

 

視差による色ムラの増幅・相殺現象

 実際に見える色ムラや輝度ムラはユニフォーミティーの測定結果と一致しないことが多い。これは、目に入る色が、モニターのムラと、視差によって生じるムラの合成したものになる為。

 視差によって生じる色むらは大抵ブルーだが、片側が黄色の場合もある。これがモニターの色ムラと重なって増幅されることもあれば、相殺されて目立たない場合もある。

 

フレームレスの問題

 最近多くなったフレームレスのディスプレイにはいろいろ問題がある。

 写真はEIZO FlexScan EV2451の角部。最も暗い部分は正常な部分に対し50%近く輝度が落ちている。前面に厚いクリアパネルがあり、その屈折で縁が歪んで見える。

 フレームレスパネルは構造上、このような問題を抱えるものが多い。これが気になる人はフレームレスを避けて四辺に太い枠が付いた商品を選ぶ必要がある。

 

 

キャリブレーションツールが必要

 基本的に、キャリブレーションツールで色を校正しないと正しい結果が得られない(キャリブレーションツールの選び方は後述)。

 これを使うと、1万円台の安価なモニターでも十分使える環境を構築できる。詳細は下記の記事(モニターの実例)を参考にして欲しい。

 

内蔵GPUではなく外付けグラフィックカードを

 CPU内蔵GPU(インテル・グラフィックスドライバー)で表示したモニターをキャリブレーションツールで校正するとグレースケールの一部に色がついて見えることがある。GeForceではこの問題が少なく、Quadroではこの問題が生じない。

 Corei5-7400 + インテル・グラフィックスドライバーの環境でキャリブレーションしたモニターでリニアグレースケールを表示したところ。色縞が見える。

 縞が周期的に出ている結果からすると、どこかが0-255諧調になっていない為とみられる。調整できない場合が多いので現状使えないと考えたい。

 

 

モニターの候補

  以上の条件を満たす機種で、アマチュアの候補になる(10万円以下で買える)商品に次がある。

 BenQの27インチWQHDモデル
  SW2700PT、PD2700Q、GW2765HT 4.5~7万円
 NEC LCD-P242W-B5(24インチ WUXGA) 7万円
 EIZO EV2436W-ZBK(24インチ WUXGA) 4.5~5万円(生産終了品)
 EIZO CS230-CNX3(23インチFullHD) 6万円前後
 LG の21.5インチFullHDシリーズ 1~1.5万円

 今やフレームレスがほとんどなので、プレームレスを避けると候補が少ない。

 参考:ユニフォーミティー補正機能を持つ最も安価なモニターに、View Sonic VP2468(24インチFullHD)、VP2768,2771(27インチWQHD)がある。但しフレームレス。

 

 「モニターなんてどれも同じサ」そう思うかもしれない。

 写真はローコストのLG 21.5インチ(22MP58VQ-P)と、BenQ  27インチ(SW2700PT)。LGは階調に乏しくノッペリした印象。BenQの表示品質とは比べ物にならない。

 ちなみにSW2700PTが赤っぽいのは赤外線にデジカメ(TG-4)が反応したため。見た目は正しい色が出ている。

 

 

いくつか入手しテストした結果を次にご紹介する。キャリブレーションとユニフォーミティーの測定に i1 Display Pro、色域の表示にColorAC[7]を使用した。

 

スポンサーリンク

モニターの実例

 

実例1:BenQ SW2700PT(27インチWQHD ) 

 高いコストパフォーマンスで人気がある機種。海外に散見するレビューや実機(2台)を見る限り、ユニフォーミティーの個体差が大きくアタリはずれがある模様。

 

 ユニフォーミティーの測定結果(ISO12646 9点 RGB255 以下共通)。比較的優秀な個体といえそう。

 画面に近寄ると視差により左半分が微妙に黄色っぽく見える。視差による色変化が左黄色、右ブルーなので、右側が相殺され左側だけ色づいて見える。80cm以上遠くから見れば問題なくなる。 

 
 

 SW2700PTはPalette Master Element[5]という専用ソフトを使ってハードウェアキャリブレーションができる。キャリブレーションツールは、i1 Display Proの他、Spyderも利用可。
 LUTテーブルをリードライトするため実行速度は遅い。

 

 キャリブレーションの結果(ColorAC[7]で表示 以下共通)。AdobeRGBより広い領域をカバーしており特に赤の範囲が広い。

 液晶なのに「沈んだ黒」が出る。コントラストも高く、画質はたいへんよい印象。

 

 

 付属の検査シート。プリセットのAdobeRGB、sRGBの色温度(6500K)をキャリブレーションツールを使って実測したところ正確だった。無調整ですぐ使用できる数少ないモニター。輝度設定は18が適当だった(80cd/m2 sRGB標準になる)。

 

 

 「沈んだ黒」が出る数少ないモニター。大変高画質&高コントラストで有機ELを想起させる。
 画素ピッチ小さめのため、プログラムコードの文字が少々見ずらく、コントロールのピクセル単位の位置調整がやりずらい。これをメインにする人はもう少し画素ピッチの大きなモニターをお勧めする。

 付属のコントローラーで色域をワンタッチで切り替えできる点が便利で、他のモニターにない特徴となっている。
 但し、sRGBモードではソフトによって色がおかしくなる場合がある。本モニターをsRGBモードで使う場合は、カラープロファイルをsRGB標準プロファイル(sRGB IEC61966-2.1)か、sRGBモードでキャリブレーションして作ったプロファイルを使う必要がある。
 

 

実例2: LG 27UD58-B(27インチ4K)

 150%拡大スケーリングで使うディスプレイ。数台見た感じからすると、ドット抜けほか多少の欠陥を持つ個体が多い。パネルの品質が安定していない印象。

 ユニフォーミティーの測定結果は輝度ムラ色ムラとも少なく優秀。見た目にはほとんど均一に見える。

 

 色域は赤が僅かに足りないが、ほとんどsRGBの領域に入っている。

 

 優秀なモニターだが、Windows10で拡大スケーリングすると文字や画像がボヤけたり、コントロールの配置がずれたりするため使いずらい。ゲームや写真編集に向く。

 

実例3: DELL P2416D(24インチWQHD)

 125%拡大スケーリングで使う候補になるディスプレイ。

 ユニフォーミティーの結果は輝度ムラ色ムラともにやや大きい。

 

 ユニフォーミティーの様子。測定結果通り、右上が青く、左下が黄色っぽい。

 

 色域は能書き通り、sRGBを完全カバーする。

 

 このモニターはメールや文書作成など、「映ればいい」用途に向く。ユニフォーミティーの結果がいまいちのため、Webデザイン、画像編集いずれも使いずらい。

 

実例4: LG 22MP57VQ-P(21.5インチFullHD)

  本機は1万円台の安価なモニター。LGのFullHDパネルは品質が安定していてドット抜けなど問題のあるパネルを見たことがない。

 2台について測定した。それぞれを、No.1,No.2とする。D65 80cd/m2 でキャリブレーションたときのOSD調整結果は次の通り。

No.1 6513K RGB=54,50,50 明るさ29
No.2 6514K RGB=61,55,52 明るさ33

 結構ばらつきがあり、未調整の本機を2台並べると大抵色が違って見える。

 ユニフォーミティーの測定結果。

 No.1の右上は青いはずだが目立たない。No.2の左側は黄色っぽいはずだが、視差の色ムラ(青)と相殺され普通に見える。

 色域の測定結果。sRGBに対し緑側が多少足りないが、他はだいたいカバーしている。

 

 
 

 写真は見た目の階調が乏しくノッペリとした印象。画質は値段相応だが、ユニフォーミティーが優秀。
 値段が安く2台買って並べる使い方ができる。DVIで繋ぐと階調の上と下がカットされるので、2台共HDMIで繋ぐ形にしたい。

 

実例5: EIZO EV2436W-ZBK(24インチWUXGA) 

  EIZO IPSモニターのラインナップがフレームレスに移行する前の FlexScan。2015年11月に製造が終わっているが、アマゾンで在庫品を入手できる。

 ユニフォーミティーの測定結果は優秀。フレームレスにありがちな隅の輝度落ちがなく、隅々まで均一に見える。無補正でこれ以上望むのは難しそうな性能。

 

 本機はsRGBカバー率について明記されていないが、赤が僅かに足りない程度でほぼカバーしている。プリセットの色温度は正確。

 

 

 ガンマ曲線にうねりがありRGBが揃っていないため白点でRGBを合わせても若干黄色っぽい。ガンマを2.0に設定してキャリブレーションすることで正確な色味とガンマ2.2(sRGB標準)に近い結果を得る。
 バックライトの光漏れも多く、黒がやや浮き気味。値段のわりに基本性能が今一つ。 

 このモニターは画面を机スレスレまで下げられたり、人感センサー、明るさセンサーを搭載するなど、使い勝手に配慮されている(人感センサーは誤動作が多く使えない印象)。奥行60cmの一般的なパソコンデスクにちょうどよいサイズ。

 

実例6: BenQ PD2700Q(27インチWQHD) 

  SW2700PTの下に位置するsRGB機。sRGBのモードは無調整でほぼ正確な色が出る。ユニフォーミティーの個体差が大きくアタリはずれがある模様。
(本機はBenQアンバサダー製品モニターで借用したものです)

 ユニフォーミティーの測定結果。sRGB標準に合う輝度設定は13。右端がやや青っぽいことから、これを測って表に追加した。

 

 実際の画面(背景はグレー)。離れてみると右端が少し暗い程度だが、実際の見た目は視差の影響と重なり、かなり青っぽい。

 

 色域はsRGBを完全カバーする。ガンマ特性も一直線に揃っている。

 

 画質は上位のSW2700PTとほぼ同じレベルでたいへん良い。値段も手ごろで、Webデザイン用では数少ない有力候補になる。それだけに、ユニフォーミティーの品質が惜しまれる。

 

モニター比較まとめ

機種 BenQ SW2700PT
お勧め

BenQ PD2700Q
お勧め

LG 27UD58-B  DELL P2416D EIZO EV2436W-ZBK
お勧め
LG 22MPシリーズ
お勧め
解像度 27インチWQHD(2560×1440) 27インチWQHD(2560×1440) 27インチ(4K) 24インチWQHD(2560×1440) 24インチWUXGA(1920×1200) 21.5インチFullHD(1920×1080)
最小視距離(机の奥行) 70cm 70cm 70cm 63cm 63cm 58cm
ユニフォ-ミティー  〇~◎ 〇~◎?
 パネル品質 △(個体差あり) △(個体差あり) △(ドット抜け他)
 写真編集
 Webデザイン・プログラミング
文書作成・Web閲覧 
 価格 6.5万 4万 4.5万 3万 4.5万 1.5万
備考 沈んだ黒が再現できる。非常に高画質 SW2700PTに並ぶ高画質  拡大スケーリングのためぼやける  ユニフォーミティーが良くない ガンマがあまり正確でない   2台並べて使える

注:評価はキャリブレーションして使うことを前提としたものです。

 

 作業域の広さは次の順になる

FullHD2台>WQHD>>WUXGA>FullHD

 WUXGAはFullHDに比べ縦が少し長いが、これを目の前に1台ポン置きするなら同じお金でFullHD2台買った方がずっと広い作業域が手に入る。

 BenQ PD2700Q GW2765HTについては以下の海外レビューも参考になる。ユニフォーミティーについては残念ながらあまり良くない印象。

PD2700Q uniformity
GW2765HT uniformity

 

スポンサーリンク

キャリブレーションツールの選び方

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

 定評ある X-Rite i1Display Pro を導入。これでモニターのRGBレベル、輝度調整、ユニフォーミティーの確認などができる。

 この機種はOEMでEIZOをはじめいろんなディスプレイメーカーに供給されている。

 校正シートが添付されていないのが気になるが、アマチュアに手が届く金額で買える。

 

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

 このツールでカラープロファイルを作るとグレースケールにかすかに色がついて見えることがある。この手のツールは、「なんとなく合う」ことを目標に使うものと考えたい。

 より正確な結果を求めるなら、上位機種を選ぶ必要がありそうだ。

 


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

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

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

 

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

 黒体軌跡と等色温度線。「黒体軌跡」で画像検索するとより高精細なチャートを入手できる。できれば計算で出したいが、簡単にはいかない[9]

 

測定結果は次の通り。

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]で公開されているチャートを設定しておくといい。色味や輝度チェックが常時できる。

 

<参考購入先>
X-Rite i1Display Pro 並行輸入品が安いですが保証が付きません(メーカー確認)
Color Edge 画質を追及すると結局これになります 
ドット抜けや色むらなど個体差リスクのあるモニターはツクモの交換保証を付けて買うと安心です

<関連記事>
パソコンデスクの選び方~ペナペナデスクを補強して使う
失敗しないオフィスチェアの選び方2~お勧めはこれだ!
デジタルカメラ

<参考文献>
1.色色雑学IV,コニカミノルタ
2.輝度とコントラスト比は高いほど良いのか?,EIZO
3.i1 Display Proを使ってモニターキャリブレーションする方法と設定,studio9
4.色調補正を正しく行なうためにPC環境を整える,Shuffle by COMMERCIAL PHOTO
5.Palette Master Elementのダウンロード
6.グラフィックス関連のモニタープルーフ規格について,EIZO
7.ColorAC ダウンロードサイト
8.www.tomshardware.com モニターの詳細レビューがあります
9.ColorAC 相関色温度の計算について
10.ClubXPerience 液晶モニター用ドット抜け・色むらチェッカーの配布サイト