新卒でフリーランスになって月144万円かせぐまでの全てをnoteにまとめました

ウェブデザイナーとコーダーの違いとは?Web制作の職種を役割ごとに紹介します

「ウェブ制作に興味があるけど、デザイナーとコーダーって何が違うんだろう。マークアップエンジニアとフロントエンドエンジニアは?ウェブディレクターって職種も聞いたことあるし、よくわからない…」

と思っている方。

ウェブ制作を仕事にすると、手に職をつけることができるのはもちろん、場所にとらわれない働き方を実現することもできます。

とはいえ、デザイナーやコーダー、エンジニア、ディレクターなど職種が多く、しかもカタカナばかりでわかりにくいですよね。

そこで、この記事では、

  • 結論:Web制作の職種を役割ごとにまとめました
  • やりたいことや目標によって目指すべき職種は変わる

の順にWeb制作の仕事を役割ごとに紹介します。

専門用語ばかりで難しそうと感じるかもしれませんが、概要をつかむだけならハードルは高くありません。

まずはこの記事で、Web制作の職種について違いをおさえましょう!

結論:Web制作の職種を役割ごとにまとめました

Web制作の職種には、以下の5つがあります。

Web制作の職種まとめ
  1. ウェブデザイナー:サイトのデザインをする人
  2. コーダー:デザインをコードで再現する人
  3. マークアップエンジニア:デザインをコードで再現し、構成なども考える人
  4. フロントエンドエンジニア:コーディング+ウェブのプログラミングをする人
  5. ウェブディレクター:サイトの企画をして、クリエイターに指示を出す人

それぞれ、詳しく紹介しますね。

1. ウェブデザイナー:サイトのデザインをする人

web-design-designer-corder03
ウェブデザイナーはその名の通り、サイトのデザインをする人です。IllustratorやPhotoshopなどを使って、サイトの見た目を作ります。

これから紹介するどの職種よりも、自分が作ったものが目に見えやすいのがウェブデザイナーです。なので「Web制作=ウェブデザイナー」と考えている方も多いかと思います。

2. コーダー:デザインをコードで再現する人

web-design-designer-corder06
コーダーはHTMLやCSSなどのコードを書いて、ウェブデザイナーが作ったデザインをウェブ上に再現する職種です。

プログラミングとコーディング(コーダーの仕事)は区別されることが多く、「HTMLやCSSは書けてもプログラミングはちょっと…」という方も中にはいます。

3. マークアップエンジニア:デザインをコードで再現し、構成なども考える人

web-design-designer-corder01
マークアップエンジニアは「デザインをコードでウェブ上に再現する」点ではコーダーと同じです。が、マークアップエンジニアは

  • サイトに訪れた人へきちんと情報が伝えられる設計か
  • サイト自体が早くて使いやすいものなのか
  • 検索エンジンのことも考えたサイトなのか

など、いわばサイトの使い勝手も考える人です。最近だとスマホで見たときのデザイン(レスポンシブデザイン)を考えることも少なくありません。

4. フロントエンドエンジニア:コーディング+ウェブのプログラミングをする人

フロントエンジニアは、HTMLやCSSを使ったコーディングに加えて、PHP(サーバーとやりとりするための言語)やJavaScript(サイトに動きをつけるための言語)などのプログラミング寄りのことができる人です。

コーダーに慣れてきたら勉強してフロントエンドエンジニアになるのは、Web製作者として1つのルートかなと。

5. ウェブディレクター:サイトの企画をして、クリエイターに指示を出す人

web-design-designer-corder05
ウェブディレクターはこれまで紹介した職種とはうって変わって、デザインをしたりコードを書いたりすることは少ないです。

というのも、ウェブディレクターはその名の通り「Web制作のディレクション(監督)をする職種」で、デザインやコーディングの指示を出すのがほとんど。

なので、Web制作をはじめてからいきなりこの職種につくのはおすすめしません。デザインのことやコーディングのことが深くわかっていないとできない職種です。

補足:いくつかの職種を兼ねることもある

Web制作は業界自体が新しいこともあって、職種ごとの住み分けがキッチリできているわけではありません。予算などの理由で
制作に関わる人数が制限され、その中で役割を決めることもあります。

そのため、例えばデザイナーがコーディングをすることも少なくありません。ぼくはフリーランスでやっていることもあって、上記5つの職種をすべて兼任することも。

Web制作にかかわる人すべてが幅広いスキルを持っているわけではありませんが、さまざまなスキルを持っているほど重宝される業界であることは間違いありません。

次は、Web制作をこれからしたい方がどの職種を目指すべきかを解説します。

やりたいことや目標によって目指すべき職種は変わる

「Web制作にはいろんな職種があるのはわかったけど、結局なにをしたらいいんだろう…」と思っている方に向けて、ここからはこれからWeb制作をしたい方が最初に目指すべき職種を

  • 「フリーランスとして最速で仕事を取ること」を目標にするなら”コーダー”
  • 「自分のデザインでサイトを作ること」を目標にするなら”ウェブデザイナー”

の順に紹介します。

「フリーランスとして最速で仕事を取ること」を目標にするなら”コーダー”

「これからフリーランスとしてWeb制作で仕事をとりたい!」と考えているのであれば、まずは”コーダー”からはじめるのがおすすめです。

理由は以下の3つ。要するに「コーディングはWeb制作の基礎であり、かつ今後につながりやすい+わりと稼げる」のです。

  1. HTMLとCSSが分からないと、ひどいデザインができやすい
  2. 初心者にとってデザインはフワッとしてわかりにくい
  3. プロのWebデザイナーから指示を直接もらえることが多い

オンラインスクール「TechAcademy」のWebデザインコースなら、1週間の無料体験だけでHTMLとCSSの基礎を身につけることは難しくありません。ウェブデザインが自分に合っているかどうか、確かめる意味でもまずは無料で体験してみてください。

コーディングについて詳しく知りたい方は「フリーランスのウェブデザイナーになるにはまずコーディング。断言します」をご覧ください。

「自分のデザインでサイトを作ること」を目標にするなら”ウェブデザイナー”

「最初は会社でWeb制作をしてもいいから、自分のデザインしたサイトがほしい!」のであれば、”ウェブデザイナー”を目指しましょう。

先ほどコーディングのところで「HTMLとCSSが分からないと、ひどいデザインができやすい」と説明しましたが、すでにある有名なウェブデザインを模写することでHTMLとCSSの感覚を身につけることはできます。

もちろん実際にコードを書いたほうが理解は深いですが、目標への最短ルートではないので。ウェブデザインを学ぶなら「【2018年版】おすすめのウェブデザインスクール比較ランキング9選!初心者も迷わない料金・内容まとめ」を参考にしてみてください。

職種ごとの違いをおさえて、望みの仕事をゲットする

ここまでWeb制作の職種について、役割ごとに分けて紹介しました。おさらいすると、Web制作の職種には、以下の5つがあります。

Web制作の職種まとめ
  1. ウェブデザイナー:サイトのデザインをする人
  2. コーダー:デザインをコードで再現する人
  3. マークアップエンジニア:デザインをコードで再現し、構成なども考える人
  4. フロントエンドエンジニア:コーディング+ウェブのプログラミングをする人
  5. ウェブディレクター:サイトの企画をして、クリエイターに指示を出す人

そして、目標別のおすすめ職種では、

  • 「フリーランスとして最速で仕事を取ること」を目標にするなら”コーダー”
  • 「自分のデザインでサイトを作ること」を目標にするなら”ウェブデザイナー”

と解説しました。コーダーにせよ、ウェブデザイナーにせよ、まずはスクールで無料の体験レッスンを受けてみるのが感覚をつかみやすいです。

Web制作のなかで望みの仕事をゲットするためにも、自分にはどの職種が合っているのか確かめることからはじめてみてください。おすすめのスクールは「【2018年版】おすすめのウェブデザインスクール比較ランキング9選!初心者も迷わない料金・内容まとめ」でまとめています。