• どのような勉強をしたのか
• どの書籍やサイトを参考にしたのか

を紹介していきます！

HTML5プロフェッショナル認定試験とは

HTML5プロフェッショナル認定とは、HTML5、CSS3、JavaScriptなど最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定制度です。

https://html5exam.jp/outline/

簡単にいうと、フロントエンドに関する知識を問われる試験ということです。

ここで重要なのは、HTML5プロフェッショナル認定試験はHTMLの資格ではなく、HTMLに関連する技術を問う試験なのです！

なので、この資格を持っているということは、HTML5に関連する知識も持ち合わせているということの証明にもなるのです！！

レベル1とレベル2の違い

レベル1は、HTMLとCSSの文法からニッチなタグや擬似要素や擬似クラスについて問われます。
一部、canvasタグやvideoタグの問題でJavaScriptの知識が少しだけ必要になりますが、JavaScriptの文法などは問われません。
canvasタグでできることは？videoタグでできることは？といった問題です。

レベル2は、JavaScriptの文法からDOM操作やAPIについて問われます。
こちらもレベル1同様に知識を問われる問題も出題されるのですが、出題されるJavaScriptのコードを読んで、処理の結果がどうなるかを問う問題が多いです。

レベル1、レベル2という風に試験が分かれていますが、受験する順番はどちらが先でも構いません。
先にレベル2に合格したからといって、その合格が有効にならないということはありません。

レベル1

使用するサイト・書籍

Ping-tのプレミアムプラン 2400円(税込)
Ping-tはIT系の資格を目指す人の学習サイトです。
無料の問題も公開されていますが、HTML5プロフェッショナル認定試験レベル1は有料コンテンツになっています。

出題範囲

1. Webの基礎知識
   1. HTTP, HTTPSプロトコル（重要度：8）
   2. HTMLの書式（重要度：9）
   3. Web関連技術の概要（重要度：6）
2. CSS
   1. スタイルシートの基本（重要度：7）
   2. CSSデザイン（重要度：9）
   3. カスケード（優先順位）（重要度：2
3. 要素
   1. 要素と属性の意味（セマンティクス）（重要度：10）
   2. メディア要素（重要度：6）
   3. インタラクティブ要素（重要度：7）
4. レスポンシブWebデザイン
   1. マルチデバイス対応（重要度：7）
   2. メディアクエリ（重要度：5）
5. APIの基礎知識
   1. マルチメディア・グラフィックス系API概要（重要度：5）
   2. デバイスアクセス系API概要（重要度：4）
   3. オフライン・ストレージ系API概要（重要度：4）
   4. 通信系API概要（重要度：3）

勉強法

まずはPing-tのサイトにアクセスして会員登録を行ってください。

会員登録ができたらPing-tのプレミアムプランに申し込みます。
プレミアムプランに申し込んでから1ヶ月間問題集を利用できます。

学習順は、最初にAPIの基礎知識を学習してください。
それ以降の順はなんでも大丈夫です。
Ping-tの合格者の声を見ると、APIの基礎知識の学習時間が足りなかったやAPIの基礎知識をもう少し勉強しておけばよかったなどがあります。
点数を稼げる項目なので他のどこよりも徹底的に勉強してください。

Ping-tでは項目ごとに出題数を指定することができるのですが、
1週目は出題数を3問や5問などの少ない数に設定しておきましょう。
3~5問に設定する理由は、Ping-tで公開されている問題は過去問ではないため、問題をこなしたからといって合格できるわけではないからです。
回答し終わったら、解答の解説に書かれている内容は暗記するくらいの気持ちで熟読してください。
解説は他の問題を解くときに役立つ内容が書かれているので、これを繰り返すだけで十分合格ラインに立てます。

上記内容を意識してゆっくり学習したとしても1~1.5ヶ月で合格できます。

勉強する際にノートをとってもいいのですが、時間がかかるのであまり効率的ではないです。
無料で使える暗記カードアプリがあるので有効活用しましょう。

手軽に暗記 Ankilot

資格や英語の勉強で暗記するために単語カードや単語帳を作ったことありませんか？ 単語カードに長い文章を書くと文字が小さくなって後々読み返しづらくなってしまったり、単語帳に暗記したい用語をまとめると用語の順番シャッフルできなくてもどかしかったりという経験が少なからずあると思います。 Ankilotはこの悩みを解決してくれるだけでなく、PCとスマホの同期、読み上げ機能もあります

nabeshiblog.com

2021.09.15

レベル1については最後になりますが、参考書を買う必要はないです。
現在(2022/4/28)出版されているレベル1の書籍は2冊ありますが、どちらもPing-tのプレミアムプランより高いです。

学習期間が1ヶ月以上かつ書籍購入予算が3,000円くらいの場合はこちらで学習して見てもいいかもしれません。
個人的にはAPI系の問題が充実しているように感じました。

時間がある方は公式のサンプル問題にも取り組みましょう。
このサンプル問題は非常に難易度が高いです。
その割に実際に出題される問題は1問か2問くらいでコスパが悪いので本当に時間がある方だけ取り組むようにしてください。

レベル2の勉強法

使用するサイト・書籍

HTML5プロフェッショナル認定試験レベル2スピードマスター問題集 ¥3,740(税込)

JavaScript Primer

出題範囲

1. JavaScript
   1. JavaScript文法(重要度：10)
   2. ES6（ECMAScript2015）以降の新機能(重要度：8)
2. WebブラウザにおけるJavaScript API
   1. イベント(重要度：8)
   2. ドキュメントオブジェクト／DOM(重要度：6)
   3. ウィンドウオブジェクト(重要度：8)
   4. Selectors API(重要度：7)
   5. History API(重要度：7)
   6. テスト・デバッグ(重要度：6)
3. グラフィックス・アニメーション
   1. Canvas(2D)(重要度：8)
   2. SVG(重要度：2)
   3. Timing control for script-based animations(重要度：2)
4. マルチメディア
   1. メディア要素のAPI(重要度：5)
5. ストレージ
   1. Web Storage(重要度：7)
   2. Indexed Database API(重要度：5)
   3. File API(重要度：5)
   4. バイナリーデータ(重要度：4)
6. 通信
   1. Web Socket(重要度：5)
   2. XMLHttpRequest(重要度：5)
   3. Server-Sent Events(重要度：1)
7. デバイスアクセス
   1. Geolocation API(重要度：5)
   2. DeviceOrientation Event(重要度：1)
8. パフォーマンスとオフライン
   1. Web Wokers(重要度：5)
   2. High Resolution Time(重要度：2)
   3. オフラインアプリケーションAPI(重要度：3)
   4. Page Visibility(重要度：2)
   5. Navigation Timing(重要度：1)
9. セキュリティモデル
   1. クロスオリジン制約とCORS(重要度：4)
   2. セキュリティモデルとSSLの関係(重要度：4)

勉強法

問題集を使って学習を始める前に、まずは出題範囲を確認してください！
2021/4/1に出題範囲の改定があり、以下の項目が追加されました。

ES6（ECMAScript2015）以降の新機能(重要度：8)

この項目は問題集に含まれていないので注意です。

JavaScriptを勉強したことはあるけれど、まだそんなに使ったことがない方は一番最初から勉強していけばOKです。
それなりにJavaScriptを使っている方(Web制作レベルでOK)は5章から勉強するようにしましょう。

勉強法はレベル1同様に解説をしっかり理解することが一発合格への近道となります。
レベル2では「以下のコードを実行したときに正しいものを選べ」というような問題が出題されるため、手を動かして処理の流れを把握しておくことが大事です。
レベル1はどちらかというと暗記する項目が多かったですが、レベル2は処理の流れや処理結果がどのようなものになるのかを理解しておけば大丈夫です。

書籍の巻末に試験2回分の問題があるので必ず取り組んでください。
受験日から1週間前くらいに取り組むのがオススメです。

余裕がある方は公式のサンプル問題にも取り組んでみてください。

受験料を安くするには？

受験料はレベル1レベル2共に￥16,500(税込)です。

とても安い金額とはいえません。
そこで、少しでも受験料を安くする方法をお伝えします！

安く受験するにはPing-tで受験チケットを購入するだけです。
受験チケットの価格が¥ 15,400(税込)なので1,100円お得です！
こちらから購入できます！
1つのチケットで1つの試験に適用できます。
受験チケットを使用するには、試験申し込みの際にチケット番号を入力する箇所があるのでそこに必ず入力してください。

試験に合格すると。。。

試験合格から約2ヶ月後くらいに合格証明書が送付されます。

レベル1とレベル2の合格証明書を合わせると、HTML5のロゴが完成します。
なんだかバイオハザードの重要アイテム見たいですね笑

その他の戦利品です。

おわりに

今回はHTML5プロフェッショナル認定試験の勉強法について書きましたが、いかがでしたか？

Web制作の実績があまり多くなく、提案をしても返事が来る確率が低いという方は是非この資格をとってみてください！
資格を持っているということは実力の証明になるので、クライアントからの信頼も得やすくなります！

また、別の資格に合格できたら勉強法をまとめようと思っているので気長に待っていただけると幸いです。

それでは！

試験に合格するメリット

Web系のことを全く知らない人に対して営業することを想定すると持っておいて損はないと思います。
なんてったって【エキスパート】という名前がついているくらいですから、なんか凄そうくらいには思われそうです笑

後は有効期限がないということですね。
フロントエンドの知識は移り変わりが早いですが、この資格は１回合格すれば再受験の必要もなく、失効することもありません。

たった1日勉強するだけで合格するには？

ステップ1: 参考書を購入する

1日で合格するには必須です。
というのも、本の内容と試験の内容がほぼ一緒だからです！
効率よく学習するには欠かせませんね。

ステップ2: Dreamweaverをダウンロードする

Dreamweaverを知らない方に簡単に説明しておくと、HTMLやCSSのコードをツールだと思ってください。
PCに標準でインストールされているメモ帳でもHTMLとCSSは記述できるのですが、Dreamweaverを使用するとある程度予測変換が出てくれるのでHTMLやCSSが不安な方は特にダウンロードした方が良いです。
実際の試験でもDreamweaverが使えるので、試験前に操作に慣れておくことをお勧めします。

初めてダウンロードする方は1週間無料で使えます。
この期間内に解約してしまえば料金はかかりません。
Dreamweaverのダウンロードはこちら

ステップ3: 参考書を使って勉強する

勉強といっても基本的には参考書に倣ってコードを書いていくだけでOKです。
参考書内では「HTML4では〜」とか「XHTMLの書き方は〜」のようなことが書かれていますが、この試験はHTML5の試験なのでその辺りは無視して大丈夫です。
閉じタグがなくても動作するなどの説明もありますが、あえて閉じタグを書かない(空タグを除く)なんてことはないので、そこも無視でOKです。

参考書の9章でwebデザインの基礎知識を紹介しているのですが、そこは暗記してください。
ここも参考書に載っているものだけ問われるので暗記しておけば確実に点を稼げます。

9章まで勉強し終わったら、サンプル問題を解いていきましょう。
作成するサイトが少し変わるだけで実装する内容はほぼ同じです。
うまく実装できなかった箇所は回答を見て理解しておきましょう。

ここまでできたらあとは受験するだけです！

おわりに

いかがだったでしょうか？
1日で合格できて履歴書に書くこともできるのでかなりコスパの良い資格だと思います。
これからWeb制作をしていきたい方は是非挑戦してみてください！