HTMLコーダー（マークアップエンジニア）の仕事内容。Webデザインとの違いは？

HTMLコーダーとWebデザイナーの違い

在宅ワークで人気の職種といえば、Webデザイナー。未経験から目指す人も多く、Webデザインスクールも人気です。

ではそのWebデザインスクールではどういうことを「Webデザイン」として学ぶかと言うと、ざっくりいうと、Webデザイン・HTMLコーディングの2つのスキルを学びます。

Webデザインはデザインソフトを使ってイメージ画を制作する作業のこと。これは、なんとなくイメージがつくのではないでしょうか。

一方、HTMLコーディングという単語は、未経験の人には聞きなれない言葉だと思います。

HTMLコーディングとは、デザインをコードの形に起こすことで、動いたりリンクを貼ったりボタンを押せたりするWebサイトの形にすることです。

コードを書くので、どちらかというとプログラムに近い作業です。

なぜデザイン職なのにプログラムのような言語を学ぶ必要があるのかと思う人もいるかもしれません

これは、平成の頃は、Webデザイナー＝Webサイトを作るのが仕事という認識が大きかったからです。

Webサイトはデザインだけでは成り立たず、HTMLに起こしてやっとWebサイトの形になります。

そのため、WebデザイナーはHTMLコーディングも行って完全なるWebサイトの形にして納品する、までが仕事だっでした。

しかし令和の現在はWebサイトの複雑化に伴い、WebデザインとHTMLコーディングが分業されることも増えています。

その結果、HTMLコーディングに特化した職種が生まれ、HTMLコーダーやマークアップエンジニアと呼ばれるようになりました。

HTMLコーダーの仕事内容

HTMLコーダーは、デザイナーが作ったデザインカンプをもとに、HTML言語を使ってWebサイトをコーディングします。

デザイナーは、Photoshop、Illustrator、XD、figmaといったデザインソフトを使って、デザインカンプを作ります。これらはただの絵（静止画）です。

実際に、ボタンを押したらリンク先に飛んだり、お問合せフォームでメールを送信できるようにしたり、メニューを開閉できるようにしたり、といったWebサイトの形にするのが、HTMLコーダーの仕事です。

具体的な仕事内容は以下の通りです。

HTMLコーダーに必要な道具やソフト

HTMLコーダーに必要なのは、まずはパソコン。コーディングをするだけなので、そこまでスペックは高くなくても大丈夫です。

パソコ以外で必要なのは、以下の2つのソフトウェアです。

テキストエディタ

HTMLコードを入力するソフトウェアになります。必須です。無料のものがほとんど。

デザインソフト

コーダーはデザインはしませんが、デザイナーから受け取るデータを開くのにデザインソフトが必要になります。これはデザイナーと同じ種類の物でなくてはいけないので、ほぼ間違いなくAdobeCCを契約することになります。

コードを書くのに必要なテキストエディタ

テキストエディタとは、コードを書くのに必要なソフトです。

このように、ソフトの画面上にコードを打ち込んでいきます。

HTMLコーダーに限らず、プログラマ・エンジニアはみんなこのエディタというソフトを使ってプログラムコードを打っています。

テキストエディタは無料から有料のものまであるのですが、HTMLコードはかなりシンプルなコードなので、高性能な有料エディタを購入する必要はないかと思います。

無料のもので十分。無料で世界でのシェア率も高く、私も使っているのが、

Visual Studio Code

です。Microsoft社の作ったテキストエディタで、日本語にも対応。使い方がわからない時でもネットに記事がたくさん載っているので安心です。

HTMLコーダでも必要なのが、デザインソフト

デザインソフトとは、デザイナーがデザイン起こしに使うグラフィックソフトのことです。

HTMLコーダーは、デザイナーからデータをもらう時、デザインソフトで作成した生データをもらいます。その生データをもとに、HTMLをコーディングしていきます。

Webデザイナーが使うデザインソフトは、だいたい次の5つのどれかです。Figma以外は有料です。

• Photoshop
• Illustrator
• XD
• Figma
• STUDIO

基本的に、デザイナーが作成したものと同じデザインソフトを、HTMLコーダー側も入れていなければいけません。

例えば、デザイナーがPhotoshopで作成したら、Photoshopでしかそのデータは開けませんので、HTMLコーダー側でもPhotoshopのインストールが必要になります。

そのため、HTMLコーダーも、デザインソフト代がかかります。

このデザインソフトは、デザイナーの好みによって使う種類が違います。

コーダーの方から「Photoshop持ってないので、Figmaで作ってください」とは言えません。。（言えたとしても、次の仕事がきません）

　

なので、もしHTMLコーダーのプロになるのであれば、デザインソフトも購入しなければいけないのですが、独学の時点では、デザインソフトを購入することはありません。HTMLを学習できる本やオンライン学習サイトはいくつかありますが、どこも練習素材として画像データを一式用意してくれているので、実質テキストエディタとパソコンさえあれば、HTMLコーディングの勉強はできます。

初心者が学びの時点で、高額なソフトを購入する必要はありません。

さらにいうと、これらは家で仕事をする場合に必要なソフトです。会社に勤めて社内で作業する場合は、会社のPCにインストールされていると思いますので、わざわざ自分で買うことはないと思いますよ。

　

HTMLコーダーの勉強方法

HTMLコーダーの勉強は、はっきりいって独学でもなんとかなります。

HTMLの基礎であれば、未経験者でも1ヶ月あればマスターできます。

プログラムと違って、ルールに沿って打ち込めばいいので、論理的思考が必要ないため、難易度はそんなに高くない言語なのです。

ただし、モチベーションが続かない、最初の環境作りで進めなくなる、等どうしても独学が厳しいようであれば、Webスクールの契約をおすすめします。

スクールであればHTML講座単体は少なく、だいたい「Webデザイン講座」の契約となるところが多いかと思います。デザインの要であるグラフィックソフトの使い方も同時に学ぶことが多いでしょう。

HTMLコーダーとしてデザインソフトの使い方を学べるのは、それはそれでいいことだとは思います。

ただし、Webスクールの金額は高額なのでよく考えて契約しましょうね。

以下に、独学で学ぶおすすめのやり方をまとめました。

基本編

オンライン学習サイトがおすすめです。以下の記事に概要をまとめています。

脱・初心者編

基礎がしっかり身に付いたら、今度は現場で使えるテクニックを学んでいきましょう。脱・初心者向けの記事です。

HTMLコーダーの就職先

HTMLコーダーの就職先は、Webデザイン・Web開発会社といったIT企業になります。正社員もなくはないですが、契約社員や派遣が多い印象。また、HTMLコーダーとして入社後にJavaScriptなどのプログラム言語を習得し、フロントエンドエンジニアとしてのキャリアアップを目指す人も多いです。

求人で検索する時は、「マークアップエンジニア　求人」で探すと見つかりやすいです。

在宅ワークや副業に向いている理由

HTMLコーダーは、在宅ワークとしても働きやすい仕事です。

基本的にパソコン一台あればどこでも仕事ができる上、デザインデータさえ受け取れば、黙々と一人で作業を進めることができるためです。

コロナ禍以降は、会社員であっても基本在宅ワークでの契約形態の会社もあり、HTMLコーダーもそういった職種の一つです。

また、上にも書きましたが分業制のため、今はデザインはできるけどコーディングができないというWebデザイナーが増えているため、HTMLコーダー単体での需要も増えています。

ただし、個人でフリーランスや副業としてHTMLコーダーを目指す場合、基礎レベルの習熟度だと厳しいです。仮にwordpressまでマスターできれば、副業の域を超えて大きく稼ぐことが可能かと思います。

まとめ

HTMLコーダー（マークアップエンジニア）の仕事内容、仕事のやり方、必要なソフトについてまとめました。

HTMLコーダーは、プログラムほど難しくなく、挫折のしにくい職種でもあります。

女性でも40代〜20代という幅広い層で、活躍している人が多いです。興味のある方は、独学であればそんなにお金もかからず学べますので、ぜひ一度HTMLコーディングの世界に触れてみてください。