徹底比較！WEBデザイナーとグラフィックデザイナーの違い9つ　

おしゃれな仕事、クリエイティブなお仕事の代表格、デザイナー。

ファッションデザイナーインテリアデザイナーなどデザイナーの種類はさまざまありますが、そのなかでもWEBデザイナーとグラフィックデザイナーは特に人気な職業です。

しかし、服や家具という具体的なものでのデザインではないため、何が違うのかはっきりわからないという方もいるのではないでしょうか。

そこで、今回はWEBデザイナーとグラフィックデザイナーそれぞれで求められるスキルや学習法、表現方法の違いなど9つの違いについてご紹介します。

この記事を読んで、WEBデザイナーとグラフィックデザイナーの違いを整理しましょう。

さらに、グラフィックデザイナーからWEBデザイナーへの転職を叶える3ステップをご紹介するので、ぜひ参考にしてみてください。

＼ 14364人にセミナーをして分かった！／

WEBデザイナーとグラフィックデザイナーの9つ仕事の違い

両者には大きく9つの違いがあり、それぞれ理解すれば、あなたが想像していたデザイナーがどちらを指すのかイメージができるようになるかと思います。

まずは、求められるスキルやお給料、学習法の違いなど、具体的にご紹介します。

なお、当ブログを運営している日本デザインスクールは、WEBデザイナーに興味がある方向けに無料のオンラインセミナーを開催しています。

セミナーではWEBデザインの仕事内容、デザイナーに本当に必要なスキル、WEBデザイン業界のリアルな裏側、間違った勉強をして挫折してしまった失敗事例をお伝えしています。

参加者の中にはWEBデザインの勉強に挫折してしまった方も多く、「勉強を始める前に知りたかった」という感想が多いので、WEBデザイナーに興味がある方、これから勉強しようと思っている方はぜひご参加くださいね。（※無理な営業などは一切ございません。）

▼セミナーの詳細が書かれた記事はこちら

あわせて読みたい

【潜入】「WEBデザイナーという働き方セミナー」を実際に受けてみた結果… はじめまして！ 日本デザインスタッフの橋本麻由と申します。 私は普段「日本デザインスクール」の運営担当として、受講生の方が楽しくWEBデザインを学べるようなお手伝…

求められるスキルの違い

まず、求められるスキルについてです。

WEBデザイナー、グラフィックデザイナーどちらも必須の資格はありませんが、身につけておくべきスキルがあります。

WEBデザイナー

WEBデザイナーはWEB上のコンテンツを作成する仕事です。

具体的にはWEBサイトのデザインや広告の画像を作成して、デザインしたものが正しく動くように設定をします。

そこで必要となるのがデザインスキル。

あなたが作ったページを見て、「買いたい」と思ってもらうためにはその商品やサービスが魅力的に見えるデザインスキルを鍛える必要があります。

WEBデザインを学ぶとき、「Photoshopを使えるようになろう！」と勉強する人がいます。

たしかにツールは使えるようになる必要がありますが、WEBデザイナーとして働くうえで大事なのはデザインスキルです。

ここまでできればWEBデザイナーで食べていくことはできますが、ここからランクアップするためには、デザインスキルに加えてHTMLやCSSなどコーディングスキルも求められます。

コーディングまでできると、WEBデザイナーとして困ることはほとんどなくなります。

学習法についてはこのあとご紹介する内容を確認してみてください。

グラフィックデザイナー

グラフィックデザイナーの仕事はポスターやチラシなどの印刷物のデザインをすること。

WEBデザイナーと同様にデザイン力や、それを形にするためのIllustratorやInDesignなどのツールを使えることが求められます。

グラフィックデザイナーとして大事なのは、おしゃれなデザインができることよりも、クライアントの商品サービスが売れるデザインをすること。

そのためには、日頃から周りの広告やポスターを見て流行りを押さえて、消費者心理を理解することが大事です。

お給料の違い

お給料も仕事選びの軸かと思います。

WEBデザイナーとグラフィックデザイナーではお給料に少し違いがあるので、説明していきますね。

WEBデザイナー

WEBデザイナーの平均年収は300〜400万円といわれています。

WEBディレクター（WEBサイトの企画立案や制作、運用における責任者の立場）やWEBプロデューサー（WEBサイトのターゲットやコンセプト、イメージを顧客と相談しながら作り上げ、納期や予算、人員を管理しながらプロジェクト全体を統括する立場）になればそれ以上もらうことも可能です。

WEBデザイナーとして仕事の幅が広がるほど、年収も上げられます。

これは会社員に限った話ではなく、副業やフリーランスで働くとしても同じで、能力が高ければ高いほどWEBデザイナーとしての価値が高まり、年収も高くなるということです。

そのため、WEBデザイナーとして稼ぎたい、ゆくゆくはフリーランスになりたいという方は、できるだけスキルアップしたり全体管理をする立場を引き受けたりして仕事の幅を広げていきましょう。

グラフィックデザイナー

グラフィックデザイナーの平均年収は300〜500万円です。

しかし勤務先によって大きく変動するので、あくまで参考としてください。

大手企業ではあれば年収1000万円も可能ですが、中小企業であればそこまでいかないことがほとんどです。

金額こそ違いますが、WEBデザイナーと同様に、仕事の幅を広げるほど年収を上げられます。

大手でも能力やキャリア次第で変わるため、グラフィックデザイナーのスキルを磨くほど、あるいはさまざまなキャリアを積み上げるほど年収を高くすることも可能です。

学習法の違い

では、実際にスキルを身につけるためにはどのように学べばよいのでしょうか。

同じデザインの仕事ですが実際の仕事内容は違うため、専門学校やスクールで学ぶにしても学習法は異なります。

WEBデザイナー

WEBデザインは独学でも身につけることはできますが、効率的に現場で使えるスキルを身につけたいのであれば専門学校やスクールに通うのがおすすめです。

どのようなデザインが売れるのかはもちろんですが、制作するために使うPhotoshopやIllustratorの操作を身につけなければなりません。

しかし、スクールのなかには、ツールは使えるようになったけどデザインがあまりできなかったというところもあるようなので、何を学べるのか事前に調べることが大事です。

よりレベルの高いWEBデザイナーになるためには、コーディングやWEBマーケティングなどの知識を身につけると仕事の幅が広がりますよ。

オンラインや通信講座など自分のペースでも学習できるものもあれば、専門学校のようにみっちり学習するスクールもあるため自分に合った場所で学ぶことも大事です。

グラフィックデザイナー

グラフィックデザイナーは大学や専門学校でデザインの基礎を勉強するのが一般的です。

ツールについては、WEBデザインと同様にPhotoshopやIllustratorに加えて、InDesignの勉強も必要です。

InDesignはカタログのような複数ページを制作するときに使うソフトです。

マスターページを1つ設定することで、複数ページに同じようなデザインを適用することができるため、使えるようになると便利です。

デザイン系の専門学校では、広告デザインや色彩、レイアウトの理論や技術、IllustratorやPhotoshopなどのツールの技術を身につけられます。

美術大学であれば、専門学校で学べることに加えて描写力や造形力を磨くためのデッサンや造作など手を使う授業やマーケティングなど提案力を身につけることも可能です。

フリーランスなど1人で仕事をするためにはマーケティングの知識もより必要になるので、最初の段階で学んでおくのも一つの手です。

色の表現方法の違い

媒体によっては制作したときの色と実際に表示される色が異なる場合があります。

適切に設定せずに制作すると完成後に思っていたのと違うとなりかねないため、最初の色の設定は重要です。

WEBデザイナー

WEBデザインは必ずRGBで制作します。

RGBとはRed（赤）、Green（緑）、Blue（青）の三原色を混ぜて色を表現する方法です。

WEBデザイナーの大変なところは手元で自分が作ったものではこの色だと思ったのに、別の人の画面ではそれとは異なる色で表示されることです。

これは液晶モニターの発光方法や性能が異なるため起こるもので、自分ではコントロールできません。

自分の画面でどれだけ完璧にできたと思っても、見る人全員に作ったものそのままを見せることができないのはWEBデザイナーの難しいところといえます。

グラフィックデザイナー

グラフィックデザイナーはパントーンなど色の見本を見ながら細かく色を指定して制作します。

また、グラフィックデザインはポスターやチラシなど印刷物のデザインなので、見る人によって色の見え方が異なることはありません。

もちろん、目にする人の視力によって見える色の範囲の違いはありますが、自分が作ったものそのままを見てもらえるという安心感があります。

必要な解像度の違い

WEB上なのか、紙なのかによって解像度も変わります。

見え方に関わる大事な部分であり、設定方法が異なるので要チェックです。

WEBデザイナー

WEBデザインは基本的に72ppi（ppi：解像度の単位で、1インチあたりどれくらいピクセルが含まれているか）で作成します。

サイトを開くたびにテキストや画像の読み込みをするので、あまり解像度が高い画像だとデータが重くなり、読み込みに時間がかかってしまいます。

あなたも経験があると思いますが、読み込みが遅いとユーザーはストレスを感じます。

そのため、デザインだけではなく、デザインしたものが表示されるまでのユーザー心理にも気を遣わなければなりません。

早く表示させようとして解像度が低すぎると見づらくなり、解像度は適切なものにしなければなりません。これらを踏まえると72ppiがちょうどよいといわれるのです。

グラフィックデザイナー

グラフィックデザインの場合は、明確な数値が定まっているわけではありませんが、300〜400ppiで作成します。

グラフィックデザインは印刷するため、何度も読み込みをする必要がなく、解像度が高くても読み込みに時間はかかりません。

しかし、解像度を高くしすぎると印刷機のスペックによってはそこまで鮮明に印刷できなかったり、出力に時間がかかったりする可能性もあるので、適切な解像度で作成しましょう。

推奨される解像度は350ppiなので、特に指定がなければ350ppiをおすすめします。

WEBデザイン同様に、解像度が低いと画像がぼやけてしまうので注意が必要です。

情報を表示できる範囲の違い

WEBデザインとグラフィックデザインでは、情報を表示できる範囲に大きな違いがあります。

WEBデザイナー

WEBデザインは表示範囲に制限がありません。

スマートフォンやパソコンなど横幅はデバイスごとに決まっていますが、縦幅はスクロールすればどこまででも表示させることが可能です。

そのため横幅をうまく調整できれば、縦はちょうどよいところで切ることで見やすいデザインを制作できます。

しかし、パソコンやスマートフォンなど、デバイスごとにサイズが異なるため、パソコン用のレイアウトをスマートフォン用のデザインに変更したり、改行位置が変わることを念頭に入れて作ったりすることが必要です。

デバイスごとの幅や改行位置を意識せずに作ると、あとでコーディングするときに困るため、先の工程まで考えてデザインしましょう。

グラフィックデザイナー

グラフィックデザインは表示範囲に制限があります。

チラシやポスターなどサイズが決められているものを制作するので、そのなかで縦横の収まりよくデザインすることが大事です。

テキストが少なくイラストメインのものは、画像やイラストでスペースを調整できますが、テキストが多い場合はフォントサイズやイラストサイズも気にしながら、場合によっては文字量を減らすなどして制作しなければなりません。

チラシやポスターであれば1枚のなかでの調整で済みますが、冊子など複数ページにまたがるものはそれぞれのページのつながりや全体の構成、レイアウトのルールなどを踏まえながらの調整が必要です。

表現の自由度の違い

WEBデザイナー、グラフィックデザイナーどちらも、求められるデザインを作ることが大事なのですが制作するうえでそれぞれ異なる制約があります。

それを知らずに制作すると実際に形にするときにうまくいかない可能性もあるので、要チェックです。

WEBデザイナー

WEBデザインの特徴は動きのある表現ができること。

そのうえで、WEBデザインで制作するときに気をつけるべき点は次の4つです。

• コーディングで再現できるものか
• CSSで問題なくできるものか
• デバイス上で使用できるフォントか
• フォントサイズは10px以下か

デザイン後におこなうコーディングで再現できないものはNGです。

そのため、どこまでのものならコーディングできるのかを事前に理解しておく必要があります。

また、ブラウザごとでも大丈夫なものとそうではないものがあるので、自分がデザインしたものが問題ないかも確認が必要です。

デバイス上で使用できるフォントにも制限があり、実際に表示させるとうまく見えないということが起こりえます。

どうしてもこのフォントがよいけど表示されないという場合は、画像にして使用することも可能ですが、SEO的にはテキストで表示するほうが好まれるため、似たフォントを使うなど検討してみてください。

このようにWEBデザインは制約が多いですが、WEB上では動画や音声を流すことができたり、背景を動かしたり画像を切り替えたり、使いこなせばさまざまな表現ができます。

グラフィックデザイナー

グラフィックデザインは制作したものをほとんどそのまま形にすることができます。

コーディングをおこなう必要がないため静的表現であれば、ほとんど制限なくデザインができます。

WEBデザインだとコーディングで手間がかからないようにある程度明確なルールを持たせないといけないこともありますが、グラフィックデザインであればあえてレイアウトをおしゃれに見せるようにすることも可能なので、デザインにおいて気にすることが減るのはメリットです。

また、フォントの種類やサイズによる制限がないため、使用したいフォントを自由に使うこともできます。

このように、WEBデザインのような動きを持たせることはできませんが、印刷ならではの特色を使わないと表現できないものもあるため、WEBデザインとは違った魅力があるのです。

デザイン完成後の違い

これまでさまざまな違いをお伝えしましたが、デザイン完成後の流れが一番大きな違いかもしれません。

WEBデザイナー

WEBデザイン完成後はコーディングの作業に入ります。

コーディングによってWEBサイトが見れるようになったり、ボタンが押せるようになったりします。

つまりデザインが完成しても、実際にユーザーに届く形にするためには、さらに工程が続くということです。

また、WEBサイトは日時など随時更新されるものなので、新しい項目を増やすときにあとから修正をおこないます。

他の人が作ったデザインをあとから別の人が修正することもあり、どこを修正するのかわかるように制作したデータを整頓しておく必要があります。

グラフィックデザイナー

一方でグラフィックデザイナーは作品が完成した後は、印刷をすれば終了です。

そのままユーザーに届く形になります。

WEBデザインはミスが見つかったり、変更が必要になったりしてもあとから修正をすることが可能ですが、グラフィックデザインは印刷するため修正することは困難です。

あとから直しが効かない分、入稿する前に誤字脱字のチェックは、WEBデザイン以上に入念におこなう必要があります。

納品手順の違い

作品が完成したあと、納品における違いをお伝えします。

WEBデザイナー

デザインが完成したら、制作したデザインに問題がないか確認をしてもらいます。

コーディングまで1人でおこなう場合はそのままコーディングをして、クライアントに再度確認が必要です。

一方で、コーディングを別の人に依頼する場合は、クライアントに提出する前に自分で完成品を確認しましょう。

もし、何かおかしいところがあれば、コーダーにその点を直してもらう必要があるからです。デザインとコーディングの両方が完成してからクライアントに提出しましょう。。

グラフィックデザイナー

デザイン完成後は、納品方法にかかわらずテキストをアウトライン化してください。

※アウトライン化…テキストを図形の情報にして、印刷時にフォントが変わらないようにすること

アウトライン化していないと、あなたがデザインしたときに使用したフォントが印刷所にないときに、制作した通りのフォントで印刷されない可能性があります。

アウトライン化したら、印刷してクライアントにデザインや色味などを確認してもらいましょう。

確認してもらい、クライアントからOKをもらえれば納品完了です。修正を依頼されることもあるので、その場合は修正してから提出しましょう。

グラフィックデザイナーからWEBデザイナーになる3STEP

ここまでWEBデザイナーとグラフィックデザイナーの違いを紹介してきました。

では、グラフィックデザイナーからWEBデザイナーになるとき、具体的にどのような手順を踏めばよいのか、3つのステップに分けてご紹介します。

WEBデザインについて学ぶ

まずはWEBデザインの基礎知識を学ぶところから始めましょう。

WEBデザイナーの仕事を全てを自分一人でやるうえではHTMLやCSSのことを学ぶのも大事です。

しかし、WEBデザイナーになるために必須なのは、どのようなデザインが求められるのか、どのような表現方法があるのかなどのデザインに関する基礎知識を勉強して、実際にデザインができるようになることです。

WEBデザインの学習法については、先ほどお伝えしたように、独学でもスクールでも学べます。

しかし、短い時間で効率よく学びたい、1人だと勉強を続けられないなど不安を感じている方はもちろん、WEBデザイナーとして現場で活躍するのに必要なことを学ぶという意味ではスクールで学ぶことをおすすめします。

ポートフォリオを作成する

WEBデザインの基礎知識を身につけたら、ポートフォリオを作成しましょう。

ポートフォリオとは「自分はこんな作品が作れますよ」という作品集であり、あなたの実力を証明するものです。

クリエイターの転職で必須とされるポートフォリオですが、紙とWEBの2種類があり、どちらも用意しておくことをおすすめします。

WEBデザイナーの転職活動ではサイト上の動きを確認できるようにと、WEBのポートフォリオを求められることが多いですが、対面での面接であればインターネットにつながらずに見せられないということもありえます。

しかし、紙媒体で用意しておけば冷静に対応することができますよ。

転職活動を始める

WEBデザインの知識を学び、ポートフォリオが完成したら、あとは転職活動をするだけです。

求人の見つけ方については、転職サイトに登録して探すのが一番手っ取り早いのですが、ブラック企業だったらどうしよう、一人で転職活動を進めるのは不安という方もいますよね。

その場合は、転職エージェントもおすすめです。

転職エージェントはキャリアカウンセリングを受けたり、自分に合った求人を厳選してくれる、なかにはポートフォリオの指導をしてくれるサービスもあるため、ぜひ利用してみてください。

まとめ

いかがでしたか。

今回はWEBデザイナーとグラフィックデザイナーの9つの違いと、グラフィックデザイナーからWEBデザイナーへ転職するための3ステップをお伝えしました。

それぞれおもしろさがある一方で、難しい側面も感じたのではないでしょうか。

しかし、どちらも自分が制作したものを多くの人に見てもらえて、それをきっかけに商品やサービスを購入してもらうというやりがいのあるお仕事です。

それぞれの特徴がありますが、あなたがやりたいと思うものを目指して頑張ってもらえたらと思います。

なお、以下の記事では現役デザイナーが「WEBデザイナーの魅力や楽しさ」を解説しています。WEBデザイナーについて詳しく知りたいという方は、ぜひ読んでみてくださいね。

あわせて読みたい

WEBデザイナーは楽しい！15年続けてみて感じた11の魅力 この記事の著者 久保 なつ美（クリックすると紹介記事を読めます）WEBデザイナー歴15年。24歳でWebデザイン業界に入りさまざま案件を担当。2015年5月に「日本デザインス…