【個人的考察】紙媒体のデザイナーとWEBデザイナーの違いとは？

こんばんは。　Mon Webの楠本です。

今回は紙媒体のデザイナーとWEBデザイナーの違いを書いてみようと思います。　「デザイナー」と言うと一緒にされがちですが、実は大きな違いがお互いにある事が分かります。

この違いを理解できたらデザイナーとしての幅は広がるかもしれません。

1.紙媒体のデザイナーとは？

まずは紙媒体のデザイナーからお話ししようと思います。

基本的には「紙媒体」の制作ですので個人的にはかなり自由度が高いデザインを作る事が出来ると思っています。　WEBデザインとの一番の違いは様々なフォントを使ったり、カーニング（文字間調整等）が出来る事ではないでしょうか。

カーニングに関しては、これが出来ると紙媒体のデザインの幅が大きく広がります。　日本語フォントで多いのが句読点等の隙間を調整したりして見た目の統一感を出すために多く使われます。（その他ありますが割愛させていただきます）

2.紙媒体のデザインの注意点

自分が今までの経験上から主な注意点を挙げるとすると

・フォントの最小サイズを把握して作成しないといけない
・レイヤーの整理や不要なレイヤーの削除
・トンボ（トリムマーク）をつける

こちらだと思います。（他にもたくさんありますので割愛します）

まずはフォントの最小サイズは自分が教えてもらった時には4ptが最小値であると教わってきました。　最小サイズが決まっている理由としては印刷する時に文字が潰れて読めなくなる可能性が高い事、文字が小さすぎて読み手に伝わらない事にあります。　もし自分が逆の立場で文字の小さい広告をみおると考えると納得でした。

次にレイヤーの整理や削除に関してですが、これは入稿する時にエラーが出ないようにするためと、整理を行う事でもし修正があった場合に速やかに対応できるようにするためになります。

入稿日程が押し迫っている時には余裕がなくケアレスミスを誘発しやすくなってしまいます。　なので制作の段階から分かりやすい名目でレイヤーを作っておくと対応時間もグッと短くする事が出来ます。

最後にトンボ（トリムマーク）をつける事ですが、紙で印刷する際には必須の作業になります。　トンボ（トリムマーク）とは印刷する際に裁断する位置を明確に表示するものです。

だいたい入稿する印刷会社でテンプレートが配布されている事が多いので余程つけ忘れる事はないのですが、たまにそのままの作成データで入稿する事があります。　その際には確実にトンボ（トリムマーク）を明記して入稿するのが必要です。

3.WEBデザイナーとは？

次にWEBデザイナーについて書こうと思います。　WEBデザイナーと言う言葉の意味合いが広いですが、今回は「WEBの完成形の見た目のデザインを作る人」と定義してお話ししようと思います。

WEBデザインは紙媒体のデザインと違いかなり多くの制限があるものだと思います。　現在はNocode系のデザインツール（STUDIOやWixなど）でかなり柔軟に制作は出来るようになってきています。

4.WEBデザインの注意点

自分が考えるWEBデザインの注意点としては、

・WEBで表示できるフォントを使用する
・PCのカンプデータは出来るだけ大きいもので制作する
・デザインには法則性を持たせる

こちらが必要になってきます。

まずはWEBで表示するフォントを使う事ですが、これはコーディングをする上で文字要素は文字としてコーディングを行う事が良いとされています。（SEO的にも有利と言われたりしています）　

なので使用するフォントは基本的にはGoogle Fontsから選んで使用する事が多いです。　こちらは外部からフォントのデータを読み込む事が出来るのでサーバー内にフォントのファイルを持っていなくても見た目が崩れる事はありません。

しかしAdobe Fonts等は使用規約に違反してしまうのでフォントファイルを読み込んでサイトで使用する事は基本できません。（サイトの所有者がAdobeのアカウントを持っているのであれば使用する事が出来る場合もあります）

上記の場合のフォントに関しては基本的には画像データとして書き出してサイトに組み込むことになります。　なので一部分だけ文字を太くしたいなど細かい装飾をする事が困難になります。

なので使用するフォントはかなり気を使ってデザインをしています。

次にPCのカンプデータは出来るだけ大きいサイズで制作する点についてです。

自分がデザインを作る場合は大体1920pxの横幅で制作をする事が多いです。　昨今では大きいサイズでのディスプレイでの閲覧も増え、またRetinaディスプレイの普及により画像の粗さがより鮮明に見えてしまうことがあるからと思っています。

またWEBデザインは見た目がフレキシブルに変化するので、あらかじめの最大幅のデザインからそれより小さい横幅で見た時に要素の重なり方などを考えてコーディングする事になります。　ここはデザインの制作者とこの見た目でいいかの確認や、他の横幅のカンプデータからどのように変化させていくかの擦り合わせが必要になります。

最後にデザインに法則性を持たせると言う事になります。

こちらはコーディングを自分がする時に感じたことをデザイナーへ伝えて考慮してデザインの制作をしていただいています。

コーディングをする際には主にデザインをパーツに切り分けてパズルのように作っていく感じで制作をおこないます。　なので文字の大きさやコンテンツとの隙間など法則性があるものだとコードの肥大化も防げ、保守性も向上してきます。

こちらは今WEBデザインを行っている方は是非とも実践していただくといいかもしれません。

5.さいごに

いかがでしたでしょうか？

「デザイナー」と言う言葉は同じですが業務内容がかなり違っていることがお分かりいただけたと思います。　またそれぞれの注意点も違うので中々両方とも理解をしているデザイナーさんは少ないと感じています。

一気に両方のデザイン技術を得ようとすると中途半端になってしまう事がありますので（実際に自分がそうでした…）、どちらかを時間をかけて理解を深めた上で勉強していくのが良いかと思います。


より詳しく知りたいと思う方は自分で良ければお答え出来ればと思いますので、下記よりご連絡を頂けますと幸いです。

Twitter→https://twitter.com/MonWeb3
HP→https://monweb-okazaki.com/

それでは、また！