初心者マークアップエンジニアに捧ぐ！おすすめサイト8選まとめ
「HTMLやCSSの基本は、一応は理解している。でもプロのマークアップエンジニアになるには、もっとスキルを磨く必要があるのではないか...。」今、企業から最も必要とされる職種の一つ、マークアップエンジニア。このポジションを目指しながらも、そうした不安を抱える人は、書籍の購入や専門的な技術が学べる通信教育、あるいはスクールに通うことを検討しているかもしれません。
もちろんそうした学習意欲は大切です。しかし実際は、在職中の忙しい人にとって、スクールに通う時間を工面すること自体、非常に難しいのが現実です。また、十分な教材の購入や受講料を支払うためには、ある程度のまとまったお金も必要になります。このページを読んでいる方々の中にも、こうしたハードルがあることで、マークアップのスキルを磨くことに躊躇している人がいるではないでしょうか。
その一方で、インターネット上には、マークアップについての基礎知識や最新技術を、第一線のマークアップエンジニアやWebデザイナー、Webコンサルタントがリアルに解説しているサイトがたくさんあります。こうした活用・参考サイトは自分の都合のよい時に閲覧して知識を学んだり、現状のスキルを確かめたりすることができます。しかも無料のサイトであればコストもかからず、なおさら嬉しいでしょう。
そこで今回は、時間や費用を節約して「実践的なマークアップスキル」や「プロのマークアップエンジニアとして恥ずかしくない体系的な基礎知識」が学べる優れた活用・参考サイトを8つにまとめ、ご紹介したいと思います。
目次
マークアップエンジニアの基本はやはりHTML・CSS
以前「マークアップエンジニアとは - Webコーダーとの違いを知る」ページでも紹介したように、マークアップエンジニアに求められる知識やスキルには様々なものがありますが、まずはやはり、HTMLとCSSに関する体系的な正しい知識を身につけることが基本でしょう。そこで、HTMLに関する基礎を養うためにおすすめの4つのサイトをご紹介します。いずれも有名でご存知の方も多いかと思いますが、まだチェックされてない方はぜひ参考にしてみてください。
HTML5実力テスト
まずご紹介する活用・参考サイトは、定期的に自分のスキルを測定できる『HTML5実力テスト』。面白法人カヤックが、日本マイクロソフトとGoogleと協力して開設した腕試し風オンラインテストです。英語にも対応しています。
Twitter、Facebook、Googleのアカウントでログインでき、一見お手軽風ですが、偏差値の測定やレーダーチャートなども表示されるため、マークアップエンジニアとして、自分の得意・不得意が分かり、内容は本格的。全国順位も出るので、実力を定期的に図るためのツールとしてブックマークしておくことは有益でしょう。しかも、テストの目安時間は15分と短時間で、スマホからの受験も可能。他業務をしながらマークアップエンジニアを目指す人にとっては、移動時間やちょっとした隙間時間に受験できるというメリットもあります。現在は、HTML/CSSコース、JavaScriptコース、iOS/Androidコースの基礎編・応用編と6種類がそろっています。
ドットインストール
3分動画で有名な『ドットインストール』。Webに携わる人なら一度は見たことがあるかもしれません。Webサイトを制作するためのHTML・CSS・JavaScript・jQuery入門はもちろんのこと、iOS・Androidのアプリ開発入門、サーバー環境構築入門、PHP入門、さらにはWordPressなどのCMS入門やUnityなどのゲーム系プログラミング入門まで、267のレッスンを3,811本の動画（2016年4月時点）が無料で閲覧できます。ユーザー登録のみで気軽に学ぶことができる最高に充実したおすすめサイトです。学習状況を管理することも可能で、マークアップエンジニアとしての自分の成長の過程を把握しやすいといったメリットもあります。
ただ、無料なのは初級編のみで、上級者向けのプレミアムレッスン動画に移行するためには月額980円（税込）必要になります。しかし「毎月書籍を1冊購入する」と思えば負担は少ないでしょう。マークアップエンジニアである自分にとって、それだけの投資の価値があるかどうか、まずは無料動画を体験してみてはいかがでしょうか。
とほほのwww入門
日本のインターネット創生期（1996年）から、「Webサイトを作ってみたい」というクリエイター達に、HTML・CSS・JavaScript・CGIなどの上質な情報を豊富に提供する老舗のWeb制作総合学習サイトです。常に新しい情報が追加されており、初心者から上級者まで幅広く人気があります。マークアップエンジニアを目指す人やWeb制作の基礎を学びたいという人にとっては、かなりおすすめです。
読みやすい解説と分かりやすい分類方法には定評があり、その充実度は「ここの情報を全て理解すれば、大体のことが分かるようになる」と評されるほど。マークアップエンジニアを目指すなら、ぜひブックマークしておきたいサイトの1つでしょう。
窓の社
Windowsアプリ・ソフトウェアをダウンロードできる老舗サイト『窓の杜』は、マークアップエンジニアの勉強にも強い味方です。コーディングに役立つ実践的なツール、HTMLの文法チェックやプレビューが確認できるエディタなど、無料でダウンロードできます（中にはシェアウェアのような有料ソフトもあります）。
もちろん、ダウンロードをする際のウィルス感染など、どんな環境でも常につきまとう懸念はありますが、「こんなツールはないか」と探したり、定点観測的に「新しいソフトにはどのようなものがあるのか」をチェックするだけでも、Web制作の技術トレンドを知ることができ、非常に有益と言えるでしょう。
プロのマークアップエンジニアとして必要なトレンドや業界知識を身に付ける
プロのマークアップエンジニアとして、Web・IT業界で活躍するためには、HTMLやCSSが、適正かつスピーディに書けるというだけでなく、トレンドや業界知識を身に付ける必要があります。また、マークアップエンジニアが手掛ける多くのWebページは、クライアントから注文を受けた商用サイト、商用ページであるということも認識しておく必要があります。このため、Webページの情報を適切なターゲットに対して、少しでも多く届けるためのSEOなどの知識も重要になってくることは必然と言えます。
私達マイナビクリエイターは、Webクリエイターの転職を支援するサービスを展開する立場上、多くの企業のWeb制作現場や採用現場に触れていますが、そこで実感するのは、やはりマークアップエンジニアには、専門スキル・トレンド・業界知識を「セットで持ち合わせていること」が大切だということです。
つまり、ただマークアップするのではなく、「そもそもユーザーの目に届けるためにはどうしたらよいのか」、また「閲覧するユーザーにとって快適な体験とは何か」など、配慮ある技術が必要とされてくるでしょう。それではここからは、マークアップエンジニアに切っても切り離せないWebトレンドや業界知識、特にSEOに関する有益な情報を提供している参考サイトをご紹介します。
Google検索エンジン最適化（SEO）スターターガイド
Googleが提供する『Google検索エンジン最適化（SEO）スターターガイド』は、サイトの構造を理解するためにおすすめです。検索エンジンがどんな評価基準によって「優良サイト」を識別しているのかといったアルゴリズムの概要を把握することができます。
検索エンジンは、人間のようにコンテンツを目で読み、内容を理解して「うん、これは役立つ、素晴らしいページだ」といった総合的な判断ができるわけではありません。「ページが明確に構造化されているか」「HTMLの記述は正しいか」「タイトル・見出し・本文に整合性はあるか」「各テキストの長さは最適か」といった様々な要素から、そのページの価値を判断しています。こうした仕組みをしっかりと理解しておくことで、検索エンジンに正当に評価してもらえるページのマークアップが可能になります。逆の言い方をすれば、この仕組みを理解しなければ正しいマークアップができません。
また、検索エンジン最適化（SEO）クイックチェックシートは、上記の内容をさらに初心者向けにまとめたもの。ブログを始めたばかりの人などをターゲットにしているので、まずはここからスタートして、その後スターターガイドを読むのもよいかもしれません。
Googleが発表している、フレンドリーなサイト制作・運営に関するウェブマスター向けの公式ブログも定期的にチェックすることもおすすめです。検索エンジンサービスを牽引するGoogleのWebに関する主要なトレンドを押さえることは、マークアップエンジニアにとって、引き続き必須となってくるでしょう。
SEO HACKS
SEO対策の基礎から応用まで幅広くカバーする『SEO HACKS』は、Webコンサルティング事業とインターネットメディア事業を展開するナイル株式会社が提供するサイトです。WebマーケターやSEO関連の企業の多くにチェックされています。コンテンツは非常に多彩で、SEO初心者向けから専門家向けの最新情報が掲載されているため、まずは自分に分かりやすいレベルのコンテンツを拾い読みし、少しずつレベルの高い最新記事にチャレンジするといった方法がおすすめです。
セミナー情報も随時更新されており、Web・IT業界の関係者との接触機会を増やすことにも役立つかもしれません。先述の通り、マークアップエンジニアは、専門スキル以外の業界トレンドなどの知識も企業から求められます。人脈作りは、就職や転職など、将来のキャリアを形成する上で、非常に重要なポイントにもなるでしょう。
SEO 検索エンジン最適化
『SEO検索エンジン最適化』は、「コンサルタントに頼らず自分で実施する」をテーマとした、上記の『SEO HACKS』同様、SEOに関する情報を掲載するサイトです。日本で最初のSEO解説書の著者でもあり、Webマーケティングコンサルタントの住太陽氏が運営しています。基本、全てが役に立つのですが、特に感銘を受けるのが、SEOの技術的な施策情報と同じぐらいの量、いや、それ以上に「SEOの考え方」について多く言及していることです。
もしマークアップエンジニアを目指すのであれば必読間違い無しです。技術的な情報は、少々難しく段階を踏まないと理解できないかもしれませんが、SEOの考え方や取り組みの姿勢という部分においては、すぐに学べることが多いかと思います。SEOの考え方のカテゴリーでは、SEOのデメリットに関する記事もあり、まさに著者自身がSEOに真摯に向き合ってるという姿勢を感じます。
iKESAi.com
Webデザインに役立つ参考サイトとはこのまさにこと『iKESAi.com 』。イケてるサイト、カッコいいサイト、おしゃれなサイト、クールなサイトを運営者のセンスでピックアップして紹介しているサイトです。Webのトレンドは数ヶ月単位で大きく変化するため、こうしたサイトを定期的にチェックして、意識的に時代の変化を取り入れていきましょう。
カテゴリも業種ごとに分類され、幅広くカバーしています。またサイトのメインカラーの配色ごとにも分類され、自分が今携わるWeb制作に照らし合わせて見ることができ、自分がこれから作りたいジャンルのサイトについて、参考になるヒントを得ることができます。マークアップエンジニアとしては、イケてる！と思うサイトのソースコードをチェックしたりして、SEO的にどのような施しがされているのかまで見れたら、スキル向上につながるでしょう。
キャリアアドバイザーからの一言コメント - 時間を上手に使ってスキルアップを図ろう
紹介した参考サイトは、いずれも膨大な情報のコンテンツが用意されています。すべてを網羅するにはかなりの時間を要するでしょう。しかし、それぞれのコンテンツは、コンパクトにまとめられているため、短ければ数分、長くても数十分単位での学習が可能なもの多くあります。
大切なのは、これらの学習を好きになること、習慣的にすること、だと思います。マークアップエンジニアを志す皆さまであれば、もちろんその好奇心や意欲は高いことでしょう。常日頃から、隙間時間ができたら勉強するという癖をつけることで、数か月後には見違えるほどのスキルアップにつながるかもしれません。「継続は力なり」です。小さな努力をコツコツ積み重ねることで、プロのマークアップエンジニアとして恥ずかしくない体系的、かつ実践的なスキルを身につけていきましょう。
マイナビクリエイターおすすめ！マークアップエンジニアに関するコンテンツ
この記事を書いた人
マイナビクリエイター編集部は、運営元であるマイナビクリエイターのキャリアアドバイザーやアナリスト、プロモーションチームメンバーで構成されています。「人材」という視点から、Web職・ゲーム業界の未来に向けて日々奮闘中です。
