私は会社にWebデザイナーとして雇われているのですが、これまでデザイナー、コーダー、フロントエンドと一通りやってきました（すべて浅く広くなので、本職の方の足元にも及びません）。
そういえばWebデザイナーの業務領域ってどこまでやるものだろう、とふと思ったので考えてみました。求人票を眺めていても、会社によって求められる範囲がばらばらなんですよね。
ここで紹介する分け方は、筆者がこれまで在籍した企業でのものです。Web業界には職種名の統一された定義がなく、呼び方も範囲も会社ごとに変わります。「一般的にこう決まっている」という話ではありません。
Web制作に関わる職種
まず全体像から。Web制作に関わる職種を大まかに3つのグループに分けてみました。
| グループ | 主な職種 |
|---|---|
| ディレクション関連 | Webプロデューサー、Webディレクター、プランナー |
| クリエイティブ関連 | Webデザイナー、グラフィックデザイナー、コーダー、フロントエンドエンジニア、バックエンドエンジニア |
| マーケティング関連 | Webマーケター、Web広告運用者、Webアナリスト |
Webデザイナーはクリエイティブ関連に入ります。会社によっては分業しておらず、Webデザイナーがディレクションをしてバックエンドまで作業する人もいるかと思いますが、今回は分業した場合の話です。
Webデザイナーとは
一般的な印象としては「Webサイトを制作する人」でしょうか。
クリエイティブ面の流れは、だいたいこう進みます。
-
デザイン制作
ワイヤーフレームをもとに見た目を作り込みます。
-
実装（コーディング作業）
デザインをHTML / CSSでブラウザ上に再現します。
-
デバッグ
ブラウザや端末ごとの表示崩れ、リンク切れなどを確認して直します。
-
納品
サーバーへアップして公開、完了です。
担当分野とスキル
デザイナー、コーダー、フロントエンドエンジニアの3つを並べてみます。
代表的なデザインツールはPhotoshopとIllustratorですが、最近はFigmaを使ってデザインする方も増えている印象です。
真ん中のコーダーが、デザインツールとコーディングの両方に足をかけているのがわかると思います。実装担当者はデザイナーから共有されたデータを書き出したり、軽微な修正をしたりするので、デザインツールの知識も必要になるからです。
フロントエンドエンジニアはJavaScriptやPHPでサイトに動きをつけたり、よりプログラミングが必要な部分を担当します。
どこまでがWebデザイナーか
本題です。さきほどの図に職種名を重ねてみます。
私が経験してきた企業では、デザインとコーディングができるのがWebデザイナー、複雑なJavaScriptやPHPの構築ができるのがフロントエンドエンジニア、という分け方でした。
見てのとおり、コーダーの領域は両方が重なっています。Webデザイナーはデザイン寄りのコーダーまで、フロントエンドエンジニアはプログラミング寄りのコーダーから先、というイメージです。
重なっているということは、どちらの職種もコーディングはできる前提ということでもあります。Webデザイナーを目指すなら、デザインだけできればいい、とはなりにくいのが実際のところです。
フロントエンドエンジニアとの違い
この2つはよく混同されますが、図で見ると起点が違うだけだとわかります。Webデザイナーは見た目から入って実装まで下りてくる。フロントエンドエンジニアは実装から入って、より複雑な仕組みのほうへ伸びていく。すれ違うのがコーダーの領域、という関係です。
なので「どちらが上」という話ではなく、単に得意な方向が逆というだけだと思っています。
Webデザイナーに必要なスキル
私の経験上、この3つができれば業務はこなせています。
- PhotoshopやIllustratorなどのデザインツールが使える
- コーディング作業ができる
- 簡単なJavaScriptやPHPを使うことができる
3つめの「簡単な」が大事なところで、ゼロから複雑な仕組みを組める必要はありません。既存のコードを読んで必要な箇所を直せる程度でも、現場では十分に戦力になります。
デザインツールについては、まずPhotoshopとIllustratorをおさえておけばデータの受け渡しで困ることは少ないはずです。そこにFigmaが加われば、対応できる案件の幅はさらに広がります。
会社によって範囲は変わる
同じ「Webデザイナー募集」でも、書かれている仕事内容がまるで違うことがあります。分業がどこまで進んでいるかが会社ごとに違うためです。
| 環境 | 業務範囲の傾向 |
|---|---|
| 大きめの制作会社 | 分業が進んでおり、担当が明確に分かれやすい |
| 小規模な制作会社・事業会社 | ディレクションや更新作業まで幅広く担当しやすい |
| フリーランス | 提案から納品、公開後の運用まで一人で担当することが多い |
求人名だけで判断すると、入社後に想定と違ったということが起こりがちです。面接では「デザインとコーディングの比率」「JavaScriptをどこまで書くか」あたりを具体的に聞いておくと、だいぶ防げます。
よくある質問
Webデザイナーはコーディングができないとダメですか？
会社によりますが、できたほうが選択肢は広がります。分業が進んだ大きな制作会社にはデザイン専任の求人もありますが、数としては多くありません。デザインとコーディングの両方ができる前提の会社のほうが、体感としては多い印象です。
デザインとコーディング、どちらから学ぶべきですか？
興味が持てるほうからで問題ありません。どちらから入っても最終的にはもう一方に触れることになるので、続けられるほうを選んだほうが結果的に早いです。
Webデザイナーからフロントエンドエンジニアに転向できますか？
コーダーの領域が重なっているぶん、まったくの別分野に移るよりは進みやすいはずです。HTML / CSSの土台がある状態からJavaScriptを本格的に学ぶことになります。実際に両方を行き来している人は珍しくありません。
デザインツールはどれを覚えればいいですか？
まずPhotoshopとIllustratorをおさえておけば、データの受け渡しで困ることは少ないはずです。加えてWeb制作の現場ではFigmaを使うケースが増えているので、あわせて触っておくと対応できる幅が広がります。
最後に
分業している環境であれば、デザインからコーディングまでがWebデザイナーと呼ばれる職種の主な業務です。
ですが、その範囲だけこなせば良いわけでもないので、デザインを極める人、エンジニアを目指す人、どんどん自分ができる範囲を増やして、競争の激しいWeb業界を頑張って生き抜きましょう。
