マークアップエンジニアになるには - 未経験者に必要な5つのスキル

マークアップエンジニアへの需要が高まる中、「実務は未経験だが、自分もマークアップエンジニアとしてWeb業界で活躍したい！」そう考えている人は少なくないと思います。しかし、Web業界での様々な求人募集を見てみると、やはり「実践的なスキルを持ち、即戦力を期待できる経験者」を優遇する傾向が見られます。それは、マークアップエンジニアという職種一つとっても同様です。

しかし、誰でも最初から経験者だったわけではありません。新卒であれ、中途であれ、異動による配属であれ、最初は未経験の状態からマークアップエンジニアとして仕事に取り組んだはずです。つまり、未経験者に対しても、ある一定の「スキル」「知識」「やる気」さえあれば、門戸を開いているポジションが、企業によっては存在するということです。

では、実務未経験者がマークアップエンジニアになるには、どのようなスキルを身につけ、どのような知識を押さえておくべきなのでしょうか。今回はそのためのポイントと、必要とされるスキルをどれくらいのレベルまで習得すればよいのか、その目安を簡単にご紹介します。

ポイントを押さえて効率的に学べば、転職実現の可能性はぐっと広がる

結論から言うと、未経験者が実務でも通用するマークアップエンジニアになるには、スキル・知識として、HTML・CSS・JavaScript・CMS・デザイン理論の基礎を、一定のレベルまで押さえておくこと（もしくは、必ず習得しようという姿勢）がマストです。「JavaScriptのスキルまで本当に必要？」「WordPressのカスタムにPHPの知識は確かに必要だけどいきなりそこまでは…。」など、今自分が持っているスキルに対して、ハードルが高く感じてしまうこともあるかもしれませんが、向上心を持って取り組むこと自体にメリットはあっても損はないので、まずは積極的に取り組むべきです。

そしてこれらを、マークアップエンジニアとして必要なスキルと認識し、自分のものとできるように必死に努力していけば、マークアップエンジニアへの転職実現の可能性は広がります。さらに言えば、入社スタートのタイミングで、比較的スムーズに活躍ができる可能性だってあります。というのは、実際にマイナビクリエイターを介し、独学スキルのみの未経験者がマークアップエンジニアのポジションへと転職を実現させてきた事例が多々あるからです。

では、これらの前提を念頭に置きつつ、未経験者がマークアップエンジニアになるにはどうしたらいいのか、必要なスキルのレベル感を5つの目安としてまとめましたので、早速ご紹介します。

マークアップエンジニアを目指す未経験者が目指す5つのレベル感

[Skill Level 01]
HTMLコーディングは手打ちで書けるレベルまで

未経験者の中で、「HTMLに関する知識や基本的なスキルはある」と言える人でも、普段のコーディングはDreamweaverなどのオーサリングツールなどを使用している（頼っている）ことが多いと思います。もちろん、実際の現場でも、生産性を高めるためにオーサリングツールツールは頻繁に使用されていますし、WYSIWYGで作業を進められるという点は大きな利点です。

しかし、多くのプロのマークアップエンジニアは、オーサリングツールで生成されたコードをそのまま使用し、納品することはまずありません。クライアントに納品できる品質とそれとは、全く別物だからです。どんなフローでコーディングしたとしても、最後はしっかりと目視でコード全体を読み直し、自分の意図した通りの構造・記述になっているかを確認しつつ、問題点があれば手打ちでHTMLを修正してクオリティーを保つことは、プロのスキルとしては必須要件です。

また、「簡単なページであれば、最初からHTMLを手打ちした方が早い」というマークアップエンジニアもたくさんいます。HTMLをしっかりと理解し、そのスキルも自分のものになっていれば、描いたイメージをダイレクトにコードに置き換えられるHTMLエディターや一般的なテキストエディターの方が作業は早いからです。

その上で、マークアップエンジニアが活用している便利ツールもたくさん存在します。「マークアップエンジニアのスキルアップに役立つ便利ツール7選まとめ」ページでも紹介しているので、ぜひご覧ください。

いずれにせよ、HTMLのコーディングスキルに関して言えば、どんな環境でも対応できるレベル、つまり手打ちでコードが書けるレベルまで到達することが重要です。そうすれば、転職先のどんな環境でも、そこで使用しているツールに依存する必要もなくなるでしょう。

未経験者がすぐにそこまでの領域に達することは、確かに難しいかもしれません。しかし、企業の採用担当者は、面接などでスキルの見極めに、「テンプレートを使わずにWebサイトを一から作成したことはあるか」「手打ちでHTMLを書けるか」などの質問を、投げかけることが普通にあります。したがって、例え未経験であっても、「HTMLをざっと眺めれば、ブラウザ上でどのように表示されるかがパッとイメージできる」スキルレベルまで、とにかく反復練習して押さえておきましょう。

[Skill Level 02]
HTMLとCSSの各役割を明確に使い分けることができるレベルまで

現在のWebページは、「文章の内容はHTMLで構造化する」「ページレイアウトや各スタイルはCSSで制御する」という役割分担を明確に分けることがスタンダードです。もちろんHTMLだけでもある程度見栄えをコントロールすることはできますが、それは「結果的・表面的にそう見える」だけのことであり、本来別の意味を持つタグを、見栄えの修飾のために用いてしまうことは、ページの構造が崩れてしまうということつながってしまいます。

こうしたページは、当然スキルあるプロが作るものではありません。あくまでも見栄えに関してはCSSで制御するべきです。CSSはHTML内に埋め込むことも、独立したファイルとしてHTMLとは別にWebサーバー内に置くことも可能ですが、大規模なWebサイトの場合、あらかじめデザインテンプレートを作り、それを加工して効率的にページを量産していくことが多いでしょう。このような制作手法では、各ページにCSSを記述するとデザインの一括変更などが難しくなるため、独立したCSSファイルを設けてサイト全体のデザインを統括させています。そうすることで、運用の面でも共有ルールが単純化され、デザインの変更がしやすくなったり、閲覧者のブラウザの種類や端末の違いで見栄えが左右されにくいページが作成できます。

自主制作や個人で運営するサイト規模では、このような手法を使うケースは少ないかもしれません。しかし、例え未経験者であっても、実践的なスキルを持つマークアップエンジニアを目指すのであれば、こうしたスタンダードなCSSの使い方についてもよく理解し、自分のものにしておきましょう。

[Skill Level 03]
JavaScriptやjQueryを理解し、適宜活用できるレベルまで

JavaScriptは、HTML内に埋め込んで動きのあるページを作成したり、視覚的な演出を行ったりするのに役立つ、ブラウザ上で完結できる伝統的なスクリプト言語です。もちろん閲覧者がブラウザに入力した情報をサーバーやデータベースに渡す機能もあり、その処理結果を受けて表示画面の内容を切り替えることも可能です。

また、jQueryとは、JavaScriptの複数のプログラムをひとまとめにして、利用しやすい形にまとめたライブラリです。jQueryは、本来JavaScriptを理解した上で使った方がよいのですが、JavaScriptより習得は比較的簡単とも言えます。複雑なコードを書く手間なしにJavaScriptの機能が利用できるというメリットがあることから、スキルの高いプロのマークアップエンジニアでも、jQueryは広く利用されています。

これらのスクリプト言語も、未経験からマークアップエンジニアになるには必要なスキルです。もちろん初めは難解で苦手意識も出てきてしまうかもしれませんが、逃げずに習得しようとする向上心が大切です。事実、採用の面接で、「JavaScriptやjQueryを含むHTMLは触ったことはありません」となると、不利になる可能性が大きくなってしまいます。逆に「少々時間をかければ、JavaScriptやjQueryを使用して動きのあるWebページを作成することは可能です」と伝えることができれば、採用担当者は、未経験であってもその応募者のスキル向上のための姿勢を評価しますし、実際に入社した後に依頼する作業もイメージしやすくなります。

つまり、HTML、CSSのスキル習得は最低限とし、JavaScriptやjQueryに関しても、「一通り理解しているスキルレベル」にはなっておくべきでしょう。

[Skill Level 04]
有名なCMSは一通り触ったことがあるレベルまで

CMS（Contents Management System）とは、HTMLなどのWeb知識がない人でも、簡単に記事の投稿や編集などができるシステムのこと。様々なソフトウェアやサービスがありますが、日本では（世界全体でも）、圧倒的にWordPressが高いシェアを誇っています。WordPressが皆から好かれる理由は、SEOの観点からも優れている、などたくさんありますが、今回そこは割愛します。この他にも、MT（Movable Type）、XOOPS、Joomla、Drupalなどが、有名なCMSとして知られているでしょう。ちなみにこのマイナビクリエイターのブログやWebページも、Movable Typeで構築し、運用しています。

CMSは単に機能を利用するだけなら非常に簡単ですが、コードを書き換えたりしてカスタマイズをすることは高いスキルを求められます。少なくともPHPなどのサーバーサイド言語を扱えるスキルが必要で、プロのマークアップエンジニアやWebデザイナー、プログラマーでも、深い知見と経験が必要です。さらに、そのサイトが、単に情報発信するブログではなく、ユーザーの個人情報を取得するような仕組みを含むものであれば、セキュリティ面での担保も非常に重要です。これは、独学や個人で運営するスキルレベルの枠を超えた知識と経験が必要となるでしょう。

そのため本格的なカスタマイズができるように勉強に取り組むのは、マークアップエンジニアの領域外に踏み出してしまうことになるかもしれません。したがって、未経験者であれば、主要なCMSはひととおり触ってみて、CMSによってどのようなことが実現できるのか、どのような使い方を効率的なのか、どれくらいのカスタマイズが可能なのか、といった特徴を把握しておくレベルまで押さえておきましょう。

[Skill Level 05]
Webデザイナーの意図を正しく理解できるレベルまで

マークアップエンジニアと非常に近い職種に、Webデザイナーがあります。Webデザイナーは、ビジュアルデザインのためのスキルや、視覚要素が閲覧者に対してどのような心理的影響を与えるかといった知識、UI（User Interface）、UX（User Experience）など、マークアップエンジニアとして働くためには直接必要のない知識やスキルを駆使して、Webページ全体やWebサイト全体を設計しデザインします。

大規模なサイト制作の場合、マークアップエンジニアは、Webデザイナーの指示に従い、構造化したHTMLをコーディングしていくことで、デザイナーのイメージを実現していく役目を担いますが、その過程でデザイナーの意図をより的確に理解するためには、ある程度Webデザインの勉強をしておくことは自然の流れと言えます。

ただし、デザインそのものはあくまでWebデザイナーの仕事です。デザインの知識があるからといって、マークアップエンジニアがデザインにまでガツガツ口を出したり、あるいは勝手にデザインを変更したりすることはいけません（もしくは許されません）。マークアップエンジニアは文章をHTMLで正しく構造化する（ブラウザ上に正しく反映する）ための専門家です。専門家としてWebデザイナーには助言・警告を与えるレベルに留めておくのが良いバランスで、マークアップエンジニアは、技術的な要素をもとより、まずはユーザーが使いやすい画面をしっかりと作りあげることが軸の部分となるでしょう。

つまり、マークアップエンジニアは、Webデザイナーが目指す理想形や意図を正しく理解し、それを実現するために必要なマークアップ技術を提案できる、そんなスキルが求められると言えます。これは、単なる技術力とは限らない「コミュニケーションスキル」や「総合的な人材力」も含まれるため、未経験者と言っても企業は必ず求めるものです。どのように、そのスキルを培えばよいのか、どのようにアピールすればよいのか、一人ではわからないこともあると思います。その際は、先輩や知人にアドバイスを受けたり、私達のような専門アドバイザーを活用することをおすすめします。

マークアップエンジニアは職人 - コツコツ仕事を進められる人に向いている

マークアップエンジニアの仕事は、外から見ると、一見地味で単純な作業の積み重ねのように感じますが、クライアント（もしくは社内責任者）から求められる要件に応えるには、深い知見と経験、幅広いスキルが必要です。難しく考えてしまいがちですが、今回ご紹介した5つのスキルレベル感を常に意識して勉強を重ねていくことで、プロのマークアップエンジニアになるためのスキルを効率的に身につけることができると思います。

また、マークアップエンジニアは、先述したようにWebデザイナーの意図を汲み取りながらも、様々な視点を加味しながら、正しくコードに置き換えていくという職種です。これは極めて高度な「モノづくり・職人」的な仕事に属するのではないでしょうか。

マークアップエンジニアとして、やりがいを感じる要素は人それぞれですが、極めて精巧で正確なソースコードを作り上げ、責任を持って要求どおりのビジュアルや機能を持つWebページを作り上げる、こうした作業に喜びを見いだし、誇りを持って取り組める人であれば、優秀なマークアップエンジニアになれると思います。