似ているようで全然違う！Webデザイン
とDTPデザインの違い

WEBサイト上のデザインをするWEBデザインに対し、主に紙を媒体とした印刷物のデザインをするDTPデザイン。それぞれ、デザイン分野という点では同じですが、表現する媒体が異なるため、考え方や注意点など、さまざまな違いがあります。

今回は、WebデザインとDTPデザインの違いについてご紹介します。

【色】WebはRGB形式、DTPはCMYK形式

WebデザインとDTPデザインでは色の表現方法が異なります。パソコンのディスプレイに用いられているのは「RGB」ですが、紙の印刷物には「CMYK」が用いられます。RGBで表現されたディスプレイとCMYKで表現された印刷物では、色彩が異なるのです。

Webデザインにおいてはディスプレイに映る色がそのまま完成形となりますが、DTPデザインの場合はディスプレイ上の色と実際に紙に印刷した色で差が生じます。

RGBの方が色の表現可能領域が広いため、DTPデザインでは特に気を使う必要があります。

DTPデザインの場合、一般的には色校正を行います。印刷紙や印刷機器の特性も踏まえた上で、ディスプレイの色と実際に紙に印刷した色の差を補正するための微妙な調整が要求されるのです。

【サイズ】Webは無限、DTPは有限

DTPデザインの場合、用紙の大きさによってサイズの物理的な制約があります。そのため、写真や文章など必要なコンテンツの分量を紙面に収めるため、細かな計算が求められます。

一方で、Webデザインに物理的な制約はありません。多くの場合、横幅は定められていますが、縦はスクロールによってどこまでも伸ばすことが可能です。DTPデザインと比較すれば写真や文章などのコンテンツを多めに盛り込むことができるでしょう。

【レイアウト】Webはファーストビュー、DTPは全体像

DTPデザインの場合、自由度が高く、練り上げたレイアウトをそのままの形で表現することが可能です。また、一目で全体像が見られるため、デザイン全体としてのレイアウトが重要となります。

対してWebデザインは、コーディングを考慮した上でデザインする必要があるため、特殊で複雑なレイアウトは避けられる傾向があります。また、スクロールが前提となるため、全体としてのレイアウトよりファーストビューのレイアウトを重視するのが一般的です。

Webページ上部のデザインが、全体の評価を左右することもあるでしょう。

【動き】Webは動的、DTPは静的

Web上には、さまざまな動きの表現があります。例えば、スライドショーやロールオーバーなどの見た目の動きもありますし、スクロールやスライダーなどによる画面の動きもあります。その他、ハイパーリンクによるサイトの遷移も動きの1つでしょう。

Webデザインにおいては、動きの表現の多用などがユーザーの視覚的ストレスにつながらないように、デザイン面で配慮する必要があります。

しかし、紙媒体のDTPデザインには、このような動きの表現はありません。その分、一目で全体像を把握しやすいデザインが求められると言えるでしょう。

【仕上がり】Webは可変、DTPは不変

DTPデザインでは、媒体が紙などの印刷物のため、見た目の差は生じません。もちろん、印刷に使用する紙やインクの質によって最終的な品質は変わってきますが、印刷されたデザインは誰が見てもおおむね同一の仕上がりに見えるはずです。

一方、Webデザインの場合は、デザインを見る側の環境によって仕上がりが変わってしまうことが少なくありません。パソコンとスマートフォンのように画面比率の差がある場合や、利用するブラウザが異なることで、デザインが微妙にずれてしまったり崩れてしまったりする可能性があります。

Webデザインの場合は、あらゆる環境において、デザインのイメージを崩さずに表示できるよう調整する必要があるのです。

おわりに

今回は、WebデザインとDTPデザインの違いや、それらに対応するためのデザイン時の注意点についてご紹介しました。さまざまな点で異なることがお分かりいただけたかと思います。

異なる部分もありますが、どちらもデザインという意味では同じであり、共通している点も多くあります。

デザイナーとしてのスキルアップを考えている方や、デザイン業界に就職や転職を考えている方であれば、両方の違いや特性についても学んでおくと今後どこかで役に立つかもしれません。