こんにちは、現在web系エンジニア(マークアップエンジニア)として活動しているしょーご(@samuraibrass)です。
マークアップエンジニアとしてフリーランス活動を初めてしばらく経ちますが、最近はこの先のキャリア戦略を考えています。
- 技術の進歩によるデザインカンプからのコーディングの自動化
- コーダー、マークアップエンジニアの増加による能力のコモディティ化
などなどは現在マークアップエンジニアのみなさんも脅威として認識しているのではないでしょうか。
私自身もまだこの先のキャリアをしっかり決められているわけではありませんが、
マークアップエンジニアがこの先生き残る現実的な手段をいくつか考えてみました。
それではみていきましょう。
\現役エンジニアのレビュー付き/
実践レベルのコーディング課題公開中

- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
\無料の入門編から本格企業サイトまで/
そもそもマークアップエンジニアとは
コーダーとの違い
一般的にマークアップエンジニアはコーダーの上位職と見なされています。
コーダーはデザインカンプ(psdデータ)を元にHTML,CSS,jQueryでの実装が可能。
マークアップエンジニアはSEOに準じたより正確なコーディングや設計思想、CMS(wordpressなど)の実装までこなす。
ちなみに私のスキルは以下のような感じです。
- 設計思想(BEMやSMACSS)に基づいたコーディング
- CSSプリプロセッサ(Sass)やタスクランナー(gulp)を用いたコーディング
- jQueryプラグインによる動きの付与
- wordpress実装
まんまマークアップエンジニアといった感じです。
次にこのようなマークアップエンジニアが次に取るべきキャリアプランはどういったものがあるのかみていきましょう。
選択肢その1:フロントエンドエンジニアになる

1つ目はプログラミング方面のスキルを深めてフロントエンドエンジニアになるということです。
フロントエンドの中途採用条件をみていると、マークアップエンジニアのスキルにプラスして
- gitなどのバージョン管理ツールを使用してチーム開発を行える
- JavaScriptのフレームワーク(ReactやAngular、Vueなど)を用いてwebアプリケーションを作れる
- OAuthやAJAXについての知識があり, サーバサイドのAPIを考慮した実装ができる
- PHPやMySQLの知識、実装
- AWSのサービスを用いたインフラの構築やWeb APIの作成
などなど、様々必要なようです。
webマーケティング系の会社や地方の会社だと、フロントエンドへのマスト条件が上記のマークアップエンジニアレベルだったりもするので、一概には言えないです。
パッとみた感じ、かなり難しそうといった印象を受けます。
ちなみに私はフロントエンド方面へ進む予定ですが、どこかで行き詰まりを感じた時点でいったん就職、またはインターンも考えています。
もともと、フリーになったり会社員としてモダンなスキルをバリバリ習得したりといった、行き交いの出来る柔軟な働き方に憧れてこの業界に入った部分もあるので、割と前向きに考えています。
選択肢その2:webデザイナーになる

2つ目はデザイナーを目指す道です。
皆さんはすでにマークアップエンジニアとしてコーディング能力は身につけているので、デザイナーとしての力をつければ全てを一貫したweb制作が行えるようになり、単価アップはまちがいないです。
デザイナーに必要なスキルは
- photoshopを用いた画像加工、編集
- illustratorを使用したロゴ、バナー作り
- XDやsketchを利用したデザインカンプ、プロトタイプの作成
- UXに配慮したロジカルなデザイン
などがあげられると思います。
僕を含めた多くのマークアップエンジニアは正直そんなに得意ではないと思いますが、
誰かに師事してデザインをみてもらいつつ案件でブラッシュアップしていけば、独学でもスキルを高めることは不可能ではないと思います。
またコーディングもwebデザイナーの職務範囲に入っていることが多いので、コーディングとデザイン、両方のスキルを高められる可能性もあると思います。
この状態になると、コーダー、デザイナー両方の立場でものが見れるので、webディレクターの道もひらけてくるかもしれません(チームを取りまとめるディレクターの方が収入は高いです)
選択肢その3:webマーケターになる

マーケターと聞いて、全然違う職種だとお思いでしょうか。
実際はこれまでのエンジニア、デザイナーがコンテンツの実装者だとすれば、マーケターはコンテンツの運用者という位置付けになります。
つまりマークアップエンジニア→webマーケターへの転職は
コンテンツ作成者→運用者へ
ということになり、むしろ深い相関関係にあると言えます。
webマーケターに必要なスキルは
- 数値管理や分析の経験(googleアナリティクスを用いたPDCA)
- LPの運用、最適化
- SNS広告最適化
- コンテンツ企画
- 少しHTML、CSSの知識
などがあげられます。
作って終わりでいいのかという問題
web制作をなぜ行うのか、それは顧客の売り上げ、知名度アップなど様々なマーケティング上の目的があり、webサイトの制作はその中継点であるにすぎません。
作って終わりではなく、作って運用して初めて意味が生まれるのです。
僕らがよく作る、リスティング広告に使われるLPが良い例でしょう。
僕の周りにも運用が好きだと気づき、マークアップエンジニアからwebマーケターに転職した人がいますが、とても楽しそうに働いています。
個人的にも結構興味があるので、将来はwebマーケターの道に進むことも選択肢には入れています。
マークアップエンジニアはオワコン化するのか?
そもそも僕がマークアップエンジニアとしてのキャリアを再考し始めたのは、最初にもあげた通り技術の進歩により、取って食われる可能性を否定できないというところにあります。
wordpressサイトは増えている
しかし、今後数年の話をするならマークアップエンジニアは全然稼げるとも思っています。
最近ニュースになりましたが、今や世界のサイトの3分の1がwordpressになっているようです。
つまり、今後数年はむしろwordpressで実装できるマークアップエンジニアは重宝されると思われます。
なので、僕が考えたこの記事の主題である『マークアップエンジニアの生存戦略』は
マークアップエンジニアとしての技術が陳腐化する前に稼ぎつつ、次のステップに向け日々努力する
ここに尽きるのではと思います。
ちなみに僕は今集中していることは
javascript、およびフレームワーク(Vue.js)を利用した小規模アプリケーションの開発
で、なんとかオブジェクト指向などと格闘しています。
2019年5月の連休中にToDoアプリあたりを作ろうと思ってます。
自分に付加価値をつける
マークアップエンジニアの先は人によってまちまちだと思います。
何れにしても、今の技術+何か付加価値を掛け合わせることで、自分の市場価値はかなり伸びる(マーケティングのできるエンジニア、デザインから作れるエンジニアなど)ので、
今の先を見据えるマークアップエンジニアの方々、一緒に頑張りましょう!
2020年12月追記:周辺業務へ漕ぎ出せ
この記事執筆より一年半、現在でもマークアップエンジニアは周辺業務にも手をつけるのが良いと思います。
私や周りの具体例をお教えします。
- フロントエンドのマークアップ 部分を担当(Nuxtなど)
- Railsサービスのフロントマークアップ担当(Rails&Gitの基礎は知ってる必要あり)
- ディレクターとしてデザイナーコーダーをまとめてプロジェクトを進める
このあたりは実現可能性が高いです。マークアップ嫌いなサーバーサイドエンジニアは多いですし、コーダーとしての経験はディレクターとしても生きてきます。
そして、コーダーとして様々な企業と一年ぐらい働いていると、
〜さんって、この業務もいけたりします?できればぜひ〜さんにお願いしたいです…!!
という話がきたりします。
気付けば「マークアップエンジニア」という肩書きを超えた職域になっているでしょう。なので、あまり心配しなくても大丈夫です。
コーディング案件の探し方
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。

- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!
\課題の購入はこちらから/
\課題の詳細はこちらから/