コロナの影響でリモートワークが急速に広がり、WEB会議やZOOM、Webexなど、オンラインツールを使う機会が増えたのと同時に、WEBデザインやDTPデザインなど、WEB関連の言葉を聞くことが増えたのではないでしょうか？その中で、今回は「DTPデザイン」の定義から、WEBデザインとの違いなどを解説していきます。
DTPデザインとは？
DTPとは「Desktop Publishing(デスクトップ パブリッシング)」の略で、日本語で言うところの「机上出版」や「卓上出版」に当たります。
具体的な役割としては、パソコン上で印刷物の元となるデータを作成することがメインで、印刷後の出来上がりを意識して、デザインすることが必要となります。
このDTPが現れる前、アナログ製のものが流通していた頃は、下記の作業が分担されて、それぞれの専門家がその役割を担っていました。
・デザイナーが印刷物のデザインを行う作業
・デザインに合わせて原稿や写真を使い「版下」という製版用に原稿を作る作業
・印刷会社が「版」を起こし、紙に印刷する作業
日本では、1990年代前半からDTPが使われるようになって、上記の作業を１人のデザイナーが担えるようになり、手軽に行えるようになったことで、業務の流れが変化していきました。
WEBデザインとは？
WEBデザインというのは、スマートフォンやタブレット、パソコンなどで表示されるホームページやランディングページのレイアウトや構成、細部のデザインを行い、デザインの良さや使いやすさ、また見やすさを追求し、WEB上に表示されるように制作することを指します。これらのランディングページやホームページをデザインを作成するには、パソコンやタブレット、スマートフォンなど、各デバイスに対応したデザインを制作する必要があり、さらにCSSやHTMLなどのプログラミング言語を用いてWEB上にコーディングを行う（プログラムのコードを書く作業）ため、プログラミングの知識も重要になります。
DTPデザインとWEBデザインの違い
・制作する上での注目すべきポイントの違い
DTPデザインとWEBデザインとでは、完成した時のフォーマットが異なります。DTPデザインの成果物は、チラシやパンフレットなどの紙媒体が主になっており、
WEBデザインの成果物は、ランディングページやウェブページなどのWEB上に表示するものが主となります。そのため、両者を制作する際には注目すべきポイントが異なります。
DTPデザインはチラシやパンフレットなど紙媒体として世に出回るので、印刷された時の仕上がりが重要となりますが、一方でWEBサイトは、PVやCVなどの数値目標をいかに達成するかをしっかり設計する必要があります。
WEBサイトの場合、PC版とモバイル版、場合によってはタブレット版まで想定してデザインする必要があるので、WEBデザインの方がDTPデザインよりも対応すべき業務が多い場合があります。
・デザイン構成の違い
デザインを構成する際にも、WEBデザインとDTPデザインには違いがあります。
WEBデザインでは、ランディングページなど縦に長いページが多いので、見る人がどのような視線の動きをするのかを踏まえて、ページや印刷物内で強弱をつけて、見やすいデザインにする必要があります。
・単位と色の表現幅の違い
WEBデザインとDTPデザインでは、色の表現方法も異なります。
WEBデザイン→R（red：赤）G（green：緑）B（blue：青）
DTPデザイン→C（cyan：青系）M（magenta：赤系）Y（yellow：黄系）K（keyplate：黒系）
DTPデザインの場合、WEBデザインよりも表現幅は小さくなってしまいますが、印刷される紙質によっては色の発色なども異なってしまうので「色」に気を使うのは、実はDTPデザインの方が多い部分もあります。
・フォントの違い
WEBデザインで使用されているフォントは、パソコンで「ヒラギノ角ゴ」と登録されているように、端末にもともとあるフォントから選んで使用することが多いことに対し、DTPデザインの場合は、似たフォントであっても使い分けるということもあるので、フォントにこだわるデザイナーが多いと言われています。
・解像度の違い
解像度という点でも、WEBデザインとDTPデザインでは違いがあります。それぞれで必要となる解像度は以下のようになっています。
●WEBデザイン→72ppi
●DTPデザイン→300~400ppi
ここからわかるように印刷に使う画像の解像度は、WEBで使用する場合と比較し、4.5倍もの高解像度が必要となります。DTPデザインでは、WEB以上の高品質な画像が必要となります。
・レイアウトの違い
DTPデザインでは、成果物が紙媒体などの実物になるので、載せられる情報や文字数には限界があります。そのため、どの情報が適切であるかを取捨選択し、見やすくわかりやすいレイアウトを構成する必要がありますが、一方でWEBデザインの場合は、良くも悪くも載せられる情報に限界はほとんどありません。
WEBデザインではデザインをする際、iphoneやタブレット、PCなどデバイスの違いを踏まえ、それぞれに適したレイアウトにする必要があります。さらにWEBデザインの場合、サイトをスクロールしていくことが前提となるため、画像や文字を適切に横・縦方向に配置し、ひとつのページ内での導線や、他ページに映る際の視線誘導なども考慮して構築する必要があります。
・動的要素の有無
動的要素というのは、たとえばWEBサイト上であるボタンをクリックすることで、画像が動くなどの動的な部分を指しています。
紙媒体であるDTPデザインでは平面の表現方法であるため、動きの表現はできませんが、近年の技術革新で紙媒体にQRコードを組み込み、それを読み込むことによって、デバイスを通して目の前にあたかも存在しているかのような仮想現実を見せることができる、などの可能性を見せています。
以上が、WebデザインとDTPデザインの主な違いになります。ディスプレイで表示して操作できるWebサイトか、印刷機で印刷する印刷物かで違いが大きく分かれています。WebデザインとDTPデザインで違いはありますが、両方ともそれぞれの魅力があります。
WebデザインまたはDTPデザインで何かお困りのことがあれば、ぜひplus archにご相談ください。
