Webデザイナーの単価相場は?仕事内容や資格や必要なことを解説

SKILL 職種

Web業界の拡大に伴い、需要と人気ともに高まっている『Webデザイナー』
そんなWebデザイナーは、どれくらい稼げるのか?

今回は、Webデザイナー案件の単価相場やWebデザイナーに必要なスキルである『illustrator』と『Photoshop』や『HTML/CSS』、『JavaScript』の単価相場も紹介していきます。

また、そもそもWebデザイナーとは何か?どういった仕事内容なのか?Webデザイナーにおすすめな資格は?なども解説していきます。

Webデザイナー案件の単価相場

Webデザイナー案件は40万円台の案件が多く、続いて50万円台と30万円台が多くなています。

Webデザイナー案件の単価相場は、30~50万円台と見て良いでしょう。

つまり年換算すると、Webデザイナーの年収は360~600万円程が相場となります。

ただ、Webデザイナーと言っても企業によって仕事内容の定義が少し変わる場合があり、基本Webデザインのみを担当するケースとWebデザインに加えHTML/CSSやJavaScriptを使ったコーティングも担当するケースがあります。

担当業務の範囲や必要スキルの違いからも分かるようにこの2つのケースでは、同じWebデザイナー案件であっても単価が大きく変わってきます。

そのため先ほどWebデザイナー案件の単価相場は、30~50万円台と紹介したものの60万円台や70万円台以上の案件も豊富にある状況になっています。

Webデザイナー案件の単価相場の動向

Webデザイナー案件の単価相場の推移を見ると、年々単価相場は上昇傾向にあるようです。

2015年~2017年は比較的50万円台の周辺がボリュームゾーンで案件が多い傾向にありますが、2018年以降は見るからに60万円台がボリュームゾーンで案件が多くなっています。

さらに2019年では、50万円台以下の割合がかなり減少傾向で、反対に70万円台以降の割合が増加傾向にあります。

つまり、Webデザイナーの価値は高まっているのでしょう。

ただ注意が必要なのは、Webデザインのみを担当するWebデザイナーではなく、HTML/CSSやJavaScriptなどのコーディングスキルを持つWebデザイナーの需要が高まっているという見方をすることも出来ます。

実際にJavaScript案件の単価相場は、60万円台で70万円台以上の案件も多く、2019年のWebデザイナー案件の単価相場に近いグラフの形をしていますのでその可能性も高いです。

多くの企業でDXやIT化が進んでいるので、Webデザイナーの価値が高まっているのは間違いないでしょうが、IT人材不足などの原因もあり、コーディングスキルのあるWebデザイナーの需要が高まり、Webデザイナー案件の単価相場は上昇傾向にあるのでしょう。

その為、Webデザイナーとして稼ぐためにはHTML/CSSやJavaScriptのスキルは必須ということになってきていますので、Webデザイナーとして働いている方やこれからWebデザイナーを目指す方は、これらのコーディングスキルを習得することをおすすめします。

Webデザイナーに必要なスキルの単価相場

続いてWebデザイナーに必要なスキルの単価相場を紹介していきます。

  • illustrator
  • Photoshop
  • HTML
  • CSS
  • JavaScript

illustratorの単価相場

まずは、ロゴやアイコンの作成、優れたレイアウトの作成などに適しているソフトである『illustrator』の単価相場を紹介します。

illustratorは40万円台と30万円台の案件が多くなっていますので、illustratorの単価相場は30~40万円台と見て良いでしょう。

年換算すると、illustratorの年収は360~480万円程が相場となっています。

比較的50万円台の案件もありますが、70万円台以上の案件となるとかなり少なくなっています。

Webデザイナーには最低限必要なスキルではありますが、illustratorを習得したから高単価の案件に参画できる訳ではなさそうです。

Photoshopの単価相場

続いて、写真や画像加工、グラフィックデザインなどが作成できるソフトである『Photoshop』の単価相場を紹介します。

Photoshopは50万円台と60万円台の案件が多いので、Photoshopの単価相場は50~60万円台と見て良いでしょう。

年換算すると、Photoshopの年収は600~720万円程が相場となります。

illustrator同様にWebデザイナーにおいてPhotoshopのスキルも必須ですが、それぞれの単価相場を見る限りはillustratorよりもPhotoshopの方がスキル価値は高いようです。

また案件数で見てもillustratorよりもPhotoshopの方が圧倒的に多くなっています。

もしillustratorとPhotoshopのどちらを先に学ぶべきか迷っている人はPhotoshopの方が良いかもしれません。

とはいえ、Webデザイナーには両方必要なスキルですのでありPhotoshopだけではWebデザイナーとして活躍するには難しいので、必ずillustratorとPhotoshopをセットで習得するようにしましょう。

HTMLの単価相場

続いて、Webサイトの文章構造を作るWebサイト制作には欠かせないマークアップ言語である『HTML』の単価相場を紹介します。

HTMLは60万円台の案件が最も多く、次いで70万円台の案件が多くなっています。

60万円台と70万円台の差は大きくありませんので、HTMLの単価相場は60~70万円台と見て良いでしょう。

年換算すると、HTMLの年収は720~840万円ほどが相場となります。

HTMLの案件は、illustratorやPhotoshopの案件よりも高単価な傾向にあるようです。

ただ注意すべきなのは、一見HTMLを習得すれば稼げそうに見えますが、週5常駐の案件でHTMLのみを扱う案件はほとんどありません

なぜならHTMLとセットでCSSのスキルがなければ、Webサイト制作は出来ないからです。HTMLの案件イコールHTMLとCSSの案件という認識でいるべきでしょう。

WebデザイナーであってもHTMLとCSSのスキルがあることが主流になってくることは間違いないので、まずはHTMLからでも習得していくことをおすすめします。

CSSの単価相場

続いて、HTMLで作られた文章構造に装飾をするWebサイト制作には欠かせない言語である『CSS』の単価相場を紹介します。

CSSは60万円台の案件が多く、次いで70万円台となっていますが、60万円台と70万円台の差は比較的ありますので、CSSの単価相場は60万円台と見て良いでしょう。

年換算すると、CSSの年収は720万円ほどが相場となります。

基本CSSも単体で使用される案件はなく、HTMLとセットで使用されますので、若干差はあるもののグラフ全体の形はHTMLと殆ど同じになっています。

先ほども言ったようにHTMLとCSSはセットでなければ、Webサイト制作は行えませんので、CSSを習得した後は必ずHTMLも習得するようにしましょう。

WebデザイナーであってもHTMLとCSSのスキルがあることが主流になってくることは間違いないので、まずはCSSからでも習得していくことをおすすめします。

JavaScriptの単価相場

最後に、WebサイトのUI/UX向上に欠かせない動的コンテンツを作成するのに使用されるプログラミング言語の『JavaScript』の単価相場を紹介します。

JavaScriptは60万円台の案件が最も多く、次いで70万円台となっていますが、60万円台と70万円台には差がありますので、JavaScriptの単価相場は60万円台と見て良いでしょう。

年換算すると、JavaScriptの年収は720万円ほどが相場となります。

コーディングの際にJavaScriptと一緒によく使用されるHTMLやCSSの単価相場やグラフの形状との差はあまりないようです。

ただ、JavaScriptは非常に人気のプログラミング言語で需要もかなり高いです。

グラフの形や単価相場はHTMLやCSSと大差は無いものの案件数は大きく違っており、70万円台以上の案件を見ると割合的には同じですが、案件数で言えば倍近くある状況です。

つまり、JavaScriptを習得することで、70万円台以上の高単価の案件へ参画できる可能性はかなり高まるでしょう。

JavaScriptの習得は、HTMLやCSSの習得に比べハードルが高いため後回しにはなると思いますが、Webデザイナーとして長く活躍したいのであれば、最終的にJavaScriptまでの習得をおすすめします。

Webデザイナーとは

Webデザイナーの単価相場やWebデザイナーに必要なスキル別の単価相場を紹介してきましたが、そもそもWebデザイナーとは何なのかを解説しておきます。

Webデザイナーとは、HPやWebサイトなどのWebページの制作・デザインを担当する職種です。

ただ最近では、コーダーやマークアップエンジニアが行っていたHTML/CSSやJavaScriptなどを使ったコーディング業務も含めて担当するケースが増えていますので、Webサイトの表側(フロント側)のデザインから構築までを担当するのがWebデザイナーの役割になっていています。

Webデザイナーの仕事内容

デザインやコーディングは実際のWebデザイナーの仕事内容の一部分であり、その他にもしなければならない事があります。

具体的にWebデザイナーの仕事は大きく6つに分けられます。

  • ヒアリング
  • 構成とレイアウトを決める
  • デザイン
  • コーディング
  • 分析
  • 改修

クライアントへのヒアリング

Webサイトを作成するということは、企業が抱える何かの課題を解決するための手段です。

その為Webサイトを作成する前に、解決したい課題はもちろん、課題を解決する要因になるであろうターゲットについてや会社/商品の魅力などをクライアントにヒアリングしていく必要があります。

このヒアリングがしっかりできていなければ、ただWebサイトを作成しただけに過ぎず、仮にクライアントにデザイン案を提案したとしても却下される可能性が高いでしょう。

無駄な工数が発生してしまうどころか、最悪失注になる可能性もありますので、Webデザイナーにとってヒアリングは重要な仕事の一つです。

構成とレイアウトを決める

クライアントからヒアリングをした後は、Webサイトの構成やレイアウトを決めていきます。

構成やレイアウトを決めていく際には、クライアントの競合サイトの調査分析も必要になるでしょう。

クライアントからヒアリングした内容や自身の知見、競合サイトの調査分析の結果など様々な要素を踏まて、課題解決に適切な構成とレイアウトを決めていきます。

仮にこの後に行うデザインがパッと見て綺麗なものに仕上がっていたとしても構成とレイアウトがずれていれば、Webサイトを作成する効果はかなり薄くなってしまいます。

その為、この構成とレイアウトはWebデザイナーにとって非常に重要な仕事になります。

デザイン

適切な構成とレイアウトが決まれば、いよいよデザイン業務に入っていきます。

『Illustrator』や『Photoshop』などのグラフィックソフトを使用し、配色やロゴ・アイコン作成や各位置などを決めていき、魅力的なWebサイトになるようデザインをしていきます。

構成やレイアウトはもちろん重要ですが、Webサイトに訪れるユーザーに対してデザインが与える視覚的な印象も重要で、コンセプトからずれない範囲で最大限魅力的なデザインを作成していくWebデザイナーの腕の見せ所になります。

デザイン業務を進める際には、基本的にページなどの段階ごとに『デザインカンプ(カンプ)』や『モックアップ(モック)』と呼ばれるものをディレクターやクライアントに提出し、都度意見を聞きながら修正を加え完成まで進めていきます。

コーディング

デザイン業務が終われば、Webサイト完成に向けてコーディングをしていきます。

HTMLで文章構造を作り、CSSで見栄えが良くなるよう装飾し、そして場合によってはJavaScriptを使いWebサイトに動きを加えていきます。

ここでもWebサイトに訪れるユーザーにとって使いやすく見た目の美しいものに仕上がるよう調整する必要があり、1文字間違ってしまえば想定していたものにならない可能性もありますので、正確性も必要になってきます。

コーディングまで完了すればひとまずWebサイトの作成は完了です。

分析

コーディングが終わりWebサイトが完成してもWebデザイナーの仕事は終わりません。

クライアントの課題を解決するために構成やレイアウトを決めて、Webサイトを作成したものの思ったほどの効果が無いこともよくあります。

その際には、どこが悪かったのかを調査し分析していかなければなりません。

これも立派なWebデザイナーの仕事の一つです。

改修

思ったほどの効果がない場合、調査分析の結果を踏まえてWebサイトの改修業務が発生します。

きっちり効果が出ている場合であってもWebサイトを運営していくうちに、最低限必要な改修や更新業務が発生する可能性はあるでしょう。

このようにWebサイトを完成させた後にもWebデザイナーとしての仕事があります。

Webデザイナーになるには

前述でWebデザイナーの仕事を紹介したように、Webサイト1つを作成するためには、デザインやコーディング業務以外にもすべきことがたくさんあります。

その為、Webデザイナーになるためには様々なスキルが必要になります。

  • コミュニケーション能力
  • 論理的思考力
  • デザインスキル
  • コーディングスキル
  • マーケティングスキル

コミュニケーション能力

Webデザイナーはクライアントのヒアリングも立派な仕事ですので、上手なヒアリングを行うためのコミュニケーション能力は必要でしょう。

また、場合によってはPMやWebディレクター、Webマーケッターなどと連携しながら作業を進めていくこともあります。

さらにWebサイトを完成させるためには、裏側(バックエンド側)のシステムを構築するプログラマーやエンジニアもいますので、そういった方達との連携も必須です。

このようにWebデザイナーは、様々なポジションの人と連携しながら作業を進めていきますので、コミュニケーション能力が重要になります。

論理的思考力

Webデザイナーであっても論理的思考力が必要です。

なぜならWebサイトの作成意図は課題の解決であり、Webデザイナーは課題を解決するためのプランをデザインを通して提案しなければなりません。

つまり、単にデザインがカッコいいからでは通用しないのです。

その為、構成やレイアウトはもちろんデザインの部分であっても論理的に考えて進めていく必要があり、そうしなければそもそも仕事が与えられるチャンスはないでしょう。

デザインスキル

Webデザイナーですのでもちろんデザインスキルは必要です。

illustratorやPhotoshopのスキルは最低限必要でこの2つを突き詰めていくだけでもかなりのことが出来るようになります。

またそれ以外にもDreamweaverやXDなど様々なクリエイティブソフトがありますので、必要に応じて習得していくことをおっすめします。

作成できるデザインの質や幅が広がることで、クライアントへの提案などの質や幅も広がりますので、デザインスキルはとことん磨いていくのが良いでしょう。

コーティングスキル

最近のWebデザイナーにとっては、HTML/CSSやJavaScriptを使用したコーディングスキルが必要になってきています。

最低限JavaScriptが使えなくてもHTML/CSSのスキルと経験があれば案件自体は見つけることが出来るでしょう。

とはいえ、最近のWebデザイナーはJavaScriptまで出来る方が増えてきていますので、近い将来JavaScriptも必須になってくる可能性は高いです。

また、JavaScriptには『Angular』や『React』、『Vue』、『jQuery』など優秀なフレームワークが多くあります。

いづれかのフレームワークを習得することでより高単価の案件の獲得へ繋がることは間違いありませんし、JavaScriptのスキルが当たり前になった時、Webデザイナーとして価値を上げるためにはフレームワークの習得が欠かせないでしょう。

WebデザイナーとしてJavaScriptを習得した後は、これらのフレームワークの習得を目指してみてください。

マーケティングスキル

Webデザイナーも調査分析などのマーケティングスキルを必要とする場面が何度かありますので、マーケティングスキルを磨く必要もあるでしょう。

マーケティングスキルがあることで構成やレイアウト段階でのクライアントへの提案の質は上がるでしょうし、効果的なWebサイトの作成の役に立ちます。

さらには、Webサイトが完成しリリースした後にも調査分析は必要ですので、その業務もWebデザイナーが出来るとなると一人称で早くPDCAを回すことが出来るようになります。

このようにWebデザイナーとしてマーケティングスキルを磨くことで貴重な人材に慣れると思いますので、マーケティングスキルを磨いていく事をおすすめします。

Webデザイナーが仕事を探すために必要なこと

Webデザイナーが仕事を探すためには、必ずしておかなければならない準備があります。

それは、ポートフォリオの作成です。

経歴書やスキルシートなどとは別にポートフォリオが必要です。

ポートフォリオとは

Webデザイナーにとってポートフォリオとは、実績を紹介する作品集です。

ポートフォリオは自身の能力を伝えるツールであり、面接時にはほぼ提出を求められますので必ず準備しましょう。

最近では、個人のWebサイトを立ち上げてポートフォリオをまとめているWebデザイナーも増えてきていますが、PowerPointや Googleスライドなどで作成するのでも問題はありません。

ファイルの形式では無く中身が重要ですので、自身のやりやすい方法で作成しましょう。

ポートフォリオの作成のコツ

ポートフォリオは、単に作品を載せるだけでは無く、適切な説明も重要な要素です。

つまり、Webデザイナーに必要な5つの能力がある事を採用担当者に伝えられるものでなければなりません。

  • コミュニケーション能力
  • 論理的思考力
  • デザインスキル
  • コーディングスキル
  • マーケティングスキル

一つのWebサイトやデザインに対して、これらの要素を入れながらポートフォリオを作成していきましょう。

ただ、魅力を伝えることに頭でっかちになり文章が長くなってしまっては、逆に分かりづらくなってしまいます。

その為、出来るだけ箇条書きで説明していくなど、簡潔に魅力が伝わる文章を心がけましょう。そして詳細は、実際に面接時に話すことをおすすめします。

魅力が伝わるポートフォリオが作成できているかどうか気になる方は、様々な人に見てもらい意見を貰うようにしましょう。

ポートフォリオは、Webデザイナーの実績であり顔になるものですので、しっかり作りこむことをおすすめします。

Webデザイナーにおすすめの資格

Webデザイナーになるためには、資格は必須ではありませんが、資格を取得しておくことでアピールポイントにはなるでしょう。

Webデザイナーにおすすめの資格はこちらです。

  • ウェブデザイン技能検定
  • Photoshop®クリエイター能力試験
  • Illustrator®クリエイター能力認定試験
  • HTML5プロフェッショナル認定資格
  • Webクリエイター能力認定試験

ウェブデザイン技能検定

ウェブデザイン技能検定はWebデザイナー向けの国家資格で、試験は実技と学科で実施され、ウェブデザインに関する知識や技能、実務能力等が問われます。

階級は3つあり、それぞれ受験の際には学科と実技で下記の受験料(非課税)が掛かります。

  • 1級・・・学科:7,000円/実技:25,000円(実技はペーパー実技含む)
  • 2級・・・学科:6,000円/実技:12,500円(35歳以上)または7,000円(35歳未満)
  • 3級・・・学科:5,000円/実技:5,000円(35歳以上)または3,000円(35歳未満)

3級に関しては基本誰でも受験することは可能ですが、2級以上になると一つ下の検定に合格していることや一定の実務経験などが必要になります。

自身の能力としてアピールするのであれば、最低でも2級は取得するようにしましょう。

ウェブデザイン技能検定は、Web業界で唯一の国家試験になりますので、Webデザイナーとして一定の知識や能力を示したい方は、ぜひ目指してみてはいかがでしょうか?

Photoshop®クリエイター能力試験

Photoshop®クリエイター能力試験は、ソフトウェア活用能力認定委員会によって運営されている能力試験です。

Webデザイナーには欠かせないPhotoshopの知識や実技、実践などの能力が問われます。

Photoshop®クリエイター能力試験には、2つの階級がありそれぞれの受験料は下記になっています。

  • エキスパート:8,600円(税込)
  • スタンダード:7,600円(税込)

スタンダードは、Photoshopの基本的な操作を問う実技試験とPhotoshopを活用して指示通りの作業を行う実践試験の2部制になっており、Photoshop初心者向けの資格試験です。

エキスパートは、DTPデザインやWebデザインに関する基本的な知識問題とPhotoshopの操作に関する実技問題による1部試験とPhotoshopを活用してクライアントのニーズを満たす質の高いコンテンツ制作を行う実践問題の2部試験に分かれており、ある程度Photoshopの経験者向けになっています。

自身のWebデザイナーとしてのPhotoshopの実践能力を示したいのであれば、エキスパートを取得することをおすすめします。

どちらも受験資格はありませんので、最初からエキスパートを目指す事も可能です。

ある程度Photoshopの実践経験を積んだ後に、Photoshop®クリエイター能力試験のエキスパートを目指してみてはいかがでしょうか?

Illustrator®クリエイター能力認定試験

illustrator®クリエイター能力試験は、ソフトウェア活用能力認定委員会によって運営されている能力試験です。

Photoshop同様、Webデザイナーには欠かせないillustratorの知識や実技、実践などの能力が問われます。

illustrator®クリエイター能力試験には、2つの階級がありそれぞれの受験料は下記になっています。

  • エキスパート:8,600円(税込)
  • スタンダード:7,600円(税込)

スタンダードは、illustratorの基本的な操作を問う実技試験とillustratorを使用して指示通りの作業を行う実践試験の2部制になっており、illustrator初心者向けの資格試験です。

エキスパートは、DTPデザインやWebデザインに関する基本的な知識問題とillustratorの操作に関する実技問題による1部試験とillustratorを活用してクライアントのニーズを満たす質の高いコンテンツ制作を行う実践問題の2部試験に分かれており、ある程度illustratorの経験者向けになっています。

自身のWebデザイナーとしてのillustratorの実践能力を示したいのであれば、エキスパートは取得しておくべきでしょう。

エキスパートを受験するための受験資格はありませんので、最初からエキスパートを目指す事も可能です。

ある程度illustratorの実践経験を積んだ後に、illustrator®クリエイター能力試験のエキスパートを目指してみてはいかがでしょうか?

HTML5プロフェッショナル認定資格

HTML5プロフェッショナル認定資格は、特定非営利活動法人エルピーアイジャパン(LPI-Japan)によって運営されており、コーディングに必要なHTML5やCSS3、JavaScriptなど最新のマークアップに関する技術力と知識を認定する資格試験になっています。

Webデザイナーでもコーディングスキルは必要になってきていますので、コーディングスキルを資格で証明するにはおすすめの資格試験です。

HTML5プロフェッショナル認定資格は、2つの階級があり、それぞれ受験料は16,500円(税込)となっています。

  • HTML5プロフェッショナル認定試験レベル1
  • HTML5プロフェッショナル認定試験レベル2

レベル1では、HTML5やCSS3、レスポンシブWebデザインの作成などの基礎的なマークアップ技術が問われます。

レベル2になると、レベル1よりも高度なマークアップ技術を問われることはもちろん、JavaScriptを使用した動的コンテンツの作成能力なども問われます。

HTML5プロフェッショナル認定試験レベル2の認定を受けるためには、レベル1を合格しておく必要があります。

Webデザイナーとして、HTMLやCSS、JavaScriptなどのマークアップ技術の能力を証明したい方は、HTML5プロフェッショナル認定試験のレベル2を目指す事をおすすめします。

Webクリエイター能力認定試験

Webクリエイター能力認定試験は、サーティファイ Web利用・技術認定委員会によって運営されており、Webデザイナーに必要なWebサイト制作におけるデザイン能力とコーディング能力を認定する資格試験です。

Webクリエイター能力認定試験には2つの階級があり、それぞれ受験料は下記になっています。

  • エキスパート:7,500円(税込)
  • スタンダード:5,900円(税込)

スタンダードは、Webサイト制作に必要な基礎的な知識及びHTMLとCSSの能力を実技試験で問われます。

エキスパートになると、上記の知識や実技能力に加え、JavaScriptの知識や実技能力やリッチコンテンツ等の知識も必要になり、これらの知識問題と実技問題の試験構成になっています。

それぞれに受験資格はありませんので、最初からエキスパートの資格取得を目指すことも可能です。

Webデザイナーとして、HTMLやCSS、JavaScriptなどのコーディングスキルを資格で証明したい方は、Webクリエイター能力認定試験のエキスパートの資格を取得することをおすすめします。

まとめ

Webデザイナーは、自身が作成したデザインやWebサイトが世に出ていき、多くの人の目に触れていきますので、やりがいのある仕事であり、結果が数字に表れる仕事で、非常に魅力的な仕事です。

そして、多くの企業でのDXやIT化が促進されている今、Webデザイナーの需要はかなり高まってきています
実力と能力があれば仕事に困ることはなく、Webデザイナーとして稼いでいく事は可能でしょう。

ただ、コーディング能力やマーケティング能力などWebデザイナーに必要な能力や能力範囲も年々上がってきているようにも思えます。

これからWebデザイナーを目指す人や今Webデザイナーとして伸び悩んでいる人は、ぜひ本記事を参考にしていただき、稼げるWebデザイナーを目指してもらえればと思います。