1. TOP
  2. お役立ち情報
  3. ノンデザイナーがデザイナーを目指す!⑦~グラフィックデザイナーが知っておくべき紙面とWebデザインの違い~

ノンデザイナーがデザイナーを目指す!⑦
~グラフィックデザイナーが知って
おくべき紙面とWebデザインの違い~

ノンデザイナーがデザイナーを目指す!⑦~グラフィックデザイナーが知っておくべき紙面とWebデザインの違い~

「グラフィックデザイナー」「Webデザイナー」「DTPデザイナー」など、デザインをする対象に合わせて専門のデザイナーとして活躍している方が多くいます。なぜ同じデザイナーでもこのように区別されるのでしょうか。デザインの仕事の中でも特に代表的な、紙面とWebサイトのデザインの特徴にスポットをあてて、どのような違いがあるのか見ていきましょう。

紙媒体の基本用語

紙面のデザインにおいて、印刷業者とデザイナーが共通の認識で用語を使用しないと、誤解が生じてしまい適切なデザインに仕上げることが出来ません。ここでは、まず紙媒体の基本用語について押さえておきましょう。

こちらはチラシの入稿用のPDFデータです。デザインされた紙面の周りにさまざまな記号やマークがくっついています。

紙媒体の基本用語1

デザインの上下を「」と「」と表現します。四角と中心には仕上がりの位置を示す「トンボ」があります。印刷物は刷り上がった後に、複数枚を重ねて切り落とすため、どうしても微妙なズレが生じてしまいます。その際に、印刷物に余白が生まれないように、仕上がり位置からトンボまで「裁ち落とし」の領域を作っています。イラストレーターでは仕上がりから裁ち落としまで、初期設定で3mmの幅を持たせてトンボが配置されるようになっています。左右には色の帯があります。これを「カラーバー」(色玉)といいます。また、四角の丸いマークは「レジストレーションマーク」といいます。

カラーバーとレジストレーションマークについては、印刷の仕組みが関係してきます。印刷はCMYKの「シアン」「マゼンタ」「イエロー」「ブラック」4つの版を塗り重ねてカラーを表現します。

紙媒体の基本用語2

それぞれの色がきちんと出ているかを色校正で確認するために、カラーバーにCMYKの単色や特色を抽出しておきます。レジストレーションマークは4つの版がズレて印刷されていないかを確認する目印として使用します。

次に、本や冊子などのページものの名称について見ていきましょう。

紙媒体の基本用語3

それぞれ特有の名前がついています。

  • ノンブル・・・ページ番号
  • 柱・・・ページ上部にある章や節の見出しが書かれている部分
  • ツメ・・・サイドにある見出し、インデックス
  • ノド・・・中心の綴じてある部分
  • 小口・・・見開きにしたときの本の周囲
  • 表1・・・表紙
  • 表2・・・表紙の裏(内側)
  • 表3・・・裏表紙の裏(内側)、インデックス
  • 表4・・・裏表紙
  • 背・・・ノドの外側の面
  • 帯・・・下部の表紙の上から巻かれた紙
ノンデザイナーがデザイナーを目指す!~グラフィックデザイナーが知っておくべき紙面とWebデザインの違い 1/3 ~ 「紙媒体の基本用語」

足し算のデザインと引き算のデザイン

ここからはグラフィックデザイン(主に紙面のデザイン)とWebデザインの違いについて具体的に見ていきます。

足し算のデザインと引き算のデザイン1

まず、Webデザインでは、必要な要素が予定しているページサイズに収められない場合、ページサイズは縦にスクロールできるので、「足し算」のデザインが可能です。マーケティング的に入れるべきかどうかは別として、理屈として下に追加していくことができます。

しかしグラフィックデザインではそのようにはいきません。

足し算のデザインと引き算のデザイン2

紙面は完成サイズが決まっています。その為、要素を絞り込んでデザインをする必要があります。優先度の低い情報はそぎ落として、要素を厳選してデザインする「引き算」の考え方が重要になります。

変化するターゲットサイズと
決められたターゲットサイズ

変化するターゲットサイズと決められたターゲットサイズ1

Webの場合、ユーザー側のデバイス(何で表示するのか、何で読まれるのか)を完璧に予測することは不可能です。パソコンとスマートフォンのディスプレイの幅が異なるように、ブラウザやOSによっても表示されるデザインが変わってきます。これらのすべてのパターンのデザインを用意することは難しく、現状では「ピクセルパーフェクト」(デザインを1ピクセルの狂いもなく再現する)を目指すのはあきらめざるを得ません。モノによっては、スマートフォン用に情報量を削って表示させるようにコードを組むこともあります。

変化するターゲットサイズと決められたターゲットサイズ2

一方、グラフィックデザインは、あらかじめ作成するクリエイティブのサイズは決まっています。A4のリーフレットであればA4サイズに、車内広告ならばそのサイズにきっちりと作りこんでデザインします。

このようにターゲットサイズの概念の違いによってデザインの考え方も大きく変わってきます。

ノンデザイナーがデザイナーを目指す!~グラフィックデザイナーが知っておくべき紙面とWebデザインの違い 2/3 ~ 「足し算と引き算・レイアウトのターゲットサイズ」

情報の即時性と正確性

情報の即時性と正確性

Webデザインは「PCDA」で最適化していくという考え方が前提となっています。仮説やリサーチに基づいてデザインし、リリースした後に、ユーザーの反応を見て修正や反映を繰り返していきます。

しかし、グラフィックデザインの場合は、一度印刷してリリースしたら誤植の修正や写真の変更はできません。
スピードや「即時性」が求められるWebデザインに対して、グラフィックデザインは「正確性」が重要となります。

多様なストーリー展開

多様なストーリー展開

Webページは縦に長いので、基本的には上から下に向かってストーリーを展開します。

しかし紙媒体にはさまざまなパターンがあります。たとえば、三つ折りのリーフレットであれば、折ったときに表紙となる最初に目に入る部分にキャッチコピーやアイキャッチになる画像を入れます。そうすることで、まず手に取ってもらい、そこからユーザーは開いて内容を読んで、興味をもって裏返して、さらに細かい情報を見るという紙ならではのストーリー展開があります。このように紙媒体では配布形態に応じたストーリー構成でデザインすることが必要になります。

色数とコストの関係

最後に、色数とコストの関係もWebとグラフィックでは大きく異なります。

色数とコストの関係

Webデザインでは、色数に制限はありません。多くの色を使えばいいというわけではありませんが、色数が増えてもコストには直接関係はしません。

一方、印刷物は色数とコストが大きく関わってきます。CMYKの4つの版でフルカラーを表現しますが、その1つ1つにコストがかかっています。そこに特色が加わるとさらに版が増え、コストがかかります。たとえば、ページもののデザインで、表紙はフルカラーでデザインし、中身は2色にすることでコストダウンすることも可能です。色数×刷数=コストとなるため、色数の時点で考慮することがコストダウンにもつながります。

ノンデザイナーがデザイナーを目指す!~グラフィックデザイナーが知っておくべき紙面とWebデザインの違い 2/3 ~ 「足し算と引き算・レイアウトのターゲットサイズ」

最後に・・・

Webデザインとグラフィックデザインではさまざまな違いがありました。グラフィックデザイナーとして幅広い媒体のデザインに対応できるよう、それぞれの特徴や制約を理解して仕事の幅を広げましょう!

関連記事