グラフィックデザインとWEBデザインの違いって何？

こんにちは！デザインコース講師のダマリです(^o^)/ みなさんは、グラフィックデザインとWEBデザインの違いについて考えたことはありますか？今回は、この2つの違いについてご紹介していきたいと思います。

主なデザイナーの種類

「デザイナー」と聞くとあなたはどんなデザイナーを想像しますか？一般的にデザイナーという種類はこれだけあります。

• グラフィックデザイナー
• WEBデザイナー
• CGデザイナー
• ファッションデザイナー
• ゲームデザイナー
• UI/UXデザイナー
• エディトリアルデザイナー
• インテリアデザイナー
• プロダクトデザイナー

そもそも「デザイン」とは？

デザイン（英語: design）とは、審美性を根源にもつ計画的行為の全般を指すものである。

出典: フリー百科事典『ウィキペディア（Wikipedia）』

ここでいう「審美性を根源にもつ計画的行為」を分かりやすくいうと、デザインとは「機能」と「装飾」。伝えたいことを伝わりやすくする「機能デザイン」と魅力的に見せる「装飾デザイン」の両方を作ることができるのがデザイナーだと思います。

「とてもかっこいいけど伝えたいことが伝わらない…」「伝えたいことはわかるのだけど魅力がない…」というのはデザインとは言えないのではないでしょうか。

グラフィックデザインとWEBデザインの違い７つ

沢山のデザイナーの中で混同されるのが「グラフィックデザイナー」と「WEBデザイナー」。この2つのデザインの違いは何でしょうか。7つにまとめてみました。

❶ 媒体

●　グラフィックデザイン
チラシ、ポスター、パンフレットなどの紙媒体。他にも看板・のぼりなど印刷できるもの全般。

●　WEBデザイン
ホームページなどのWEB媒体。他にもバナー、YouTubeサムネイルなどサーバーを経由して表示されるもの全般。

❷ CMYKとRGB（紙とモニター）

●　グラフィックデザイン
CMYK4色のインクの割合で色が決める。CMYKとはCyan（シアン）、Magenta（マゼンタ）、Yellow（イエロー）の3色に黒（キー・プレート）を足したもの。印刷したものが光を受けて物体自体が発色する「物体色」。色校まで出してしっかり色合わせをする。

●　WEBデザイン
RGBの3色の量を変化させることで、すべての色を表現しているテレビやパソコンのディスプレイといった画面上で使う発色方。RGBとはRed（赤）、Green（緑）、Blue（青）。モニターから光源が発している色で、光を通して発色する「光源色」。WEBの場合は、各デバイスのモニター（ディスプレイ）によって色が変わるので厳密に調整できない。WindowsかMacか、iphoneかAndroid端末か、閲覧環境によってかなり色が変わる。

❸ サイズ

●　グラフィックデザイン
印刷できる媒体のサイズ。スペースに限りがある。

●　WEBデザイン
可変。閲覧するデバイスによってデザインが変化し、スクロールができるためタテの制限無し。

❹ アクションの有無

●　グラフィックデザイン
ボタンクリックなどの直接的なアクションは存在しない。

●　WEBデザイン
ボタンクリックなどのアクションが存在。ユーザーの利便性や導線を考慮するUI（User Interface）が必要。このUIは主に、人が何かサービスやシステムを使う時に、パソコン・スマホといったデバイスとの間を仲介する役割をするもので、WEBデザインにおいては「クリックしても目的のページにいかない」「遅い」などといった事が少しでもあると、ユーザーはストレスを感じてしまうので、いかにインターフェイスの良いサイトを作るかが問われる。

❺ 触感と体験

●　グラフィックデザイン
出力した紙の感触などをユーザーが直接的に感じることができる。エンボス・ニス加工などあらゆる加工が可能。

●　WEBデザイン
感触を感じることはできないが、UX（User Experience）ユーザー体験を与えることができる。

❻ 画像ファイル形式・解像度

●　グラフィックデザイン
印刷に適切な解像度の基準値は「350〜400pixel/inch」で、商業印刷のほとんどがオフセット印刷でインクと紙の性質など様々な条件から、日本のオフセット印刷は「175線」が業界の標準となっている。

印刷を行うために線数の倍の解像度で画像データを制作する事を求められ、175線での通常オフセット印刷では「350pixel/inch」でCMYKのeps・psd・jpg・tiffファイル形式データを制作する必要がある。大判のポスターなどは離れて見るので「200pixel/inch」ほどでも問題ない。

大判サイズの画像を「350pixel/inch」で制作するとデータ容量が非常に大きくなり作業環境に負担がかかる。

●　WEBデザイン
WEB上で使用する画像は「72pixel/inch」が通常。印刷用の高解像度「350pixel/inch」の画像データで配置されたデザインデータでも、WEBページ制作では基本的に原寸で「72ppi」の低解像度に落としてコーディングされる。

主なファイル形式は「ロゴなどの単色画像はgif」「色数の多い画像はjpeg」「透過画像はpng」「直線ではない画像はpng」という風に使い分ける。

❼ フォント

●　グラフィックデザイン
自由度が高い。カーニングや行間、フォントと細部のこだわりこそがデザインの良し悪しの決め手。印刷物では本文に明朝体など使用される。

●　WEBデザイン
自由度低い。細かいカーニングなどはできない。見やすさが優先的なので、ゴシック体が主流。WEBサーバー上のフォントファイルを読み込ませて表示させるWEBフォントがある。WEBフォントを使用すれば、どのデバイスでも同じ書体で見ることができる。

まとめ

簡単にまとめると、印刷できるデザインがグラフィックデザイン。モニターを通して見るデザインがWEBデザイン。どちらも理解しておくと両立できるので、おすすめです。グラフィックデザイナーとWEBデザイナーを両立し続けたいダマリでした(^^)/