Yoriyorkデザインチームです。
今回はDTPデザインとWEBデザインの共有点、相違点を比較してみたいと思います。
目次
DTPデザインとは？
DTPとは、DeskTop Publishing（デスクトップパブリッシング）を略したもので、日本語では「机上出版」や「卓上出版」と言われています。主な役割は紙媒体（雑誌、パンフレット等）の原稿作成、編集、デザイン、レイアウトなどをパソコン上で行う事です。
DTPの導入により、今までアナログで行っていた作業を短時間で行えるようになりました。
主に使用されているソフトは「Photoshop」「Illustrator」「InDesign」などがあります。
WEBデザインとは？
一方、WEBデザインとはパソコンやスマートフォンなどの電子機器上で閲覧されるもののレイアウト、デザインを決めることを指します。
Webサイトの全体的なレイアウトを決めてから、グラフィックソフトを使ってWebサイトの配色やロゴやアイコンの配置、コーディングを行います。
主に使用するソフトは「Photoshop」「Illustrator」「Dreamweaver」などがあります。
『共通点』
①デザインの目的（コンセプト）
クライアントと相談をし、目的や伝えたい事などのコンセプトを決め、それに基づいたデザインを決定して行きます。
②文章構造
DTPであれば見出し、WebであればHTMLの見出しタグなど、文章構造を入れる。
『相違点』
①表現媒体
「DTP」
媒体サイズは有限。使用する用紙の大きさによって、物理的な制約があります。そのため、文章や写真などの必要なコンテンツの分量を紙面に収めなければなりません。
限られたスペースにおいてデザインを行うDTPは不必要な部分を省いていく「引き算」の考え方になります。
「WEB」
媒体サイズは無限。パソコンやスマートフォン等の電子機器で表現するので、物理的な制約はありません。多くの場合、横幅は定められていますが、縦はスクロールによってどこまでも伸ばすことが可能です。DTPデザインと比べると写真や文章などのコンテンツを多く盛り込むことができます。
デザイン上の制約がないWebは内容を充実させる「足し算」の考え方です。
②色
「DTP」
CMYK形式。ディスプレイ上の色と実際に紙に印刷した色で差が生じてしまいます。その為、用紙や印刷方法も踏まえた上で、ディスプレイの色と実際に紙に印刷した色の差を補正するための微妙な調整が要求されます。
※CMYKとは、Cyan=シアン、Magenta＝マゼンタ、Yellow=イエローの三色、そしてKey plate＝キープレート(≒黒、墨)から頭文字1文字ずつ取ったもの。
混ぜれば混ぜるほど理論上暗い色へと変化していくため『減法混合・減法混色』と呼ばれます。
「WEB」
RGB形式。RGBの方が色の表現可能領域が広く、ディスプレイに映る色がそのまま完成形となります。
RGBとは、Red＝赤、Green＝緑、Blue＝青の三つの原色を混ぜて幅広い色を再現する加法混合の一種。
混ぜ合わせれば混ぜ合わせるほど明るい色へと変化していくため『加法混合・加法混色』と呼ばれます。
③単位
「DTP」
単位はmmにして作業します。線の太さ、文字サイズはptです。
「WEB」
単位はpxにして作業します。文字サイズはptです。
④構成と配置
「DTP」
一目で全体像が確認できるため、デザイン全体としてのレイアウトが重要となり、何よりも「読みやすさ」が重視されます。
「WEB」
コーディングを考えた上でデザインする必要があり、複雑なレイアウトは避けられる傾向にあります。また、スクロールが前提となるので、全体としてのレイアウトよりファーストビュー（最初に見えている範囲）のレイアウトが重視されます。
⑤動き
「DTP」
紙媒体のDTPデザインには動きの表現はありません。その分、一目で全体像を把握しやすいデザインが重要になります。
「WEB」
様々な動きの表現があり、「スクロール」「ロールオーバー」「スライドショー」など様々な見せ方が可能です。
⑥仕上がり
「DTP」
媒体が紙などの印刷物のため、紙の種類や印刷方法の選択で仕上がりは変わってきますが、制作物としてユーザーに届く形は均一です。
紙媒体は印刷後に修正する事ができない為、完成品が求められます。
「WEB」
デザインを見る側の環境によって仕上がりが変わってしまうことがあります。パソコンとスマートフォンのように画面比率の差がある場合等、デザインが微妙にズレてしまったり崩れてしまったりする可能性があるのです。そこでユーザーが閲覧する環境によってイメージを崩さずに表示できるよう調整する必要があります。また、いつでも修正できる為、内容はアップデートすることが可能です。
『まとめ』
DTPデザインとwebデザイン、異なる部分もありますが、どちらもデザインという意味では同じであり、共通している点もあります。
制作物の目的や伝えたい事を定義しレイアウトや写真で表現すること、情報の優先度を付け伝わりやすくすること、見出しや説明文などの文章構造を作ることです。
何よりも重要なのはクライアントのニーズに応えたレイアウト、サービスや商品の販促を促すデザインを作り出すことだと思います。
両方のデザイン方法や違いを学んでおけば、表現の幅も広がり、今後役立つ場面があるのではないでしょうか。
また、一人のデザイナーが両方のデザインを制作する事ができれば、「より統一感を出す事ができるのではないか」と思います。
YoriyorkにはDTP・WEBどちらのデザインも対応しているデザイナーが複数在籍しております。
ピンとくる制作物がございましたら、お気軽にYoriyorkにご相談ください。