グラフィックデザインとWebデザインって同じだよね？
制作してみると、全然違うよ。
グラフィックデザインとWebデザインは、紙媒体とインターネットの違いだけで、「同じデザイン」と思っていませんか？
また、グラフィックデザイナー経験者から見たら、「Webデザインも同じ感覚でできるのでは？」と思うかもしれません。
ぼくは、グラフィックデザインとWebデザインの両方の経験があるからこそ言えますが、グラフィックデザインとWebデザインとでは、全く違います。
全くの別物とは言い過ぎかもしれませんが、
グラフィックデザインには、グラフィックデザインなりの考え方があり、Webデザインには、Webデザインのルールが存在します。
そこで、今回は、グラフィックデザインとWebデザインの違いについて解説していきます！
こんにちは！デザイナー歴15年のダッシュくんです。現在、企業のインハウスデザイナーをしながら、副業でWebデザインのお仕事をしています。
グラフィックデザインとWebデザインの6つの違いとは？
グラフィックデザインとWebデザインの違いについて、以下にまとめてみました。
・画像解像度の違い
・色の違い
・デザインの考え方の違い
・サイズの違い
・アップデートの速さの違い
・制作アプリケーションの違い
それぞれ、解説していきます。
画像解像度の違い
グラフィックデザインとWebデザインとでは、画像解像度が違います。
| グラフィックデザイン | Webデザイン |
| ・解像度：300～350dpi | ・解像度：72dpi |
グラフィックデザインの画像解像度は、300dpi～350dpiです。
Webデザインの画像解像度は、72dpiです。
グラフィックデザインにおいては、画像の解像度は重要であり、高解像度のほうがキレイに印刷することができます。
一方、Webデザインおいては、軽い画像データが推奨されます。
その理由として、重い画像データで作ってしまうと、サーバーの読み込みによる表示速度が遅くなるためです。
このように、 グラフィックデザインとWebデザインとでは、画像解像度に違いがあります。
また、制作アプリケーションの違いについては後述しますが、グラフィックデザインでは、Illustratorに高解像度の画像を読み込ませて制作することが多いです。
一方、Webデザインでは、Photoshopを使った解像度の低いピクセルデータを基準として、デザインをすることが多いです。
そのため、グラフィックデザイナーが、Webデザインをする場合には、画像解像度の荒さが気になるかもしれませんね。
Webデザインの文字情報は、最終的にはHTMLに置き換わるよ。
色の違い
グラフィックデザインとWebデザインとでは、色が違います。
| グラフィックデザイン | Webデザイン |
| ・CMYKカラー | ・RGBカラー（16進数） |
グラフィックデザインは、CMYKカラーです。
Webデザインは、RBGカラーです。
RGBカラーは、16進数の「0からF」までの数字と英文字で構成されているWebカラーコードとも言います。
例えば、青のカラーコードは、#0d33ffとなります。
グラフィックデザイナーが、Webで使うバナーデザインをすると、CMYKの感覚で配色するため、トーンが暗くなりがちです。
一方、Webデザインでは、Webカラーコードを意識して配色をする必要があります。
RGBは、光の三原色で構成されているため、CMYKと比べると、鮮やかな色味の表現ができます。
そのため。グラフィックデザインとWebデザインとでは、配色の感覚が違ってきます。
はじめて作ったWebバナーの色が暗くで、何度も調整をした経験があるよ。
デザインの考え方の違い
グラフィックデザインとWebデザインとでは、基本的な考え方が違います。
| グラフィックデザイン | Webデザイン |
| 直感的で自由なデザイン | HTML/CSSを意識したデザイン |
グラフィックデザインは、直感的で自由にデザインすることができます。
Webデザインは、HTML/CSSを意識してデザインをする必要があります。
例えば、グラフィックデザインは、AdobeのIllustratorをイメージするとわかりやすいです。
Illustratorは、特に制限を気にせず、自由にレイアウトすることができます。
デザインの詰め作業でも、0.1mm単位で感覚的に微調整することも可能です。
しかし、Webデザインでは、デザインが完成後に、HTML/CSSでコーディングしなければ、Webページとして表示することができません。
コーディングは、HTML/CSSのマークアップ言語で書く必要があり、Webデザインに密接に関係してきます。
さらに、Webデザインは、各デバイスの見せ方やユーザーの操作性も考えなければなりません。
Webデザインは、グラフィックデザインと比べて、レイアウト設計やコーディングなど、ひと手間がかかる印象がありますね。
グラフィックデザインは、右脳的な直感デザインでも通用しますが、Webデザインは、左脳的な論理思考でデザインするといった違いがあります。
Webデザインにがむしゃらは通じない。
サイズの違い
グラフィックデザインとWebデザインとでは、サイズに違いがあります。
| グラフィックデザイン | Webデザイン |
| ・サイズが固定 ・A判サイズ/B判サイズ | ・各デバイスで異なる ・レスポンシブ |
グラフィックデザインは、チラシやパンフレットなどのA判サイズやB判サイズといった紙媒体の規格があり、サイズが固定されています。
Webデザインは、デバイスに表示されるため、デスクトップやスマホ・タブレットの各サイズに適応させる必要があります。
これをレスポンシブデザインと呼びますが、Webデザインは、サイズが変化する前提でデザインをしなければなりません。
Webデザインでは、横幅1920pxなどある程度基準が決まっていますが、縦幅は情報がある分だけ、下に伸ばすことができます。
そのため、Webデザインは、縦長のデータになる傾向があります。
グラフィックデザインの感覚からすると、見慣れないサイズに驚くこともあるでしょう。
また、グラフィックデザインとWebデザインの制作手順にも違いがあります。
グラフィックデザインは、全体から細部へと作り込んでいきますが、Webデザインは、上から下への順番にスクロールをすることを意識しながら作り込んでいくといった違いもあります。
さらに、Webデザインでは、スライドショーやアニメーションの動きやボタンの押しやすさなど、ユーザー視点を考えたUI/UX（ユーザーインターフェース/ユーザーエクスペリエンス）を考える必要もあります。
見やすさに加えて、操作性も考えるイメージです。
上記の観点から、グラフィックデザインは、一区切りのデザイン。
Webデザインは、一連の流れのデザイン。
このように、グラフィックデザインとWebデザインとでは、全く違った視点で作ることが大切です。
Webデザインは、動的要素があるから計算して作る必要があるよ。
アップデートの速さの違い
グラフィックデザインとWebデザインとでは、アップデートの速さに違いがあります。
| グラフィックデザイン | Webデザイン |
| ・アップデートが遅い | ・アップデートが速い |
グラフィックデザインは、Adobeのアプリケーションのバージョンがアップデートされるたびに、操作方法を調べて覚え直すことがあります。
それでも、基本的な操作方法は変わらないため、慣れてしまえば、勉強する必要はなくなります。
一方、Webデザインは、HTML/CSSの文法そのものが、頻繁にアップデートされるため、常に最新バージョンかチェックすることが求められます。
また、Webデザインのトレンドの移り変わりも速く、1年前のデザインが古いとされることもあります。
そのため、Webデザインはグラフィックデザインに比べて、アップデートの速いが数倍違う感覚になります。
グラフィックデザインは、チラシなどのセースルデザインであれば、トレンドにあまり関係なくデザインすることができます。
しかし、Webデザインの場合は、最新トレンドを求められるケースが多く、日頃からアンテナを立てておくことが大切です。
Webデザインは、キャッチアップ力も求められる。
制作アプリケーションの違い
グラフィックデザインとWebデザインとでは、制作アプリケーションに違いがあります。
| グラフィックデザイン | Webデザイン |
| ・Illustrator（メイン） ・Photoshop（サブ） | ・Photoshop（メイン） ・XD ・Figmaなど |
グラフィックデザインの制作アプリケーションは、Illustratorがメインです。
グラフィックデザインの観点で見ると、Photoshopは、画像の切り抜きや加工として使うことが多いため、素材作りのサブ的な印象が強いと思います。
一方、Webデザインの制作アプリケーションは、デザイナーや制作環境にもよりますが、Photoshopがメインとなります。
WebデザインでPhotoshopを使う理由は、ピクセルによる画像形式がWebとの親和性が高く、異なる制作環境でも扱いやすいデータとしてされているためです。
また、Webデザインの制作ツールには、Adobe XD※やFigmaといったベクターデータのアプリケーションも浸透しつつあります。
※Adobe XDの単体プランは2023年1月に販売終了しています。
また、グラフィックデザインとWebデザインでは、完成までの工程にも違いがあります。
グラフィックデザインは、イラストレーターで印刷会社に入稿したら完了です。
Webデザインは、デザイン完成後に、コーディン作業を通して、サーバーにデータをアップすることで完了します。
コーディングするためには、Webデザインの制作データを、文章とイメージ画像を各パーツに切り分ける必要があります。
Webデザインは、完了するまでにコーディング作業がある分、グラフィックデザインよりも工程が長くなります。
Webデザインは手間がかかる。
ちなみに、コーディング作業に使われるアプリケーションは「テキストエディタ」と呼ばれ、無料のものから有料までたくさんの種類があります。
下記に、代表的なテキストエディタをまとめてみました。
・Visual Studio Code
・Dreamweaver（Adobe）
・Brackets
・Atom など
企業や制作会社よっては、テキストエディタが統一されていることもあります。
HTMLコーダーもやる場合は、いろんなテキストエディタでコーディングができるように、普段から慣れておくといいでしょう。
まとめ
グラフィックデザインとWebデザインの違いは、以下の通りです。
| グラフィックデザイン | Webデザイン | |
| 画像解像度の違い | ・高解像度：300～350dpi | ・低解像度：72dpi |
| 色の違い | ・CMYKカラー | ・RGBカラー（16進数） |
| デザインの考え方の違い | ・直感的で自由なデザイン | ・コーディングを意識したデザイン |
| サイズの違い | ・サイズが固定 ・A判サイズ/B判サイズ | ・各デバイスで異なる ・レスポンシブ |
| アップデートの速さの違い | ・アップデートが遅い | ・アップデートが速い |
| 制作アプリケーションの違い | ・Illustrator（メイン） ・Photoshop（サブ） | ・Photoshop（メイン） ・Adobe XD ・Figmaなど |
グラフィックデザインとWebデザインは、ビジュアルをアウトプットする点では似ていますが、制作工程やデザインの考え方、制作アプリケーションなどが違ってきます。
グラフィックデザイナーからWebデザイナーになりたい人やWebデザインからグラフィックデザインにも興味がある人も、それぞれの違いを知っておくと、実際にデザインするときに役に立つと思います。
仕事などのプロジェクトで、グラフィックデザイナーとWebデザイナーと組んで制作する場合は、お互いの違いを理解しながら進められるといいですね。
以上、ご参考になれば幸いです。
最後まで読んで頂きありがとうございました！
