マークアップエンジニアについて今日は紹介するよ！
- マークアップエンジニアってなに？
- マークアップエンジニアの仕事内容って？
- マークアップエンジニアの年収は？
- マークアップエンジニアとフロントエンドエンジニアの違いって何？
などの疑問をお持ちの方の悩みを解決できる記事になっています！
「マークアップエンジニアって聞いたことあるけど、よくわからない」
という人は多いと思います。
特に、フロントエンドエンジニアとの違いがわからないという声をよく聞きます。
この記事では、現役のエンジニアがマークアップエンジニアの仕事内容やフロントエンドエンジニアの違いについて解説します！
記事を読めば、マークアップエンジニアの仕事内容やスキルについて理解できますよ！
それでは、見てみましょう！
- マークアップエンジニアに興味がある人
- マークアップエンジニアとフロントエンドエンジニアの違いが分からない人
目次
マークアップエンジニアとは
マークアップエンジニアとは、HTMLとCSSというマークアップ言語を使用してWebサイトの構造やデザインを実装するエンジニアです。
WebサイトのデザインをつくるのがWebデザイナーです。そして、そのデザインを実際のWebサイトの画面として実装するのがマークアップエンジニアの役割となっています。
Webサイト制作に携わってない人だとイメージがしづらいと思うので、一般的なWeb制作フローを見てましょう。
- 企画・設計
- デザイン
- 実装
- 公開
- 運用
ざっくりですがこのようなイメージです。
一番初めにWebサイトの「企画」が立ち上げられます。その後、各ページや全体の「設計」をします。
「1. 企画・設計」が終わると、Webサイトの「2.デザイン」作業がスタートします。
デザインの仕事は、Webデザイナーが担当します。
デザインが決定したあとは、Webサイトを制作する「3.実装」のフェーズに入ります。
この「3.実装」がマークアップエンジニアの担当になります。
「2.デザイン」で作成されたデザインをもとに、マークアップエンジニアがプログラムを書いて実際のWebサイトを制作します。
会社によっては、「Webデザインー兼マークアップエンジニア」の人がいると思います。実際に、Webデザイナーが「3.実装」の作業をやることも多いです。
しかし、大規模なWebサイトになると、分業した方が効率的なのでマークアップエンジニアの出番が必要になるということです。
マークアップエンジニアに必要なスキルとは
マークアップエンジニアが必要なスキルは次の通りです。
- HTML
- CSS
- SEOの知識
- ユーザービリティの知識
- Webの仕組みの理解
HTML
「HTML（エイチティーエムエル）」とはマークアップ言語と呼ばれ、Webサイトの骨組みをつくるためのプログラミング言語です。
Webサイトで表示される全ての部品は、この「HTML」をもとに作られています。
例えば、「購入する」ボタンをWebサイト上に置きたい場合は、次のように書くことができます。
<button>購入する</button>このようなコードを書くことによって、Webサイトで次のように表示されます。
CSS
「CSS（シーエスエス）」はスタイルシートと言い、Webサイトのデザインを整えるための言語です。
例えば、「購入する」ボタンを「赤色」にするデザインがあるとします。
このときは、HTMLではなく、CSSを使います。
「購入する」ボタンを「赤色」に変えてみましょう。
button{
background-color: red;
}
このように、CSSを使うとボタンの背景を赤色にすることができます。
HTMLとCSSをまとめると、次のようになります。
| 要素 | 役割 | 用途 |
| HTML | Webサイトの構造を作る言語 | ボタンを置きたい |
| CSS | Webサイトのレイアウトや色を変えたり、デザインをするための言語 | ボタンの色を変えたい |
SEOの知識
SEOとは、Googleなどの検索エンジンで上位に表示するための施策です。
Googleで検索すると、このような画面が出てきますよね。
この検索順位を上げるためには、記事を増やしたり、読みやすい設計・構造にする必要があります。
マークアップエンジニアはこの「読みやすい設計・構造」にする仕事を担当します。
なぜなら、「読みやすい設計・構造」にするためにはHTMLやCSSを最適化しなければならないからです。HTMLの作り方によってはSEOが下がり、検索順位に影響を及ぼす可能性があります。
マークアップエンジニアの仕事には、SEOを考慮してWebサイトの実装をする作業も含まれています。
ユーザービリティの知識
マークアップエンジニアの仕事は、Webサイトを実装することです。
そのため、ユーザー(利用者)のために使いやすいように設計しなければなりません。
ユーザーが使いやすいか使いにくいかの度合いを「ユーザービリティ」と言います。
「ユーザービリティ」が低いと、ユーザーにとっては使いづらいのでWebサイトの価値は下がってしまいます。
「ユーザービリティ」が高いと、ユーザーにとって使いやすいWebサイトになります。
マークアップエンジニアはこのユーザービリティにも配慮して、Webサイトを構築する必要があります。
Webの仕組みの理解
マークアップエンジニアもWebの仕組みを理解する必要があります。
なぜなら、Webサイトを作るためには、HTML&CSSを使ったり、http通信でファイルをダウンロードしたり、圧縮してパフォーマンスを上げたりなど様々な知識を要するからです。
Web全体の仕組みを理解していると、このような作業全般を担当できます。
Webの仕組みは本などで理解しておくのがいいでしょう。
マークアップエンジニアとフロントエンドエンジニアの違いは？
マークアップエンジニアとフロントエンドエンジニアの違いはなんでしょうか。
大きな違いは、扱うプログラミング言語が変わります。
フロントエンドエンジニアは「JavaScript」というプログラミング言語を使用して、WebサイトやWebアプリケーションを実装します。また、「HTML」「CSS」も使うので、マークアップエンジニアよりも高度なスキルを必要とします。
| 職種 | 扱うプログラミング言語 |
| マークアップエンジニア |
|
| フロントエンドエンジニア |
|
フロントエンドエンジニアの仕事は、Webアプリケーションの見た目や動きなどの複雑な処理を担当します。
例えば、マークアップエンジニアが「ボタンを作る」のに対して、フロントエンドエンジニアはその「ボタンが押されたあとの動き」を実装します。
その「動き」を実装するためにJavaScriptが使われます。
JavaScriptは進化が早く、周辺技術も活発に開発されています。そのため、フロントエンドエンジニアは高度なスキルを必要とされます。
マークアップエンジニアの年収は？
マークアップエンジニアの年収は、どのくらいでしょうか。マークアップエンジニアを目指す人は気になるところでしょう。
転職支援サービスなどを見ると、マークアップエンジニアの年収は300万円〜400万円とされています。
実際に、マイナビagentによると、平均年収は「385万円」となっています。
引用元: マイナビagent
私の経験上、だいたいこのぐらいかと思います。
スキルの高いフロントエンドエンジニアになると、もっと高い収入を見込めます。
マークアップエンジニアになるためには
マークアップエンジニアになるためには、上記であげたスキルを身につける必要があります。
- HTML
- CSS
- SEOの知識
- ユーザービリティの知識
- Webの仕組みの理解
特に、「HTML」「CSS」は必須です。
HTMLとCSSは独学でも習得可能です。
まずは基礎を習得するために、プログラミング学習サイトや本を見て、実際にコードを書いてみましょう。
コードを書いて動きを確認することで、仕組みを理解できます。
次に実践として、Webサイトを作成しましょう。
Webサイトは自分でデザインする必要はありません。
既にあるWebサイトを真似して、HTMLとCSSを組み立ててください。その作業が、先ほど見た「3.実装」のフェーズと同じです。
- 企画・設計
- デザイン
- 実装
- 公開
- 運用
その作業を何回もこなすと、実戦力が養われます。
真似するWebサイトは次のようなサイトで見つけられるので、好きなものを選んでみましょう。
Webデザイン制作の参考になるLP・ランディングページWebデザインのリンク集
引用元：Webデザイン制作の参考になるLP・ランディングページWebデザインのリンク集
エンジニアになるための具体的なステップは次の記事に解説しているので、参考にしてくださいね。
【初心者のための】未経験からWebエンジニアになる3ステップ【完全保存版】
最短でマークアップエンジニアになりたい人は
最短でマークアップエンジニアを目指すひとは、プログラミングスクールもアリです！
独学だとどうしても時間はかかります。
プログラミングスクールだとプロのエンジニア講師がいるので、わからないことはいつでも質問できます。
自分で調べるよりは、遥かに効率的です。
例えば、TechAcademyのフロントエンドコースならマークアップエンジニアで必要な技術に加えて、フロントエンドエンジニアのスキルもに身につくので一石二鳥です。
すぐにマークアップエンジニアとして働きたい方は検討してくださいね。
まとめ
この記事では、マークアップエンジニアについてまとめました。
マークアップエンジニアを目指す人は、HTMLとCSSを身につけましょう。
HTMLとCSSができれば副業で稼ぐのも可能です。
ポートフォリオを作って転職活動に役立てるのでもいいでしょう。
マークアップエンジニアで就職して、フロントエンドエンジニアを目指すのもおすすめですよ！
皆さんがエンジニアになれるのを応援しています！
