このZINEのデザイン、どっちが正解？誌面デザインのセンスを磨こう
現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。
デザイナーの大田です。
今回私は、ZINE作成における「誌面デザインと印刷」に関するクイズを出題します。
まずは、3問クイズを出します。
以下の3つの作例を見て、AとB、どちらの「誌面デザイン」がよいと思いますか？
1問目「レイアウトとして好ましいのはどっち？」（難易度★）
2問目「印刷時の発色が上手くいくのはどっち？」（難易度★★）
3問目「見開きページのレイアウトで印刷時に失敗しないのはどっち？」（難易度★★）
いかがでしたか？
私が考える答えは……
1問目の答え：A
2問目の答え：A
3問目の答え：B
以上が、私なりの解答です。
ZINEの制作では「ちょっとした配慮」が仕上がりの完成度を大きく左右します。
特に今回の問題では、実際の刷り上がり時に気付くことの多い後悔ポイントを取り上げています。
では、ここからは、AとBの作例でそれぞれ何が異なっていたのか？を解説し、ZINEの誌面作りで気を付けるべきポイントを解説していきます。
1．余白を揃えて、安定感のある誌面を作る
まずは1問目を振り返ります。
1問目では、AとBで写真とテキストの間の「余白の扱い方」が異なっていました。
あなたはどちらのレイアウトがよいと思いましたか？
私が選んだ答えは「A」でした。
なぜなら、Aは誌面全体の余白にまとまりと安定感があるからです。
ではあらためて、AとBの作例を見比べてみましょう。
まずはAからです。
「グリッド」と呼ばれる基準線を敷いてみると、Aの作例では、以下のようにテキストや写真の配置に法則性があることがわかります。
また、右上の画像はあえてグリッドから外していますが、全体のレイアウトが安定しているため、むしろデザインのアクセントとして機能しています。
作例Bにもグリッドを敷いてみましょう。
すると、Bの場合、テキストや写真の配置がバラバラであることがわかります。
その結果、見る側に不安を与えるレイアウトになってしまっています。
誌面の読みやすさを担保するには、安定感のあるレイアウトが重要です。
そこで大切なのが「法則性のある余白」です。
そして、法則性のある余白を実現するためにオススメしたいのが、先程ご紹介した「グリッド」という基準線を意識することです。
グリッドとは？
グリッドとは、レイアウトを構成する「見えない升目（マス目）のガイドライン」のことです。
以下の図のように、縦のライン（列・カラム）、横のライン（行）、外側の余白（マージン）、内側の余白（ガター）という4つの要素で成り立ちます。
誌面をデザインする際は、このグリッドを用意したうえで要素を配置してゆけば、法則性のある余白を実現できます。
Illustratorでグリッドのガイドを作る手順
ではここからは、Illustratorを使って、グリッドを準備する方法を解説します。
【手順1】外側の余白（マージン）のガイドラインの作成
まず、誌面の外周に余白（マージン）のガイドラインを用意します。
1．「長方形ツール」を選択し、アートボード（仕上がりサイズ）と同じ大きさの長方形を作成
2．長方形を選択した状態で、オブジェクトメニューから「パス」＞「パスのオフセット」をクリック
3．オフセットの値に、設定したいマージン幅を「負の値」で入力
（負の値にすることで、長方形が内側に配置されます）
4．内側に新しい長方形が作成されるため、元の長方形を削除
5．新しい長方形を選択し、表示メニューから「ガイド」＞「ガイドを作成」をクリック
これで誌面の外周にマージンのガイドラインが用意できました。
デザイン時にこのガイドラインが動かないよう、レイヤーパネルでロックをかけておきましょう。
【手順2】内側のグリッドの作成
次に、誌面の内部を区切るグリッドを作成します。
今回は「6行×5列」というグリッドを作っていきますが、行数と列数は、誌面のデザインに合わせて自由に設定してください。
1．【手順1】の1と同じ手順で、余白（マージン）のガイドラインの内側に長方形を作成
2．新しく作成した長方形を選択し、オブジェクトメニューから「パス」＞「グリッドに分割」をクリック
3．行と列の段数と間隔（ガターとも呼びます）を設定し、「ガイドを追加」にチェックを入れて、OKボタンで確定
これで、誌面を6行×5列に分割したグリッドの完成です。
グリッドを作成すれば、そのガイドに沿って要素を配置するだけで、以下のように法則性のある余白を実現しやすくなります。
また、特定の要素をあえてグリッドからはみ出させることで、全体の安定感を保ったまま視覚的なアクセントも加えられます。
2．印刷を前提にするならCMYKでデザインする
続いて、2問目を振り返ります。
2問目では、AとBで色使いが異なっていました。
ZINEのような印刷を前提としたデザインの場合、どちらの色使いが適切でしょうか？
私が選んだ答えは 「A」 でした。
AとBの違いはカラーモードです。
Aは「CMYK」のカラーモードでデザインされており、一方Bは「RGB」でデザインされています。
CMYKとRGBの違いを知っておこう
デザインにおいて色を表現する際、主に「CMYK」と「RGB」という2つのカラーモードが用いられます。
この2つはそれぞれ利用シーンが異なります。
CMYK
C＝Cyan（シアン：水色）、M＝Magenta（マゼンタ：赤紫）、Y＝Yellow（イエロー：黄色）、 K＝Black（ブラック：黒・スミ）の4色で色を表現する方式です。
「紙にインクをのせる」印刷物が使う色の表現方法で、「減法混色」と呼ばれます。
RGB
R = Red（赤）、G = Green（緑）、B = Blue（青）の3色で色を表現する方式です。
スマホやPC、テレビなど「光を出すディスプレイ」が使う色の表現方法で、「加法混色」とも呼ばれます。
光を足していくほど明るく、白っぽくなっていくという考え方です。
ZINEの印刷を想定する場合、「CMYK」でデザインするのが鉄則です。
なぜなら、印刷物をRGBで作成すると、制作時の画面上では鮮やかに見えても、実際に印刷すると発色が大きく変わってしまうリスクがあるからです。
特殊なプリンターを使用すればRGBでも印刷はできますが、家庭用のプリンターや印刷所での印刷は基本的にCMYKでの入稿。
RGBのまま入稿・印刷すると「画面上で見た色と仕上がりの色が全く違う」という失敗がよく起こります。
一般的に、印刷物ではRGBで指定した色が正確に再現できることが少なく（RGB入稿など、特殊な印刷方法を除く）、印刷を前提としたデザインは、CMYKを基準に作成することで失敗を防げます。
カラー印刷での失敗を防ぐための2つの対策
カラー印刷での失敗を防ぐためには、以下の2つの対策を行いましょう。
- 「CMYK」のカラーモードを使ってデータを作成する
- 家庭用プリンターやコンビニプリントなどを利用して試し刷りする
（※ただし、印刷所で印刷する場合とは色味が異なるため、あくまでも参考程度と捉えましょう）
上記の対策を行うことで、「仕上がりがイメージと違った」という失敗を減らせるため、ぜひ覚えておいてください。
ここからは、Illustratorで「CMYK」のカラーモードを使ってデータを作成し、仕上がりを確認するための手順を解説します。
【手順1】新規ドキュメントを「CMYK」モードで作成する
Illustratorを起動し、ホーム画面の「新規ファイル」ボタンをクリックすると、「新規ドキュメント」ウィンドウが開きます。
このとき「印刷」タブを選び、ドキュメントのカラーモードを「CMYKカラー」に設定します。
用紙サイズや裁ち落としなど、必要項目を設定したら「作成」ボタンをクリックしましょう。
【手順2】カラーパネルをCMYK表示にする
ウィンドウメニューの「カラー」をクリックし、カラーパネルを開きます。
カラーパネルの右上のメニューアイコンをクリックし、リストから「CMYK」を選択しましょう。
これで、カラーパネルのスライダーや数値入力欄がCMYK基準となりました。
色を指定するときは、この数値入力欄の中の％の数字を変更します。
【手順3】CMYKのカラーモードでプレビューできるように設定する
表示メニューから「校正設定」＞「作業用CMYK：Japan Color 2001 Coated」を選ぶと、画面上で印刷時の色味に近い表示を確認できます。
「作業用CMYK：Japan Color 2001 Coated」を選択した状態で作業することで、印刷した際にイメージが違うといった事態を防げます。
また、家庭用プリンターやコンビニプリントで試し刷りすれば、印刷後の色を確認することもできます。
ただし、他のプリンターや印刷所によって刷り上がりの色が異なることもあるため、あくまで参考程度にするとよいでしょう。
ドキュメントのカラーモードを「CMYKカラー」に設定し、プレビュー画面で表示を確認しながらデザインしたうえで、実際に印刷して確認する。
そうすることで、予期せぬ色のズレを減らせます。
ぜひ上記3つの手順を覚えておきましょう。
3．見開きの折り目に推しの顔を置かない
最後に、3問目を振り返ります。
作例AとBの違いは、ZINEの見開きページの中央にある「推しの顔」の位置でした。
あなたはどちらの配置がよいと思いましたか？
私が選んだ答えは 「B」 です。
なぜなら、Aの場合、推しの顔の中心が折り目（ノド）に重なってしまっており、冊子を開くと表情が折り目で分断されてしまうからです。
これでは写真の印象が損なわれてしまいますし、被写体にも失礼にあたります。
一方、Bは顔が折り目（ノド）から外れているため、冊子を開いたときに表情が分断されません。
このように人物の顔を誌面の中央付近に設置したい場合は、折り目（ノド）に重ならないように配慮することが大切です。
折り目（ノド）は重要な要素を置いてはいけないエリア
折り目（ノド）とは、ページとページが合わさる中央の折り目部分のことです。
ZINEのような冊子は、ページを重ねてホチキスや糊で製本（綴じ加工）することで完成します。
この過程でノド部分の紙は内側に引っぱられるため、以下の画像のように、深く沈み込みやすくなります。
そのため、人物の顔や文字、ロゴなどの大切な要素は、折り目（ノド）から離して配置するようにしましょう。
Illustratorで折り目（ノド）を考慮してデザインを進めるコツ
ここからは、Illustratorを使って、折り目（ノド）を考慮しながらデザインを進めるコツについて、3つの手順に分けて解説します。
【手順1】折り目（ノド）の位置にガイドを引く
まずはアートボードのサイズを見開き2ページ分に設定します。
次に、表示メニューから「定規」＞「定規を表示」で定規を表示し、ガイドをドラッグしてページ中央の折り目（ノド）の位置に合わせます。
これで、折り目（ノド）の位置を把握できるようになりました。
なお、印刷所が支給しているテンプレートを使う場合は、あらかじめ折り目の位置が示されていることもあるため、事前にチェックしましょう。
【手順2】セーフティゾーンを確保する
ノドの線から左右5〜10mmを「重要な要素を置かない領域」として、追加のガイドを引きます。
この領域は、製本時の紙の沈み込みや、わずかなズレが起こる可能性が高い「配慮ゾーン」です。
特に「無線綴じ（むせんとじ）」（ZINEの背を接着剤で固めて綴じる製本の方法）では、この領域を広めに取ると安心です。
【手順3】重要な要素を中央から離して配置する
いよいよレイアウトに進みます。
人物の顔、目線、ロゴ、見出しなどの「読者が最も注目する部分」が、手順2で確保した「配慮ゾーン」にかからないように配置しましょう。
例えば、人物写真を大きく使うときは、顔の中心をアートボードの左右どちらか片側のページに寄せておくと安全です。
折り目（ノド）部分には、背景や模様など、折れて表示されても問題ない要素を置きましょう。
まとめ：印刷を意識した誌面デザインのポイント
今回は、ZINE制作でよくあるレイアウトや印刷に関する3つのクイズと、そのトラブルを回避するためのコツを取り上げました。
最後に今回のノウハウのまとめです。
1．誌面全体にグリッドを敷き、「法則性のある余白」で安定したレイアウトにする
誌面全体の外側に余白（マージン）を設定し、内部を行と列で区切るグリッドを用意しましょう。
このガイドラインに沿って写真やテキストを配置することで、法則性のある余白が生まれ、読みやすく安定感のあるレイアウトが実現できます。
また、一部の要素をあえてグリッドから外すことで、デザインのアクセントとしても機能します。
2．印刷を前提に、カラーモードは必ずCMYKで作成し、試し刷りで色味を確認する
印刷を前提としたZINEなどのデザインでは、必ず「CMYK」のカラーモードで作業しましょう。
RGBのままデータを作ると、実際の印刷では色が大きく変わってしまい、「画面と仕上がりが違う」という失敗が起こりがちです。
家庭用プリンターやコンビニで試し刷りをして、印刷後の色味を事前に確認することも効果的です。
3．見開きの折り目（ノド）に重要な要素を置かない
見開きページの中央にある折り目（ノド）は、製本時に紙が沈み込んで見えにくくなります。
人物の顔、文字、ロゴなど読者が注目する重要な要素は、ノドから左右5～10mm以上離して配置しましょう。
顔の中心は左右どちらかのページに寄せ、ノド付近には背景や模様など、折れても問題ない要素を配置するのが安全です。
ZINEは「好き」を自由に表現できる場です。
ちょっとした工夫で仕上がりの完成度は大きく変わるので、ぜひ今回ご紹介したノウハウを意識してみてください。
ZINEをより華やかにするテクニック「Illustratorの生成AI機能であしらいを作る」
最後にIllustratorを用いたテクニックを紹介しておきます。
Illustratorの生成AI機能「ベクターを生成」を使えば、あしらいや背景のモチーフをカンタンに作成できます。
レイアウトをデザインする際のちょっとした空きスペースに装飾を加えたいときに使える機能です。
使い方の手順
-
「長方形ツール」や「楕円形ツール」などで、装飾を入れたい範囲を選択
-
コンテキストタスクバーの「ベクターを生成」ボタンをクリック
（コンテキストタスクバーが表示されない場合には「ウィンドウ」＞「コンテキストタスクバー」にチェックを入れましょう） -
プロンプトに「シンプルな花柄」「淡いグラデーションの水彩風背景」など、作成したいイメージをテキストで入力
-
候補が生成されるので、気に入ったものを選択
生成されたベクターはベクターデータとして編集できるため、色味や形を自分のZINEの世界観に合わせて調整できます。
Illustratorの「ベクターを生成」を使って、あなたならではのZINEを完成させましょう。
お相手はデザイナーの大田でした。
本コーナーでは、あなたのデザイン力のアップにつながる様々なクイズが用意されています。
ぜひほかのクイズにもチャレンジしてみてください。
※本コンテンツは、デザイナーがそれぞれの視点で理想とするデザインを語っています。
クイズの正解はひとつではなく、あくまで参考としてご活用ください。
執筆：大田 真梨子
京都と奈良を拠点に活動するWebデザイナー・イラストレーター。武蔵野美術大学出身、絵画教室の講師、Webデザイン会社での勤務を経て、現在は株式会社ウェブライダーに所属。
これまで、企業・学校法人・エンタメ業界のWebデザインや、イラスト制作、CDジャケット・ご当地キャラクターのデザインなど、幅広い分野の仕事を担当。