IT化によって多くの企業がインターネットを活用するようになったことで、WEBデザイナーという職種が注目されています。
WEB業界に詳しくない人でも「ホームページのデザインとかをするんだよね…」くらいはなんとなくイメージが湧くかもしれません。
しかし、調べてみると仕事内容は細かい分類がされていたり、「フロントエンドエンジニア」「コーダー」といった職種の情報も一緒に出てきて混同することが多いです。
今回は、WEBデザイナーという職種について掘り下げてみるだけでなく、よく混同されるフロントエンドエンジニアやコーダーといった職種についても取り上げ、その違いや共通点についてご紹介していきます。
前提知識 – WEBサイトってどうやってできるの？
それぞれの職種の解説に入る前に、WEBサイトがつくられる工程について簡単に知っておきましょう。
1.フロントエンドとバックエンド
WEBサイトの構築工程では、大きく分けて「フロントエンド」と「バックエンド」の2工程に分けて考えることができます。
フロントエンドとはWEBサイトの中で閲覧する人が直接触れる部分を作る工程のことで、具体的には装飾や見出しのフォント、動きのあるページデザインなどが挙げられます。
一方バックエンドとは閲覧する人が直接触れない部分を作る工程のことで、具体的にはデータベースとサイトのやり取りなどが挙げられます。
本記事で取り上げるWEBデザイナー・フロントエンドエンジニア・コーダーはいずれもフロントエンドの工程において起用される職種の呼称です。
2.基本的に「設計」→「実装」の流れで作っていく
WEBサイト構築ではフロントエンド・バックエンドに関わらず基本的に設計→実装の順序に従って工程が進んでいきます。
もう少しシンプルにいうと、抽象→具体の流れで進んでいくということです。
フロントエンドの設計では「ここはこんな装飾を施したい」「ここの枠にカーソルを合わせたときに動きが欲しい」というような、見た目や使い心地に関わる抽象的な理想像を詰めていきます。
そして実装では、設計の内容をHTMLやCSS、JavaScriptでどうやって実現していくのかを考え、決定した手段で実際に作っていきます。
この話を聞くと、見た目一つ作るのにも様々な能力が必要とされることが想像できますよね。
WEBデザイナーの仕事内容
1.WEBデザイナーはWEBサイトの見た目の設計を担う
WEBデザイナーは、フロントエンドの中のデザイン設計を担当する職種のことを指します。
特にレイアウトや構成・装飾など見た目に関する設計が主な業務であり、サイトのコンセプトやターゲットに合わせたデザインの提案が求められます。
基本的には設計がWEBデザイナーの役割ですが、中には自分で設計したものを実装する作業までこなす人もいます。
2.デザインのセンスとスキルが必要となる
WEBデザイナーは見た目のことを考えることが多いですから、そのWEBサイトに合ったデザインを具現化するセンスが求められます。
また、設計しても実現できなかったら意味がないですから、Adobe IlustratorやPhotoshopなどのデザインツール、HTML&CSS、視覚や色彩に関する知識・スキルが求められます。
フロントエンドエンジニアの仕事内容
1.フロントエンドエンジニアはデザインをサイトに落とし込む実装の部分を担う
フロントエンドエンジニアはデザイナーの設計をもとにその実装を行う職種のことを指します。
特に動きをつけたページデザインなどはデザインツールやCSSで表現できないものもあるため、JavaScriptやPHPなどのプログラミング言語を使って実装します。
2.デザイン・プログラミングでアウトプットするスキルが必要となる
フロントエンドエンジニアには、Adobe IlustratorやHTML&CSS、JavaScriptなどを使って実際にデザインをアウトプットするスキルが求められます。
デザイン設計だけなら、それらの技術に関して表面的な知識があれば業務は不可能ではないですが、フロントエンドエンジニアは実際にコードを書いて実装をするため、ツールやプログラミング言語に関して体系的に理解し、手を動かして具体化できる必要があるのです。
3職種の中で唯一呼称に「エンジニア」とついているのはこのことからきていると思われます。
コーダーの仕事内容
1.コーダーはフロントエンドの実装のみを担う
コーダーはデザイナーの設計をもとにその実装を行う過程「コーディング」を担う職種を指します。
コーディングとは、設計上のレイアウトや機能をHTML&CSS、JavaScriptのコードを書いて実際に表示できるようにする作業のことです。
2.業務内容はフロントエンドエンジニアとほぼ同じ
察しのいい方は思ったでしょうが、工程上の役割だけで考えればコーダーはフロントエンドエンジニア同じ職種であるといえます。
これは筆者の感覚ですが、コーダーという呼称はやや古典的なものです。
数年前のWEBサイト構築の求人では、HTMLのコーディングのみを行う「HTMLコーダー」、おなじく「JavaScriptコーダー」などがありましたが、今ではあまり見かけません。
プログラミングブームにより、フロントエンドのコーディングを一貫してできる人材が多くなっていることから「フロントエンドエンジニア」での採用も増えた、ということが背景にあるのかもしれません。
WEBデザイナーとフロントエンドエンジニアの違い
1.必要なスキルセットによって区別されることが多い
前述したとおり「フロントエンドエンジニア≒コーダー」として、WEBデザイナーとフロントエンドエンジニアの違いについて考えたときに、求められるスキルセットによる区別が一番わかりやすいです。
WEBデザイナーは設計や装飾画像・バナーの制作が主な業務になるので、視覚認識や色彩の知識、Adobeデザインツールのスキルが優先的に求められます。
一方フロントエンドエンジニアは、HTML&CSS、JavaScriptによるフロントエンドのエンジニアリングスキルが優先的に求められます。
現場では人材も技術も混在していることが多いですが、少なくとも採用の段階ではこのような求められるすきるで2つの職種を区別して問題ないと思います。
2.職種にまたがってスキルを持つ人材は希少価値が高い
このように言葉の意味が区別しにくい2つの職種は、実際現場でも非常に関係が近いことが多いです。
なので、どちらのスキルも持った人材というのは企業からしても非常に採用ニーズが高いといえます。
実際に手を動かすことができる程度の知識があれば、もう一方とのコミュニケーションも円滑になりますからね。
まとめ
今回は、WEBデザイナーという職種について、一緒に語られることが多いフロントエンドエンジニアやコーダーといった職種と合わせて解説し、その違いやそれぞれに求められるスキルについてご紹介してきました。
WEB業界の職種は横文字が多く、間違って理解してしまい「これって思ってた仕事と違った…」ということもたくさんあります。
WEB業界へのスキルアップ、転職を目指す人は、役職やスキルの意味までしっかり理解して勉強・転職活動を進めるようにしましょう。