Open Source Conference 2021
Online Hokkaido

HTML5プロフェッショナル認定試験
レベル1解説セミナー〜フロントエンド3年生、取得体験記 〜
2021年6月26日（土）@OSC 2021 Hokkaido

株式会社フォーク
阿部 大知
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

2Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介

阿部 大知
株式会社フォーク 札幌ブランチ所属 フロントエンドエンジニア
趣味：
キャンプ、ベース演奏、ゲーム
所有資格：
ワープロ検定1級、色彩検定2級、Webクリエイター能力認定試験 エキスパート、HTML5プロフェッショナル認定試験レベル1

2015

職業訓練所にてWebサイト制作を学び、札幌のWebサイト制作会社に入社

2018

株式会社フォーク入社
Webページ制作などの案件に携わりながら、
HTML5プロフェッショナル認定試験レベル1取得

2021

レベル2取得に向けて勉強中
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

3Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

自己紹介
株式会社フォーク
＠渋谷、札幌（ HTML5プロフェッショナル アカデミック認定校）

HTML5プロフェッショナル認定試験の合格者
Lv1:

51名

※2020年6月時点

Lv1:

60名

※2021年6月時点

私が所属する札幌ブランチでは、9名がレベル1に合格しています

https://www.fork.co.jp/
https://4009.jp/
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

4Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

本日の目次★ HTML5プロフェッショナル認定試験について★ 実際に取得するまでの体験記★ 社内アンケート★ 案件で使っている知識、勉強後に使えるようになった知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

5Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

HTML5プロフェッショナル

認定資格についてThe HTML5 Logo is licensed under Creative Commons Attribution 3.0.

6Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

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

特定非営利活動法人エルピーアイジャパン（LPI-Japan）が、
HTML5、CSS3、JavaScriptなど
最新のマークアップに関する技術力と知識を、公平かつ厳正に、中立的な立場で認定する認定制度

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

7

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

2つのレベルHTML5 レベル1
マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・作成できる。

HTML5 レベル2
システム間連携や最新のマルチメディア技術に対応した
Webアプリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

8

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

2つのレベル
今回はこちらHTML5 レベル1
マルチデバイスに対応したWebコンテンツをHTML5を使ってデザイン・作成できる。

HTML5 レベル2
システム間連携や最新のマルチメディア技術に対応した
Webアプリケーションや動的Webコンテンツの開発・設計ができる。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

9Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

出題範囲HTML/HTML5

マルチメディア

マークアップHTML5に関するタグの用途、構造の組み立て方に関する技術

３D・動画・音声ファイルなどのマルチメディア
コンテンツの表示・再生に関する技術

グラフィックス

ユーザビリティJavascriptやCSSなどを用いて、動的にグラフ
ィックスを生成したりアニメーションを実現したりする技術

JavascriptやCSSなどを用いて、デザイン仕様に沿った見やすい表示や操作しやすいコンテンツを作成するための技術

レスポンシブWebデザイン

パフォーマンス

一つのソースで、スマートフォンなどの様々なデバイスの画面サイズに対応させるための技術

ストレージや並列処理を使ってコンテンツを効率よく高速に動作させたり、オフラインでも動作する仕組みを作るための技術

通信・デバイスアクセス系APIJavaScriptからクラウドと通信をして情報の送受信を行ったり、センサーなどのデバイスにアクセスしたりする技術

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

10

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

試験について

所要時間

90分（機密保持契約とアンケートの時間を含む）

試験問題数

約60問

受験料

￥16,500（税込）

試験実施方式

コンピュータベーストテスト（CBT）※マウスによる選択方式がほとんどですが、入力問題も多少出題されます。

受験場所

全国各地の試験センターでの受験か、自宅や職場からのオンライン受験が可能

合否結果

試験終了と同時優位性の期限

5年間

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

11

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

実際に取得するまでの体験記

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

12

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記取得する事になったきっかけ
弊社がLPI-Japan HTML5のアカデミック認定校だったこともあり、入社後に取得を勧められたのがきっかけ

職業訓練校時代にもWebクリエイター能力認定試験 エキスパートを受け、独学で色彩検定2級を取得したりと資格勉強にあまり抵抗がなかったのと、会社から補助も出るとの事で取得を目指す事に

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

13

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記取得に向けて準備
同僚の方に「webで働いていた人なら1から勉強するよりも問題集を解きながら進めた方が良い」と教えてもらったので本屋で問題集を購入し、その日のうちに受験予約の手続きを進める・購入した書籍
HTML教科書 HTML5プロフェッショナル認定試験 レベル1 スピードマ

スター問題集 Ver2.0対応
https://www.shoeisha.co.jp/book/detail/9784798154619

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

14

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記取得に向けて勉強
当時案件が忙しくまとまった時間が取れず、仕事の合間や土日を使って勉強進めてました。

問題集は例題と解説、回答が記載されている一問一答の形式だったので

仕事の合間でも進める事ができ、問題集を進めて不正解のとこだけ後で解き直す、解説を読んでも理解できない箇所は別途勉強して解き直す。
を繰り返し、試験日が近くなったら模擬試験をひたすらやっていました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

15

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記
勉強時間
受験日は受験を決めた日の約一ヶ月後に設定してましたが、一ヶ月間の間で勉強にかけた時間は大体ですが、問題集反復： 8時間

不明点勉強： 8時間
模擬試験： 4時間

合計20時間くらいでした

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

16

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記
受験当日
予定時間まで模擬試験を反復して受験会場へ。
会場で受付をし、係の人にパソコンの前まで案内され、画面の指示に従って受験を開始。

50分くらいで全て解き終わり、見直しに10分ほどかけて採点ボタンを押す。

画面に点数が表示され、合格しましたとの旨の内容が表示され無事合格、終わったら自由退出だったので、受付に戻り会場を後に。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

17

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記取得した感想•資格取得に必要な知識は業務で使うものがほとんどだった•

用語だけ聞いた事がある知識を勉強する良い機会になった•

同僚のアドバイス通りある程度htmlに触れていた人が問題集で勉強するのは良いが用語自体が分からない人は解説が細かく書いてある

参考書の方がおすすめ•

web経験が長い人も新しい発見は少ないかもしれないですが、改めて技術を再確認するという点では良いかなと思います。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

18

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記

それってあなたの感想ですよね？

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

19

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記Web業界で働いた事がない人やデザイナーやディレクターなどの職種の人が取ろうとした場合の勉強時間は？
実際業務に役に立つの？

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

20

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

21

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート

社内の取得者33名に以下の項目でアンケートを答えてもらいました。
・職種

・取得した時のweb業界経験年数
・取得にかけた勉強時間
・何回目の試験で合格できたか

・学んだことは業務で役立っているか？

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

22

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
職種の割合

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

23

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
取得にかけた時間（全体）The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

24

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
取得にかけた勉強時間（フロントエンドweb歴別）

1年未満

1年以上

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

25

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
取得にかけた勉強時間（フロントエンド以外web歴別）

1年未満

1年以上

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

26

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
１回目の受験で合格した割合

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

27

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
学んだ事は業務で役に立っているか

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

28

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート

フロントエンドエンジニア（web歴3年以上）
クッキーや、セッションなど、用語だけ聞いた事があるものを学ぶ事ができて、その後自分が実装する立場になった時に役に立ちました

フロントエンドエンジニア（web歴1年未満）
元々趣味でWebページを作ったことがあったので、実装自体はある程度できる状態ではあったのですが、網羅的にHTML/CSSについて学ぶ機会になったのが良かったと思ってます。調べものをする際にある事柄を知っているのと知らないのでは効率も変わってくるので、そうい

う気づきにくいところで役に立っています。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

29

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート

システムエンジニア（web歴3年以上）
セマンティクスの知識。セマンティクスに沿ってコーディングすることで、スクリーンリーダーによる読み上げのようなアクセシビリティも向上させることができています。

ディレクター（web歴1年未満）
コーディングやデザイン技術の知識を得たことで、WEBサイトを考察する際にサイトの良い点や改善点を具体的に説明できるようになりました。制作陣とのコミュニケーションやサイトチェック等の業務で役立つと思います。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

30

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

社内アンケート
およそ75%が3ヶ月以内に合格していて、フロントエンドの業界年数が長いほど合格率は上がっていく傾向にあります。

フロントエンド以外だと業界年数が長くても勉強時間が短くなる傾向はそこまで見受けられなかったですが初回での合格率が90%を超えており、合格率は職種、web歴共に関係ないものだったので、対策さえしておけば取得は難しくないものなのかなと思います。

また、業務に役に立っていると答えてもらった人は90%を超えており、大半の人は学んだ事で何かしら有益な知識を得る事が出来たというアンケートの結果になりました。
The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

31

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識、勉強後、使えるようになった知識

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

32

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識
セマンティクス（ドキュメント内の意味）
HTML5ではセマンティクスを適切な要素（タグ）でマークアップする事が重要とされており、適切に要素を配置するコーディングを、セマン
ティックなコーディングと言われます。

セマンティックなコーディングする事でhtmlの見やすさが上がり、検索エンジンからサイトに訪れる人が増え、アクセシビリティの向上につながるため、案件では常に求められる知識になります。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

33

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識
セマンティックに書くために便利なタグ 1
header ：導入部やナビゲーション等のグループを定義

nav：

ナビゲーションを定義

main： 主要な内容を定義

section ： 文書の自立した区間を定義
article：

独立している要素を定義

footer：

関連ドキュメントへのリンクや著作権情報等を定義

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

34

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識

divだけの構造

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

35

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識

セマンティックに書いた構造The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

36

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識

divタグは使ってはいけないのか？
使って問題ない。

divタグは何も定義していないだけなので、cssやjsの適用対象としてグ
ループ化の要素としてよく使います。
なので先ほどのタグに当てはまらない場合はdivを使ってマークアップ
をしていきましょう。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

37

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識
セマンティックに書くために便利なタグ 2
time：

日付や時刻を定義

em：

強調したいテキストを定義

strong： em以上に強調したい内容を定義

small： 著作権表示など、小さく表示される文を定義

sup：

表記上、上付き文字として定義

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

38

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識

spanタグは使ってはいけないのか？
こちらも使って問題ない。

divタグ同様に何も定義していないだけなので、グループ化の要素として使います。
ただdivタグよりは代用できるタグが多いので極力減らせると出来るエ
ンジニアっぽくなると思います。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

39

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使っている知識

divタグ、spanタグだけでなく、適切な要素でコーディングするのがセマンティックなコーディングの第一歩

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

40

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使えるようになった知識
ステータスコードステータスコードとは、リクエストが成功したかどうかを表す数値のこと。
ステータスコードは100番台〜500番台までの5つのグループが存在し、50個以上のステータスコードがありますが覚えておく必要があるのは少数です。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

41

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使えるようになった知識
番台におけるステータスコードの違い
100番台 ：

処理中を示す200番台 ：

処理成功

300番台 ： リダイレクト
400番台 ：

ブラウザからのリクエストに問題あり

500番台 ：

サーバー側で問題あり

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

42

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使えるようになった知識実務でよく聞くステータスコード301：

永続的なページリダイレクト302： 一時的なページリダイレクト403：

アクセスが禁止されている

404：

ページが削除されている

500：

サーバー内のエラー

503： サーバーが落ちている

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

43

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使えるようになった知識
勉強以前• 404が表示されたらページがない。500番台はサーバー側の問題くらいの認識•404以外で何かしらエラーが発生した時はサーバーに強い人に聞くか、検索して対応方法を試して解決していた。

•

リダイレクトは特に指示がなければmeta refresh（htmlで行う方法）

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

44

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

案件で使えるようになった知識
勉強後• よく見るステータスコードに関しては内容を覚えているので、どこが問題があるかすぐ判別がつき、解決までの時間が早くなった。
•

サーバー担当の人にエラーが出た時に対応を依頼するときも前より
詳細な内容を付け加えてお願いできるように•

リダイレクトも対応が必要な状況に合わせて方法を選べるようになった。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

45

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

取得体験記最後にHTML5プロフェッショナル認定試験 レベル1は実用的かつ基礎的な知識が必要な資格なので、実務に近いwebの知識を学びたい、または学び直したい。という人には良い指針になる資格だと思います。
また、全ての資格に言えますが目的が勉強ではなく資格取得になってしまうと、勉強しても身につかない事がほとんどですので、勉強した結果の成果として資格の取得を目指すのがおすすめです。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

46

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

ご清聴ありがとうございました。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

47

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

ご質問

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

48

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

公式アカウント、URL

HTML5プロフェッショナル認定試験のサイト
http://www.html5exam.jp/

Twitter@html5Cert

Facebook
https://www.facebook.com/html5exam

過去のセミナーでの配布資料や、イベント情報などが配信されています。

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

49

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.

The HTML5 Logo is licensed under Creative Commons Attribution 3.0.

50

Unported by the W3C; http://creativecommons.org/licenses/by/3.0/© LPI-Japan 2016. All rights reserved.