業界/資格

Webデザイナーとは？仕事内容・スキル/資格・未経験から目指すには？

2023年06月09日

技術

はじめに

WebデザイナーはIT関係の仕事のなかでも人気の職種です。そんなWebデザイナーの仕事内容や将来性、気になる年収、未経験からWebデザイナーになるための方法などをご紹介します。

Webデザイナーとは何か？

Webデザイナーとはどのような職種でしょうか？　企業やお店のホームページのデザインを行う仕事というイメージはあると思いますが、そこから一歩踏み込んで、Webデザイナーの仕事内容をより具体的に紐解いていきましょう。

Webデザイン

Webサイトのデザインに携わるデザイナーのことをWebデザイナーと呼びます。
ページのレイアウトや構成などを考え、見栄え良く、見やすく、わかりやすくデザインするのがWebデザイナーの主な役割です。企業や組織、店舗などにおいて、独自のWebサイトを持つことが一般的となった今、Webデザイナーは欠かすことのできない存在となっています。

グラフィックデザイナーとの違い

グラフィックとは一般的に、装飾化された文字やロゴ、イラストや図などを指します。これらグラフィックをデザインする仕事がグラフィックデザイナーです。雑誌やポスターなどの紙媒体、商品パッケージなど、さまざまな媒体が対象となります。
一方Webデザイナーがデザインする対象はWebサイトです。昨今はスマホアプリの画面デザインなどを行うこともあります。
Webデザインのなかにもグラフィックデザインの要素はあるのですが、それはWebサイトをデザインしていく上でのひとつの工程と捉えると良いでしょう。

Webデザイナーの主な仕事内容の流れ

Webデザイナーの仕事はデザインをすることだけに留まりません。
以下ではWebデザイナーの主な仕事内容や流れを見ていきましょう。

1.ヒアリング

顧客から要望のあった作成・改修したいWebサイトの要件をヒアリングします。要件はWebサイトの見た目以外にも、達成したい目的や盛り込みたい機能など多岐にわたります。ヒアリングの際はデザイナー単体ではなく、プロデューサーやディレクターに同行する場合が多いです。
ヒアリングした結果を受け企画書にまとめます。企画書自体はディレクターがとりまとめますが、この中のデザインに関わる部分はWebデザイナーが担います。

2.コンセプト設計

コンセプトとはWebサイトの方向性のことを指します。Webサイトで実現したいこと、ターゲット層、市場における顧客のポジションや競合などの状況を踏まえ、企画書に盛り込み提案します。
全体のコンセプト設計を受け、デザインコンセプトを策定し提示します。コンセプトワードやイメージと合わせ、ターゲットのペルソナを提示する場合もあります。
デザインコンセプトの策定にあたっては、案件の規模が大きいケースやWeb以外の展開もある場合は、アートディレクターが主体となって作成することも多いです。

3.ワイヤーフレームの作成

ワイヤーフレームとは、Webサイトのレイアウトやページを構成するコンテンツの配置を決定するための設計図です。
ページタイトル、パンくず、メインメニュー・サブメニューなどのナビゲーションから、個々のコンテンツの配置まで、こと細かく作成します。サイト全体の構成や階層構造、レスポンシブ対応なども意識しながら設計していきます。設計にあたっては、UI（User Interface）ユーザーインターフェースやUX（User eXperience）ユーザーエクスペリエンスの観点も重要となります。ワイヤーフレームの作成はWebディレクターが担うことが一般的です。
トップページやカテゴリートップなどは、実際のページイメージをデザイン案として複数案提示します。
なお最近は、SketchやAdobe XD、Figmaといったデザイン作成ツールを使用しワイヤーを作成、プロトタイプ（試作）にて実際にどのように動くかを確認するといったケースも増えています。

4.グラフィックの制作

Webサイトの詳細なデザインを制作します。一般にイメージされるデザイナーの仕事にもっとも近い工程です。
メインビジュアル、写真素材の選定や加工、どのようなフォントを使用するかなどサイト全体のデザイン面を作り上げていきます。
PhotoshopやIllustratorといったアプリケーションソフトもグラフィック制作のツールとして使用します。
後工程のためのエレメントリスト（タイトル、ボタン類、表組み等ページを構成する要素のデザインパーツ化したもの）も必要により用意します。

5.コーディング

コーディングとは、グラフィック制作で作られたWebデザインをもとに、HTML（プログラミング言語）やCSS（スタイル指定言語）を記述してWebサイトの実装を行う工程を言います。一般的にはWebデザイナーではなく、コーダーと呼ばれるコーディング作業を専門とする者が担当します。また動的なページの場合は、フロントサイドエンジニアが関与し仕上げていくこともあります。

6.テスト

コーディングを終えたページについては、実際に想定通りに動作するかのテストを行います。
まずは社内プレビューにて、基本動作のほか、外部リンク・ページ間リンクの遷移や誤字脱字まで細かくチェックを行い、動作不良や誤りがあれば修正します。その後は本番と同じ環境にデータをアップし、客先プレビューを実施します。
ボリュームの多いページに関しては、カテゴリー単位など分割してプレビューを行うこともあります。

Webデザイナーの働き方の種類

Webデザイナーの働き方にはどのような種類があるでしょうか。インハウスデザイナー、広告代理店・制作会社、フリーランスという3つの働き方を見ていきましょう。

インハウスデザイナー

インハウスデザイナーとは、企業などの事業会社内でデザインを担当するデザイナーを指します。デザイナーは基本的にクライアントから制作を依頼されそれを受託する仕事ですが、インハウスデザイナーの場合は、その依頼元が自社になります。したがって制作物としては、自社の商品や広報物などの自社ブランドになってきます。規模にもよりますが、比較的小規模な場合は、Webデザインだけではなく、自社に関わるさまざまな媒体のデザインを担う場合が多いです。

広告代理店・制作会社

広告代理店や制作会社、デザイン事務所は、クライアントからの依頼を受け、制作物を作り上げていくのが仕事です。会社により得意とする分野や業界があったりもしますが、大手広告代理店の場合は、さまざまな仕事が舞い込みます。例えば新商品の発売に伴う制作では、CMを始めとする映像や紙媒体に載せる広告、商品自体のロゴやパッケージ、プロモーションやキャンペーンの企画もあります。Web制作もこれらの一部として同時並行で走ります。記者発表や出稿の期日が厳密なため、非常にタイトなスケジュールであるとともに、発表されるまでは機密情報のため、制作にあたっても厳重な管理が必要となってきます。

フリーランス

フリーランスとは、会社の社員として雇用契約を結ばずに、業務委託で制作を請け負う形態を言います。
クライアントから直接依頼を受ける場合もあれば、広告代理店や制作会社から同社が請負った仕事を再請負という形で担当するケースもあります。
会社に所属をしないぶん比較的自由な立場で仕事ができますが、すべて自分が担うといった心構えは必要です。成果物の品質はどうだったか、納期は遵守されたかなど、仕事の評価が次の依頼のあるなしにダイレクトにつながるシビアな働き方とも言えます。

Webデザイナーに向いている人の特徴

Webデザイナーに向いているのはどういった人でしょうか。向いている人の特徴をまとめてみましたので、自分に当てはまるか見ていきましょう。

デザインが好き

デザイナーの仕事はそもそもデザインが好きでないと勤まりません。多くの人の目に触れるなど、皆があこがれるような仕事もありますが、業界向けや会社・組織の中でしか使われないような制作物の仕事もあります。
選り好みができる世界ではありませんので、対象がどのようなものであれ、自分の感性をデザインという形で表現できることに喜びを感じる心持ちがまずは必要となってくるでしょう。

地道な作業が好き

一見華やかなイメージがありますが、デザイナーの仕事は地味な作業の積み重ねです。クライアントワークである以上、自分の思い通りに進まないことも少なくありません。微細な修正や、地道な単純作業が必要となることも多々あります。そういった作業でも苦痛と感じず、黙々と続けられる人はWebデザイナーに向いていると言えそうです。

神経質（繊細）

コーディングを終えたWebサイトのデザインチェックはWebデザイナーの仕事です。自身のデザインどおりにコーディングされているか、表示がおかしくなったり、崩れたりしてはいないか細かく確認します。1ピクセル上・2ピクセル右にずらすといった修正をすることもあります。細部まで目の行き届く、繊細、ある意味神経質な人が向いているとも言えるでしょう。

トレンドに敏感

デザインにはその時々の流行り廃り、トレンドがあります。Webサイトのデザインについてもその例に漏れません。いま何が流行っているか、反対に一昔前に流行ったものは何かといった情報はWebデザインを行ううえでも非常に大切です。情報感度の高い人、トレンドに敏感な人がWebデザイナーには向いていると言えます。

Webデザイナー職のやりがいとは？

Webデザイナー職のやりがいには何があるのでしょうか。Webデザイナーが実際にどんなことにやりがいを感じているのか見ていきましょう。

自分の制作物を世に出せたとき

Webデザインはブラウザの画面に映し出され非常に多くの方の目に触れます。クリエイターの欲求のひとつに、自身の作品を世に送り出したいという想いがあると言われますが、まさにその状態を経験できるのがWebデザイナーです。

自分の制作物から成果が出たとき

顧客がWebサイトを制作するのには何らかの目的があるはずです。例えば商品の販売やサービスの提供、あるいは自社の採用業務かもしれません。その目的が達せられたとき、何かしらの成果がでたときは、自身のデザインがその結果に寄与したという意味で、大きな達成感を感じられることでしょう。

口コミ/紹介で依頼が来たとき

フリーランスに限らず、企業に所属してWebデザイナーをしている場合にも、直接デザイナーとして指名される場合があります。あのサイトをデザインした方にお願いしたい、前回のデザインが良かったので今回もまたお願いしたいといった次第です。
数あるWebデザイナーのなかから、口コミ/紹介で依頼が来たわけですから、大きな自信とともに、やりがいにもつながっていきます。

Webデザイナーに求められるスキル

Webデザイナーに求められるスキルにはどのようなものがあるのでしょうか。デザイン面、テクニカル面、対人面という観点で見ていきましょう。

デザインの基本的スキル

Webデザイナーは対象がWebサイトというだけでその本質はデザイナーです。それゆえデザインに関する基本的なスキルはあるのが普通と認識しておきましょう。色使いやレイアウト、文字の扱いなど、媒体を問わず求められるスキルです。
その上でWebデザイン固有のスキルも身につける必要があります。紙ではなくモニター越しに閲覧する、クリック・タップ・スクロールする、リンクがあり階層構造となっている点など、Webにはさまざまな特徴があります。これらを理解し最適なデザインを作り上げるスキルが、Webデザイナーとして求められる第一のスキルと言えるでしょう。

UI/UXデザインのスキル

きれいに見栄え良く仕上げるのがWebデザインの根幹ではありません。どんなに美しいデザインでも、使い勝手が悪かったり、見にくかったりしては意味がありません。そのためWebデザインにはUIの知識が必須です。UIはひとことで言えば操作性です。ユーザーが行いたい操作ができるか容易に判断がつく、簡単に行えるといった点がポイントになります。
一方UIとともに使われる言葉としてUXがあります。「ユーザーが製品やサービスで得られる体験」という説明が一般的です。UXの一部にUIがあります。サイトを利用したユーザーにどのような体験を与え、価値を創造できたか、その一翼を担うのもWebデザイナーの仕事です。

デザインツールのスキル

Webデザインを作成していくためにはさまざまソフトウエアをツールとして使用します。写真等の画像を加工するPhotoshop、イラストやロゴの作成にはIllustratorなど、昔から使われてきたツールは、業務上支障がないように使えて当然と考えておきましょう。
また、Web とモバイルのUIデザインとWebデザインツールとして有名なSketchやプロトタイピング作成ツールのAdobe XDなど、デザイン・プロトタイプツールも登場し、次の工程との連携等含めデザインワークはより便利になってきました。
新しいツールをどこまで使用していくかは、所属先やプロジェクトによってそのスタンスは異なりますが、メジャーなツールは一通り使えるようになっておくと重宝されるでしょう。

SEOとアクセス解析

Webサイトはユーザーに閲覧してもらわなければ存在意義がありません。かつ、どんな人に見てもらいたいか、想定するターゲットに訪問してもらい、コンバージョン（購入・応募など）につなげる必要があります。そのためには、SEO（検索エンジン最適化）やアクセス解析が不可欠です。これらは専門のスタッフが担う場合が多いですが、サイトを一から立ち上げる際や、アクセス解析をもとに何らかの改修を行う際などに、デザイナーも最低限の知識を有していることが望まれます。

HTML/CSS

HTMLはWebページを表示するためのマークアップ言語、CSS（Cascading Style Sheets）はページの装飾などのスタイルを定義するための言語です。Web制作の実務では、これらを使ったコーディングはコーダーが担当しますが、小規模サイトやフリーランスで受託する場合はデザイナー自身が行う場合もあります。またデザインをするための基本的な知識として有しておくことも大切です。

JavaScript/jQuery

JavaScript（ジャバスクリプト）はクライアント側（Webブラウザ）で実行されるプログラミング言語で、JavaScriptを容易に記述できるようにしたライブラリがjQuery（ジェイクエリー）です。
フロントサイドの動的な処理については、フロントサイドエンジニアが担当しますが、WebデザイナーがUIを検討していくうえで、どのような動作がフロント側で可能かなど理解しておく必要はあります。

コミュニケーションスキル（読解力）

どのようなビジネスにおいても重要となるコニュニケーションスキルですが、Webデザイナーにとっても非常に大切です。
クライアントやディレクターの要求や意図をくみ取りそれをデザインに落とし込む際、そして作ったデザインをクライアントに提示する際などに、聴く・話すといった基本的なコミュニケーション力が試されます。
また、言葉のボキャブラリーが、そのままデザインの引き出しになることもあります。

資格は必要ない？資格を取得するメリット

Webデザイナーとして活躍するには資格は必須なのでしょうか？ Webデザイナーにおすすめの資格や検定について見ていきましょう。

正確な情報と知識を習得できる

Webデザイナーになるのに資格は必須ではありません。取得していると、正確な知識・情報を持っているというアピールにはつながりますが、Webデザイナーにとって最も重要なのはポートフォリオと言えます。

おすすめ資格/検定は？

Webデザイナーにおすすめ資格と検定をご紹介します。

ウェブデザイン技能検定

Webデザイナーの国家資格として厚生労働省が唯一認定している資格です。受験資格はありません。試験は実技と学科試験の2つが実施されます。
1級から3級まであり、2級及び3級の合格者には特定非営利活動法人インターネットスキル認定普及協会から、1級の合格者に対しては厚生労働大臣から「ウェブデザイン技能士」の合格証書が発行されます。

Webデザイナー検定

Webデザイナー検定は、公益財団法人画像情報教育振興協会（CG-ARTS）が主催する資格です。ベーシックとエキスパートの2種類があり、受験資格はありません。Webに仕事として関わる人に向けた基礎的・標準的な知識を認定する試験です。

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

特定非営利活動法人エルピーアイジャパンが主催するHTML5/CSS3/JavaScriptなどに関する最新の知識・技術力を認定する試験です。
試験にはLevel1とLevel2の2つのレベルあります。
Level1は、マルチデバイス対応のWebコンテンツ制作の基礎について、Level2はWebアプリケーションやシステム連携についての知識が問われます。

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

Photoshopクリエイター能力認定試験は、株式会社サーティファイが実施している民間資格です。
世界標準のグラフィックツール「Photoshop」について、画像の作成や、問題文の指示に従って1つの作品を作り上げる力などを測定・評価する試験です。エキスパートとスタンダードの2種類の試験があります。

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

Illustratorクリエイター能力認定試験は、こちらも株式会社サーティファイが実施している民間資格です。
世界標準のグラフィックツール「Illustrator」について、デザインのパーツの作成し、問題文の指示に従って新規ドキュメントから1つの作品を作り上げる実践的な力を測定・評価する試験です。Photoshopクリエイター能力認定試験と同様に、エキスパートとスタンダードの2種類の試験があります。

Webデザイナーの将来性と年収

Webデザイナーの今後、その将来性は期待できるのでしょうか？また気になる年収についても見ていきましょう。

プラスアルファのスキルがあれば将来性は高い

IT人材の不足が叫ばれるなか、その一翼を担うWebデザイナーにも高い需要が続いています。特にWebデザインの領域のなかでも、UI/UXデザイナーに対する求人は非常に多い傾向にあります。
企業に止まらず公共団体等のサービスでもオンライン化が進み、ITに不慣れなユーザーが増加している点も、UIやUXの重要性に注目が集まっている大きな理由と言えます。単にデザインができるだけでなく、UI/UXに関する知見、アクセシビリティに関する知識など、プラスアルファのスキルを持ち独自の強みをもつことがより大事になってくるでしょう。

Webデザイナーの年収は？

Webデザイナーの平均年収は300万円台後半となっています。
年収レンジが低いという印象を受けるかもしれませんが、その要因はWebデザイナーの年代が比較的若く、20～30代中心な点が大きいものと考えられます。
若い世代の収入の低さは他の職種でも同様ですが、年功序列が弊害となっている日本社会において、IT業界のように新しくかつ成果が求められる業界においては、今後年収の問題も是正されてくるものと思われます。

Webデザイナーのキャリアパス

Webデザイナーのキャリアパスとしては、次のような職種があります。

クリエイティブディレクター/アートディレクター
Webデザインに限らず、より広範囲の制作物について、そのクリエイティブに責任を持ち、プロジェクトを統括するポジションです。
ブランドの広告を手がけるなど、華やかな側面のある職種と言えるでしょう。
UIデザイナー
UI設計を専門に行う職種です。グラフィックを作成するというよりは、ワイヤーレベルで適切なユーザビリティを設計し顧客に提案する仕事と言えます。現状のUIについて意見を求められる、改善案を提示するなどのコンサルタント的な役割を担うケースも多いです。
Webディレクター
企画から、サイトマップ・ディレクトリ構成の作成、ワイヤーの量産、制作の進行管理も行うポジションです。Web制作全般に関わりたいと感じた場合は検討しても良い職種です。
フロントエンジニア/Webマーケター
コーディングやJavaScriptなどの動的処理に適性があると感じた場合は、フロントエンジニアの道へ進むのも良いでしょう。またSEOやアクセス解析に興味がある場合はWebマーケターという職種を考えてみるのも良い選択です。

Webデザイナーになるには？

未経験からWebデザイナーになるにはどうしたら良いのでしょうか？勉強法や自分のスキルをアピールするための方法などをご紹介します。

未経験からでも目指せる？

Webデザイナーは未経験でも目指すことは可能です。ただ多くは美術系の大学や専門学校で学習を積んだ方が多いため、転職・就職の道は容易ではありません。アシスタントとして働きながらスキル磨きや経験を積むなど、時間と労力が必要になることや、面接でアピールできる作品作りも必要でしょう。

書籍/オンラインツールを使う

Webデザインに関してはさまざまな書籍が市販されていますので、まずは初心者向けのものを読んでみることをおすすめします。HTML/CSSから各種デザインツールの使い方まで一通り学ぶことができます。書籍が苦手な方にはスクールもあります。また最近はネット環境を使って学べるサービスもあります。基本的な内容は無料で使えるところもありますので、一度利用してみると良いでしょう。

ポートフォリオを作ろう

ポートフォリオとは自分が創り上げた作品をまとめ、その能力を相手方に伝えるためのツール・作品集です
デザイナーを志望する場合は、自身の制作物を掲載したポートフォリオの作成が必須です。これまでの案件や自主制作のWebサイトやバナーデザインを10〜20点載せるようにしましょう。制作意図や案件で得られた成果（コンバージョン）などを合わせて記載するのもポイントです。
なお仕事の内容によっては、自身のポートフォリオ・成果としてはならない物もありますので注意は必要です。

まとめ

DX化が進展していくなかでITサービスが増え、Webを使ったシステムはまさにその中心にあると言えます。その中でも、Webデザイナーの仕事は、画面を見やすくわかりやすく、ユーザーにとって使いやすいものにするという重要なポジションにあります。今後も需要が途切れることは無いでしょう。
単にデザインができるだけでは、仕事の広がりは見出しづらいですが、関連する知識や技能を習得していくことによって、活躍の場はますます大きくなっていくでしょう。