HTML5プロフェッショナル認定資格ってなに？

皆さんこんにちは。
本日も私、公務員を辞めITエンジニアに転職した歴8ヶ月程度の若僧エンジニアが、実体験に基づき、HTMLプロフェッショナル認定資格について解説し、実際に私自身が取得した時の勉強方法などを書いていきたいと思います。

そもそもHTMLとCSSって何？？

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略語となっており、簡単にいうと皆さんがいつもご覧になっているようなWebサイトなどの骨格を作るプログラミング言語、とイメージしていただければ良いでしょう。
例えば、Chromeで適当なWebサイトを開き、F12キーを押してみましょう。（Macの場合は、右上の「・」が3つ縦に並べてあるボタンをクリックし、その他のツール→デベロッパーツールで同様の操作になります。）そうすると何かごちゃごちゃとした画面が現れますよね。その現れた画面に書かれているものがソースコードと呼ばれるもので、そのWebページの構造を表します。そこにHTMLやCSSなどが書かれていて、該当するWebページの中身を見ることができてしまいます。このソースコードをブラウザで読み取りWebページに表示させているのです。
そしてCSSとはというと、Cascading Style Sheets（カスケーティング・スタイルシート）の略語であり、HTMLが見出しやヘッダなどのWebページの文書構想を形作るための言語であるのに対し、CSS言語は文章のデザインや文字の大きさなどといった見栄えを作る言語となっております。先ほどお教えしたF12キーで開いた画面の一番左上に、□に⬅️マークがついたPageというボタンがあるかと思いますが、そちらをクリックすると画面が切り替わり、そこにStyleという項目の画面が現れます。そこにいろいろソースコードが書かれていると思いますが、こちらが適用されているCSSを表しています。
最初はわからないことが多いかもしれませんが、Webページを人間の顔で例えると、HTMLで人間の顔のパーツ（目や鼻や口）を作って、CSSでHTMLで作った目の大きさや鼻の高さ、口の形を整えて、今は触れていなかったですがJavaScriptで目にまばたきをさせたり、口を動かしたりするという様なイメージでとらえていただけると分かりやすいでしょう。

HTML5プロフェッショナル認定資格は人気が高い資格

IT業界には様々な資格Web系の資格がありますが、いくつか例を挙げると以下の様なものがあります。

この他にもいろいろな資格があるようですが、この中で今最も人気があるのが「HTML5プロフェッショナル認定資格」になります。なぜ、人気があるのかというと、資格で問われる内容がほぼ実務で使う項目ばかりだからです。
またHTML5プロフェッショナル認定資格は、Level1とLebel2に分かれており、レベルごとに出題される分野が異なり難易度も変わってきます。ここでLebelごとの内容を簡単に説明しましょう。

Level1：試験概要

公式サイトにて、資格の概要として「マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・制作できる」と表現されております。Level1では、HTMLのタグの構造や用途、CSSの基本的な文法などを中心に学びます。現場でクライアント側の実装などを行う時にかなり使える知識ですね。

Level2：試験概要

公式サイトにて、資格の概要として「システム間連携や最新のマルチメディア技術に対応したWebアプリケーションや動的Webコンテンツの開発・設計ができる」と表現されております。私自身Level1は取得しておりますが、Level2ではLevel1で問われなかったJavaScriptのプログラミン技術が問われ、他の分野でもさらに細く問われるようです。

分野別にみた試験の対策重要度（10段階）※公式サイト参考

HTML/HTML5マークアップ：HTML5に関するタグの用途、構造の組み立て方に関する技術（Level1:段階7）（Level2:段階10）

グラフィックス：JavaScriptやCSSなどを用いて、動的にグラフィックスを生成したりアニメーションを実現したりする技術(Level1:段階7）（Level2:段階10）

レスポンシブWebデザイン：1つのソースで、スマートフォンなどの様々なデバイスに対応できる技術(Level1:段階7）（Level2:段階10）

通信・デバイスアクセス系API：JavaScriptからクラウドと通信をして情報の送受信を行ったり、センサーなどのデバイスにアクセスしたりする技術(Level1:段階5）（Level2:段階10）

JavaScriptプログラミング：JavaScriptを使って、動的な機能を実装する技術(Level1:段階0）（Level2:段階10）

マルチメディア：3D・動画・音声ファイルなどのマルチメディアコンテンツの表示、再生に関する技術(Level1:段階4）（Level2:段階10）

ユーザビリティ：JavaScriptやCSSなどを用いてデザイン仕様に沿った見やすい表示や、操作しやすいコンテンツを作成する技術(Level1:段階5）（Level2:段階10）

パフォーマンス：ストレージや並列処理を使ってコンテンツを効率よく高速に動作させたり、オフラインでも動作する仕組みを作ったりするための技術(Level1:段階3）（Level2:段階10）

上記のデータからわかるように、Level1では、JavaScript以外の分野を基礎レベルで問われ、Level2では各分野全て奥深く問われるようですね。私自身Level1を受験した時は万全の状態で挑んだつもりでしたが、問われる範囲が広く予想していたなかった分野からの出題などがあったため、配点はギリギリで合格でした。
さてここからは、私が実際にHTMLプロフェッショナル認定資格を受けようと決意した経緯や、取り組んだ学習方法について説明させてください。

なぜHTML5プロフェッショナル認定資格を受検したのか

私が最初にいただいた仕事の内容は、主にフロントエンドエンジニアとしての仕事が多かったんです。画面側の実装が多く、CSSを使って仕様通りのレイアウトにしたり、JavaScriptを使って画面に動きを付けたりといったような作業が主でした。
当時の私はJavaは読めたのですが、HTMLやCSSは全く知識が無い状態でした。CSSで文章の改行をしたり、文字のスタイル（文字の形式）を仕様通りに変えるといった非常に簡単そうに見える作業ですら、最初は全くうまくいきませんでした。webページの画面に表示される文字やデータが、なぜ開く度に変わったり保存されていたりするのかも疑問でなりませんでした。そこで、このままでは仕事が進まないと感じた私は、そもそもWebページがどの様にできているか全体を掴める程度の知識が欲しいと思い、この資格の受験を決意した、というのが受検までの経緯です。

HTML5受験を決意し行った学習方法

使用教材

HTML5プロフェッショナル認定資格レベル1対策テキスト＆問題集

こちらの教材は公式サイトでも紹介されている教材で、HTML5プロフェッショナル認定資格の出題範囲が網羅されているという質の高い教材としても有名です。私も使ってみましたが、各分野ごとに細かく分類された内容が記載されており、HTML5とCSS3のタグやプロパティの意味や文法、HTTP通信を図でわかりやすく解説されていたり、とボリューム満点の大変満足のいく内容でした。

Ping-t(プレミアム会員1ヶ月 ※1000円程度)

こちらのPing-tは1ヶ月からプレミアム会員になることができ、会員になるとHTML5プロフェッショナル認定資格の出題形式に近い問題が400問以上解くことができるような内容となっていました。また親切なことに、各分野ごとに問題が振り分けられているのです。

学習期間：2ヶ月

学習の方法としては、まずインプット作業で上記で紹介した教材を一周しました。期間としては、昼間は仕事をしていたので平日の1時間を4週間くらい学習時間に当てたので計20時間といったところでしょうか。とても内容が多いため暗記して覚えるよりも理解して覚えることをオススメします。教材を一周するとある程度の知識を付けた状態にできたので、次にアウトプット作業としてPing-tの有料アカウントに登録してひたすら問題を解きました。間違った問題などは、Ping-tの機能でデータ化してくれるので管理はしなくても大丈夫です。また丁寧に解説も表示されるので、私はPing-tを使ってからはほぼ教材は使いませんでした。最初にPing-tの模擬試験を行った時は70％くらいの正当率でしたので、再度間違えた問題をping-tの機能で抽出して徹底的に学習すると、平日1時間のイメージで1ヶ月もすれば合格範囲にたどり着くことができました。

HTML5プロフェッショナル認定資格を受けてみての感想

結果としては無事75％で合格できました。正直本試験は、JavaSliverSE8を受けた時よりも難しかったです。というのも本試験ではPing-tで出題されていなかった様な問題も4割程度出題されたので、免疫力がついていなかったのかもしれません。私の学習方法であれば、もう少し教材に目を通しておけばもっと高得点を獲得でき、知識もつけられたかなと感じました。
HTML5プロフェッショナル認定資格に合格できたことによりモチベーションが高くなったのもありますが、何より仕事をしていてプログラムの組み方や、どこを修正すれば良いかといった問題解決能力が大きく身につきました。具体的な例を挙げると、CSSでは優先度といったものがあるのですが、その知識が身についたため、以前1時間とかかっていたレイアウトバグ修正が5分で解決できたり、HTTPS通信が理解できたので、Webに表示される値の送受信を考慮した上での実装技術も身につきました。

まとめ

私はこの資格を取得したことにより、簡単なWebページを作れるくらいの技術は身についたと言えます。現在ではWordPressのようなCMS（コンテンツマネジメント管理システム）といった、HTMLやCSSの技術がなくても簡単に動的なWebページを作れるといったツールもありますが、オリジナリティ溢れるWebページを作るのであればHTMLやCSSの知識は必要かと思いますのでぜひ取得してみてはいかがでしょうか？
自分でWebサイトを実装したい、プログラムを組んで画面側の機能を作りたい、フロントエンドの仕事をしているが全くわからないから勉強がてら資格をとりたい、といったような考えをお持ちの方は、ぜひこちらのHTML5プロフェッショナル認定資格を受検してみましょう。