こんにちは。LANCER UNIT（ランサーユニット）note編集部です。

ランサーユニットの公式noteがお届けするお役立ち記事、今回のテーマは「WebデザインとDTPデザインの違い」です。

同じ「デザイン」といっても、WebとDTPは似て非なるもの。Webデザイナー、DTPデザイナー、お互い別の領域に興味がある人も多いのではないでしょうか？
WebとDTPでいったい何が違うのか、そして共通する点とは何か、掘り下げて考えてみたいと思います。

Webと紙、同じ「デザイン」でも何が違う？

皆さんが今まさに見ているこの画面。そう、これがWebページですよね。
紙媒体はよく目にするチラシやパンフレット、雑誌、本の装丁、そして名刺などのカード類です。

どちらもデザイナーが作り上げるものですが、その「デザイン」には大きな違いがあります。まずは、それぞれがどういうものなのかを改めて洗い出してみましょう。

Webデザインとは？

パソコンやスマートフォン、タブレットなどで表示させるWebページ。これをデザインするのがWebデザインです。Webサイト、LP（ランディングページ）など、用途によって種別されます。

現在では多様なサイズがあって、向きを変えることで回転もします。それを想定したうえで構成やレイアウト、細かなデザインを施していかなければなりません。
HTMLやCSSなど、コーディングの知識もある程度は必要になりますね。

DTPデザインとは？

DTPは、Desktop Publishingの略。パソコンでデザインデータを作り、それを紙に印刷します。前述したパンフレットなどの印刷物をデザインすること、それがDTPデザインです。

一般的にグラフィックデザインのことを紙媒体のデザインと誤解している人もいますが、グラフィックはもう少し広義です。例えば「ロゴ」を作ること、これはグラフィックデザイン。このロゴは、印刷物でもWebでも使われますよね。
Webが存在しなかった時代はグラフィックデザイナー＝紙媒体のデザイナーでしたから、その解釈が広がってしまったのかもしれません。

そもそも「デザイン」ってなんだろう？

もしかしたら「Webでも紙でも、要はかっこよく制作すればいいんじゃない？」と思っている人がいるかもしれません。

ここで原点に立ち戻って「デザイン」とは何者なのかを考えてみましょう。
少し脱線しますが、デザインとアートの根本的な違いってなんだと思いますか？ これ、意外と多くのデザインビギナーが理解していなかったりします。

アートは「自己表現」。デザインは「目的を持っている」もの。
もちろんメッセージを込めた、目的を持つアートも存在します。ただ、それが作者自身の主張を表現しているのであれば、やはりアートだと思うのです。

デザインは「目的を持っている」ので、すべてがその目的を達成するために構成されます。つまりデザインとは、目的＝ゴールへと誘導するための「設計」なんですね。
かっこよくするにしても、「なんのために」「どう」かっこよくするのか。すべて「ゴールを目指すため」を理由にして考えるのがデザインです。

ゴールを目指す「デザイン」

Webと紙。媒体が違えば、デザイン（設計）はもちろん変わってきます。その媒体の特徴・性質を理解しなければ、うまくゴールまで導けませんよね。

媒体の特性を活かす

Webの特性
Webは「結果」が如実に表れる媒体です。下記のようにはっきりとした数字で結果が出ます。そのためにどうすればいいのか、しっかりと設計する必要があります。

こうした成果を出すために、“ユーザビリティ”が重要視されます。つまり、使いやすさ。
どこをクリック（タップ）したらほしい情報が得られるのか、見たいページがストレスなく見つけられるか、ゴール（商品の購入・予約など）までどれくらい分かりやすく設計するのかは、Webデザインにおいてもっとも重要な視点と考えられています。

印刷物（紙）の特性
手に取って見られる紙モノの場合、大切なのは“仕上がり”。Webのように、ユーザーの環境によって見え方が異なることはありません。印刷方法や紙の素材、色・インクに至るまで、すべてをデザイナーがコントロールできるのはDTPの醍醐味と言えるでしょう。

紙のサイズによる物理的な制限があるので、写真や文章など必要な情報量を収めるために緻密な計算も。紙媒体のデザインは、引き算が重要になってくることもポイントのひとつです。
レイアウトに強弱をつけて伝えたいことの優先順位を組み立て、視線を誘導することでゴール（Web閲覧・電話問い合わせなど）へと導きます。

ゴールを見定めなければ「デザイン」ではない

媒体によってユーザーの行動（アクション）への導き方が変わってくることが、なんとなく理解できたのではないでしょうか？
どんな媒体でも、目的とそこへの誘導のためにどう構成するのかを考えればデザインの方向性が見えてくるはずです。

WebデザインとDTPデザインの具体的な違い

実際に手を動かして作業する段階ではどんな違いがあるのでしょう。代表的なものを挙げてみますね。

仕上がりサイズ

Webはさまざまなデバイスで表示されるので、多種多様なサイズに対応しなければなりません。
一時はこの対応にデザイナーが泣かされたと思いますが、現在ではレスポンシブデザインが一般的。ひとつのHTMLでデザインし、それを各デバイスの幅に合わせるためにCSSによって表示をコントロールします。

そうすることでコンテンツに一貫性が生まれ、メンテナンスも楽になりました。また、URLが統一されるのでSEO的にも有利に。現在ではこのレスポンシブデザインを意識することが当たり前になっています。

一方でDTPの場合、用紙サイズを前提にデザインするので、デザイナーがイメージする通りの仕上がりを得られます。
制作過程ではディスプレイで見ているだけですが、最終的には手に取って見られる印刷物になるので、紙や印刷の知識もしっかり学んでおきたいですね。

レイアウト構成

重要なのは、ユーザーの視線の動きに合わせてレイアウトすること。「WebはF視線、紙はZ視線」と言われています。

コーディングを考慮しなければいけないWebデザインは、あまり複雑なレイアウトに適していません。スクロールが前提のF視線を意識して、左側にコンテンツ要素を並べることが多いですよね。

DTPデザインの場合、限られた範囲内で自由にレイアウトできます。全体像をひと目で見られるため、ユーザーの視線がZ（左上から右下）に動くことを念頭に配置しましょう。

フォント

フォントにも大きな違いがあります。
Webデザインでは「Macはヒラギノ角ゴ、Windowsはメイリオ」など、OSごとに標準搭載されているシステムフォントを指定することが多く、あまりひとつのフォントで指定しません。
ブランディングやデザイナーのこだわりで特別に使用したいフォントがある場合を除き、システムフォントの指定がベターです。

ネットワーク上に置かれたWebフォントの登場により、最近はすべて同じフォントで表示できるようになりました。それでも、表示速度の問題や有料のものが多いこと、無料だと契約上の理由で突然使えなくなってしまう恐れがあることから、実装しているサイトはあまり多くはありません。
Webではフォントにこだわるよりも、見やすさを大切にしたほうがいいでしょう。

DTPでは、印刷業者への入稿前にアウトライン化すればどんなフォントでも使えます。文字量が多い雑誌や書籍などは可読性を重視しなければいけませんが、特徴のあるフォントをデザインのアクセントに使ったりすることもよくあります。
よく似たフォントでも丁寧に使い分け、文字詰めや改行位置にも強いこだわりを持つデザイナーが多い印象です。

色の表現

WebとDTPでは色の表現が異なります。
ディスプレイは「RGB」で出力されるので、Webでは画面に映る色がそのまま完成形となりますが、「CMYK」が用いられるDTPは、紙に印刷した色で違いが生まれます。

RGBのほうが色域が広いので、DTPでは色に気を遣います。Photoshopなどで事前に写真データをRGBからCMYKに変換しますが、鮮やかな色味の画像は特に色が変わってしまうので、変換後に色調整を行なう必要もあります。

また、印刷機などによってインクの乗り方が変わってきますから、「色見本」を付けて印刷業者側に調整してもらう場合もあります。さらに、色校正で実際の色味を確認することも。
印刷後にやり直しはできませんので、色にこだわる場合は繊細な確認作業が求められます。

サイズの単位

使用するサイズの単位もそれぞれ違います。
Webでは、ディスプレイの解像度との関係で「px（ピクセル）」を主に使用します。
文字サイズも以前は「px」で指定していましたが、デバイスが多様化した現在では「em」「rem」などの相対的な指定も多くなりました。

歴史が古いDTPでは「mm」「ポイント」「級」「歯」など多様な単位が存在します。
紙のサイズは「mm」、文字は「ポイント」。「級」「歯」という日本固有の単位もあります。慣れ親しんだ単位を使いたいデザイナーのために、Illustratorでは環境設定で変更できるようになっています。

解像度

必要な画像の解像度もかなり違い、Webでは表示する軽さ、DTPでは印刷に耐え得る高解像度が求められます。

最近ではスマートフォンのカメラも高解像度になったので、ちょっとした挿入画像であれば簡単に撮影することができるようになりました。

動きの要素

Webはさまざまな動きのある要素で構成されています。
メインビジュアルのスライドショーをはじめ、ロールオーバーによる色や画像の変化、スクロール・スライダーのような画面の動き、単純なページ遷移も動的要素のひとつ。さらに、動画や音楽を組み込むこともありますよね。
これはWebならでは利点ですが、ユーザーが視覚的ストレスを感じないデザインにすることも大切です。

もちろん紙媒体に動的要素はありませんが、デザインの自由度の高さを活かして工夫することが求められます。紙面全体を使ったインパクトのあるデザインで、ユーザーの心を動かす工夫をしましょう。

完成までの過程・納品

印刷物は、基本的に印刷したら完成。そこで終わりになるので、印刷する前に何度も見直しや校正の工程を重ねます。

Webの場合は修正ができることもあって、「運用」と密接に結びついています。公開してから改良を重ねていくので、いったん完成してもそこで終わりではありません。
前段で解説したPV・CV・CVRなどのデータを元に、より「結果が出る」デザインを追求し、精度を上げていきます。

一発勝負か、終わらない改良か。一概に比較できませんが、どちらもシビアな世界ですね。

制作アプリケーション

制作ツールは、違うものと共通して使うものがあります。

Web制作では、デザインの基本操作をXDやSketch、Figmaなどで行なうことが増えています。イラストやロゴの制作にIllustratorを使用し、画像加工はPhotoshop、というように使い分けがされています。

DTPでは基本的にIllustrator、ページものはInDesignを使用し、写真加工にPhotoshopを使います。

Illustrator、Photoshop、XD、DreamWeaver、InDesignなど主要なアプリケーションを含んだ「Adobe CC」は根強く、デザイナーにとって欠かせないものになっていますが、サブスクリプションになったとはいえ今でも高額。Webデザインでは無料で利用できるFigmaもシェアを伸ばしています。

【まとめ】違いを知ることで得られるメリット

DTPデザイナーがWebを作れるようになれば、仕事の幅が広がります。反対もまた然り、ですよね。「LPとチラシをセットでデザインしてほしい」といった要望にも応えられるようになります。
でも、ただ単純にそれだけがメリットではない気がするのです。

一段上の視点から見られるようになる

Web、DTP、媒体にかかわらず目的を見据えることが大切。「ゴール」を考えてデザインすることをブレずに続けていれば、必ずデザイナーとしての視点が上がっていきます。
クライアントの希望をそのままかたちにするだけではなく、本当の課題や問題点が見えてくるようになります。

例えば、クライアントから簡単なイメージラフを提示された場合に、もっと結果が得られるようなデザインを提案できれば、「期待以上のものを作れるデザイナー」になれますよね。

そうしているうちに、もっと大きな別の提案ができるようになれるはずです。目先の「ゴール」だけではなく、もっと先に目指すべき方向が見えてくると思うのです。

デザイナーにとどまらない仕事の広がり

デザイナーの先にあるもの。アートディレクター、クリエイティブディレクター、プロデューサー、肩書きはいろいろありますが、指示通りのものを作っているだけでは仕事は広がっていきません。

視点を高く持って自分の価値を上げていくのは、会社員・フリーランス問わず大切なことだと思います。
そのためにも、別の領域にも興味を持ってチャレンジするこをおすすめします。きっと皆さんの視野はもっともっと広くなっていくはずですよ！

いかがでしたでしょうか？
少しでも参考になればうれしいです。
最後にひとこと。ランサーユニットは企業さまのデザイン案件を豊富にご用意しています。もちろん、WebとDTP、どちらもできるデザイナーさん大歓迎！ぜひご登録いただければと思います。

文：LANCER UNIT note編集部 Y