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

こんにちは、つしまです。今週は初めて、ホームページのデザイン案を制作しました。

DTPとWEBデザインの二つを実際に経験してみるとメディアだけではない様々な違いを感じることが多かったです。

ということでこの記事では、初めて本格的なWEB制作を経験した際に引っかかった、DTPとの違いについてまとめていきたいと思います。

はじめに

見る媒体がスマホやPCのWEBデザインと実際の紙媒体に印刷を行うDTPデザイン。「クライアントの希望を直接ヒアリングする」「目的を絞ってどのように見せていくか決める」などのデザインをする流れはどちらも同じですが、重視すべきものや特徴が大きく変わってきます。

紙媒体を扱うDTPデザインでは基本的に印刷後の修正ができないため、より精度の高い完成品が求められ、正確さや色・紙質の選定などは慎重な作業になります。WEBデザインでも情報の正確さや公開前のチェックは重要ですが、いつでも修正可能である上に、ページにコンテンツを追加することもできるので、内容のアップデートや変更を容易に行うことができます。

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

DTPは印刷する紙のサイズに合わせてレイアウトを行いますが、WEBサイトは決まったサイズがありません。ページをスクロールしたり遷移したりできるので、とにかく縦に伸ばしていくことも可能です。

このページにはどこまで情報を載せるべきか、どこに強弱をつけたらいいのか、情報を整理するのに時間がかかりました。

また、DTPデザインの場合、全体像を一目で見ることができますが、WEBの場合はスクロールが前提です。制作過程のディスプレイで俯瞰してみるといい感じのデザインでも、実際にブラウザに表示して見てみると部分ごとにしか見えないので、文字のサイズや画像の大きさが制作ソフト上のイメージと異なって見えて、戸惑いました。見る人の視線の動きに合わせたレイアウト構成が必要だなと感じました。

フォントについて

デザインをしていく上で重要な要素の一つにフォントがあります。DTPの場合はアウトライン化をすることで、割とどんなフォントでも使用することができます。

しかし、WEBページの場合は表示できるフォントが見る人の使用機器に入っているフォントに依存するため、端末によって表示が変わる可能性があります。（DTPでもアウトライン化してない場合は一緒です）

自分のイメージ通りのデザインで表示するために、全て画像化してしまうとページ内のデータ量が増えてしまい、読み込みが遅くなってしまうため、ページを離れる原因になったり、サイト自体の印象を悪くしてしまう可能性があります。そのため、文字の画像化には様々なデメリットが発生してしまいます。

そういったことを回避するためにも、基本的にWEBフォントを使用することが推奨されています。

WEBフォント

WEBフォントとは、サーバー上にアップロードされているフォントのことです。WEBページを表示する際にサーバーからフォントをダウンロードするため、どの端末からページにアクセスしても同じフォントデザインを表示することが可能です。

フォントには買い切りのものや有料のサブスクリプションのものもあって、DTPの感覚で使おうとすると、フォントによっては有料のサブスク契約が制作者ではなく、WEBページの所有者側になってしまうので注意が必要です。

他にもカーニングや行間、最低級数の扱いもDTPとは違ったので、WEBのタイポグラフィについてももっと勉強していきたいです。

最後に

紙は紙というメディアとして成立していますが、Webを見るためには機器やネットワークを使用し、ページにアクセスする必要があります。その媒介があることで、ページ内のデータ量を適切にする必要や、端末やブラウザに依存しないデザインをする必要が生まれ、様々な制約ができてしまいます。しかし、動画や音楽、リンクボタンなどDTPでは表現できない要素がたくさんあって、WEBデザインの面白さも感じました。

ほとんどのDTPとの違いは、そこに由来するものだと思うのですが、媒体ごとのルールではなく「デザイン」としての基本。

写真、色、文字、レイアウトなどデザインとしての基本はWebもDTPも引き続き求められると思うので、「情報をわかりやすく伝える」ためのデザインというのを忘れないよう意識して取り組んでいきたいです。