「ページで画像が表示されていない！PDFの色が変！」ページ公開後に慌てないためのカラーモードのプチ知識と対処法 | ネットPR.JP

お久しぶりです。デザイナーのやまざきです。

「ページに画像が表示されていない！」
「PDFで表示される色が想像していたものと違う！」

公開したニュースリリースページやブログ、PDFを見てこのように慌てた覚えのある広報・マーケティング担当者はいらっしゃいませんか？
画像を指定するHTMLタグや印刷したPDFの色は合っているのに、なぜか正しく表示されない……。それはファイルのカラーモードの違いが原因である可能性があります。

実はこのカラーモードの問題はもう何年も解決されずにいるのですが、専門的な内容のためデザイナーやエンジニアでないとなかなか知り得る機会もないかと思い、今一度カラーモードの違いについてと、その対処法をいくつかご紹介したいと思います。触り程度ではありますが参考になりましたら幸いです。
※ご紹介するソフトはすべて最新バージョン（2013年7月時点）での操作方法になります。

RGBカラー、CMYKカラーとは？

ドキュメントのカラーモードには「RGBカラー」と「CMYKカラー」の2種類があり、ざっくり申しますと「RGBカラー＝ディスプレイ用」「CMYKカラー＝印刷物用」と使い分けられます。

RGBカラー
R（Red：赤）G（Green：緑）B（Blue：青）の光の三原色を利用した発色方法です。R・G・Bの3色を掛け合わす数値を変えることによって白（明）／黒（暗）が調整されます。テレビやパソコン、デジカメなどのディスプレイはこのRGBで表示されています。

CMYKカラー
C（Cyan：シアン）M（Magenta：マゼンタ）Y（Yellow：イエロー）のインクの三原色を利用した発色方法です。このC・M・Yだけでもほとんどの色を表現することができ（金、銀などは除く）、そこに純粋な黒を表現するためにK（Black：黒）を加えて、CMYKカラーとなります。インクによる表現ですから印刷物に用いられています。

CMYKカラーはRGBカラーよりも表現色域が狭いため、まったく同じ発色を保ったまま変換することは難しく「Webサイトと印刷物で色が違うじゃないか！」という時は、カラーモードの違いによることが考えられます。

ページに画像が表示されていない！

さて、公開したニュースリリースページやブログに挿入したはずの画像が表示されていない、といったことはありませんか。

「あっちのブラウザでは表示されているのに、こっちのブラウザでは表示されない」となればカラーモードが原因である可能性が高いです。実はInternet ExplorerではCMYKカラーの画像表示に対応しておらず、Internet Explorerだけ表示されていない、というケースが多いのです。（バージョンによってはその他のブラウザでも起こるようです）

まずは落ち着いて、ブラウザがInternet Explorerではないかチェック！
次に画像のカラーモードをチェック！

ブラウザがInternet Explorerで、画像のカラーモードがCMYKカラーになっていた場合は、画像をRGBカラーに変換することで表示されます。

カラーモードの確認・変換方法

1. Photoshopやフリーの画像ソフトを利用
デザイナーがよく使用するPhotoshopの他、こちらの「ニュースリリースやブログ投稿に便利！　画像編集ができるフリーソフトまとめ」で弊社の頼られ系男子が紹介している「IrfanView」や「GIMP」といったフリーの画像ソフトでも変換可能です。
※「GIMP」ではCMYKの色空間に対応していないため、CMYKカラーの画像は自動でRGBカラーとして展開されます。また、PSD形式には対応しておりませんのでご注意ください。

• 本家：IrfanView – Official Homepage 
• 日本語版：IrfanView 日本語版のページ
• GIMP ※リンク先は英語になります。右上のナビゲーション内 Downloads からダウンロードできます。

2. デザイナーに丸投げる
セキュリティの都合でフリーソフトはインストールできない、ソフトはあっても操作がよくわからない、クリエイティブソフトはデザイナーのマシンにしか入っていない等、様々なご事情があると思います。
社内にデザイナーがいたらさくっとお願いしてしまうのも手です。個人的には多少作業が詰まっていてもどんどん声を掛けていただいてOKです。ちょっと残念な画質ならおまけで補正までかけちゃいます。（10枚以上の場合は要相談）

スマホやタブレットで見たPDFの色がおかしい！

iOS（iPhone 4やiPad）やAndroidではCMYKカラーの再現性が完全ではなく、CMYKカラーで作成されたPDFの色が変わって見えることがあります。（※ICCプロファイルという国際標準化団体の公表したカラーマネジメントの基準があるのですが今回は割愛させていただきます）

配色によってはさほど気にならないこともありますが、蛍光色のようになってしまうことが多く、読みにくくならないよう、Webサイト用にPDFを作成する場合にはRGBカラーでの出力をお願いするようにしましょう。

ご参考までに、広報・マーケティング担当者でAdobe Acrobat XI Pro、Photoshop、Illustratorをお持ちの方には下記の変換方法をご紹介します。

Adobe Acrobat XI Proでの変換方法

A.アクションウィザードから変換
ツール／アクションウィザード／「Webとモバイルに最適化」を実行

B. 表示／ツール／印刷工程／「色を置換」から変換
ここでCMYKカラーからRGBカラーへの変換の設定をします。

C.アドバンスト（編集）／プリフライト／PDFフィックスアップ から変換
「sRGBに変換」を選択し、「解析してフィックスアップ」で書き出します。

2.Photoshop、Illustratorでの変換方法

PDF形式への保存時に「出力」の「出力先」にRGBプロファイルを選択します。

最後に、デザイナーに画像やPDFの作成を依頼する際には「Web用と印刷用、2ファイル用意してね」としていただくと後々の運用がスムーズになると思います。

備えあれば憂いなし。

印刷アイドルCMYK

ちなみに、「彩度」「レタッチ」「トーンカーブ」「アウトライン」など、印刷やデザインの用語が歌詞に散りばめられている印刷アイドルCMYKのデビュー曲「オフセットワールド」がいま話題です！

印刷アイドルCMYKとは

関西の印刷・加工技術とデザイナーがコラボレーションした展覧会「印刷EXPO vol.3」のテーマで架空のアイドル。