注意したいWEBデザインとDTPデザインの違いとは？

2021.11.22 2019.05.20印刷・デザイン

多くの企業では、紙媒体（DTP によるDMや折込など）とWeb（ホームページやランディングページなど）の両方を利用して販促活動を行っていると思います。

広告を見る方はそれほど意識していなくても、作る方からすると紙媒体とWebではデザインのやり方が明らかに違います。

そこで、今回はデザインを発注する側もきちん理解しておきたい、DTPデザインとWebデザインの違いについてご説明します。

DTPデザインとWebデザインとは？

DTPデザインとは？

DTPとはDesk Top Printingの略で、パソコンでデザインから印刷まで行うことをいいます。

DTPが普及する以前は、ちょっとしたチラシを作るにも、デザイナー、写植会社、出力会社など、多くの人がかかわっていましたが、今はデザイナーがいてパソコンがあれば、DTPでDMや折込、ポスター、パンフレット、POPなど紙でできた広告物を作れるようになりました。

Webデザインとは？

パソコンやスマートフォンなどで表示されるホームページ、ランディングページなどを作るのがWebデザインです。

さまざまな端末できちんと見られるよう、端末によって表示を変えてもレイアウトを崩さないデザイン手法「レスポンシブデザイン」の知識が必要になってきます。そのためにはHTML、CSSなどのホームページを表示するためのプログラム言語を学ばなければなりません。さらに、ホームページに動きをつけてよりページを魅力的に表現するため、JavaScriptの知識も求められます。

色について

DTPデザインの場合

DTPデザインではCMYKの4色を使用します。CMYKとはCyan（青系）、Magenta（赤系）、Yellow（黄）、Key plate（黒）のこと。この4色を組み合わせてさまざまな色を表現します。

インクや用紙によって色の出方が違うので、ディスプレイ上の色となるべく差異がでないよう微調整が必要です。

Webデザインの場合

WebデザインではRGBの3色を使用します。RGBとはRed（赤）、Green（緑）、Blue（青）のことで、この3色を組み合わせます。

インクを使用しないのでディスプレイに映る色がそのまま完成形となります。

テキストについて

DTPデザインの場合

読む人のことを考えて文字に強弱をつけたり、改行の位置に気を配ったりと、細かなレイアウト技術が必要です。

また、一度印刷すると修正するのは簡単ではないので、ミスがないよう入念なチェックが欠かせません。

Webデザインの場合

ユーザーのパソコンやスマートフォンの環境によって見え方が変わってくるため、改行の位置やフォント、文字間の詰め方にこだわってもあまり意味をなしません。

それよりもスマホでも見やすい文字の大きさにする、どこで改行が入っても違和感のないデザインにする、などに気を配ります。

レイアウトについて

DTPデザインの場合

DTPデザインは用紙の大きさがあらかじめ決められているので、その紙面に合わせたレイアウトを考えます。

見る人にインパクトを与える写真やイラスト、文章などの配置を考えるのはDTPデザイナーの腕の見せ所です。

Webデザインの場合

Webデザインは縦方向はスクロールによってどこまでも伸ばすことができるので、文章や写真などを好きなだけ入れることができます。スクロールされることが前提なので、ファーストビューのレイアウトが重要です。

また、商品は同じでもパソコンとスマートフォンでは見え方が違うため、デバイスに合わせてレイアウトを変えていく必要があります。

動きについて

DTPデザインの場合

紙は平面なので動きの表現はできませんが、印刷技術により3Dを取り入れたりすることは可能です。

また、視覚的な動きはつけられなくても紙の質感にこだわったり、DMの折り方を工夫したりするなどして興味を引くことはできます。

Webデザインの場合

Web上にはスライドショーやロールオーバーなどの見た目の動き、スクロールやスライダーなどの画面の動きがあります。

さらに写真だけでなく、アニメーションや動画などとの組み合わせも考えられます。

Webならではの動きの効果を使いながらも、ユーザーが視覚的ストレスを受けないようなデザインが求められます。

デザインに使用するソフトについて

DTPデザインの場合

Adobe Illustrator（レイアウト）、 Adobe Photoshop（画像処理）、Adobe InDesdign（ページもののレイアウト）などを使用します。

Webデザインの場合

Adobe Illustrator、 Adobe Photoshopなどのほか、Adobe Dreamweaver（編集、レイアウト）、Sublime Text（テキストエディタ）、Atom（テキストエディタ）などを使用します。

解像度や単位について

DTPデザインの場合

DTPデザインで画像を取り扱う際には、最低でも350dpiが必要であるとされています。

またｍmやポイント、級などの単位を使用します。ポイントや級は文字の大きさを表します。

Webデザインの場合

Webデザインで画像を取り扱う場合の解像度は、72〜96 dpiあれば十分とされています。

またpxや%、em、remなどの単位を使用します。pxはピクセルと読み、ピクセルとはディスプレイに画像を表示する小さなドットのことです。em、remはフォントのサイズを指定するタグのことをいいます。

ファイル形式について

DTPデザインの場合

PSD、AI、EPS、TIFF、PDFなどが代表的。それぞれの特徴は以下の通りです。

PSD

Photoshopのネイティブ方式（ソフトウェア独自の保存形式）で、Photoshopのすべての画像の情報を保存できます。

AI

Illustratorのネイティブ形式です。

EPS

レイアウトソフトへの貼り込み用として一般的です。

TIFF

Mac、Windowsのどちらにも対応。レイアウトソフトへの貼り込みもできます。

PDF

電子文書のためのフォーマットで、文字情報だけでなくレイアウト情報も保存できます。

WEBデザインの場合

JPG、GIF、PNGが代表的。それぞれの特徴は以下の通りです。

JPG

スマートフォンのカメラやデジカメで撮った画像なら、特別な設定をしていなければこの形式で保存されます。1677万色まで表現可能です。

GIF

256色で構成された画像形式で、データ容量が軽めのものに適しています。

PNG

1677万色まで扱うことができ、半透明の表現も可能。ただし古いブラウザには非対応で、JPGやGIFに比べデータが重くなります。

納期について

DTPデザインの場合

クライアントとのやりとりの中で、初校を提出後、返答まで時間がかかったり、予想よりも修正点が多くて、その後の作業に時間をとられたりすることはしばしばあります。

また、枚数が少ないものや簡素なチラシなどであれば社内印刷で対応できますが、大量に投函するDMや加工にこだわったものなどは、社外の印刷会社に依頼しないと難しいうえ、時間も要します。

そんな中、DMは投函日厳守なので、スケジュールがギリギリになってしまうことも。納期を守るため、しっかりとしたスケジュール管理は必須です。

Webデザインの場合

Webはパンフレットなどの紙媒体と違い、部分的にでも完成品をリリースすることができます。膨大な量のホームページ作成を受注したとしても、分割納品が可能なのです。

また、納品後に修正の要望があった場合も、紙媒体のように「刷り直し」がないので、コストや手間をあまりかけずに対応することができます。

おわりに

DTPデザインとWebデザインの違いがおわかりいただけたと思います。

それぞれのデザイナーは持っているスキルが違うので、DTP専門のデザイナーにWebデザインを依頼するのは避けた方がいいです。また、逆もまた然りです。DMで興味を引いてサイトに誘導…という販促活動が一般的になっていますが、媒体の特徴を最大限にいかして売り上げアップにつなげるためには、依頼するデザイナーのスキルについてもしっかり確認しておくことが重要です。

タグ : デザイン