ICCプロファイルとは？Webデザインや印刷物を思い通りの色に仕上げよう

カラーは、デザイナーにとって最も強力な要素のひとつ。特に印刷物においては、思った通りの印刷結果を得るのはデザイナーの力量にもよります。

今回は、印刷物の入稿やWebデザインに役立つ役立つICCプロファイルと、カラー理論について解説していきます。

ICCプロファイルとは？

デバイスによって表示できる色やその名称は異なります。同じ色を指定したつもりが、印刷されたら全く違う雰囲気になってしまったという経験があるのではないでしょうか。

1993年に結成された国際色コンソーシアム(以下ICC)は、オペレーティングシステムやソフトウェアを超えて機能するカラーマネージメントシステムを策定しました。ICC プロファイルは、ディスプレイやスキャナ、カメラ、プリンタなどの各種デバイスに対して作成されます。例えば「sRGB」、「Adobe RGB」など。画像ファイルなどにも付属しています。Mac OSの場合、「情報を見る」からどんな画像プロファイルが付いているか見れます。

ICCの公表規格によると、ICCプロファイルは、カラー入力や出力デバイス、または色空間を特徴付けるデータセットのことであると定義されています。

出典/ DPreview

カラー設定時に押さえておきたい、色の基本用語集

色空間  （カラースペース）に関する用語

色空間とは、さまざまな指標を持って表される色を、立方的に位置付けたもの。色の範囲を数値として記述する抽象的な数学モデルで、一般的に、3～4の値または色成分(RGB、CMYKなど)で表現されます。システム内の各色は、単一のドットで表されます。

原色 

RYB(もしくは減法)カラーモデルにおいて、原色は赤、黄、青の3色を指す。

2次色

 3つの2次色(緑色、橙色、紫色)は、2つの原色を混合することによって作成される。

3次色

 1次色と2次色を混在させることによって、さらに6つの3次色が作成される。

相補色 

赤と緑のように、上のカラーホイール上でお互いに相反し合う色。

類似(隣接)色 

青と紫のようなカラーホイール上で隣にある色を指す。

中間色

さまざまな明るい色を混ぜて色を作成する方法。アディティブカラーシステムで最も使用される色合いは、最も一般的な原色である赤、緑、そして青。

減法混色

主に印刷物等、反射光によって表現するものに用いられる、色フィルタ、もしくはその他の吸収媒質の重ね合せによって、別の色を再現する方法。

RGB

色の表現法の一種で、赤・緑・青 の三つの原色を混ぜて幅広い色を再現する加法混合の一種。 RGBは三原色の頭文字から成る。 赤、緑、青はそれぞれ0～255の整数値を持つ8ビットを使用し、これにより、256 × 256 ×256 = 16777216色の表現が可能。

CMYKカラー

シアン、マゼンタ、イエロー、ブラックの4成分によって色を表す色の表現法の一種。減法混色(シアン、マゼンタ、黄)の重なりが、加法的な色(赤、緑、青)を生みます。最もデジタル表示に最適なカラーでもある。

値はcmyk(C％、M％、Y％、K％)で表され、C、M、Y、Kはシアン・マゼンタ・イエロー・ブラックの値のパーセント値を指す。

色修正に関する用語

画像処理ソフトのインターフェイスには当然、クライアントからのフィードバックなどにも登場する色修正に関する用語をご紹介します。

色相 

色相は、画像そのものの色を指します。色相はカラーホイール上の度数で表現されます(0～360度)— 0（または360）は赤、120は緑、240は青です。これは正式に（「赤、黄、緑、青、紫といった色の様相の相違である。」と定義されています。

彩度

彩度は画像の色の濃さを示します。無彩色軸から離れるにしたがい増し、純色で最大とみなされます。彩度はパーセンテージ値で示され、0％はグレーの濃淡を意味し、100％はフルカラーを意味します。

出典 / Wikipedia

色彩

色彩は、白色が追加された元の色の混合結果です。色彩は、元の色よりも明るくなります。

陰影

陰影は、黒が追加された元の色が混合した結果です。陰影は元の色よりも暗くなります。

トーン

トーンは、純粋な色と白黒の2つの極端なニュートラル/グレースケールの色を混ぜたものです。色調は、灰色の色の混合、もしくは色彩と濃淡の両方によって生成されます。

クロマ

クロマは、色の純度、輝度を識別します。クロマは色相の強度を示し、グレー色調から純粋で鮮やかな色調まで変化します。

明るさ/明度

明るさ/明度は、色の明るさの度合いを、0%(黒)から100%(白)の範囲で指定します。ルーマ(％)は、我々の色知覚に寄与する、無色信号の強度です。飽和値0は灰色を示し、100％の明度 (またはL = 255)は白色を示します。

強度

強度は 色相の純度を表します。強度/純度が最も高い色相は、カラーホイールに現れる色相です。また、強度の低い色相は、トーンと呼ばれます。

測定

 色相、彩度、明度(輝度)は、0から255の範囲でスケーリングされた生のR、G、B値から計算されます。

色数に関する用語

Webデザインの納品や印刷物の入稿時にカラー値を伝える必要があります。これさえ覚えておけば、入稿ミスを防げます。

RGB

RGBカラー値は：rgb(赤、緑、青)で指定します。各パラメータ(赤、緑、青)は色の濃さを定義し、0～255の整数またはパーセント値(0％～100％)で示されます。RGBA

RGBAは赤・緑・青・アルファの略です。RGBAのカラーバリューは、RGBカラー値に、オブジェクトの不透明度を指定するアルファチャンネルが加わったものです。透明度は、0(完全に透明)～1(完全に不透明)の数値と、RGB値で指定します。

16進数色

カラーコードの16進数は、RR(赤)、GG(緑)、BB(青)の16進数で色の成分を決める、#RRGGBBで指定します。この時、すべての値は00～FFでなければなりません。例えば、#0000ffの値は青色で表示されます。これは、青色のコンポーネントが最高値(ff)に設定され、その他の値が00(W3School)に設定されているためです。

HSLカラー 

HSLは色相、彩度、明度の略で、色の円柱座標表現を表します。HSLカラー値は、hsl(色相、彩度、明度)で指定します。色相はカラーホイールの度数(0～360)で示されます。  0(または360)は赤、120は緑、240は青です。彩度はパーセント値で示され、0％はグレーの陰影を意味し、100％はフルカラーを意味します。明度も%で示され、黒は0％、白は100％(W3School)となっています。

HSLAカラー

HSLAカラー値は、オブジェクトの不透明度を指定する、アルファチャンネル付きHSLカラー値を拡張したものです。HSLAカラー値は、hsla(色相、彩度、明度、アルファ)で指定します。アルファパラメータは不透明度を定義し、数値は0.0(完全に透明)と1.0(完全に不透明)の間で示されます(W3School)。

色と感情にまつわる用語

色は、視覚的な感情です。色を使って、物語を伝えたり、人に行動を起こさせたり、感じさせたりすることができます。

無彩色/ニュートラル色

強い色彩の含量を欠いている色は、不飽和、無彩色、または中性色であるといます。無彩色(白、灰色、黒)には明度がありますが、色相や彩度はありません。

中性付近には、茶色・黄褐色・パステル・より暗い色が含まれます(カラー理論)。これらの色は、柔らかさと明るさを表現するために使用され、落ち着いた印象と、よりニュートラルなニュアンスを伝えます。

出典 / MAU ART & DESIGN GLOSSARY

環境色

我々は、色から暑さや寒さを感じとるのでしょうか？

暖色と寒色の違いは、暖色に属する昼光や夕焼け、寒色に属する灰色や曇りの日、といった風景の間の光のコントラストに関係しています。

これらは環境色と呼ばれ、我々が本能的に、現実世界に存在する配色を、自分がどのように感じているかによって分別していることが分かります。

暖色は、赤から黄色、茶色、黄褐色の色相 であると言われています。対照的に、寒色は青緑から青紫までの色であるとされ、ほとんどの色相に灰色が含まれています。寒色が、色あせたり、背景に溶け込んだりする傾向がある一方で、暖かい色はより表に出る、アクティブなカラーであるとされています(カラー理論)。

色彩心理学

色彩心理学とは、色の持つイメージと、人々の意識・無意識を関連づけるもので、人々がどのように考え、感じ、行動するかに影響を与えます。色から連想される印象の一覧は、以下の通り。

青  – 信頼、知性

赤  – 愛、エネルギー、情熱、怒り、飢え

黒  - 太字、豊か、力、悪

緑  – 癒し、自然、嫉妬、バランス、安らか

黄色  – 応援、幼児、暖かさ、楽観的

オレンジ  - 若々しさ、幸福感、アトラクション、フレンドリーさ

ピンク  - 敏感さ、思いやり、愛、セクシュアリティ、感情

パープル  - 高貴さ、ラグジュアリー、不思議、悲しみ

ロゴ

色彩心理学は、もちろんWebデザインに応用可能です。各ロゴカラーが持つ印象は以下の通り。

• 青いロゴは、自信、成功、信頼感を想起させる

• グリーンロゴは、環境へ配慮、靭性、耐久性、マスキュリンさとサステナビリティを想起させる
• 紫色のロゴは、女性性、魅力を想起させる
• ピンクのロゴは若さ、想像力、ファッションのを想起させる
• 黄色のロゴは、楽しさと近代性を想起させる
• 赤いロゴは専門知識と自信を想起させる

アクセシビリティに関する用語

約8％の男性と0.5％の女性が、何らかの形で色盲の影響を受けています。設計者は、色盲のユーザーのことを考慮しなければなりません。また、重要なUXインタラクションが、色盲の人々を疎外しないように、配色も考慮する必要があります。

赤緑色盲

この色盲は、赤色と緑色を認識する感光色素(NIH)が損失・もしくは機能が限られることで引き起こされます。

• 第一色弱：赤、オレンジ、黄色が緑色に見え、色が暗く見える。色盲のレベルとしては軽度であり、日常生活には干渉しません。

• 第一色盲：赤色が黒色に見えます。オレンジ色、黄色、緑色の色合いは、すべて黄色に見えます。

• 緑色弱：黄色と緑色が赤く見え、紫色から青色の色は認識しづらくなります。

•  第二色盲：赤は茶色がかった黄色に、緑はベージュ色に見えます。

青黄色覚異常

青黄色覚異常は、赤緑色の失明よりも稀です。青色感光色素は、欠損しているか、機能が限定されてい流状態です(NIH)。

•  第3色弱：青色がより緑色に見え、黄色と、赤～ピンクの色相を区別することは困難です。

• 第三色覚異常：青は緑色に見え、黄色は紫色または薄い灰色に見えます。

完全な色盲

完全な色盲(モノクローム)を持つ人は、まったく色を識別できず、視力の鮮明さも損なわれる可能性があります(NIH)。

• コーンモノクローム：コーンモノクロームを持つ人は、脳が様々なタイプの円錐からの信号を比較する必要があるため、色の識別に問題が生じます。
• ロッドモノクローム・色素沈着症：ロッドクロームを持つ人々は、世界が黒、白、灰色に見える。

（翻訳：Ayaka Takei）