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

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

と思っている方。

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

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

そこで、この記事では、

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

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

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

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

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

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

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

1. Webデザイナー：サイトのデザインをする人

Webデザイナーはその名の通り、サイトのデザインをする人です。IllustratorやPhotoshopなどを使って、サイトの見た目を作ります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

の順に紹介します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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