マークアップエンジニアってコーダーとは違うの？
マークアップエンジニアになるにはどんなスキルが必要？
マークアップエンジニアはコーダーやWebデザイナー、フロントエンドエンジニアなどと混同されたり、企業や人によって呼び方が違う場合がありますが、実際のところ違いや、どこまでが仕事内容に入るのか多い方もいるのではないでしょうか。
この記事ではマークアップエンジニアの仕事内容から必要なスキルや知識を解説し、オンライン上で学べるサイトを紹介します。
マークアップエンジニアになれるかなと考えた方や、マークアップエンジニアになりたいけど何をしていいか分からない方はぜひ参考にしてみてください。
マークアップエンジニアとは
マークアップエンジニアは一般的に、HTML/CSS、簡単なJavaScript（jQuery）を使ってコーディングを行うエンジニアのことを指します。
様々な職種と混同されがちですが、特にコーディングを行う「コーダー」とマークアップエンジニアの区別は難しく、企業などによって区別される場合もあれば、同じ職種を指すこともあります。基本的には、マークアップエンジニアをコーダーの上位職だとされています。
そもそもマークアップとは？
マークアップとは、簡単に言うと、コンピューターにテキストのどの部分が見出しで、どの部分は画像かを知らせるために、何のレイアウト情報も持たないテキストに対してタグと呼ばれる意味情報をつけることです。
マークアップエンジニアの仕事内容
マークアップエンジニアは、Webデザイナーの設計したデザインをもとに、サイトの目的に合わせたSEOやアクセシビリティ、ユーザビリティといった、ユーザーが欲しい情報をすぐに見つけられようにしたり、使いやすいWebサイトを意識したコーディングを行うことです。
コーダーがWebデザイナーの設計したデザインを忠実にコーディングするのに対し、SEO、アクセリビリティ、ユーザビリティといったプラスアルファを付け加えた上でコーディングするのがマークアップエンジニアです。
全体的な流れとしては、Webデザイナーから上がってきたデザインをHTMLでマークアップし、CSSで見た目をデザインに近づけ、動的な機能をJavaScriptやjQueryで実装します。
その後表示確認などをしてからテストサーバーにアップロードし、Webデザイナーやディレクターに確認をとり、クライアントに提出し、全て問題なければ本番環境に移して公開となります。
マークアップエンジニアに必要なスキル
マークアップエンジニアの意味や仕事内容が分かったところで、マークアップエンジニアになるために必要なスキルを見ていきましょう。
WEBデザインに関する知識
マークアップエンジニアはWebデザイナーの仕事ができる必要はありませんが、マークアップエンジニアの仕事内容上、Webデザイナーとの連携が多いため、ある程度のWebデザイン知識が必要です。
Webデザイナーが設計したWebページを忠実にコーディングするだけなら、あまり密な連携は必要とされないかもしれませんが、Webサイトの目的に合わせてSEOやユーザビリティを意識した時、Webデザイナーと相談、打ち合わせをすることがあります。
Webデザイナーの意図や目指すWebページを理解してコーディングに取り組むためにも、作業内容と直接関係はなくとも、デザインの基礎知識やUI/UX（ユーザーインターフェース/ユーザーエクスピューリエンス）などの知識があると良いでしょう。
コーディングスキル
マークアップエンジニアにはコーディングスキルが必須です。コーディングとはプレーンテキストを適切なHTMLタグで囲み、CSSで装飾を施しレイアウトを整えることです。
コーディングはコーダーや、Webデザイナーなどもできるため、複雑なデザインのページでもソースコードが美しく、他の人が見ても分かりやすい、修正・共有しやすいなど、プラスアルファの価値が重要になってきます。
大きなWebサイトほど、1人ではなく複数人でページやパーツごとにコーディングしたり、後々修正したりすることがあるので、未来の自分はもちろん他人にも読みやすい綺麗なコードを書くことを心がけましょう。
プログラミングスキル
マークアップエンジニアに高度なプログラミング技術はそれほど必要とされませんが、最近のWebページの大半にはJavaScript（jQuery）が使われるため、よく使う機能の実装だけでもできる必要があります。
CSSの進化により、昔と比べてハンバーガーメニューをはじめ多くの機能をCSSで実装することも可能になりましたが、スライドショーや上に戻るボタンなど、Webページに動きをつける場合には必須です。
コミュニケーション能力
マークアップエンジニアは、WebデザイナーやWebディレクター、サーバーサイドエンジニアなどとの連携が多い職種です。作業自体は1人で行うことが多いですが、打ち合わせや相談、修正依頼に提案など、1つのプロジェクトの中でも人とコミュニケーションを取ることがあります。
そのため、専門的な知識の理解だけでなく、Webデザイナーやディレクターの意図や目的を考慮して確認や相談できるスキルが必要です。また円滑な人間関係を築くことで、信頼関係に影響したり、今後の仕事に繋がる可能性もあります。
またマークアップエンジニアとしてフリーランスになる場合には、クライアント先に営業をかけたりエージェントに実力を証明したりと、より一層コミュニケーションスキルは重要になってきます。
マークアップのスキル習得におすすめの学習サイト
マークアップエンジニアに必要なスキルは、比較的未経験者でも習得しやすくなっています。
その理由の1つとしては、HTML/CSSをはじめとしたWebサイトやWebアプリ作成のための言語やツールを、無料または低コストで学べるオンラインサービスが増えたことが挙げられます。
そこで、ここでは無料や月額約1000円で学べる、多くの学習者に使われている学習サイトを紹介します。
Progate
Progateはブラウザ上でコードを書きながらHTMLやCSS、JavaScriptをはじめとする複数のプログラミング言語を学べるオンライン学習サービスです。
無料会員でもHTML・CSS、JavaScript、jQueryの初級コースを学ぶことができます。月額1078円（税込）で有料会員になると、Progateで公開されている全てのコースを学習することが可能です。
形式としては、まずスライドで1つの項目ごとに説明してから、実際にコードを書いて正解できたら次に進む、という学習方法です。ブラウザ上でコードを書けるため、自分で1から開発環境を用意しなくても手軽にプログラミングを学習できるのが特徴です。
イラストは可愛いキャラクターを使って分かりやすく、できるだけシンプルにまとめられています。
ドットインストール
ドットインストールは、1つ3分前後の動画でプログラミングを学べるプログラミング学習サービスです。マークアップエンジニアに必要なスキルの初級編である「はじめてのHTML」「はじめてのCSS」「はじめてのJavaScript」などは無料会員でも学ぶことができます。
月額1080円（税込）の有料会員になると全ての動画を見ることができ、さらに動画の文字起こしを見ることや、動画の再生速度やボイスの変更、ソースコードの閲覧などが可能です。
1つ1つの動画が3分前後と短いので、集中力を切らさずに、短い時間でも学習することができるのが特徴です。開発環境の構築もWindows版とMac版が用意されており、初心者でも動画を見ながら環境を用意、学習を開始できます。
とほほのWWW入門
とほほのWWW入門は、HTML/CSS、JavaScriptを中心とした、Webサイト作成に必要な情報などを丁寧な解説で発信するサイトです。インターネット初期である1996年に公開され20年以上続いている、Webサイトの老舗とも言える存在です。
2000年前後にホームページ作成をした人は必ずと言っていいほどお世話になったサイトです。網羅的で分かりやすく丁寧な解説には定評があり、過去数回に渡って新聞や雑誌で取り上げられているほどです。
初心者はもちろん、中級者以上でもリファレンスとしても優秀なサイトです。
シラバス
シラバスは、「マネして遊べる」をコンセプトにHTML/CSS、WordPress、Ruby on RailsなどWebデザインからWebアプリの開発までを学ぶことができる学習サイトです。
もともとは2013年当時に人員が不足していたダラフ社が、アルバイトのプログラマーを雇うために、最後まで行えば即戦力として使える学習カリキュラムを作成したものが出発点となっています。
GitHubから収集・編集したプログラムを使って学習コースを作成していることと、言語自体だけでなく開発作業の大まかな流れを同時に学ぶことができるのが特徴です。
ほとんど知識の無い状態からWebデザイナーとしてデザイン会社に入社することになったという設定で、1からリアルな画像や動画を見ながら学習していきます。1から丁寧に解説されており、真似して手を動かすことで、本格的なWebページを作成することができます。
まとめ
マークアップエンジニアの仕事内容から必要なスキルや知識を解説し、オンライン上で学べるサイトを紹介しました。
マークアップエンジニアは、ただ単純にデザインをコーディングするだけでなく、SEOやアクセシビリティ、ユーザビリティを意識した1段上のコーディング技術を持っているエンジニアです。
しかしマークアップエンジニアは未経験者が独学でスキル習得をすることが比較的に容易な職種です。そのため未経験からWebコーダー、コーダーからマークアップエンジニアへと転向する人も少なくありません。
またコーダーだけでなくWebデザイナーでもコーディングができる人も増えてきており、フロントエンジニアなどコーディングからフロントサイドのプログラミングまで一通りできる人もいます。
そのためマークアップエンジニアは日々スキルを磨き、プラスアルファの価値を付けられる人材であることが重要です。
