ウェブデザイナー
TAKAGI KUNIO

コーダー・フロントエンドエンジニア・マークアップエンジニアの違い

公開日:
更新日:
タグ:
浜辺で作業するエンジニア

『コーダー・フロントエンドエンジニア・マークアップエンジニア』いずれもサイト制作においてコーディングを担当する人のことです。

しかしそれぞれの違いや、どう呼ぶのが正しいのか正直わかりにくいですよね。そこでこの記事では、それぞれの役割の違いや、それができた背景について解説していきます。

コーダーとは?

浜辺で作業するエンジニア

コーダー = ”コーディングする者”

HTMLとCSSを用いてサイトを静的に構築する者という意味であり、それ以上の意味もそれ以下の意味もありません。

WEBサイトは”HTMLとCSSを用いて構築されるもの”と一般的に認識されていた時代からある呼び方です。そういう時代に生まれた呼び方なので意味はシンプルですね。

最も、今では記述の精度はまちまちだと思いますが、HTML5ベースでコーディングすることが普通ですし、何らかのCMSを使用したり、jqueryなどを用いて多少動的なコーディングをする人も広義の意味でコーダーと呼ぶ会社もおそらく少なからずあると思います。

フロントエンドエンジニアとは?

浜辺で作業するエンジニア

”フロントエンドエンジニア”は、”HTML・CSS・JavaScript・php・Ruby”などその他もろもろを用いて動的機能を持つサイトを構築するエンジニアを意味します。

プロジェクトに合わせてフレームワークを設定したり、必要な場合は管理画面の(※1)GUIを用意したりと、サイトの動的機能や表示を担う役割です。

ユーザーから見える部分ではサイトの動的機能などを支え、裏側では管理画面の機能や仕様などを支えたりしています。まぁいわゆるガチのエンジニアの方ということですね。

※1 Graphical User Interface(ボタンなど直感的なユーザーインターフェースのこと)

フロントエンドエンジニアが生まれた背景

2000年代初頭、それまでシンプルなHTMLで構築されたWEBサイトが主流であった中、2008年にiPhoneが登場しました。

iPhoneの登場と同時にWEBアプリケーションが台頭し始めると、それまでシンプルな作りが主流であったWEBサイトは、より高度なユーザビリティを求められるようになっていきました。

このあたりからWEBサイトの構築言語は、必然的に”HTML + CSS”から、”HTML + CSS + JavaScript”へと主流が移り変わっていきます。時をほどなくして、オープンソースのブログソフトウェアである”ワードプレス”が、日本でも台頭し始めます。

”フロントエンドエンジニア”という言葉が使われ始めたのはこの頃からのようです。

WEBサイトやWEBアプリケーションを継続運営していくには、静的なHTMLではとても実用に耐えません。そこで管理用のGUIなど、動的機能が必須となった背景があり、そこを担うエンジニアが必要となった。ということなのでしょう。

ちなみに、サーバーの構築などユーザーからは完全に見えない部分ではバックエンドエンジニアというエンジニアが存在します。

マークアップエンジニア

猫エンジニア

マークアップエンジニアは、HTML5とCSSを用いてサイトを構築する者という意味です。

HTMLにはバージョンがあり、最新のバージョンは5.2です。

いわゆる皆がHTML5と呼んでいるあれですね。

HTML5にはマークアップという仕組みがあり、HTML要素をそれぞれタグづけし、ラベリングすることでクローラーが情報を読み解く手助けをしているわけですね。

このHTML5のマークアップにはルールがあり、このルールから逸脱しないよう構文する必要があるわけですが、これを専門とするのが”マークアップエンジニア”のようです。

ちなみに”マークアップエンジニア”という言葉は、マイナビクリエイターというブログでWeb制作会社であるビジネス・アーキテクツの森田 雄(もりたゆう)氏が考えた言葉であり、コーダーの上位種という位置づけで定義されているようです。

マイナビクリエイター(マークアップエンジニアとは – Webコーダーとの違いを知る)

日経XTECK(第1回 マークアップ・エンジニアって何?)

はい、ここで疑問。
コーダーとマークアップエンジニアって同じじゃね?

私用スマホと社用スマホを油揚げと間違えるエンジニア

結論から言うと、言葉の定義がどうあれ、実際には同じです。

なぜかというと、少なくとも日本にはマークアップエンジニアとして、コーダーと明確な優劣をつけて食べていける土壌がほとんど存在しないからです。

制作会社は人件費を少しでも抑えたいのです。『マークアップができる』は、『HTML5で静的コーディングができる』と同じ意味です。それだけで雇ってもらえたとしても、もらえる賃金なんてアルバイトくらいのものでしょう。

そもそも今どきマークアップせずにdivで昔さながらコーディングをする人は、”コーディングに関して素人に非常に近い人”と言っても過言ではありません。

ルールの解釈を誤り、誤ったタグの使い方をしてしまう人や、アウトライン及びセクショニングルートを理解していない人は相当数いるでしょうが、それでもdivだけで作るような人はもうかなり少ないと思います。

つまり何が言いたいのかと言うと、実際問題としてコーダーマークアップエンジニアは、できることに差異がほとんどなく、エンジニアと言うには専門性が浅いのです。

では、なぜマークアップエンジニアという言葉が生まれたのか?

水中で考えるドイツ人ハーフ男性

先述の通り、マークアップエンジニアという言葉は、”Web制作会社であるビジネス・アーキテクツの森田 雄(もりたゆう)氏が考えた言葉であり、コーダーの上位種という位置づけで定義されている”と紹介しましたが、ここにカラクリがあるように思えます。

これは私の個人的な考察なのですが、求人媒体がコーダーのイメージアップを図りたかったのでは?と思っています。

というのも、コーダーは、WEB業界の仕事の中ではカーストが下の方に捉えられていることが多いのです。一般的に仕事というのは人に誇れる仕事やかっこいい仕事の方が人気があるわけですから、職種に良いイメージがつけば企業も求人媒体も応募者が増えてうれしい。まさにWINWINの関係というワケですね。

蛇足:例えば 〜 あったかもしれない会議室 if 〜

会議のメンバー

・プロジェクトマネージャー(以下PM)

・プロジェクトリーダー(以下PL)

・社員ABC

・議事録係

PMえ?そうなの?じゃあさ…(別件で電話中)

PL前ちょっと話したコーダーの(※1)CV施策の件、森田さんを発起人にして(※2)プレス打つこと決まったからもう今日中に名前決めよ。

社員Bそうですね。

社員Aやっぱ専門的な雰囲気出さなアカンやろ。

社員B専門職っていうとエンジニアですかね?

社員Cでもコーダーっすよ?大丈夫っすかね?

社員A大丈夫やろ。知らんけど。

社員Bじゃあ、マークアップエンジニアとかですか?

PMそれいただき☆(指パチンッ)

議事録係カタカタカタカタカタカタ タターンッ!!

※1 Conversion(コンバージョン)見込み顧客に目標とする行動を起こさせること。上記の場面では求職者にコーダーへの応募を完了させること。

※2 プレスリリース(ネット記事や紙媒体など様々な媒体をを使った広報活動のこと)

まとめ

コーダー・フロントエンドエンジニア・マークアップエンジニアの違いについて解説してきましたが、最後に総括として箇条書きでおさらいします。

  • コーダーはHTMLとCSSでWEBサイトを静的にコーディングできる人。
  • ”フロントエンドエンジニア”は、サイトの動的な表示と挙動を担う専門家。
  • マークアップエンジニアはHTML5がわかる人。
  • ”コーダー””マークアップエンジニア”は実際には能力的差異がほとんどないため、現実的な土壌にも差がない。
  • ”マークアップエンジニア”という言葉は、おそらく求人媒体が作ったいわゆるマーケティング上の賜物。

僕の結論。呼び方なんて何でもいい。

シェアはこちら
カテゴリー:
TIPS

メガネ

著者:TAKAGI KUNIO

WEBデザイナー歴8年。フリーランスのWEBデザイナーです。

ワードプレスでのサイト制作を得意としています。

丁寧・シンプル・整然をモットーにWEBサイトの開発をしています。ユーザー心理に則った感覚をフィードバックし、合理的なUIを提案。クオリティの高いデザインを提供します。

一覧に戻る

TIPSカテゴリーの他の記事

  • このカテゴリーには、他の記事はまだありません。
走る棒人間

おすすめ記事

お問い合わせアイコン
CONTACT

  • POINT1必要最低限のコスト
  • POINT2美しいレスポンシブ
  • POINT3機能的で美しいデザイン
  • POINT4無駄がない構造
  • POINT5合理的なUI
  • POINT6まっとうなSEO提案

お問い合わせ

サイト制作で失敗させない

なんとなくOK出したけどホームページを見返せば見返すほど違和感が出てくる。
そんな経験ありませんか?

作るとき、ディレクターは、あなたの目的を正しく理解し、目的達成の手段と知識をちゃんと共有してくれましたか?

素人仕事にお金を浪費するのはもうやめましょう。

私なら力になれます。打ち合わせ・お見積りは無償で承っています。

お気軽にご相談ください。