「WEBデザイン」と「DTPデザイン」の違い

WEBサイト上のデザインをするWEBデザインに対し、主に紙媒体をメインとした印刷物のデザインをするDTPデザイン。

それぞれ、クリエィティブな分野として同じ括りですが、考え方や注意点から使用するソフト、必要なスキルまで、幅広く様々な違いがあります。今回はそんなWEBデザインとDTPデザインの違いについてご紹介します。

WEBデザインとDTPデザインとは

まず初めに、WEBデザインとDTPデザインのそれぞれの簡単な特徴から見て行きましょう。

 1.WEBデザイン

WEBデザインというのはその名の通り、パソコンやスマートフォン、タブレットなどで表示されるホームページ、ランディングページなどの構成やレイアウト、細かなデザインを作り形にする事を言います。

HTMLやCSS、JavaScriptなどのWEBサイトを構成する言語を使用してWEB上にコーディング（プログラムのソースコードを記述する作業）していく為、それに伴った知識が必要となります。

 2.DTPデザイン

DTPとはDesktop Publishingの略で、パソコンでデザインデータを作り、それを実際の紙媒体に印刷し形にする事を言います。

かつてはちょっとしたチラシを作る際にも、デザイナーだけでなく出力会社など、多くの人が携わらなくては印刷物として形にする事は出来ませんでした。

現在ではパソコンの普及により、デザイナーがいてパソコンがあれば、DMやチラシ、ポスター、パンフレットなど紙でできた広告物を作れるようになりました。

 3.共通点

「クライアントの希望を直接ヒアリングする」「目的やターゲットなどを絞る」「コンセプトを軸にどの様に見せて行くか決める」などのデザインをする為のプロセスはどちらも共通していると言えるでしょう。

また文章内にDTPデザインであれば大見出しや小見出し、WEBデザインであれば見出しタグ(h1やh2など)を入れると言った文章構造の概念も同じです。

4.相違点

紙媒体を扱うDTPデザインでは基本的には印刷後の修正が出来ない為、より精度の高い完成品が求められ、色や紙質の選定は慎重な作業になります。

その点WEBデザインではWEB上で行うので、いつでも修正可能である上に、ページにコンテンツを追加する事や、季節に合わせてバナー広告を差し替える等の内容のアップデートや改編が容易に行う事が可能です。

使用するソフトの違い

DTPデザインでは基本的にはIllustratorやInDesignを使用し、写真加工の際にPhotoshopを使用する事が多いです。

 
一方WEBデザインでは基本作業はPhotoshop*で行い、イラストやロゴ制作の際にIllustratorを使用するなどの使い分けをしています。

※昨今ではアプリやWebサービス制作に強いAdobe XDやSketchを使用するデザイナーも増えてきたようです。

色の違い

WEBデザインはRGB形式、DTPデザインはCMYK形式

 1.WEBデザイン

WEBデザインではRGBの3色で表現をします。RGBとはRed(赤)、Green(緑)、Blue(青)の3色の略称です。
紙媒体と違い、インクを使用しないのでディスプレイに映る色がそのまま完成形となります。

※ディスプレイによって色味の差異がある為、どのディスプレイで見た場合もある程度同じテイストになる様な配慮が必要です。

 2.DTPデザイン

DTPデザインではCMYKの4色で表現します。CMYKとはCyan(青系)、Magenta(赤系)、Yellow(黄)、Key plate(黒)の略称です。
用紙や印刷方法にもよって仕上がりの色味の違いもありますし、何よりやり直しが効かない為、WEBデザインよりも慎重な調整が必要となります。

解像度について

WEBデザインとDTPデザインではWEB上と紙媒体という違いから画像を扱う際の必要な解像度にも違いがあります。WEBデザインでは72〜96 dpiあれば十分とされているのに対し、DTPデザインでは最低でも350dpiが必要であるとされています。

また単位においても、WEBデザインではpx(ピクセル)が中心となり、DTPデザインではmmやポイントが中心となる違いがあります。

レイアウトの違い

WEBデザインでは、サイトをスクロールして見て行く事を前提に文字や画像などの要素を、縦方向や横方向に配置することで、一つのページ内での導線や他ページに移る際の遷移もわかりやすく、閲覧環境に左右されないレイアウトにすることが基本です。

一方、DTPデザインである紙媒体では、1ページの中に掲載できる情報量に文字数など制限があるため(WEBデザインでももちろん制約はありますが…)１ページの中の情報をいかに整理し、見やすく分かりやすくした上で、より印象的にみせられるかが重要になります。

そういった意味でのレイアウトと言う点では両者ともにやるべきこと、気を付けなければならない点は違いがなく変わらないのではないでしょうか。

動的要素の有無

WEBサイト上ではメインビジュアルのスライドショーや矢印をクリックして画像をスクロールさせるなどの見た目の動きや読み込み時のアニメーションなどの画面の動きが可能ですし、通常のページ遷移も動的要素の一つと言えます。

また画像だけでなく、動画などをサイト上に組み込む事が出来る利点もありますし、WEBだからこそ出来る動きの効果を使いながらも、ユーザーが視覚的ストレスを感じない様なデザインが必要となります。

紙媒体は平面の表現方法なので、もちろん動きの表現はできませんが、印刷技術によって3Dを取り入れる事で違った見せ方をする事は可能です。

 
昨今ではAR(拡張現実)技術などが進み、紙媒体上のQRコードを読み込むことで、デバイスを通してあたかも目の前にあるかの様に、仮想現実を見せる事が出来るなど、紙媒体の可能性の広がりを見せています。

上記を踏まえた上で、簡単にまとめるとWEBデザインは動的で、DTPデザインは静的という違いがあると言えるでしょう。

「WEBデザイン」と「DTPデザイン」の違いについてのまとめ

自分自身がWEBデザイナーであることから、WEBデザインの利点ばかりに目が行きがちですが、改めて両者を比べてみると、同じデザイナーという職業でありながらも違う部分が沢山あるなと感じました。

しかし、どちらもクリエィティブでありデザインであるという大前提は変わらないので、共通点が多いこともあると思います。

今回はざっくりとWEBデザインとDTPデザインの違いを上げましたが、これからWEBデザイナーを目指そうとしている方やWEBデザインをやっているけれど、DTPにも興味があるという方の参考になれば幸いです。