fbpx

SpyderX Eliteキャリブレーション

SpyderCheckr24
SpyderCheckr24

色にこだわり調整する理由とは

人間の目は、色を補正して認識することができるので、人間が作るものでは到底真似できないほど素晴らしい構造をしています。とはいえ色を扱う仕事をする場合、人と見え方が異なると弊害が出てくることがあります。自分の目に頼って、感覚的に認識するのではなく、信頼できるツールを使って、適正な色に補正して、調整しておくことが重要だと考えています。

一般的に、デジタルで色を表現する場合、赤緑青(RGB)の組み合わせが16進数で数値化されます。それぞれ0~255のステップがあり、256×256×256=16,777,216色で、8bitカラーと呼ばれます。

RGBを表現するための規格は複数あって、Adobe RGBやsRGB, DCI-P3が有名です。印刷物や、ウェブ環境、映像といった業種ごとに使われてきました。ざらついた粗い見え方となるかどうかに影響するのが、色深度です。ディスプレイ1ピクセルあたりに割り当てることができる色の数は、色深度(単位はbpp)で表します。

sRGB
sRGB
AdobeRGB
AdobeRGB
NTSC
NTSC
P3
P3

RGBそれぞれ8bitの場合、8bit×3=24bpp割り当てられるものは、Full ColorやTrue Colorと呼ばれています。このように同じ色の数値でも、規格やディスプレイの表示方法により、目で見ている色と画面上の色の、見え方が変わってきます。現時点で、ソフトもハードも、普及している多くの環境に適合しているのは、8bitで表現できる約1677万色ということになります。

10bit8bit
階調1024256
色の数約10億7374万約1677万
色深度30bpp24bpp

1024×1024×1024=1,073,741,824色の色域10bitを、RGBを含むデータを、1ピクセルに割り当てた30bppのDeep Colorは、より滑らかな階調で表現できます。ビデオ動画は、1秒間に何十枚の画像を、連続して表示させていきます。24枚、30枚、60枚と数が増えると、より滑らかに見えます。8bitよりも10bitというように、ビット数が増えると、色の情報量が増えるため、ファイル容量が増えてきます。高容量の記録媒体が必要です。また、たくさんの情報を送ることができるケーブル(転送速度)、ディスプレイ(表示速度)も、高スペックなものに切り替える必要があります。そのため、なるべく少ない色数に抑えられるような、圧縮技術が生まれてきました。

ドット絵(ピクセルアート)で描くと、縦横の方眼数が少ないほど、粗く、反対に方眼数が増えるほど、精彩になります。これは、カメラのセンサーやディスプレイの画素数も同じです。1億画素を超えるカメラが登場しています。ディスプレイも、フルハイビジョン(FHD)、4K,8K,12Kと、より大きな画素数の開発が進んでいます。加えて、パソコン環境は、大きく分けてApple社とMicrosoft社製品がありますが、OSでも処理の仕方が異なります。細部では、CPUやGPU/グラフィックボードなど、規格が異なる部品が使われています。

このように色の再現という切り口だけでも、機器類の選択から、調整まで、多くのことを検討しなければならないことが分かります。

SpyderX Eliteによるキャリブレーション

ディスプレイのキャリブレーションの調整の仕方に関しては、いろいろ考え方や方法があると思います。高価なディスプレイであれば、ハードウェアキャリブレーションできるものもあります。ウェブクリエイターでは、datacolor社のSpyderX Eliteを使用して、キャリブレーションしています。チョイスした機器類の中で、最大限、スタンダードとなる色の見え方に調整してくれるからです。キャリブレーションの方法は、解説しているサイトが多いので割愛しますが、とても、簡単に調整ができます。

Spyder CHECKR 24

色の学問は、奥が深くて分からないことが多いのが正直なところです。でも色の再現について、細かくチェックしてみると、感覚的に理解していくことができると思います。以下にSpyder CHECKR 24の、16進数と10進数のコードとカラーネームを記述します。パソコンやノートパソコン、スマホやタブレットなど、複数のデバイスで、どのように表示されているかを確認してみてください。

#343434
Black
RGB:52,52,52
#555555
Neutral 3.5
RGB:85,85,85
#7a7a79
Neutral 5
RGB:122,122,121
#a0a0a0
Neutral 6.5
RGB:160,160,160
#c8c8c8
Neutral 8
RGB:200,200,200
#f3f3f2
White
RGB:243,243,242
#383d96
Blue
RGB:56,61,150
#469449
Green
RGB:70,148,73
#af363c
Red
RGB:175,54,60
#e7c71f
Yellow
RGB:231,199,31
#bb5695
Magenta
RGB:187,86,149
#0885a1
Cyan
RGB:8,133,161
#e0a32e
Orange Yellow
RGB:224,163,46
#9dbc40
Yellow Green
RGB:157,188,64
#5e3c6c
Purple
RGB:94,60,108
#c15a63
Moderate Red
RGB:193,90,99
#505ba6
Purplish Blue
RGB:80,91,166
#d67e2c
Orange
RGB:214,126,44
#735244
Dark Skin
RGB:115,82,68
#c29682
Light Skin
RGB:194,150,130
#627a9d
Blur Sky
RGB:98,122,157
#576c43
Foliage
RGB:87,108,67
#8580b1
Blue Flower
RGB:133, 128, 177
#67bdaa
Bluish Green
RGB:103,189,170

sRGBとAdobe RGBの違い

datacolor社制作のカラーチャートから抜粋して、RGB値を16進数に変換してみました。

WEB
10%
20%
30%
40%
50%
60%
70%
80%
90%
BLK
sRGB
AGB