この記事では、Webデザイナーがどんな職業なのか説明していきます。
Webデザイナーとして働いてみたい方、副業としてWebサイト制作に挑戦してみたい方を対象に、事前に身につけておきたい知識や実際に任される業務をできるだけ詳しく解説します。
この記事のまとめ
- Webデザイナーの仕事はデザイン作成だけではない
- Webデザイナーとしての3種類の働き方とは
- Webサイト制作チームの6種類の役割分担とは
- Webサイト制作の具体的な流れ
- 必要とされる基礎知識とは
- キャリアの選択肢を大きく広げてくれる能力が身につく
- 実際に働くWebデザイナーの案件と単価をご紹介
- 平均年収とステップアップに求められるスキル
Webデザイナーとは
Webデザイナーとは、Webサイトの制作やデザインを行うひとです。
企業などのクライアントから依頼を受けて、代わりにWebサイトを制作します。
Webデザイナーと聞くと、美しいデザインや芸術的な作品が求められる特殊な職業と勘違いしそうですが、どちらかというとクライアントの問題を解決するWebサイトを制作することがゴールです。
どんなに良い商品でも、広告を出す年齢層や性別によって購入率が異なります。
また注文フォームが複雑だと途中で購入を断念してしまうユーザーがいるかもしれません。
Webデザイナーは、これまでの経験から培ってきた技術やノウハウを活かして、使いやすさやビジュアルを工夫して、クライアントのWebサイトを制作します。
Webデザイナーの種類
Webデザイナーには3種類の働き方があります。
クライアント | 特色 | |
インハウス | 自社 | ・社内のWebデザイナー ・所属する会社の扱うサービス・商品のWebデザインを行う |
広告代理店、制作会社 | 様々な会社 | ・チームで制作する ・会社が仕事を取ってくる |
フリーランス | 様々な会社 | ・案件獲得、納期の管理、お金の管理すべて行う ・自分で仕事を選ぶことができる |
また、制作会社のようにチームでWeb制作を分担する場合には、それぞれの役割分担があります。
実際にどういった役割があるのか全体感を把握してもらったうえで説明していきます。
- プロデューサー
- プランナー
- ディレクター
- デザイナー
- UI/UXデザイナー
- マークアップエンジニア
プロデューサー
- プロジェクトにおける管理責任者
- すべての工程の進捗を把握して適切な指揮をとる
- クライアントとの折衝を行う
- クライアントにヒアリングを行い、Webサイトの要件定義を行う
- 納期から逆算して必要な製作スタッフの人数を決める
- コストを試算して外部スタッフのハンドリング
プロジェクトに関するすべての工程を管理するため、Webサイト制作における全般的な知識と経験が求められます。
プランナー
- クライアントから要望やイメージをヒアリングして、全体的な方向性・企画設計を行う
- Webサイトの設計図を作成する
- 方向性が間違っていないか、掲載する内容が適切かチェックする
クライアントの意図や要望をきちんと把握する必要があるので「コミュニケーション能力」が求められます。
ディレクター&アシスタントディレクター
- Webサイトの設計図をもとに現場監督を行う
- 必要なスタッフの選定、管理、コンテンツの品質管理
限られた時間と予算の中で、クライアントの満足するWebサイトを作成するかが腕の見せ所です。
デザイナー
- ディレクターが作成したサイトマップやワイヤーフレームを見ながら、デザインを行う
- 大まかに描かれたワイヤーフレームをブラッシュアップする
- グラフィックソフトを使ってアイコンやバナーを作成する
デザインの流行は変わりやすいので、トレンドをキャッチするためのアンテナを常に張り巡らせていることが求められます。
UI/UXデザイナー
- UI(ユーザー・インターフェイス)設計とはパソコンやスマートフォンを操作するためのインターフェイスをユーザーが迷わずに操作できるように設計をする
- UX(ユーザー・エクスペリエンス)設計とは「楽しい」、「役に立つ」など、サイトを訪れたユーザーが得られる体験の設計をする
- ユーザー目線で「使いやすい」、「見やすい」をデザインしていきます
- すっきりした構図、綺麗な写真、見やすいカラーリング、最適な文字の大きさや表現、使いやすい検索機能を制作します
「どうすればよりユーザーが満足する体験を提供できるか?」を考え、ユーザーインタビューやマーケティング、サイト解析などを行いながら、サービス全体の設計をデザインするのがUXデザイナーの仕事です。
マークアップエンジニア
- コンピューターは文章や意味を理解できませんので、マークアップ言語を使用してコンピューターに文字や意味を認識させます
- 具体的には、「タイトル」、「見出し」、「表」、「画像」、「ボタン」、「段落」にコンピューターが分かる目印をつけていきます
- HTMLやCSSといった言語を使用します
- 自分なりのアレンジを加えてコーディングすることもできます
コーディング技術に加えて、アクセスしやすいサイト、ユーザーのストレスがないサイトを意識して作成することが求められます。
Webデザイナーの仕事内容
ざっくり解説すると、Webデザイナーの仕事は以下の5工程で説明されます。
- クライアントのヒアリング
- 構成やレイアウトを決める
- デザイン作成・編集
- (コーディング)
- (プログラミング)
①クライアントのヒアリング
Webデザイナーは、クライアントが求めるWebサイトを代わりに制作します。
従って、クライアントからWebサイトの目的、予算、納期、ターゲット、デザインイメージなどを聞き出し、具体的な完成像のイメージをすり合わせていきます。
②構成やレイアウトを決める
クライアントの目的やコンセプトをもとに、全体像やレイアウトを決めていきます。
ユーザーに与える印象、使いやすさ、見やすさに配慮してサイトの階層構造やデータ構造も決めていきます。
③デザイン作成・編集
illustrator、Photoshopなどのグラフィックソフトを使い、カラーやレイアウトの調整、ロゴ・アイコンのデザイン、写真の加工などを行います。
実際に使う代表的なソフトウェアやツールは以下となっています。
- illustrator(ロゴやアイコン、グラフの作成)
- Photoshop(写真の加工や合成、編集)
- XD(UIデザインやプロトタイプの作成)
- Sketch(UIデザインに特化)
(④コーディング)
※実際にはコーディングは別の案件として扱われる場合もございます。
HTMLやCSSなどの言語を使用してデザインを組み込み、実際にWebサイトを制作している工程を「コーディング」と言います。
- HTML(Webサイトの骨組み)
- CSS(色や文字の大きさ、位置などを装飾)
- JavaScript(Webページに動きを付けられる)
(⑤プログラミング)
※正確にはWebデザイナーが行う業務ではありませんが、次工程で行われているので参考程度に説明しています。
完成した後も更新しやすいシステムを構築するためにプログラミングを行います。
納品して完結するわけではなく、サイトの運営サポートを行ったりします。
どんな勉強をするとなれるのか?
Webデザイナーになるために特別な資格が必要ではありません。
大学卒、専門卒(Webデザインスクール)、独学など入り口は様々です。
但し、以下の基本知識は身につけておくべきです。
- HTMLとCSSの基礎概念
- illustrator、Photoshopの使い方
- 基本的はデザイン論
また、フリーランスのWebデザイナーとして活躍するためにはポートフォリオが必須です。
これは、”自分が作ってきた作品集”であり、デザイナーとしての実力を先方に示すことができます。
基礎を学ぶ段階でも将来的なポートフォリオ意識して学ぶことが効果的と言えます。
将来性と年収について
将来性について
- キャリアの選択肢が増える
- 場所や時間に縛られない働き方
- 学べば学ぶだけITリテラシーが上がる
- 副業で始めるひとも多い
キャリアの選択肢が増える
Webデザイナーとして働いていくと、多様なキャリアの選択肢が増えます。
例えば、制作会社でWeb制作の技術・経験を積めば、大手企業のインハウスとして即戦力で働くことも十分可能です。
また、ある程度の技術をもっていればフリーランスとして活躍することも視野に入ってくるかもしれません。
場所や時間に縛られない働き方
インターネット環境とPCがあれば、場所や時間に縛られずに働くことができます。
会社に勤めているサラリーマンは場所と時間の制約があるため、育児や介護をすることになったとき、どうしても離職せざるを得ないことがあります。
一方でフリーランスとして働いている場合、日中は育児、子供を寝かせてから働くといった働き方も可能です。
学べば学ぶだけITリテラシーが上がる
幅広い業種のクライアント相手に仕事をするので、Webデザイナーとして働いているとITリテラシーが上がります。
慣れてくると、クライアントの問題をすぐに発見して解決できるようになります。
ITに精通していて、クライアントの問題を早期解決できると、仮に別の業界に転職しても重宝とされるでしょう。
副業で始めるひとも多い
最近では、サラリーマンの傍らで副業をするひともかなり増えています。
ちょっとしたお小遣い稼ぎや、残業代が減ったことによるお給料の補填など理由は様々です。
その中でも案件数が多いことを理由にWebデザインが注目されています。
仕事カテゴリー別に、クラウドソーシングで案件を比較すると、①事務・カンタン作業、②ライティング・ネーミンングの次に「Web制作・Webデザイン」が入っています。
正直にお伝えすると、上位カンタン作業やライティングの案件はだれでも始めやすい分、単価が極端に低いものが多い印象です。
例えば、感想記入やアンケートに答えて数十円の報酬になってます。
従って、本格的に副業に取り組むひとは、「Webデザイン」や「プログラミング」を学習するひとが多いです。
仕事カテゴリー | ランサーズ | クラウドワークス | 合計案件数 |
事務・カンタン作業 | 874 | 137,697 | 138,571 |
Web制作・Webデザイン | 2,461 | 25,409 | 39,063 |
デザイン制作 | 740 | 25,861 | 26,601 |
ライティング・ネーミング | 710 | 121,320 | 122,030 |
システム開発・運用 | 1,918 | 8,954 | 10,872 |
翻訳・通訳サービス | 106 | 5,035 | 5,141 |
写真・動画・ナレーション | 161 | 19,785 | 19,946 |
営業・マーケティング・企画・広報 | 68 | 10,516 | 10,584 |
タスク・作業 | 624 | ‐ | 624 |
実際に募集していたWeb制作・Webデザインの仕事は以下となります。
案件 | 平均単価 | 案件例 |
バナー作成 | 2000~5000円 | ・女性向け雑貨店のトップページ用バナー ・ママ向けメディアのSNS広告バナー制作 |
サムネイル作成 | 2000~5000円 | ・美容系YouTubeのサムネイル ・YouTubeのゲーム実況動画のサムネイルの作成 |
HP(ホームページ) | 10万~30万円 | ・テイクアウト専門店のホームページ ・整備士の採用ホームページ |
LP | 6万~10万円 | ・電動歯ブラシのLPのコーディング ・英会話サービスのLP |
SNS系ヘッダー | 1万円前後 | ・「ゆっくりげべるチャンネル」のロゴ・ヘッダー作成依頼 |
年収について
一般的に、Webデザイナーの平均年収は350万~450万円ほど言われています。
求人ボックスの調査によると正社員の平均年収は453万円で、ボリュームが多いのは350万~450万円くらいとなっています。(参考:Webデザイナーの仕事の平均年収は?)
一方で、働き方も仕事の受注方法も異なるフリーランスの年収は様々です。
子育てや介護をしながら限られた時間で働くひとから、トッププレイヤーまで幅広いので、大体250万円~なんて表現がされています。
当然、トッププレイヤーは1,000万円を越えるひともザラにいます。
平均年収 | |
正社員 | 350~450万円 |
フリーランス | 250万~ |
Webデザインの他にJavaScriptを取り入れたプログラミングができる、あるいは集客を最適化するSEO対策ができる等のスキルがあると受けられる仕事の幅が広がり、受け取る報酬もUPします。
まとめ
今回の記事では、Webデザイナーの仕事について解説してきました。
- Webデザイナーは”デザイン作成”よりも”クライアントの問題解決”が仕事
- 3Webデザイナーは、インハウス、制作会社・広告代理店、フリーランスと3種類の働き方がある
- プロデューサー、プランナー、ディレクター、デザイナー、UI/UXデザイナー、マークアップエンジニアそれぞれの役割と仕事内容
- ヒアリング→構成やレイアウトの作成→デザイン作成・編集→(コーディング→プログラミング)の流れで進める
- グラフィックソフトとコーディングの基礎は学んでおくべき
- 場所や時間に縛られない働き方やITリテラシー向上の意味でもキャリアの選択肢を広げてくれる
- クラウドソーシングでもWeb制作・Webデザインの案件は豊富、バナーやサムネイルなら3千円程度、HPやLPなら10万円近くの単価の仕事がある
- 正社員としての年収は350~450万円。フリーランスは人によるが1000万円プレイヤーもザラにいる。
きちんと学んでいけば、着実に能力が身につくので今後のキャリアの糧となり選択肢を広げてくれるでしょう。
そのためにも、まずはコーディングの基礎、グラフィックソフトの基礎知識を学んでいくことをお勧めします。
仮に合わなかったとしても、ITリテラシーは上がりますし決して無駄な勉強にはなりません。