Shiny Academy

AI×デザイン実践コース

~第8話 画面の色と紙の色は違う~

前回のあらすじ

完成間近の小冊子に「日本の夕陽百選の絶景、毎日見られる」「屋島でしか味わえない感動」といった保証表現が含まれていることを西園寺が指摘した。景品表示法(優良誤認)のリスクを学び、「毎日」「必ず」「唯一」などの保証表現をチェックリスト化。すべての保証表現を条件付き表現に修正し、印刷前の確認手順として仕組みに組み込んだ。

印刷所からの連絡

神谷がノートPCに表示された印刷所からのメールを見て困惑し、隣のPCで西園寺がオンライン解説をしている

景品表示法のチェックを乗り越え、保証表現をすべて条件付き表現に修正した小冊子。デザインの見た目はすでに固まっている。あとは印刷所にデータを送って刷るだけだ。神谷はCanvaで仕上げた小冊子のデータをPDFに書き出し、印刷所にメールで送った。

翌朝、印刷所から返信が届いた。件名に「入稿データに関するご確認」とある。神谷はメールを開き、目を見開いた。ノートPCでオンライン会議をつなぎ、印刷所からのメールを西園寺に共有した。

神谷悠馬の表情アイコン
神谷
「RGBデータでは入稿できません。CMYKに変換してください」……。RGB(アールジービー)とCMYK(シーエムワイケー)って何が違うんですか?
西園寺遥の表情アイコン
西園寺
画面と紙では、色の作り方がまったく違うの。画面はRGB——赤・緑・青の光の三原色を混ぜて色を作るわ。光を足していくから、全部混ぜると白になるのよ
神谷悠馬の表情アイコン
神谷
光を混ぜると白になるんですね……。では印刷はどうなんでしょうか
西園寺遥の表情アイコン
西園寺
印刷はCMYK——シアン・マゼンタ・イエロー・黒の4色のインクを紙の上に重ねて色を作るのよ。インクを足していくから、全部混ぜると暗い色になるわ。光とインクでは、色の足し方がちょうど逆なの
神谷悠馬の表情アイコン
神谷
だから同じデータでも、画面で見た色と紙に印刷した色が違ってくるんですね
西園寺遥の表情アイコン
西園寺
そのとおりね。画面上では鮮やかに見えていた色が、印刷すると少しくすんで見えることがあるの。特に蛍光色に近い鮮やかな色は、CMYKでは再現しきれないのよ

画面で見ていた色は光でできた色だった。紙に印刷される色はインクでできた色だ。同じ画像、同じデータなのに、出力される先が変わるだけで色が変わる。デジタルの世界で完結していた小冊子が、物理的な紙になるためには、色の変換という避けて通れない工程が必要だった。西園寺の助言をもとに、神谷はデータの修正に取りかかった。

解像度・トンボ・塗り足し

RGBの光の三原色とCMYKのインクの四原色を比較した概念図

RGBとCMYKの違いに加えて、印刷所からのメールにはもう1つ指摘が書かれていた。使用している写真の一部が、印刷すると粗くなる可能性があるという。

神谷がCanva上で確認すると、取材時にスマートフォンで撮影した写真のうち2枚が、レイアウトの中で大きく引き伸ばされていた。画面上ではきれいに見えているのに、印刷するとぼやけてしまうのはなぜか。

神谷悠馬の表情アイコン
神谷
画面ではきれいに見えている写真が、なぜ印刷すると粗くなるんですか
西園寺遥の表情アイコン
西園寺
印刷では、その写真を紙に置く大きさのまま1インチあたり300以上の細かさがあるか——300dpi以上を目安にするの。画面での見え方は、この数値ではなく画像の縦横のピクセル数だけで決まるのよ。だから、画面用に用意した小さな画像をそのまま紙に持ってくると足りなくなるわ
神谷悠馬の表情アイコン
神谷
画面できれいでも、印刷に使うにはそのサイズで300dpi必要なんですね。スマートフォンで撮った写真は大丈夫でしょうか
西園寺遥の表情アイコン
西園寺
スマートフォンの写真は画素数自体は高いから、元の大きさで使う分には問題ないわ。でも大きく引き伸ばして使っていたら、解像度が足りなくなっている可能性があるの

指摘されたとおりだった。引き伸ばされた2枚の写真は、印刷に必要な解像度を下回っていた。元の写真データに差し替えるか、使用サイズを小さくして解像度を確保する必要があった。

解像度の問題を理解した神谷に、西園寺はさらに入稿データに必要な要素について説明を続けた。

西園寺遥の表情アイコン
西園寺
もう1つ、このデータにはまだ足りないものがあるの。印刷は大きな紙にたくさんのページをまとめて刷って、あとから1枚ずつ切り分けるのよ。でも今のデータには、紙のどこで切ればいいかの目印がないわ
神谷悠馬の表情アイコン
神谷
切る位置を指定する目印が必要なんですね
西園寺遥の表情アイコン
西園寺
四隅には、L字型の二重線を置くの。内側の線が仕上がり位置、外側の線が塗り足しの外端ね。これが角(かど)トンボよ。各辺の中央に置く十字の印はセンタートンボといって、折りや面付けの位置合わせに使うのよ。この2種類をまとめてトンボ、英語ではトリムマークと呼ぶの
神谷悠馬の表情アイコン
神谷
仕上がりサイズぴったりにデータを作ればいいと思っていました
西園寺遥の表情アイコン
西園寺
それだけでは足りないの。紙を裁断するとき、わずかにずれることがあるでしょう。そのずれに備えて、仕上がりサイズの外側にも画像や色を3mmほど延長しておくのよ。これが塗り足しね。塗り足しがないと、裁断がずれたときに白い余白が見えてしまうわ
神谷悠馬の表情アイコン
神谷
トンボで「ここで切る」を示して、塗り足しで「ずれても大丈夫」にする。この2つがセットなんですね
西園寺遥の表情アイコン
西園寺
ええ。トンボと塗り足しがないと、多くの印刷所ではデータを受け付けてくれないの
解像度・トンボ・塗り足しの3つの印刷入稿要件を示す概念図

印刷所のテンプレート(あらかじめ用意されたひな型)をダウンロードし、Canvaのデータをテンプレートに合わせて整え直した。解像度不足の写真2枚は、元の撮影データに差し替えて使用サイズを調整した。トンボと塗り足しを設定し、CMYKに変換したデータを再度入稿した。画面上でデザインを完成させることと、印刷所に入稿できるデータを作ることは別の工程だった。

テスト印刷──「画面より暗い」

北村がテスト印刷を手に持ちノートPCの画面と見比べ、色の違いに困惑している

CMYKに変換し、解像度を調整し、トンボと塗り足しを設定したデータを再入稿した。合わせてテスト印刷を依頼した。画面上ではすべて整ったように見えるが、紙に刷ったときにどうなるかは実物を見なければわからない。数日後、印刷所からテスト印刷の刷り上がりが届いた。封筒から取り出した紙を会議テーブルの上に広げ、北村と一緒に確認した。

北村がテスト印刷を手に取り、ノートPCの画面に映し出した小冊子のデータと見比べた。眼鏡を少し上げ、紙面と画面を交互に見つめる。何度も視線を往復させてから、しばらくして北村が口を開いた。

北村裕の表情アイコン
北村
あれ……画面で見たときより全体的に暗いな。表紙の海の写真も、本文のページも、なんだか沈んだ感じがする
神谷悠馬の表情アイコン
神谷
西園寺さん、北村さんの言うとおり、画面と紙で色がかなり違います。画面ではもっと鮮やかだったんですが
西園寺遥の表情アイコン
西園寺
RGBからCMYKに変換したことで彩度——色の鮮やかさが落ちているわ。光で表現できる色の範囲と、インクで表現できる色の範囲は違うのよ。RGBのほうが表現できる色の幅が広いから、CMYKに変換すると一部の鮮やかな色がくすんで見えてしまうの
北村裕の表情アイコン
北村
もうちょっと明るくならないかな。この海の青は、もっときれいだったはずなんだが
西園寺遥の表情アイコン
西園寺
データ上で色の鮮やかさを少し上げてから、再度入稿してみましょう。そうすれば、CMYKに変換されて落ちる分を補って、イメージに近い仕上がりになるでしょう

北村は刷り上がりを窓の光にかざし、もう一度画面と見比べた。画面上の瀬戸内海は鮮やかなコバルトブルーだが、紙の上では落ち着いたくすんだ青に変わっている。同じデータ、同じ写真なのに、光で見る色とインクで刷った色はこれほど違う。色の差は専門知識がなくても、並べれば一目でわかった。

神谷がCanvaのデータに戻り、全体の色の鮮やかさを少し引き上げた。特に表紙の瀬戸内海の青と、屋島の緑を重点的に調整した。CMYKに変換したときに落ちる分をあらかじめ上乗せしておく。画面上では鮮やかすぎるように見えるが、紙に刷ればちょうどよくなるはずだ。調整したデータをCMYKに再変換し、印刷所に再入稿した。

数日後、2回目のテスト印刷が届いた。1回目と同じように封筒から取り出し、会議テーブルの上に並べる。今度こそうまくいっているか。北村が刷り上がりを手に取り、またノートPCの画面と見比べた。

北村裕の表情アイコン
北村
うん、これだ。前のやつと比べたら全然違うな。海の青がちゃんと出ている。屋島の写真も、緑がはっきりしている
西園寺遥の表情アイコン
西園寺
画面と紙は別物なんですよ。だからこそ、必ずテスト出力で実物を確認します。本番の印刷に進む前に紙で確かめる——これはWebにはない、紙の制作ならではの工程ですね

1回目と2回目のテスト印刷を並べると、違いは明らかだった。暗く沈んでいた表紙の海が、2回目では瀬戸内海らしい明るさを取り戻している。画面の色を基準にするのではなく、紙の上の色を最終的なゴールにする。テスト印刷はそのための確認工程だった。

本番印刷へ

北村が色の決まった小冊子のテスト印刷を両手で持ち穏やかに眺め、隣で神谷が微笑んでいる

2回目のテスト印刷で色が決まり、本番印刷のゴーサインが出た。印刷所に本番の発注データを送信し、500部の刷り上がりを待つ。RGBからCMYKへの変換、解像度の確認、トンボと塗り足しの設定、テスト印刷による色味の調整——画面の中で完成させたデータが紙になるためには、これだけの工程が必要だった。


📌 覚えるポイント

  • 画面は光の三原色(赤・緑・青)で色を作り、印刷はシアン・マゼンタ・イエローに黒を加えた4色のインクで色を作る。仕組みが違うので、同じデータでも画面の色と紙の色は一致しない
  • 印刷では、紙に置く大きさのまま300dpi以上が必要になる。一方、画面での見え方はピクセル数で決まり、画像に記録されたdpiの値は表示に影響しない
  • トンボと塗り足しがないデータは、そもそも印刷所が受け取れない。裁ち落としの目印と、断裁のずれを吸収する余白——この2つは入稿前の必須項目として毎回確認する
  • 画面で完璧に見えても、印刷すると色味は変わる。本番の前にテスト出力を取り、紙の実物で色を確かめてから本印刷へ進む
  • デザインツールで見た目を仕上げることと、印刷所に入稿できるデータを作ることは別の工程。CMYKへの変換、解像度の確認、トンボと塗り足しの設定が入稿前に必要になる
  • 画面の中にしかなかったものが、手に取れる形になる。その裏側にどんな工程があるかを知っておくことが、次の制作で手戻りを減らす近道になる

📖 覚える用語

RGB
画面の色表現。赤・緑・青の光の三原色を混ぜて色を作る方式
CMYK
印刷の色表現。シアン・マゼンタ・イエロー・黒のインクの四原色を重ねて色を作る方式
トンボ(トリムマーク)
印刷物の裁ち落とし位置を示す目印。四隅と各辺の中央に小さな十字の印をつける
塗り足し
断裁のずれを想定して、仕上がりサイズの外側まで画像や色を延長する余白
解像度(ppi / dpi)
画像の細かさを表す数値。Webは72dpiで十分だが、印刷は300dpi以上が必要
📝 神谷の北村さんへの報告メモ
RGB/CMYK変換と解像度調整の完了
印刷所からの指摘を受け、画面用のRGBデータを印刷用のCMYKデータに変換。解像度不足の写真2枚を差し替え、トンボと塗り足しを設定して再入稿した。
テスト印刷で色味を最終調整
1回目のテスト印刷は画面より暗い仕上がりだったため、色の鮮やかさを引き上げて再入稿。2回目でイメージどおりの色に近づき、本番印刷のゴーサインが出た。
印刷入稿前チェック項目の確立
今回の経験をもとに、入稿前にCMYK変換・解像度300dpi以上・トンボ設定・塗り足し3mm・テスト出力の5項目を確認する手順を整えた。

まとめ

画面と紙は別物だ。RGBの光の色とCMYKのインクの色は同じデータでも異なる。テスト出力で実物を確かめ、紙の上で色を決める。デジタルの制作物が物理的な形を持つとき、そこに至る工程を知ることが制作者としての第一歩になる。