デザイナーとしてキャリアをスタートさせたばかりの方は、デジタルベースでグラフィック・デザインをする場合、最も混乱しやすいことの一つは、様々なファイル形式の違いもさることながら、RGBとCMYKのカラーモードの違いでしょう。

デザイン関係のブログなどでは、このテーマを散々取り上げていますが、シンプルで覚えやすく、そして最も重要なことである、簡単な実践方法については、説明されていなかったと思います。

ですからこの記事で、説明しましょう。

RGBカラーモードを理解し、使いこなす

簡単に言ってしまえば、RGBカラーモードはすべての色を、Red=赤、Green=緑、Blue=青の3色の光を使って表現する技術のことです。RGBの技術と色の表現方法は、すべてのコンピュータ・スクリーンや電子デバイスで使われています。

実際どのような原理になっているのかについては、この記事では言及しませんが、一言で言えば、コンピュータ・スクリーンもラップトップも携帯電話も、その他ほとんどの電子デバイスも、赤、緑、青の3色の光から成る様々な輝度の組み合わせにより表現されているのです。

PCのスクリーン上では、赤、緑、青の3色の光から成る異なる輝度の組み合わせにより、すべてのピクセルが色を表現しています。例えば上の画像で紫に見えるピクセルは、右の図のRGBの明度の組み合わせにより表現されています。

欲しい色を表現するために、RGBの輝度をマニュアルでピクセルごとに調整することができるため、デザイナーはこのプロセスを完全にディレクションすることが可能です。明度を高くするほど、色は明るくなります(部屋を明るくするために、灯りを多くつけるのと同じです)。

デザインが最終的にコンピュータ・スクリーンや電子デバイスで使用される場合には、必ずRGBのカラーモードでデザインをする必要があります。下記のものが含まれます。

  • ユーザー・インターフェース
  • ウェブサイト
  • バナー
  • アイコン
  • 電子利用を目的としたすべてのデザイン

主要なデザイン・アプリケーションには、ウェブやその他のRGB出力のために、カラーモデルのプリセット値が設定されています。

RGB用に正しい設定が行えているか確認しましょう

新しいファイルを作る際、新規作成ウィンドウで、正しい設定がされていることを確認しましょう。

  • Illustratorの設定:新規ドキュメントのプロファイルで、ドロップダウンから「Web」を選択します
  • Photoshopの設定:プリセットのドロップダウンから「Web」を選択し、解像度が72になっていることを確認します
  • CorelDRAWの設定:プリセット指定先のドロップダウンから「Web」を選択します

RGBファイルをクライアントに提出しましょう

初期の段階ではデザインをJPEGで提出することが多くありますが、最終的なRGBのファイルは、下記チェックリストに沿っている必要があります。

  • ウェブサイトのレイアウト:PSD(圧縮ファイル)
  • ユーザー・インターフェース:PSD(圧縮ファイル)
  • アイコン:PNG (クライアントから要望があれば、元のPSDファイルもしくはAIファイルを含む)
  • バナー:PNG、GIF(クライアントから要望があれば、元のPSDもしくはAIファイルを含む)

RGBのデザインを納品する際に、使用目的の異なるTIFFやEPS、PDF、BMPファイルを使用することはできません。その他のファイル形式の違いについては、ファイル形式ガイド:PDG、PNG、その他を参照してください。

CMYK印刷の世界

デザインがスクリーン上で使用される場合、RGBを使用しますが、もし万が一あなたのデザインが印刷される可能性があるとしたら、CMYKのカラーモードでファイルを作成する必要があります。

上記の名刺に使われている色は、シアン、マゼンタ、イエロー、ブラックのインクをそれぞれ異なる量で重ね合わせることで表現されています。右の図では、特定の緑の色合いを表現するためにインクを重ねる様子を表しています。

コンピュータ・スクリーンとは異なり、プリンタでは紙の上に色をつけるのに光を使うことはできません。そのため次に最善の選択肢として、シンプルにインクを使用します。

すべてのデスクトップと業務用プリンタでは、4つの異なる色—シアン(C)、マゼンタ(M)、イエロー(Y)、キー・プレート(=黒/K)を混ぜ合わせて色を作り出しており、この頭文字をとってCMYKと呼ばれます。この4色を異なる量で混ぜ合わせることで、何千もの異なった濃淡や色合いを紙上で表現することができるのです。

しかし想像できるように、CMYKのインクを混ぜ合わせることは、RGBの光の組み合わせとは大きく違います。例えばRGBの場合、たくさん光をあてるほど明るい色を表現することができますが、CMYKでは色を重ねるほど色は暗くなります。白を表現する時に、RGBでは、すべての色を最大値(R:255、G:255、B:255)で重ねて表現するのに対し、CMYKで白は、完全に色のない状態(C:0%、M:0%、Y:0%、K:0%)と定義されます。

RGBは、インクでは表すことのできない大変明るくきれいな色を表現することができます(結局は光なので)。このことを忘れてしまうと、オンラインで見た時には素晴らしく見えたデザインが、印刷した時にくすんでしまった、ということになりかねません。

このRGBで作られたロゴは、CMYKで再現することのできない大変明るい色が使われています。残念ですが。

しかし心配する必要はありません。デザイン系アプリケーションは、CMYKを用いた印刷
システムの色合いを再現し、適切なファイルを作成してくれます。

ドキュメントがtCMYKの印刷設定になっているか確認しましょう

下記のガイドラインに従って、印刷用の設定をしてみましょう。

  • Illustratorの設定:新規ドキュメントのウィンドウで、プロファイルのドロップダウンから「プリント」を選択します
  • InDesignの設定:新規ドキュメントのウィンドウで、プロファイルのドロップダウンから「プリント」を選択します
  • CorelDRAWの設定:新規ドキュメントのウィンドウで、プリセット指定先のドロップダウンから「CMYK」を選択します
  • Photoshopの設定:新規ドキュメントのウィンドウで、カラーモードで「RGB」を選択し、解像度を300dpiに設定します。その直後、「表示」>「色の校正」で、CMYKのカラーモードを確認します。確認できたら、最終ファイルをCMYKカラーモードに変換し(「イメージ」>「モード」>「CMYK」>「統合」)、別名で保存します。このファイルを、Illustrator、InDesign、CorelDRAWを使って印刷用のデザインに仕上げます。また、スタートの段階からCMYKファイルを作成することもできますが(新規ドキュメントのウィンドウで、カラーモード「CMYKカラー」を選択するだけです)、この場合一部のエフェクトや機能が使用できなくなることも覚えておきましょう。

なぜ300dpiなのか?

CMYKのインクに加えて、印刷の世界で大切な要素となるのが、DPI(Dots Per Inch=1インチあたりのドット数)やPPI(Pixels Per Inch=1インチあたりの画素数)で表される解像度です。

プリンタとコンピュータ・スクリーンは異なる生き物だと考えてください。コンピュータ・スクリーンが1インチの画像に72×72ピクセル必要なのに対し(72dpi)、印刷では同じサイズの画像を同じクオリティで表示するのに、最低でも1インチあたり300dpiが必要です。

左の画像は、スクリーン上ではとても大きい画像に見えますが、高画質で印刷するには最低300dpiが求められますので、この画像は1x 0.76インチサイズのサムネイルになってしまいます。

このため、Photoshop上で10×10インチの画像を300dpiの解像度で作成した場合、縦横3,000ピクセルのファイルになるのです。スクリーンではとても大きくなりますが、高画質印刷ではたったの10×10インチになります。

もし印刷する予定があれば、常に解像度300dpiでファイルを作成するようにしましょう。覚えておきたいのは、すでにある画像を300dpiにリサイズするという選択肢はないということです。リサイズしても、すでにあるピクセルを複製するだけなので、画像は不鮮明なものになってしまいます。スタートの段階から十分なピクセル数で作成する必要があります。

現在ある写真やデザインをどれくらいのサイズで印刷できるのか確認する場合は、単純にピクセル数を300で割ってみましょう。例えば、1280 x 1024 pixelの写真であれば、高画質で印刷できるのは4.26 x 3.42インチになります。これより大きく印刷すると、不鮮明な画像になってしまいます。

注意:IllustratorもしくはCorelDRAWで作成したベクター画像の解像度については、心配する必要はありません。どのサイズでも高画質で印刷することが可能です。解像度が関係するのは、主にPhotoshopで作成されたビットマップ画像の場合のみです。

クライアントに、正しいCMYKの印刷ファイルを納品しましょう

この業界では通常、CMYKファイルはPDF形式で納品されます。

  • Illustratorの設定:「ファイル」を選択>「名前を付けて保存」を選択>「ファイル形式」で「Adobe PDF」を選択。PDFの設定画面が開いたら、「Adobe PDFプリセット」で「Illustrator 初期設定」を選択し、「保存」します。これで印刷可能で、かつIllustratorで編集可能なPDFファイルが作成されます
  • InDesignの設定:「ファイル」を選択>「PDF 書き出しプリセット」を選択>「定義」をクリックします。様々なプリプレスの設定が可能なウィンドウが表れますが、「書き出し」を選択すれば、InDesignが業務用印刷に適切なPDFファイルを作成してくれます。
  • CorelDRAWの設定:「ファイル」を選択>「PDFに書き出し」を選択し、PDFのプリセットでドロップダウンから「プリプレス」を選択。Adobeのすべてのアプリケーションで開ける、印刷可能なPDFファイルが作成されます。

PDFファイルの他にも、クライアントからの要望によってその他のファイル形式で書き出しを行うかもしれません(通常EPSやAI)が、事実上すべてのデザイン・アプリケーションで開き、使用できるため、基本的にPDFがあれば問題ないことを伝えておくと良いでしょう。

まとめ

RGBとCMYKの違いは、すべてのデザイナーが理解しておかなければならないデザインの基本要素です。

要点はきわめてシンプルです:RGBはスクリーン上で色を表現するのに光を使用する一方で、CMYKは紙の上でインクを混ぜ合わせて表現するということです。過程は大きく異なりますが、正しい設定でファイルを作れば、デザイン・アプリケーションを簡単に作成してくれます。

2つはまったく異なるものなので、RGBとCMYKでは異なるファイル形式を使います。それぞれのファイル形式の違いに関するより詳しい情報は、ファイル形式ガイド:PDG、PNG、その他を参照してください。

RGBとCMYK のファイル形式についてご質問やアドバイスをお寄せください。