Webと印刷物の違いを比較!色の見え方と注意点まとめ

Webデザイン
ユキックス
ユキックス

こんにちは!ユキックス(@MILKIT_DESIGN)です!

ご自身でパンフレットやチラシなど印刷物を発注(入稿)して手元に届いたときに、仕上がりの色や写真がくすんでいた画像や文字が粗くモザイクのようにぼやけていた思っていた発色と全然違った‥など、ガッカリした経験はありませんか?

ユキックス

Webサイトの制作をしている中で、このWebのデザインをそのままパンフレットやチラシにできますか?というご相談、ご依頼をいただくことがあります。

ユキックス

Webのデザインをそのまま印刷物にしたい場合、色や画像の扱いが双方で大きく違うため、基本的にデータは新しく作り直します。


Webのデザインデータを印刷物にする時、そのまま画像などをWeb用のデータからコピーして貼り付けて印刷を依頼してしまうと印刷物の仕上がりは発色が悪く、残念な結果になってしまいます。今回は残念な印刷物にならないための回避策と、注意点をまとめました!

1.カラーモードが違う!RGB(Web)とCMYK(印刷)

使われている色の要素が違う = カラーモードの違い

カラーモードは、グラフィックを制作する時に必要なデザインツール内の設定です。失敗を回避するためには、制作物を使用する用途に合わせてRGBやCMYKなど、カラーモードを適切に選ぶ必要があります。

RGB(アール・ジー・ビー)

  • パソコン(PC)やスマートフォンの画面上の発光によって見える色
  • 主にWebサイトのデザイン、バナーなど液晶モニターの画面上に表示されるものに使用
  • 光(色光)の三原色(Red、Green、Blue)で成り立っている
  • Red、Green、Blueを混ぜ合わせるほど明るい色へと変化していくのが特徴
    • 例)舞台照明のように、色を重ねたり強く照らすほど白に近付いて明るくなる
    • これを加法混合・加法混色と言う

CMYK(シー・エム・ワイ・ケー)

  • 印刷物として主に紙面上でインクの重なりによって見える色
  • 主に紙媒体、パンフレット、チラシ、名刺や看板なども含めた、印刷されるものに使用
  • 色(色料)の三原色(Cyan、Magenta、Yellow)と、(KeyPlate)で成り立っている
  • Cyan、Magenta、Yellowを混ぜ合わせるほど暗い色へと変化していくのが特徴
    • 例)絵の具のようにCMYの3色を混ぜ合わせるほど暗くなって黒に近付くも、完全に混ざっても純粋な黒色にならずCMYが混ざった黒に近い濁った灰色〜濃い焦げ茶色になる
    • これを減法混合・減法混色と言い、お仕事上ではフルカラーを表現する際に「プロセスカラー」と呼ばれることが多い

ユキックス

CMYKのKはBlackではなくキープレート(KeyPlate)のK(キープレートとは画像の輪郭を再現するための印刷用の版のこと)で、KeyPlate版の印刷には通常黒(Black・スミ)インクが使用されます。ちなみに、プリントに使用する黒インクを指す場合、KではなくBKと表記されることが多いです!

発注(入稿)して届いた印刷物が、思っていた発色と全然違った場合、カラーモードが適切に選ばれていなかった可能性が考えられます。RGB形式で制作したデータを印刷用にする場合、CMYK形式にする必要があります。(単純に変換するだけでは思っていた通りの仕上がりや発色に近付けることは難しく、調整する技術が必要です!)

まずは作り始める前に制作物に合った適切なカラーモードを選択することで、カラーモードの違いによる色の失敗を回避することができます。

補足:黒インクの印刷について

黒(Black・スミ)の印刷は、K100%のブラック、リッチブラック、CMYKの4色を100%にしたブラックなど、黒の分量=インク量の比率を指定することができます。リッチブラックやCMYKの4色を100%にしたブラックは印刷面が滲む可能性があるので入稿先ではこの数値に規定を設けていることもあるため、印刷を依頼する環境に合わせて適正にデータの調整を行う必要があります。

補足:CMYKのインクの重なりの仕組み

新聞やチラシまたはレーザープリンタの印刷など、出力紙に印刷された部分をルーペなどで拡大すると4色の小さな点の集まりで表現されていることがわかります。
一般的な印刷物の場合、Cyan、Magenta、Yellow、Blackの4色を印刷機で刷り、大小の網点細かな点の濃淡を重ねることで印刷データの色彩を表現しています。
また、紙自体に加工を施したり選択した紙質によって、印刷色の見え方が変わります。

2.カラースペースが違う!RGB(Web)とCMYK(印刷)

表現できる色の範囲(色数)が違う = カラースペースの違い

液晶モニターなど画面上で使用されるRGBに比べて、紙面など主に印刷に使われるCMYKは再現できる色の範囲が狭くなります。

RGB(アール・ジー・ビー)

  • 表現できる色数(表現色の範囲 = カラースペース)は、約1,677万色

CMYK(シー・エム・ワイ・ケー)

  • 表現できる色数(表現色の範囲 = カラースペース)は、1,000万色

この色数でどのような差異が起こるかというと、特に原色や濃色など鮮やかな色をCMYKの色数だけで忠実に再現する部分が難しく、カラーモードの設定が適正であっても印刷の場合はモニターに映る色と比べて、全体的に若干くすんだ色になってしまうことは避けられません。

少し掘り下げて言うとRGBとCMYKはカラーモード(色の要素)の違い、カラースペース(色の範囲)の違いが起因しており、画面上でデザイン制作を行う場合、RGBとCMYKに同じ色はなく表現できる色に差異があるためディスプレイ画面上で見える色と印刷された制作物の仕上がり色が完全一致する、とはならないのです。

この違いを知った上で適切な色を選択し、デザインデータの微細な調整を重ねることで双方の見え方の差異を埋めることによって色を印刷用に再現し、違和感のないデザインにするのです。

ユキックス

例えばわたしは印刷が想定されているデザインの制作で写真を使用する場合、画面上と紙面での差異を少しでも軽減するためにデザインを制作する段階で使用写真に必ずレタッチ(色補正)を施しています。

ユキックス

さらに印刷用デザインデータ全体の彩度や明度を適切に調整して入稿前に必ず紙に出力し、納得いく色になるまで印刷された状態を実際に目で見て発色を確認してから、入稿しています!

デジタルカメラで撮影した画像は主に液晶モニター用に最適化されておりRGBですが、液晶モニターの画面上などWebで使用した写真を印刷用にCMYKに変換して使用する際に色がくすむのも、表現できる色の幅が狭まって鮮やかさ、彩度などが失われるためです。特に原色や濃色に近い赤、青、緑と黒は変換によって劣化が目立つ可能性が高く、色のくすみで印象が大きく変わるので印刷用に色補正する精度の高さが求められます。

複数回の色の変換に注意!

RGBからCMYKに変換したデザインデータや画像を再度RGBに変換した場合、CMYKの発色や鮮やかさがさらに失われる可能性が高いです。デザインデータは色の変換を可能な限り避け、なるべく元の高画質な写真や画像データを使用し、適正なカラーモードでデザインデータを制作することをお奨めします。

印刷物全体の発色が極端に悪く仕上がりの色や写真がひどくくすんでいた場合は、そもそもカラーモードが適切に選ばれていなかった可能性が考えられます。

Photoshop、Illustratorなどのデザイン制作ツールで印刷(入稿)データを作る場合、最初の設定段階でカラーモードを適切に設定すれば、カラーモードの違いによる色の失敗は回避できます。さらに印刷用に色補正の手間をしっかりかけることで、仕上がりの美しい印刷物になります。

3.その他、色以外のRGB(Web用データ)とCMYK印刷用データ)決定的な違い!

解像度の違い

Webのデザインデータをそのまま印刷用データにできない理由はWeb上のデータ解像度が印刷物のデータよりも低いことも、起因しています。

RGB

Webは 72dpi (〜96dpi)推奨

CMYK

印刷は 350dpi (〜400dpi)推奨

補足:dpiとは?

dpiとは、解像度であり「dots per inch」の略で、1インチの中に入っているドットの数を表しています。数値が小さければ粗く、数値が大きくなるほど細かく鮮明です。

Web用の画像をそのまま印刷しようとすると(Webと同じような大きさで使用した場合)解像度がどうしても低くなるため、画像は粗くガサガサで残念な画質になってしまうのです。

印刷用の高解像度データを低解像度のデータにすることは難しくないですが、低解像度のWebデザインデータを印刷用に高解像度のデータにすることはまず困難です。(画像を復元する十分な時間と技術と予算を投入すれば無理な話ではないかもしれないですし、最近は低解像度のデータを高解像度にするAIやアプリも出てきていますが、精度も含めてまだ検証段階であるためこれらのツールに頼る日も現実的にはまだ遠そうです。)

また、RGB形式で制作したデータを印刷用にする場合は、前術の通りCMYK形式にする必要があります。

余談ですが、最近ではRGBで作成したデータも印刷が可能だったり、解像度を問わなければオンデマンド印刷※で対応もできます。解像度が低いデータを美しく見せる技術なども進化してはいますが、印刷で思うような仕上がりや発色にならないことも多いのでイメージ通りや理想的な色を再現したいのであれば、最初からCMYKで入稿データを制作することをお薦めします。

オンデマンド印刷・・・印刷用の版を使わず機械でデータを読み取って色を再現し印刷する手法で、版を起こさない分、時間を大幅に短縮できるため短納期や少ない部数の印刷に向いています。

扱う単位の違い

RGB

Webの単位は一般的に px (ピクセル)
相対単位(画面サイズや見ている画面モニターなどの解像度によってサイズが可変する)

CMYK

印刷の単位は一般的に mm (ミリ)
絶対単位(環境が変わっても絶対にサイズは変わらない)

原則、小数点を使わない!(ここは絶対に押さえておきたいポイント)

RGB(Web用データ)とCMYK印刷用データ)双方に言えることで、本当に基本的・基礎的なことなのですが画像やフォントサイズなどの要素において整数にすることをお忘れなく!!小数点が発生するデザインは、お薦めしません!!(声を大にして言いたい!)

その理由は、

  • 印刷物であれば小数点は印刷時に滲みやぼやけることの原因になりうること
  • Webであれば少数点は表示がぼやけたりする原因となるだけでなく、コーディングが発生するデザインデータの場合、小数点があることによって実装者が大変な苦行を強いられてしまうこと(コーダーさんがデザインのデータを直したり実装に必要な数値を把握・調整しなくてはならないという無駄な工数を発生させてしまうこと)が大きいです。

ユキックス

デザイナー、制作者として、思いやりのあるデータを丁寧に作って気持ち良く納品することをいつでも心掛けたいですね!

※ただし、バナーなどの小さな範囲のデザインやベクターのグラフィックなど自由度の高い要素やグラフィックに小数点が発生する場合はこの限りではありません

フォントや文字の扱い方の違い

RGB(Web用データ)

Webは「Webフォント」を使用したり、Webフォントにないものは購入して使用したり、特殊なフォントは画像化することで使用することができます。いずれもフォントの利用規約や規定を守って使用することが大切です。Webに使用するフォントは、閲覧環境やブラウザによって見え方が変動することがあります。

少し専門的な内容になりますが、文字詰め(文字の間隔調整)は時間と手間をかければ緻密に調整できないこともありませんが、紙に比べると自由度は低くなります。また、Photoshopで言うトラッキング(文字間を指定範囲してまとめて調整)的な調整が、letter-spacing(レタースペーシング)というプロパティ名によって可能です。

CMYK印刷用データ)

基本的にフォントの利用規約を守って使用していれば、自由に使用できます。
文字詰めをしたり、カーニングによって微細な調整も可能です。

表現できるサイズの違い

RGB(Web用データ)

Webサイトやランディングページ(LP)のデザインの場合、コンテンツや情報の量次第でページの長さや枚数が自由に増減できます。

CMYK印刷用データ)

印刷物の場合、定められた規定サイズ内に必要な情報や伝えなければならない内容を収めなくてはなりません。決められた範囲内で、いかに的確にわかりやすくバランスを考えながら最大の効果を発揮できるデザインにするかが重要です。

まとめ

この記事では、Webと印刷物の違いを比較しながら、色の見え方とその他の注意点をまとめました!

基本をしっかり守り、ちょっとしたことや細部まで気を配って設定や調整を適切に正しく行うことで、精度の高い印刷を実現したり、後工程のコーディングが円滑に進められるなど、良いデザインデータは手直しや調整がない分、スマートな進行ができますね!

ユキックス

制作のご依頼がございましたら、ぜひWepotまでお気軽にご相談ください。

執筆者はユキックスでした!

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
ユキックス

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

Web制作を主軸にデザイナー・アートディレクターとして柔軟に国内の企業、商業デザインのクリエイティブ制作、ディレクションに携わり、受託制作や業務委託を中心に個人、制作パートナー、クリエイティブチームで協業し、幅広くクリエイティブデザインを制作しています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。