blog ブログ

2022.10.22

DTPデザインとWEBデザインの違いとは?

DTPWEB

asa

こんにちは。デザイナーのasaです。

広告デザインの仕事には大きくDTPデザインとWEBデザインの2つがあります。
耳にしたことはあるけど結局のところ何が違うのと思う方をいるでしょう。

今回はDTPデザインとWEBデザインの違いについてお話します。

 

DTPデザインとは

DTPデザインとは

「DTP」とは、「Desktop Publishing(デスクトップ パブリッシング)」の略であり、パソコン上で印刷物のデータを制作することです。
わかりやすく言うとチラシやポスター、パンフレットといった紙媒体の制作のことを指します。DTPデザインには主にAdobeソフトのIllustratorやPhotoshopを使うのが一般的です。

ソフトについてはこちらの記事で紹介しています。

現在ではパソコンとデザイン用のソフトで制作したものをデータ入稿すれば簡単に作ることができますが、昔は台紙の上に図形や写植文字を切り貼りしながら、多くの工程をかけて超アナログで作っていたそうです。

 

WEBデザインとは

WEBデザインとは

WEBデザインとはその名の通り、パソコンやスマホで見るWEBサイトのデザインのことを指します。
大まかな制作の流れは、まずサイトのレイアウトをグラフィックソフトなどでデザインし、デザインが固まればhtml、CSSなどを用いてコーディングしていきます。
デザインからコーディングまで全てやることもあれば、デザインとコーディングを分担して進める場合など様々です。

 

具体的な違い

具体的な違い

では具体的な違いを紹介していきます。

 

色・解像度の違い

色の表現形式が違い、DTPはCMYKで、WEBはRGBで表現されます。
 
詳しくはこちら
 
また画像の解像度もDTPでは最低でも300〜350dpiは必要、WEBでは基本72dpiで十分とされています。
チラシとWEBサイト両方の制作をする案件もよくあるので、同じ写真を扱う場合は色・解像度ともに注意が必要です。

 

完成後の違い

紙媒体の場合、印刷してしまうと修正ができません。何か間違いがあってもどうすることもできず、最悪刷り直しになります。そうならないためにも校正はしっかり行いましょう。
 
一方WEBの場合は仮に間違いがあっても修正が可能なうえ、情報のアップデートにも素早く対応できます。とはいえ間違っていいということではないので、こちらもしっかり校正するようにしましょう。

 

レイアウトスペースの違い

個人的にはここが一番のポイントかなと思っています。
デザインにおいて重要なのは、伝えたいことをいかにわかりやすく表現するかということです。そのために写真の選定、コンテンツのメリハリ、色などを決めてレイアウトしていきます。ここに関してはDTPもWEBも同じですが、大きく違うのがレイアウトスペースです。
 
WEBサイトはページをスクロールしたりページ遷移したり出来るので、極論好きなだけ情報を載せることができます。とはいえ情報が多すぎるとサイトが複雑になってしまうので、うまく情報を整理し、導線をわかりやすくするなどの工夫が必要です。
 
一方DTPの場合スペースは限られています。A4やA3など決められたサイズの中で伝えたい情報を載せる必要があります。DTPデザインで重要なのは紙サイズと情報量のバランスではないでしょうか。
あれもこれも載せた結果非常に見にくく、もはや何が伝えたいのかわからないものが出来上がった…なんてことがよくあります。クライアントからすれば色々載せたいというのは当然のことなので、そこはディレクションの段階でしっかりと情報を整理するようにしましょう。

 

まとめ

今回お話したように違いはありますが、根本的には両者とも”情報を見やすくわかりやすく伝える”という点では同じです。
私自身も元はDTPデザインから始めて、そこからWEBデザインや動画編集などの業務に携わるようになりました。媒体が変われど、いずれもクリエイティブに変わりはなく意識する部分は同じです。
 
いかがだったでしょうか?これからデザイナーを目指すといった方の役に立てれば幸いです。
また当社ではデザインはもちろん、集客に関するマーケティングなどひととおり対応していますので、お気軽にご相談ください!

posted article 投稿記事

  • 【初心者向け】【CSS】表の行や横列を固定しよう

    2024.11.20

    [初心者向け][CSS]表の行や横列を固定しよう

    WEB
  • 【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

    2024.11.12

    【初心者向け】CSSスクロールに合わせたアニメーションを作ろう

    WEB
  • hinode ICT lab CSSで簡単なアニメーションを作ろう

    2024.10.28

    【初心者向け】CSSで簡単なアニメーションを作ろう

    WEB
  • 【初心者向け】実務で使える便利な機能5選(コーディング編)

    2024.09.12

    【初心者向け】実務で使える便利な機能5選(コーディング編)

    WEB
View more

contact お問い合わせ・ご相談

制作のご依頼や予算のお見積りなど、まずはお気軽にお問い合わせください。

contact