このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

エディトリアルデザインやDTPオペレーションを担当している、あかつき@おばなです。

今回、私は「印刷時の黒」についてのクイズを出題します。

早速ですが、3問クイズを出します。

以下の1〜3問の「黒」は、AとB、どちらのカラーパネルの「カラー値」が最適だと思いますか?

※QRコードはデンソーウェーブの登録商標です。

1問目「名刺のテキストの黒」(難易度★)

※AとBの文字の背景色は、カラー値で設定した黒色を示しています。

2問目「名刺のQRコードの黒」(難易度★)

※AとBの文字の背景色は、カラー値で設定した黒色を示しています。

3問目「チラシのフチ文字の黒、背景図形の黒」(難易度★★)

※AとBの文字の背景色は、カラー値で設定した黒色を示しています。

いかがでしたか?

私が考える答えは……

1問目の答え:A

2問目の答え:A

3問目の答え:B

以上が私なりの解答です。

印刷用データで使われる「黒」は、CMYKカラーモードのK(ブラック)インキを100%使用した「スミベタ(K100)」だけではありません。

目的や仕上がりに応じて、様々なカラー値を設定できます。

印刷結果を意識し、用途に合わせた最適な「黒」を指定できるようになりましょう。

では、ここからは、各クイズの問題について解説していきます。

それぞれの作例A・Bのカラー値の違いや、作例で用いられていた黒の設定方法についてもご紹介します。


※本コーナーの作例は、Adobe Illustrator使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustrator使ってみてください。


1.印刷物の文字色に使う黒は「K100」を指定

まず、1問目から振り返っていきましょう。

この問題は、名刺の文字のカラー値を「黒にすべきか」「グレーにすべきか」というものでした。

私が選んだ答えは「A」でした。

なぜなら、Aのほうが、印刷した際に文字の輪郭がくっきりと見え、読みやすくなるからです。

webページで背景を(#ffffff)にする場合、文字を真っ黒(#000000)にすると、コントラストが強すぎて、目が疲れたり、読みにくく感じたりすることがあります。

そのため、あえて黒よりも少し明るめのグレーを使い、読みやすさを保ちながらやわらかい印象にすることがあります。

このwebデザインの考え方を参考に、印刷用データでも文字色をグレーにしたいと思うかもしれません。

さらに、デザイン作業中の画面上では、webページと同様にグレーのほうが読みやすく感じることもあるでしょう。

しかし、印刷物の場合は、インキによる「色の濃度の表現」が関係するため、薄い色を使用すると、再現性や視認性に影響が出ることを考慮する必要があります。

印刷での色の表現方法

印刷物は、色の濃淡を「網点(あみてん)」という小さな点の集合で表現しています。

網点とは、印刷物で色の濃さを表現するために使われる、非常に小さな点の集まりのことです。

網点による濃度表現には、網点の大きさで表現するAMスクリーニングと、網点の密度で表現するFMスクリーニングがあります。

色の濃度を100%に設定すると、完全にインキで塗りつぶされた状態(ベタ塗り)として印刷されますが、濃度が下がる(=色が薄くなる)につれて、網点が小さくなったり、点の密度が低くなったりします。

そのため、文字色にグレーといった薄い色を選ぶと、印刷されたときに網点が目立ってしまうだけでなく、輪郭のエッジがぼやけたようになり、文字が読みにくくなる可能性があるのです。

よって、印刷データで文字色に黒を使う場合は「C:0、M:0、Y:0、K:100」の(通称:K100)を基本としてデータを作成しましょう。

K100は「スウォッチ」パネルの「ブラック」で指定できます。

ただし、印刷用データを作成するには、Illustratorでデザイン作業に入る前に、ドキュメントのカラーモードをCMYKに設定しておく必要があります。

印刷用データを作成する際はカラーモードをCMYKカラーに

ここでは、印刷用データを作成するために必要な、2つの基本設定と手順をご紹介します。

  1. ドキュメントのカラーモードを「CMYK」に設定する
  2. 着色するカラーのカラーモードを「CMYK」に設定する

それぞれ詳しく解説します。

1.カラーモードを「CMYKカラー」に設定する

印刷物を作るためのデータは、webや動画用の「RGB」カラーではなく、印刷用の「CMYK」カラーで作成します。

Illustratorを起動し、ホーム画面の「新規ファイル」ボタンをクリックすると、アートボードのサイズやカラーモードを設定できる「新規ドキュメント」ウィンドウが開きます。

このとき「印刷」タブを選ぶと、ドキュメントのカラーモードが「CMYKカラー」に設定されます。

用紙サイズや裁ち落としなど、必要な項目の設定が完了したら「作成」ボタンをクリックしましょう。

これで、印刷に適したCMYKカラーモードのドキュメントが完成し、デザインを始める準備が整います。

2.着色するカラーのカラーモードを「CMYK」に設定する

次に、オブジェクトに設定するカラー値のカラーモードを「CMYK」に設定します。

オブジェクトを選択して「プロパティ」>「アピアランス」の「塗り」「線」で指定します。

「塗り」「線」のカラーをクリックし、「カラー」タブに切り替えると、「カラー」パネルが表示され、カラー値を入力できます。

このとき「カラー」パネルに表示されるスライダーがRGBになっていることがあります。

その場合は、「カラー」パネルの右上の「≡(パネルメニュー)」をクリックして、「CMYK」を選択します。

また、「カラー」パネル右下にあるHEX値はRGBカラー用です。

スライダーがCMYKになっていてもHEX値でカラー値を指定すると、意図しないカラー値になるので注意しましょう。

※「カラー」パネルは「ウィンドウ」>「カラー」でも表示できます。

2.印刷物のQRコードに使う黒は「K100」を指定

続いて、2問目の振り返りです。

この問題は、名刺のQRコードに使う黒のカラー値に関するものでした。

私が選んだ答えは「A」でした。

なぜなら、Bのようなカラーを指定すると、QRコードが読み込めなくなる可能性があるからです。

そのため、1問目の文字と同様、印刷物にQRコードを配置する際のカラーはK100で指定するのが基本です。

しかし、意図せずBのようなカラー値になってしまうことがあります。

これは、QRコードの作り方に原因があります。

QRコードを作成する際、webの生成サービスを使うことが多いでしょう。

これらのサービスで生成されるQRコードは、ベクター画像の場合はSVG形式で生成されることがほとんどです。

SVG形式は「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で、web用のベクター画像形式です。

ちなみにAdobe ExpressでもさくっとQRコードが作成できますし、SVGやPNGなどでダウンロード可能です。

Adobe ExpressでQRコードを作成する



SVG形式のデータをIllustratorで開くと、データのカラーモードは「RGB」、コードの黒は「 R0G0B0(#000000)」に指定されています。

このQRコードを印刷用のドキュメントにコピー&ペーストすると、自動的にCMYKカラーに変換されます。

このとき、RGBの黒はC(シアン)・M(マゼンタ)・Y(イエロー)・K(ブラック)のすべてが混ざった「B」のようなカラーになってしまうのです。

このようなCMYKの4色がすべて含まれた黒は「4色割れ」と呼ばれ、印刷時にわずかなズレ(版ズレ)が生じただけで、QRコードの輪郭がぼやけてしまいます。

その結果、QRコードを読み取る機器がコードを正確に認識できなくなってしまうトラブルにつながるのです。

トラブルを防ぐためには、作成したQRコードの黒がどのようなカラー値になっているか、画面上の見た目ではなく「カラー」パネルで確認しましょう。

なお、さきほど紹介したAdobe Expressで生成できるQRコードもRGBカラーのデータです。レイアウトを行っているIllustratorドキュメントにコピー&ペーストした後、K100に調整してください。

QRコードのカラーはK100に設定する

版ズレは印刷時に起きるため、Illustratorの画面上やプリントアウトしたものでは確認できません。

そのため、印刷の特性を意識してQRコードの色は必ず「K100」の黒に設定してデータを作成しましょう。

K100の黒は、他の(C、M、Y)を使わない単色のインキで印刷されるため、版ズレの影響を受けず、くっきりとした輪郭で印刷されるからです。

QRコードの「4色割れ」をK100の黒に変換するには、以下のような手順で行います。

1.「ダイレクト選択ツール」で1つのセルを選択

生成されたQRコードは余白や枠線とグループ化されていることもあるため、「ダイレクト選択ツール」で1つのセルだけを選択します。

2.「選択」>「共通」>「カラー(塗り)」をクリック

「4色割れ」になっているセル(オブジェクト)を選択できます。

3.「プロパティ」パネルや「スウォッチ」パネルで「塗り」をブラック(K100)に変更

「黒」を正確に表示・確認するために環境設定を変更する

印刷用データをIllustratorで作成する際は、環境設定を変更して(ブラック)が正しく表示されるようにしましょう。

この設定をしておくと、「4色割れ」と「K100の黒」が異なる(濃度の異なる黒)で表示されるので、制作段階でミスを防げます。

変更する手順は以下のとおりです。

1.「編集」>「環境設定」>「ブラックのアピアランス」を開く

2.「RGBおよびグレースケールデバイス上のブラックの表示オプション」の「スクリーン」と「プリント/書き出し」をそれぞれ「すべてのブラックを正確に表示/正確に出力」に変更

QRコードを扱う際の注意点

印刷物にQRコードやバーコードといった二次元コードを配置する際は、サイズやマージン(余白)に注意が必要です。

印刷機によって異なりますが、QRコードの場合はマージン(余白)込みで、一辺あたり最低でも15mm程度の大きさを確保することが推奨されています。

これより小さくすると、印刷のインクのにじみなどによってコードが潰れ、読み取りが困難になるリスクが高まるからです。

また、QRコードの周囲に必ず十分な余白(マージン)を取ることや、歪みがない状態なども求められています。

サイズや余白、その他の規定を守らずに配置してしまうと、実際の印刷物になったとき、QRコードがスキャンエラーとなってしまいます。

このように、QRコードの本来の機能が失われてしまう可能性があるため、必ず規定どおりの配置を心がけましょう。

3.K100の自動オーバープリントを回避する

続いて、3問目の振り返りです。

この問題は、チラシのフチ文字や、文字の背景に置く図形に使う黒のカラー値に関するものでした。

私が選んだ答えは「B」でした。

作例のように、背景画像の上に黒い文字や図形を重ねている場合、黒に「K100」を指定すると、以下の画像の右側のように、印刷時に黒文字の下に重ねているオブジェクトが透けて見えることがあります。

これは、Illustratorで「ブラック」スウォッチや「K100」を指定したオブジェクトに対して、印刷会社が「K100オブジェクトへの自動オーバープリント処理」を行うことがあるためです。

この透けを防ぐには、Bの例の「C1K100」のように、黒にわずかでも他の色成分を加える方法が有効です。

これにより、自動的なオーバープリント処理が回避されます。

まとめ:印刷における「黒」の扱いに配慮するためのポイント

今回は印刷における「黒」の扱いについて、注意点と具体的な対策をまとめてご紹介しました。

最後に今回のノウハウのまとめです。

印刷データにおける「黒」は、次の2つのポイントを基本に考えると、失敗を防げます。

1.文字やオブジェクトに背景がない場合、K100が基本

文字や小さな図形の下に白い紙面しかない場合は、黒インキだけを使ったK100を設定するのが原則です。

この単色黒は、印刷時のわずかなインキのズレ(版ズレ)があっても、文字の輪郭が最もくっきりと印刷され、読みやすくなります。

2.背景が写真やイラストの場合、黒の「透け」に注意し対策する

黒い文字や図形の下に、写真やイラストなどの色がついた背景がある場合、印刷会社で行われることがある「K100オブジェクトへの自動オーバープリント処理」によって、背景の色が黒に透けてしまうことがあります。

K100の黒にCMYのいずれかを1%追加することで、この透けを防げます。

ただし、面積が小さな文字や線は版ズレ防止を優先し、K100を指定しましょう。

印刷用のデータを作る際には、画面上の見た目だけでなく、「印刷の仕組み」に合わせて黒色を調整することが大切です。

これまで紹介したテクニックを参考に、Illustratorで「黒」を適切に設定し、印刷物を理想どおりに仕上げましょう。

お相手はエディトリアルデザイン・DTPがメインのデザイナー、あかつき@おばなでした。

本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。

ぜひほかのクイズにもチャレンジしてみてください。


※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。


執筆:あかつき@おばな(尾花 暁)

エディトリアルデザイン・DTPがメインのデザイナー。

大学や職業訓練校、業界団体などでDTP・製版関連のセミナーや講義を担当するほか、書籍・雑誌の執筆も行なっている。2010年から東京で開催している「DTPの勉強会」を主催(共同主催者)。

JAGAT DTPエキスパート問題作成委員/1級製版技能士/Adobe Community Expert


すべての問題にチャレンジしてみよう!

あなたの感性はどれを選ぶ?「デザインクイズチャレンジ」

第40回 この色の選び方、どっちが正解?配色のセンスを磨こう

第39回 この図版、どっちが正解?見やすい図版作成のセンスを磨こう

第38回 このグラフの見せ方、どっちが正解?伝わるグラフをデザインするセンスを磨こう

第37回 この文字の遊ばせ方、どっちが正解?文字デザイン演出のセンスを磨こう

第36回 この写真の見せ方、どっちが正解?買いたくなる商品写真のセンスを磨こう

第35回 この情報の強弱の付け方、どっちが正解?情報整理のセンスを磨こう

第34回 このあしらい、どっちが正解?装飾のブラッシュアップ力を磨いておこう

第33回 この文字のあしらい、どっちが正解?バナーの文字デザインのセンスを磨こう

第32回 このアイコン、どっちが正解?アイコン作成のセンスを磨こう

第31回 この背景パターン、どっちが正解?パターンを扱うセンスを磨こう

第30回 このZINEのデザイン、どっちが正解?誌面デザインのセンスを磨こう

第29回 このタイポグラフィ、どっちが正解?作字のセンスを磨いておこう

第28回 このカラー値、どっちが正解?印刷におけるCMYKの「黒(ブラック)」のセンスを磨こう

第27回 表のデザイン、どっちが正解?情報の整理に役立つデザインセンスを磨いておこう

第26回 そのデザインの仕上げ、どっちが正解?「整列」や「ガイド」を使いこなすセンスを磨こう!

第25回 このレイアウト、どっちが正解?視線誘導のセンスを磨いておこう

第24回 このパス、どっちが正解? ロゴ制作で必要になる造形センスを磨いておこう

第23回 この矢印のデザイン、どっちが正解?図解における矢印選びのセンスを磨いておこう

第22回 線の扱い、どっちが正解? 罫線のセンスを磨いておこう

第21回 このドロップシャドウ、どっちが正解?ドロップシャドウのセンスを磨いておこう

第20回 この名刺の文字組、どっちが正解?名刺デザインのセンスを磨いておこう

第19回 この価格の見せ方、どっちが正解?数字のデザインのセンスを磨いておこう

第18回 この書き出し、どれが正解?画像の特徴に合わせた書き出しを学ぼう

第17回 色の組み合わせ、どっちが正解?配色のセンスを磨いておこう

第16回 このスライドのデザイン、どっちが正解?伝わるプレゼン資料作成のセンスを磨いておこう

第15回 このコントラスト、どっちが正解?文字と背景の配色のセンスを磨いておこう

第14回 この余白、どっちが正解?レイアウトにおける余白のセンスを磨いておこう

第13回 このレイアウト、どっちが正解?レイアウトのセンスを磨いておこう

第12回 このフォント選び、どっちが正解?フォントを上手に使うセンスを磨いておこう

第11回 この改行や行揃え、どっちが正解?文字組みのセンスを磨いておこう

第10回 この約物の使い方、どっちが正解?約物の違和感に気付けるセンスを磨いておこう

第9回 このグラデーション、どっちが正解?グラデーションのセンスを磨いておこう

第8回 この吹き出し、どっちが正解?デザイン演出のセンスを磨いておこう

第7回 この名刺デザイン、どっちが正解?名刺作成のセンスを磨いておこう

第6回 このデザインのあしらい、どっちが正解?装飾のセンスを磨いておこう

第5回 欧文フォントの見せ方、どっちが正解? フォント選びのセンスを磨こう

第4回 このデザインの配置、どっちが正解?整列のセンスを磨いておこう

第3回 この文字間や行間、どっちが正解?文字の余白のセンスを磨いておこう

第2回 この文字組み、どっちが正解?ベースライン調整のセンスを磨いておこう

第1回 この文字詰め、どっちが正解?文字間調整(カーニング)のセンスを磨いておこう

Illustratorを始めましょう。