色は人が見て感じる感覚です。同じものでも見る人によって違う色に見えます。
そこで、誰にでも分かりやすい情報を提供するためカラーユニバーサルデザインの考え方に沿って配色をする必要があります。
ここではカラーユニバーサルデザインの考え方に沿ってデザインを行うときに利用出来る、各色覚をシミュレーションする方法をご紹介します。
- 前置き 人の色覚は色々なタイプがある
- 色覚のシミュレーションの方法
前置き 人の色覚は色々なタイプがある
目の視細胞の分光感度は色々
色々な資料に、人の目の視細胞のS錐体、M錐体、L錐体の分光感度のグラフが載っていたりします。
錐体の分光感度
実際は、人の目の分光感度は色々あります。そのため人の目の分光感度をグラフにすると色々な種類のグラフができます。
たいてい本に載っているこういうグラフは最も多い割合の色覚の型の人の分光感度を示してあります。
人によって目の分光感度が違うので、ものを見たときの見え方も人によって異なります。
色覚は血液型のようにタイプがある
血液型にA、B、O、ABなど種類があるように、色覚にも以下のような種類があります。
- Ｃ型
- Ｐ型（強）
- Ｐ型（弱）
- Ｄ型（強）
- Ｄ型（弱）
- Ｔ型
- Ａ型
Ｃ型というのが、色彩工学その他の教科書で説明されているＳ、Ｍ、Ｌの各錐体が一般的な分光感度を持っているタイプの色覚です。
Ｃ型以外の色覚は、Ｓ、Ｍ、Ｌの各錐体のいずれかが無かったり、感度特性がＣ型の人と異なっていたりするタイプの色覚です。
いずれかの型の人だけでなくすべての型で見やすいように考慮する必要がある
もしＣ型の人だけを対象としてデザインをしてしまうと、他の型の色覚の人が見た時に見づらいものになってしまう恐れがあります。
そこで、各色覚の人の見え方をシミュレートして確認したりして、どの型の色覚の人でも見やすいように考慮してデザインします。
詳しくはCUDOのウェブサイトに載っています
色覚のシミュレーションの方法
色覚のシミュレーションの注意点
色覚シミュレーション機能はおそらくＣ型の人が使用する前提になっていると思われる
色覚の各型の特徴から考えれば、色覚シミュレーションといっても、おそらくＤ型やＰ型の人がＣ型のように見えるようシミュレーションするのは困難だと思われます。
一方、Ｃ型の人の見え方をＤ型やＰ型の人の見え方に似せるようシミュレートすることはある程度可能だと思われます。
よって、色覚のシミュレーションの機能は、説明書などにもあまり説明が見つかりませんが、Ｃ型の色覚の人が利用するのを前提としていると思われます。
色覚のシミュレーションは見え方を正確に再現するわけではない
色覚のシミュレーションは、いずれのものも、各色覚の型の人にとっての見え方を正確に再現するものではないということです。
各色覚の型の人が見た時にどのくらい見にくかったり見やすかったりするかを判断するための材料を提供してくれるものだということです。
よって、例えばＰ型の色覚をシミュレートしてつくられた画像などを見て「Ｐ型の色覚の人が見るとこのように見えるのか」と考えるのは間違いだとのことです。
この点は関連団体や各ツールの製作元でも強調して説明されています。
ハードウェアやソフトウェアを使用して色覚のシミューレションをする場合、あくまで各色覚の型の人が見た時に、どういう色の組み合わせがどのくらい見にくかったり見やすかったりするかの判断の目安、参考として捉える必要があります。
色覚の型がありますが、同じ型の中でも見え方には差があります。
そのため、Ｄ型の人の見え方はこう、というように一律に再現できないのは当然、とのことです。
Adobe® Photoshop®の「色の校正」を使用する方法
Photoshopの「色の校正」の機能を使用して、Ｐ型、Ｄ型の色覚の人の見え方をシミュレートできます。
Photoshopでシミュレートしたい画像データを開きます。
［ 表示 ＞ 校正設定 ］と進み、「Ｐ型（1型）色覚」、「Ｄ型（2型）色覚」のいずれかを選びます。
［ 表示 ＞ 色の校正 ］を入り切りすることで、Ｐ型またはＤ型の色覚の見え方をシミュレートできます。
シミュレートした状態としていない状態を並べて見比べる
以下の手順で、シミュレートした状態としていない状態を並べて見比べられます。
画像データを開いたら、［ ウィンドウ ＞ アレンジ ＞ ●●の新規ウィンドウ ］でもう一つ同じ画像データのウィンドウを開きます。
二つのウィンドウのうち一方のウィンドウで「色の校正」をチェックします。
これで一方のウィンドウはそのままの表示、もう一方のウィンドウは色覚をシミュレートした表示になります。
色覚のシミュレートをした状態でプリントアウトする
元の画像データを開きます。
元の画像データ
「色の校正」の機能でいずれかの型の色覚のシミュレートをします。
「色の校正」でいずれかの型の色覚をシミュレート
［ ファイル ＞ プリント ］でPhotoshop プリント設定の画面を開き、各設定項目を設定します。
プリンタードライバーの設定、「カラー処理：」の設定、「プリンタープロファイル：」の設定はカラープロファイルを使用した通常の出力時と同じです。適切な設定を選びます。
参考記事
通常プリント、ハードプルーフのうちハードプルーフを選択します。
「調整プロファイル：」が「D-type(Deuteranopia)」か「P-type(Protanopia)」になっていることを確認します。
Photoshop プリント設定
プリントを押してプリントします。
色覚のシミュレートをした状態でPDFで保存する
画像データを開き、「色の校正」でいずれかの型の色覚の見え方をシミュレートします。
［ ファイル ＞ 別名で保存 ］と進みます。
保存時の設定をして保存します。
「校正設定を使用」にチェックを入れます。
「カラープロファイルの埋め込み：●●」にチェックを入れます。
別名で保存 の設定画面
PDFの保存設定をし、保存します。
「一般」の項目をお好みで設定します。
PDFの保存設定 一般の項目
「圧縮」の項目をお好みで設定します。
PDFの保存設定 圧縮の項目
「出力」の項目で、「カラー変換：変換しない」「プロファイルの埋め込み：出力先プロファイルを含める」にします。
PDFの保存設定 出力の項目
以上でPDFは完成です。
このPDFで心配な場合はsRGBの画像に変換するとよい
上記の方法で作成したPDFは、いずれかの色覚をシミュレートするためのカラープロファイルのようなものが埋め込まれた画像のPDFになっています。
そのため、PDFを渡した先の部署の人が表示した時に正常に表示されるのか不安な場合もあるでしょう。
そういう場合はsRGBの画像にしてしまうと安心です。
Adobe® Acrobat®でPDFを開きます。
Acrobatの環境設定のカラーマネジメントの設定で、作業用スペースのRGBの欄に「sRGB IEC61966-2.1」を指定し、ＯＫをクリックします。
［ ファイル ＞ 別名で保存 ］と進み、保存先のフォルダを選びます。
保存画面でJPGなど好みの画像形式を選び、設定をクリックします。
ファイル形式を選び、設定をクリック
設定画面で、以下のように設定し、ＯＫをクリックします。（ここではJPEGの場合で説明します）
- ファイル設定 – カラー： 好みの圧縮率を選びます。
- ファイル設定 – フォーマット： 特別な理由がなければ「ベースライン（標準）」が無難です。
- カラーマネジメント – RGB： プロファイルの埋め込みを選びます。
- 変換 – カラースペース： カラー：RGBを選びます。
- 変換 – 解像度： 好みの解像度を選びます。（参考 118.11ピクセル/cmは300dpiと同じです）
PDFからの画像保存時の設定
保存をクリックして保存します。
以上で、いずれかの色覚をシミュレートした色の状態のsRGB画像がJPEG画像として保存できました。
PDFから画像を取り出してもよい
画像データなどを操作するのに慣れている場合は、PDFに埋め込まれている画像をPhotoshopで編集してもよいでしょう。
PDF内の画像をPhotoshopで開くと、色覚をシミュレートするための一種のカラープロファイルが埋め込まれた画像が現れます。
あとはお好みでsRGBに変換するなり必要な操作をします。
Adobe® Illustrator®の「色の校正」を使用する方法
Illustratorの「色の校正」の機能を使用して、Ｐ型、Ｄ型の色覚の人の見え方をシミュレートできます。
Illustratorでシミュレートしたいドキュメントを開きます。
［ 表示 ＞ 校正設定 ］と進み、「Ｐ型（1型）色覚」、「Ｄ型（2型）色覚」のいずれかを選びます。
［ 表示 ＞ 色の校正 ］を入り切りすることで、Ｐ型またはＤ型の色覚の見え方をシミュレートできます。
シミュレートした状態としていない状態を並べて見比べる
以下の手順で、シミュレートした状態としていない状態を並べて見比べられます。
ドキュメントを開いたら、［ ウィンドウ ＞ 新規ウィンドウ ］でもう一つ同じドキュメントのウィンドウを開きます。
二つのウィンドウのうち一方のウィンドウで「色の校正」をチェックします。
これで一方のウィンドウはそのままの表示、もう一方のウィンドウは色覚をシミュレートした表示になります。
色覚のシミュレートをした状態でPDFで保存する
ドキュメントを開き、［ ファイル ＞ ドキュメントのカラーモード ＞ RGBモード ］と進み、カラーモードをRGBに変換します。
「色の校正」でいずれかの型の色覚の見え方をシミュレートします。
［ ファイル ＞ 別名で保存 ］と進み、PDFとして保存します。
PDFの保存設定をし、保存します。
「一般」の項目をお好みで設定します。
PDFの保存設定 一般の項目
「圧縮」の項目をお好みで設定します。
PDFの保存設定 圧縮の項目
「出力」の項目で、「カラー変換：変換しない」「プロファイルの埋め込み：すべてのプロファイルを含める」にします。
PDFの保存設定 出力の項目
以上でPDFは完成です。
PDFファイルを開いてみて、意図した通りシミュレートされた色になっているか確認します。
このPDFで心配な場合はsRGBの画像に変換するとよい
上記の方法で作成したPDFは、画像にはいずれかの色覚をシミュレートするためのカラープロファイルのようなものが埋め込まれるなどした状態になっています。
そのため、PDFを渡した先の部署の人が表示した時に正常に表示されるのか不安な場合もあるでしょう。
そういう場合はsRGBの画像にしてしまうと安心です。
Adobe® Acrobat®でPDFを開きます。
Acrobatの環境設定のカラーマネジメントの設定で、作業用スペースのRGBの欄に「sRGB IEC61966-2.1」を指定し、ＯＫをクリックします。
［ ファイル ＞ 別名で保存 ］と進み、保存先のフォルダを選びます。
保存画面でJPGなど好みの画像形式を選び、設定をクリックします。
ファイル形式を選び、設定をクリック
設定画面で、以下のように設定し、ＯＫをクリックします。（ここではJPEGの場合で説明します）
- ファイル設定 – カラー： 好みの圧縮率を選びます。
- ファイル設定 – フォーマット：< 特別な理由がなければ「ベースライン（標準）」が無難です。
- カラーマネジメント – RGB： プロファイルの埋め込みを選びます。
- 変換 – カラースペース： カラー：RGBを選びます。
- 変換 – 解像度： 好みの解像度を選びます。（参考 118.11ピクセル/cmは300dpiと同じです）
PDFからの画像保存時の設定
保存をクリックして保存します。
以上で、いずれかの色覚をシミュレートした色の状態のsRGB画像がJPEG画像として保存できました。
EIZO®のUniColor Proを使用する方法
EIZO®のモニターを使用している場合、EIZO®のUniColor Proというソフトを使用して各色覚の見え方をシミュレートできます。
ただ、UniColor Proは更新が行われていないようで、新しいOSでは起動できないようです。
当ブログ運営者の私が使用中のMac OS10.15では使えませんでした。
UniColor Proのページ
UniColor Pro対応のモニターを使用している場合にインストールできる
UniColor Pro対応のEIZO®のモニターを使用している場合に、UniColor Proをインストールできます。
UniColor Pro対応機種は、EIZO®のウェブサイトのUniColor Proのダウンロードページで確認できます。
UniColor ProでＰ型、Ｄ型、Ｔ型の色覚がシミュレートできる
UniColor ProではＰ型（強）、Ｄ型（強）、Ｔ型の色覚がシミュレートできます。
各色覚のモードにすることで、ディスプレイ表示全体がシミュレートされた状態になります。
スクリーンキャプチャーできる
各型の色覚の見え方をシミュレートした状態の色のまま、UniColor Proの機能でスクリーンキャプチャーできます。
【旧情報】東洋インキ株式会社「UDing シミュレーター」を使う
※2022年3月15日に確認したところ「UDing シミュレーター」のページは無くなっていました。
以下の内容はまだ「UDing シミュレーター」のページがあったときの内容です。
東洋インキ株式会社がカラーユニバーサルデザイン用の支援ツールを無償提供しています。
各型の色覚の人にとっての見づらさ見やすさを確認するツールとして「UDing シミュレーター」があります。
PC版とiPhone版があります。
東洋インキのUDデザイン支援ツールのページ
画像データの色を確認できる
「UDing シミュレーター」で、確認したい画像を読み込んで、見づらさ見やすさなどを確認できます。
Ｐ型、Ｄ型、Ｔ型の色覚の人にとっての見づらさ見やすさを確認できます。
判別しやすい色へ変換できる
判別しにくい色の組み合わせを、判別しやすい色に変換する機能があります。
親切な説明書がある
分かりやすい説明書が付いています。
色々細かい機能があり、説明書を見ると使いこなせます。
【旧情報】東洋インキ「UDing CFUD」で特色（スポットカラー）の配色を作れる
※2022年3月15日に確認したところ「UDing CFUD」の配布は終了したそうです。
以下の内容はまだ「UDing CFUD」が無料配布されていたときの内容です。
東洋インキ「COLOR FINDER」の特色インクについて、各型の色覚の人にとって見やすい色の組み合わせを作るツールとして「UDing CFUD」があります。
「COLOR FINDER」収録の特色インクの組み合わせを作れる
「UDing CFUD」は画像データなどを読み込んで見やすさなどを確認するツールではありません。
東洋インキ「COLOR FINDER」に収録されているインクの色について、各型の色覚の人がみて判別しやすい配色を作成できるソフトです。
親切な説明書がある
分かりやすい説明書が付いていますので、説明書を見て色々と細かい使い方ができます。
東洋インキのカラーユニバーサルデザインに関する情報
東洋インキの以下のページにカラーユニバーサルデザインに関する情報があります。
参考リンク
ガイドブック「カラーユニバーサルデザイン推奨配色セット」を参照する
デジタル処理で確認する他に、配色を考えていくために参照できる資料もあります。
前出のCUDOのウェブサイトで、「カラーユニバーサルデザイン推奨配色セットガイドブック」がダウンロードできます。
CUDOのウェブサイト内の、資料ダウンロードページ
色弱者が感じる色の見分けにくさを一般色覚者が体験できるメガネ、ルーペ
デジタル処理ではなく、見分けにくさを体験できる特殊フィルタで作ったメガネおよびルーペが販売されています。
製造メーカーの伊藤光学工業株式会社のウェブサイトに購入ページがあり、CUDOのウェブサイトからリンクが貼られています。
CUDOのウェブサイト内の、メガネ型ツールの紹介ページ
その他のツール
上記以外にもツールはあり、色々なツールがCUDOのウェブサイトで紹介されています。
CUDOのウェブサイト内のツールの紹介ページ
以上、カラーユニバーサルデザインの考え方に沿ってデザインを行うときに利用出来る、各色覚をシミュレーションする方法をご紹介しました。
参考記事
EIZO® UniColor Pro に対応したモニターの例
※UniColor Proは更新が行われていないようで、新しいOSでは起動できないようです。当ブログ運営者の私が使用中のMac OS10.15では使えませんでした。
