Webデザイナーの担当領域が幅広いので役割を図式化 + エンジニアとの境界について。

本記事の内容は以下を記載しています
・Webデザイナーの分類と説明、各々の役割
・WebデザイナーとWebエンジニアの職種マップ
・フロントエンドエンジニアはデザイナーなのかエンジニアなのか

何年も前から話題にのぼっているけど曖昧なWebデザイナーの領域について、個人的な見解としてまとめてみました。
自分自身がデザイナーのどこの領域を担当しているかの説明の参考になればと思います。

僕は、学生の頃はC言語やJava、またWebページ制作について学び、卒業後にバックエンドエンジニアとして入社。5年ほど経験を得た後にWebデザイナーに転向しました。今ではデザイナー歴の方が長くなっています☺️

転向した頃はあまりUIUXという名前はあまり聞かなく、UXが少しずつ浸透してきている時でした（デザイン思考とかサービスデザインとか）。
その頃から、エンジニアや企画が「UX」というワードを知り、口にする人が増えていった気がします。

webデザイナーとして仕事をする中、特にコーディングの仕事だけするとかではなく、PhotoshopやIllustratorでバナーやアイコン、LP制作をしたり、LPのコーディングやアプリのUIUXデザインをしたりと幅広く携わらせて頂きました。

最近ではVue.jsを使って丸々サービスを作ったり、Wordpressでサイト運営したり、Shopifyを使ったショッピングサイトのコーディングなど様々ですが少しフロントエンドエンジニア寄りのお仕事が多いです。

そんなエンジニアからデザイナーへ変化し、双方を経験した目線でのデザイナーの担当領域と、各職種の違いについて、書いています。

また、必ずしもどこかの領域の人である必要もなく「私はこの領域とこの領域のこの部分をメインに活動している」としても問題なく、そのような方々の方が近年多い印象です。

■Webデザイナー

まず、Webデザイナーなのでアプリは含みません。ただし、UIもUXも他もアプリで大切な役割はあるため、Webではないデザイナーの中にも、UIUXデザイナー等はあり、Webもアプリも担当する事が多いかと思います。
僕もWebもアプリも担当するため、Webデザイナーとは名乗っていません。

UXデザイナー

UXはUser Experience。プロジェクトの中でもユーザーの事を一番考え、導く人。

カスタマージャーニーマップを作成、ユーザ心理や動向を調査して課題やアイデアを可視化したり、ユーザーインタビューを実施して実際にユーザーと話して課題を見つけたりと、ユーザーとの接点が多いです。

ユーザーとの接点が多いだけではなく、プロジェクト内での他職種との接点も多いイメージ。より良いサービスデザインを進めるには一人ではできないため、ステークホルダーを巻き込んでプロジェクトを進める必要があるためです。

また、ユーザーの事を考えるということは、ユーザーとの接点であるUIについても考える必要があるため、次に話すUIデザイナーはUXデザイナーに包有されるものと考えられる事が多いです。

UIデザイナー

UIはUser Interface。画面のインターフェースを作成する人。

理想としてはUIデザイナーは実際にどんなUIを作ることができるか把握している必要があるため、フロントエンドエンジニアの知識もあるとより良いアウトプットを作ることができます。
Javascriptでこういう動きができる、CSSでこういうアニメーションが作れる、レスポンシブデザインするにはこういった設計が必要である。
これらを知っていると実際にコーディングを始める際に、そのUI仕様を実装する実現可否や難易度もわかるためスムーズです。

デザイナーはコードがかける必要があるかはここに関連します。書けなくともできる事は把握していないと、より良いUIを提案する幅が狭くなるため積極的に情報収集が必要です。

ビジュアルデザイナー

ロゴ制作、LPのビジュアル制作、バナー制作などを行う人。

UIデザイナーが制作したUIに色付けします。元々美大出身の人が多く、PhotoshopやIllustratorが得意で、キャンペーンページなどで必要な華やかなデザインや、イラスト制作など専門性の高いスキルを持つ方が多いです。

とはいえ、UIデザイナーと分かれずにどちらも制作する人が多いと思います。SketchやFigmaを使ったUI制作はビジュアルデザイナーもUIUXデザイナーもどちらも行います。

グラフィックデザイナーに関しては未経験のため分かりませんが、ビジュアルデザイナーに近いイメージで、広告や雑誌、パンフレット、名刺など、紙媒体のデザインを主に担当されている方が多いと聞きます。より専門性が高く突き詰めた領域。

フロントエンドエンジニア

フロントエンドエンジニアにHTMLコーダー・マークアップエンジニアが包有されるイメージ。

知識・経験は人によって様々ですが、幅広く深いJavascriptの知識があり、JSフレームワーク、例えばReact.jsやVue.jsを使ったコーディングをしたり、GulpやSass、WebpackやBabelなどをNode.jsを使った実装も行います。
バックエンドとつなぐための処理も担当し、PHP / ruby / python / perlなど多岐にわたるプログラミング言語の経験がある方も少なくないです。
と言っても全てできるわけではなく、一部領域に特化してる人もいます。

HTMLコーダー・マークアップエンジニア

HTML、CSS、簡単なJavascriptやJQueryを使ったコーディングをする人。
簡単なJavascriptとは、要素のExpandなど軽微な機能追加です。
JQueryは難しい事を知らずとも、色々な機能が実装できるため、Javascriptの広い知識がなくとも、ある程度のことはできるため担当範囲に入ることが多いです。逆にJQueryを使ってはいけないという指令が出た際に、少し困ってしまう所。

勝手なイメージですみませんが、DreamweaverやSourcetreeを使っている方はコーダー。VSCode、Sublime TextやCoda、Vim、またターミナルでGitを扱う方はフロントエンドエンジニアな方が多い気がします。

■Webエンジニア

今回こちらに関しては多くは語りません。バックエンドエンジニアと、フロントエンドエンジニアと大きく分かれます。

企業によりますが、ここでいうフロントエンドエンジニアは、バックエンドエンジニアもどちらも扱うケースが多く、API開発やDB設計、サーバー構築など多岐に渡ります。
ただし、デザイナーのフロントエンドエンジニアにはあるコーダーの領域については触れません。そこがエンジニアとデザイナーのフロントエンドエンジニアの領域の差です。

フロントエンジニアはデザイナー？エンジニア？

簡単にまとめましたが、フロントエンドエンジニアはエンジニアとデザイナーの両方の領域にあります。そのため、どちらの職種なのかという課題があります。

双方の大きな違いは2つ

まず1つ目は「何を一番に考えているか」

エンジニアはどちらかというとコードや設計が綺麗であること。また表示速度やサーバーサイドの処理スピードがどれだけ早くなるかに力を入れている気がします。なので画面の要素のズレは気にしませんが、コードのインデントやコーディングルール、設計についてはかなり気にします。

デザイナーはユーザに対してどういったものを提供することで心地よく使ってもらえるのか。そのため少しのズレや色の組み合わせが変だと気持ち悪いので直したくなりますが、コードのインデントやルールは適当だったりすることが多いです。よく「1pxを調整している人」とエンジニアに言われることも。

とはいえ、「どちらも考えている人」はいます。要素のズレも気になるし、インデントや半角スペースずれてるのも気になります（自分がそう）。

2つ目は、どの領域の知識経験があり、今後活動していきたいか。

デザイナー領域の知識経験を伸ばし、活動するのであればデザイナー。逆であればエンジニア。自分がどちら寄りの思考なのか、今後どう活動していきたいか、で自らが決めれば良いと思います。

以上になります。
ここに記載した職種は一部抜粋であり、実際はもっと細分化されたものもあります。
全て個人的見解なので、人によって意見が違う事も多いですが、僕自身は双方の領域を楽しみつつ、ユーザーに対して価値を置き、デザイナーの領域の知識経験を増やしていきたいと思います。

@jszk_d