本記事では、ウェブデザイン技能検定の2級実技試験の概要と対策について解説します。
2級実技試験の各問題の解説は下記よりアクセスできます。
- 【ウェブデザイン技能検定】2級実技試験 作業1の解説・回答
- 【ウェブデザイン技能検定】2級実技試験 作業2の解説・回答
- 【ウェブデザイン技能検定】2級実技試験 作業3の解説・回答
- 【ウェブデザイン技能検定】2級実技試験 作業4の解説・回答
- 【ウェブデザイン技能検定】2級実技試験 作業5bの解説・回答
問題については、令和5年度第2回をベースに解説をしています。
実技試験については、毎回ほぼ同一問題のため、過去物の丸暗記のみで試験対策を行えます。
①ウェブデザイン検定学科試験2級実技の概要
概要は下記の通りです。
| 問題数 | ５問（５問目は選択問題） |
| 合格基準 | 70点以上（100点満点：ただし、試験要項に示す各作業分類において配点の60％以上の得点を得ること） |
| 使用できるソフト | TeraPad、サクラエディタ、Sublime Text、Visual Studio Code、Adobe Photoshop（Adobe Dreamweaverは令和6年度より使用不可となりました。） |
| 試験時間 | 120分 |
| 合格率 | 約30〜40%（筆記を含めた合格率） |
②合格点をとるには
合格基準は70点以上と明示されていますが、各問題（作業）において配点の60％以上の得点を得ることなっているため、各問題の完答が求められます。
ただ、毎回各問題は同問題となっているため、回答の丸暗記で対応できます。
③各問題（作業）の概要
試験問題（作業）のざっくりとした内容は下記の通りです。
- 作業１．グローバルナビゲーション用の GIF 作成 メニューは4つでマウスオーバー時の4つと合わせて8ファイル作成
- 作業２．指定画像と指定テキストを組み合わせて GIF アニメーションバナー作成 3つある画像から2つ選んでテキストと組み合わせて GIF アニメ 作成
- 作業３．作業１、２の素材を組み合わせて HTML、CSS 作成 レイアウト図に合わせて HTML、CSS コーディング バナーの配置、グローバルナビゲーションをマウスオーバーで変化するよう配置 フッターとしてテキストナビゲーションを配置
- 作業４．作業３で作成した HTML、CSS に指定された文章を組み込む 指定された文章が構造的に書かれているため、それを踏まえてコーディング
（作業5はaまたはbの選択問題）
- 作業5a．入力フォームのウェブページ作成
- 作業5b．JavaScript による DOM(Document Object Model) 操作 ある要素をクリックすると指定された要素が変化するようにするだけです。
試験は毎回ほぼ同じ内容となっています。
また、作業5の選択問題は、5bが断然簡単なので5bを選択しましょう。
-
-
参考ウェブデザイン技能2級の選択は5bを選ぶ理由【２行のコードを丸暗記】
続きを見る
ここからは、実際の問題（作業）の詳細を紹介します。
④作業1
作業1の問題と仕様は下記の通りになっています。
作業1
Photoshopを使用して、ウェブサイトのヘッダ下部のナビゲーションメニュー用のパーツを作成します。
仕様は下記の通りです。（仕様については、試験ごとに数字等が異なります）
- 幅 800px 高さ 42px 内で 4 つのメニューパーツを作成する(各メニュー項目の幅は任意となっていますが、今回は幅「200」とします）
- 解像度 72ppi(dpi)、GIF 形式、256 色
- ロールオーバーとするため、それぞれ視認性のためのコントラスト（十分に異なる明度差）に配慮した2種のパーツを作成すること
- ナビゲーションメニューの項目は 「HOME」、「大会情報」、「ウェブデザイン技能競技会」、「参加申込」とする
Photoshopでグローバルナビゲーション用の GIF 作成 メニューは4つでマウスオーバー時の4つと合わせて8ファイル作成します。
成果物の例は下記の通りです。
詳しい、作業1の手順は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業1の解説・回答
続きを見る
⑤作業2
作業2の問題と仕様は下記の通りになっています。
作業2
JavaScriptによるアニ メーションもしくはGIF形式いずれかでアニメーションバナーを作成します。
仕様は下記の通りです。
- 幅800px、高さ48pxとし、指定された画像より 2 つ選択し、加工して必ず使用する。 「img001.bmp、img002.jpg、img003.png」
- バナーに掲載する情報はテキストファイルの文章を利用することとし、テキストの文字は可読であること。 「banner_copy.txt」
- アニメーションでいずれかの要素が変化(動き・切替等)する設定をする。
- ファイルの総容量は500kB以内にする（jQuery ファイルを使用した場合はそれらも含む）。
成果物の例は下記の通りです。
詳しい、作業2の手順は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業2の解説・回答
続きを見る
⑥作業3
作業3の問題と仕様は下記の通りになっています。
作業3
フォルダに保存されているindex.htmlとsample.cssファイルを編集し、作業 1 と作業 2 で作成したファイルを用いて、ブラウザ表示できるようにします。
仕様は下記の通りです。
- タイトルを「ウェブデザイン技能競技会公式サイト」とする。
- 上部バナーとして作業 2 で作成したアニメーションを配置する。
- CSS で幅 800px のコンテンツエリアを作成し中央に配置する。コンテンツエリアは任意の背景色を CSS で指定する。
- ナビゲーションはヘッダ下部の 800px×42px のエリアにグローバルナビゲーションとして、作業 1 で作成した画像ファイルを配置する。順番は左から「HOME」「大会情報」「ウェブデザイン技能競技会」「参加申込」の順で配置する。また、マウスポインタが画像の上にある時だけ別の画像を表示するロールオ ーバー機能を、2種の画像を用いて実装すること。
- フッターにグローバルナビゲーションと同じ名称、同じ順にてテキストナビゲーションを配置する。
成果物の例は下記の通りです。（アニメーションバナーやロールオーバーメニューは作業1、2で作成したものを使用しております）
詳しい、作業3の手順は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業3の解説・回答
続きを見る
⑧作業4
作業4の問題と仕様は下記の通りになっています。
作業4
作業3で作成したindex.htmlファイルに、フォルダに保存してあるsample2.txtの文章を、構造化し配置 します。
作業３で作成した HTML、CSS に指定された文章を組み込む 指定された文章が構造的に書かれているため、それを踏まえてコーディングをします。
成果物の例は下記の通りです。
詳しい、作業4の手順は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業4の解説・回答
続きを見る
⑨作業5b
作業5の問題と仕様は下記の通りになっています。
作業5b
ウェブページ内の指定された要素をクリックすると、要素内の文字の背景色が#ffcc66に装飾します。
作業5の選択問題は、5bが断然簡単なので、5bを選択しましょう。
詳しくは、下記よりアクセスできます。
-
-
参考ウェブデザイン技能2級の選択は5bを選ぶ理由【２行のコードを丸暗記】
続きを見る
成果物の例は下記の通りです。
q5.js
let obj = document.getElementById('contents');
obj.style.backgroundColor="#ffcc60";
詳しい、作業5bの手順は下記よりアクセスできます。
-
-
参考【ウェブデザイン技能検定】2級実技試験 作業5bの解説・回答
続きを見る
⑩まとめ
本記事では、ウェブデザイン技能検定の2級実技試験の概要と対策について解説します。
合格基準は70点以上と明示されていますが、各問題（作業）において配点の60％以上の得点を得ることなっているため、各問題の完答が求められます。
ただ、毎回各問題は同問題となっているため、回答の丸暗記で対応できます。
試験問題を繰り返し演習し、丸暗記して試験に臨むことが有効です。
2級実技試験の各問題の解説は下記よりアクセスできます。