Webデザインにおけるディスプレイ選びの基礎知識

2024年 1月15日 Posted 藤野(デザイナー)

使用するPCの液晶ディスプレイによって、画面の色が違うと感じたことはあるでしょうか。色味の違いで作成するデザインの印象が変わってしまうため、デザイナーにとって、作業に使用するディスプレイの選択は重要です。
本記事では、ディスプレイのそれぞれの特徴などを紹介しますので、ディスプレイの選択に迷っている方の参考になればと思います。では、ポイントごとに解説していきます。

液晶について

液晶には大きく分けてTN方式、VA方式、IPS方式の三つの駆動方式があります。

TN方式

最も多く使われている方式です。製造コストが低く、比較的安価で手に入れることができますが、視野角(画面が正しく見える角度の広さ)は狭く、画面を斜めから見た際に色や明るさが違って見えてしまいます。また、色の再現率がいま一つです。しかし、応答速度(表示の切り替え)が速いため、動きの多いゲームのプレイなどに向いています。

VA方式

TN方式と比較すると視野角が広いです。コントラスト比が高く、引き締まった黒の表現が得意です。液晶テレビで使われることも多く、映画鑑賞などに向いています。

IPS方式

上記二つの方式と比べてコストが高いですが、視野角の影響と色のズレが最も少ない方式です。応答速度が少し遅い代わりに、視野角は上下左右178度と広く、色の再現性にも優れているという特長があります。

上記の理由から、デザイナーなど色を扱う仕事をする場合は、視野角が広く色の再現性が高いIPS方式のディスプレイがおすすめです。

画面の加工仕様について

画面の表面処理には、グレア・アンチグレア(ノングレア)・ハーフグレアがあります。 グレアは光沢タイプです。発色が良く、鮮やかに色を映せることがメリットです。デメリットは、画面自体への照明などの映り込みが強いため、目が疲れやすいことが挙げられます。
アンチグレアは非光沢タイプです。画面への映り込みが低減するよう凹凸のある表面になっており、長時間画面を見てもグレアに比べて目が疲れにくいのがメリットです。デメリットは、グレアに比べて、落ち着いた地味な色合いに映ることです。
ハーフグレアはグレアとアンチグレアの中間タイプです。遮光フードが付いていれば、さらに画面への反射を抑えられます。

解像度について

ディスプレイに表示される画像データは点(ドット)の集まりによって再現されています。解像度とは、画像の情報量を表す基準のことで、ディスプレイ上に表示できるドット数を横×縦で表したものです。解像度が「1920×1080」と表示されている場合は、ドットが横に1920個、縦に1080個並んでいることになります。このドットの数が多いほど画面を構成する情報が多くなり、キメ細かい美しい画面になります。
表示面積が広いほどより多くの解像度で表示できますので、ディスプレイが大きいほど解像度は高くなる傾向があります。ドットの数が少なければ解像度は低くなります。画質は粗く、表示される画面の領域も狭くなるため、画面上の文字などは大きく表示されます。

解像度は高いほど画質が向上しますが、再生する動画やゲーム、パソコン本体が高解像度に対応していない場合は変化がありません。また、文書の作成などがメインの作業である場合、高解像度のディスプレイで高解像度のままの設定にしていますと、文字などの表示が小さく、見づらく感じることもあります。必ずしも高解像度のものが良いというわけではなく、用途に応じて最適な解像度のものを選ぶことが大切です。

色域の広さについて

色域とは、人間の目で認識可能な色の範囲において、カラーイメージング機器(ディスプレイやプリンター、カメラなど)やソフトウェアが再現可能な色の範囲です。カラーイメージング機器が色を再現するための方法や、表現できる色の範囲を「色空間」または「カラースペース」といいます。
色は無限にありますが、ディスプレイで表現できる色の範囲は限られており、色を複数の数値で表します。再現できる色の範囲は機器によって異なりますので、使用する機器間で色合わせを行うために色域が決められています。
色域にはさまざまな規格があり、代表的な色空間ではRGBがあります。R(レッド)、G(グリーン)、B(ブルー)、それぞれ三つの数値を組み合わせて色を表します。PC関連ではsRGB、Adobe RGB、NTSCの三つの規格がよく登場します。

Webの標準規格はsRGB(standard RGB)で、国際電気標準会議(IEC)が定めた国際標準規格の色空間です。デジタルカメラ、ディスプレイ、プリンターなどがこの規格に準拠しており、汎用(はんよう)性が高く、特別な知識がなくても取り扱えます。一般的なディスプレイやプリンター、デジタルカメラなどの色再現装置との互換性が高いため、Web上でのカラー表現に最適です。
sRGBはWindows環境において、基準となっている色空間になります。Webサイトも同様でsRGBに準拠して作られます。

Adobe RGBはアドビ株式会社が定めた色空間で、sRGBよりも色を幅広く、特に緑色を鮮やかに表現することができます。Adobe RGBはCMYKまで再現できるカラースペースのため、印刷物に使われるCMYKの作業が中心となるDTP制作会社では、Adobe RGB対応のディスプレイを使用していることも多いです。
Adobe RGB対応のカメラやディスプレイ、プリンターを使用すれば、sRGBより精度の高い表示や印刷を行えますが、Adobe RGBに対応している機器は少なく、また、ある程度機器やカラーマネジメントの知識がいるため注意が必要です。

NTSCはNational Television System Committee(全米テレビジョン放送方式標準化委員会)の略で、アメリカの国家テレビ標準化委員会が制定したアナログTV方式の色域です。Adobe RGBに近い色域の広さがあります。

最終的にユーザーが目にする色は、各ユーザーのディスプレイと使用するブラウザー次第になりますが、Webサイトを制作する際は、多くの人ができるだけ同じ色に見えるよう気を付ける必要があり、sRGBの色空間を持つ色域が広いディスプレイの使用が望ましいです。

色温度設定について

色温度とは、光の色を表すのに使われる数値のことです。ディスプレイや照明器具などいろいろな製品で色の基準とされており、単位は「K」(ケルビン)で表します。色温度が低いほど白色が赤みを帯び、色温度が高いほど白色が青みを帯びます。

現在の液晶ディスプレイの多くは、色温度を設定で調整できる場合がほとんどです。色温度の設定によって発色がガラリと変わりますので、適切な色で表示したい場合、用途に応じて正しい色温度を選ぶことが大切です。一般用途やsRGB規格では、6,500Kの色温度が基準となっています。印刷物を制作する場合には、日本の印刷評価の標準である5,000K(正午の太陽光と同程度の光)に設定し、画面上で印刷の色に近づけて使用することも多くあります。

キャリブレーションについて

ディスプレイは製品ごとに色の再現性が異なります。たとえ同じ製品であっても個体差があり、多少のばらつきが出ます。また、経時変化による色のズレも起こるため、使用年数がたつにつれ色が変化していく場合もあります。そういったディスプレイの色を正確に安定して再現させるための調整をカラーキャリブレーションといいます。
ディスプレイのカラーキャリブレーションには、色彩の調整をどこで行うかに違いがあり、ディスプレイ本体で直接表示を調整するハードウェアキャリブレーションと、パソコン側でディスプレイに出力される色彩情報を設定するソフトウェアキャリブレーションの2種類があります。
より厳密な色管理を行いたいなら、ハードウェアキャリブレーションを行えるディスプレイを選択することで、精度の高い調整ができます。また、映像の信号には手を加えないので映像も劣化しにくいです。
正しい色彩を常に再現するためには、定期的なキャリブレーションが大切です。

最後に

今回は使用するパソコンのディスプレイモニターについて簡単に解説しました。画面の色の見直しや、ディスプレイ選びなどの参考になれば幸いです。
最後までお読みいただき、ありがとうございました。

参考資料

第1回 大事なのは"正しい色"を表示できること――液晶ディスプレイの「色域」を理解しよう| EIZO株式会社

「Adobe RGBカバー率とAdobe RGB比の違いとは?」――ナナオの“広色域”説明会