こんなに明確だった！WEBデザイナーとグラフィックデザイナーの違い

みなさんこんにちは！

先日、友人のデザイナーとWEBデザインとグラフィックデザインの違いについて話したのですが、改めてこの違いをまとめようと思います！

今回記事にする事はすごく当たり前の事なのですが、WEBデザインとグラフィックデザインの違いを改めて把握する事で、デザイナーとしての役割を理解し、良いデザインを作っていくきっかけになればと思います。

タイトルにあるWEBデザイナーとグラフィックデザイナーの違いというよりは「 WEBデザインとグラフィックデザインの違い」の方が正しいかもしれません・・・

まずはじめに媒体定義を

今回の記事で言うWEBデザインとグラフィックデザインの媒体は以下とさせていただきます！

WEBデザイン

ホームページやメディアサイト、LPなどのWEB媒体。サーバーを経由して表示されるもの

グラフィックデザイン

フライヤー、リーフレット、ポスターや電車の中吊り広告、名刺などの販促物などの紙媒体

WEBデザインは”やり直せる！？”それは”ゴールがない！？”って事？

この議論のきっかけ

会話のきっかけは、友人の「WEBは苦手。グラフィックの方が好き」という一言から始まりました。

その友人はグラフィックをメインとしWEBデザインも請けるフリーランスのデザイナー。イラストが超絶上手く、本当に素晴らしいデザイナーです。

彼女とは反対に、私は”WEBデザインが好きで、グラフィックが苦手”なので、その理由を聞いてみました。

彼女曰く、
「WEBには終わりがないよね。すぐに修正も出来てしまうし。グラフィックは印刷して納品するところが一区切りだから、ゴールがはっきりしている。」との事。
なるほど…
「グラフィックは印刷してミスがあった時に取り返しのつかない事になるけど、WEBはすぐに直せるから良い」
と言う私と、同じ内容なのにそれぞれメリットデメリットを逆に捉えている事に驚いたのでした！

更新改善を繰り返し、運用するWEBデザイン

普段WEBデザイナーをしていると当たり前の事なので気がつきづらいですが、WEBデザインはデザインをし、コーディングなどをし、サーバーにアップされ世の中に公開されて「はい！完了！」ではありません。

サイトの種類にもよりますが、ほとんどのWEBサイトは、更新・改善を繰り返し、運用していくものになります。

運用するにあたりデザイナーが心がけるべき事

この運用するいう側面はグラフィックデザインにはない事かと思います。
WEBデザイナーは、自分だけではなく、関わる人全員が運用しやすいスキームを設計し構築していかなければなりません。

サイズの概念

サイズがないWEBデザインとサイズありきのグラフィックデザイン

サイズの有無も大きな違いです。

WEBデザインは主に画面のサイズ、グラフィックでは最終的な印刷物のサイズとなります。
ではWEBデザインにはサイズがない。というのはどういう事でしょうか。

デバイスによって可変するWEBデザインのサイズ

WEBデザインは、ユーザーがそのデザインを目にする為に使っているデバイスによってサイズが変わります。

具体的にはPCではブラウザのサイズを変えれますし、スマートフォンやタブレットではフルスクリーン表示なのでユーザーでサイズは変えれませんが、デバイスの数だけサイズも存在する事になるのです。
“サイズがない”というよりは、”サイズがたくさんある”という方が正しいかもしれません。

サイズ無制限の WEBデザイン

また、これもWEBデザインの特徴ですね。WEBは決められた規格がありません。
なので必要であれば詰め込みたいだけ情報を入れる事ができます。

LPであれば縦に長くなる事が多いですし、Facebookのアプリなどでも採用されている、ページ遷移せずにコンテンツを読み込むロングスクロールでは、もう「サイズ無限」です。

そういった意味では、横幅は限度がありますが縦は無限であり、これまでの仕事で縦の長さを指定された事は1度もありません！

WEBデザイナーが注意する点

デバイスの数だけサイズが変わるとなると、サイズを決めそのサイズだけで完璧なデザインという事ができなくなります。

全てのサイズを網羅する事は無理ですが、WEBデザイナーはどのサイズで見られても成立するデザインを設計しなければなりません。
今はレスポンシブデザインが主流で、弊社の案件でも最近はめっきりPCサイトだけのデザインはなくなってきました。
どのサイズでも美しいデザインをするこれはかなり奥が深いですね…

レスポンシブデザインについては下記の記事で解説しています。

規格ありきのグラフィックデザイン

反対にグラフィックデザインでは、いつ誰が手にしてもそのサイズは変わる事がありません。

A4サイズのフライヤーであれば、どんな環境でどんな人が手にしても210mm×297mmのA4サイズの紙に変わりはないのです。
なのでグラフィックデザイナーは紙のサイズという限られた空間に必要な情報をいかに見やすく読みやすく、整理し頭を使ってレイアウトしていきます。

WEBデザインにあってグラフィックデザインにないUI

WEBデザインにおけるUIとは

まずはじめにUIとは何でしょうか。

ユーザーインターフェイス(User Interface)の略です。

インターフェイスにも種類がある中で、このユーザーインターフェイスは主に、人が何かサービスやシステムを使う時に、パソコン・スマホといったデバイスとの間を仲介する役割をするものになります。
具体的にWEBデザインにおいては、ボタンなどがこれに該当します。

グラフィックにはボタンはない！

私が初めてWEBデザインをした時に苦労した点はここでした！

それまでやってきたデザインにはなかったこのボタンのデザイン。これを押してもらえないと成立しないWEBデザインの難しさ…
UIデザイナーという職種が存在する程、この点はWEB媒体特有のものであり、紙媒体では必要とされない知識や経験、設計力が求められます。

WEBデザインはストレスを伴う！？

またこのUIがある事は、ユーザーのストレスにもなりえます。

紙媒体ではよっぽ不快なビジュアルでない限りストレスは感じません。人にもよるかもしれませんが…
しかしWEBデザインにおいては、クリックしても目的のページにいかない、遅いなどといった事が少しでもあると人はストレスを感じてしまいます。

自分がデザインしたものが誰かのストレスになるのは避けたいですよね。。

色、フォントにも大きな違いが

液晶モニタに左右されるWEBデザインの色

友人や家族に、「これ私がデザインしたんだ〜」とWEBサイトを見せた時に、(え！？色が全然違う、こんなんじゃないのに！)となったWEBデザイナーの方いませんか？赤が青になる、なんて事はもちろんありませんが、あんなに綺麗な配色取ったのにーーと結構がっかりしますよね。

これは液晶モニタによって発色方法や性能が異なる為に起こる事です。全ての環境下において同一の色を同じように見せる事は不可能に近いです。

グラフィックデザインは印刷物が全て

これに対し紙媒体のグラフィックデザインでは、印刷で上がってきたものが全てになります。

目にする人の視力によって見える色域であったりと幅は多少あるものの、デザイナーからすると、出来上がった色は一つだけなので、安心感があります。

パントーンなどの色見本を使いながら、細かく色指定をし作り上げていくのがグラフィックデザインの特徴であり楽しいところです。

フォントの自由度の違い

フォントに関しては違いとしてよく上がる点ですね。

字詰め大好きなグラフィックデザイナーにとっては、WEBデザインでのテキストの扱いは受け入れがたい部分かと思います。私もWEBデザインを始めた当初はなんだか罪悪感というか未完成感があり、すごく嫌でした。。

またレスポンシブデザインが主流の現代において、LPを除いては、文字は画像ではなくテキストで作成していく事が多くなりました。

WEBデザインでも字詰めや行間の調整は可能ですが、グラフィックデザイナーの拘りには対応出来ないのかと思います。

WEBデザインとグラフィックのフォントについて比較

WEBデザイン

自由度低い。細かいカーニングなどはできない

グラフィックデザイン

自由度が高い。カーニングや行間、フォントと細部のこだわりこそがデザインの良し悪しの決め手

最後にまとめ

他にも、扱うデータの解像度やサイズが違ったり、デザインに使うツールが違いますし、「体験」や「手触り」という切り口でも結構な違いがあるかと思います。
色々出てきますね！！

私はWEBデザインを始めた頃は、両者とも「ビジュアルを作る」事は共通なので、その違いが曖昧でした。。

しかし改めて比較していくと、こんなにも明確に違うものなのか！と改めて気がつく点も多かったです。

グラフィックデザイナーとWEBデザイナーの区別があまりついていない方にとって、この記事が何か気付きの1つになれば幸いです！