【ウェブデザイン技能検定】2級実技試験、準備から勉強方法のコツまで
この記事では、ウェブデザイン技能検定2級について、実技試験の準備から勉強方法について解説します。
学科試験対策については、以下の記事で紹介していますので、参考にしていただければと思います。
https://shikaku-benkyou.com/web-design-ginou-kentei-benkyou-...- 試験日：
1級学科：11月下旬頃
1級実技：2月下旬頃
2・３級：5月下旬頃、8月下旬頃、11月中旬頃、2月下旬頃の年4回 - 申込日：
1級学科：10月上旬～下旬頃
1級実技：12月下旬～翌年1月中旬頃
2・３級：４月上旬～下旬頃、7月上旬～下旬頃、10月上旬～下旬頃、12月下旬～翌1年月中旬頃の年4回 - 合格発表：
1級学科：12月中旬頃
1級実技：3月中旬頃
2・3級：６月下旬頃、9月下旬頃、12月中旬頃、３月下旬頃 - 試験時間：
1級：学科90分、実技180分、ペーパー実技60分
2級：学科60分、実技120分
3級：学科45分、実技60分 - 受験料：
1級：学科7,000円、実技25,000円
2級：学科6,000円、実技12,500円（35歳未満は実技7,000円）
3級：学科5,000円、実技5,000円（35歳未満は実技3,000円） - 合格基準：全ての試験で70点/100点以上（ただし、実技は試験要項に示す各作業分類で60%以上の得点が必要）
- 受験資格：
1級：実務経験必須
2級：実務経験、大学での学習経験、3級合格など
3級：とくになし - 想定勉強時間：
1級：不明（難易度はかなり高い）
2級：50～100時間程度（未経験から学習する場合）
3級：15～30時間程度（未経験から学習する場合） - 公式サイトはこちら
ウェブデザイン技能検定2級、実技試験の事前知識
難易度は「学科試験よりかなり簡単」。過去問そっくり問題が毎回出題される
まず、難易度についてですが「学科試験よりかなり簡単」です。
実際に私が受験した際、アプリケーションの使い方から勉強が必要でしたが、それでも合計5時間の練習で全問解答できました。
実技試験と聞くと「なんとなく難しそう…」と思う人もいるかも知れませんが、実際には現地で試行錯誤して、正しく動作するか確認しながら解答できるぶん簡単です。試験時間も2時間とかなりたっぷり用意されている（私は1時間15分で見直しも含めて完了しました）ため、何度でも修正して正解にたどり着きましょう。
内容は毎年「過去問のそっくり問題」です。
これは今後も簡単には変わらないと思います。ある程度の難易度を超えない国家試験では「過去問の使い回し・類似問題で難易度を安定させる」ことはよくあることですので、予告なく試験を大幅に改変させる可能性は非常に低いと私は考えています。
ただし、試験の内容が変化しないわけではありません。例えば、作業2は「flashかGIF形式」だったものが、2018年から「JavaScriptによるアニメーションかGIF形式」に変化しました。このように、時代にあわせて内容が変化することはありえます。
試験内容に関する注意点として、試験前に公表される「実技試験概要」が変化されていないことを確認するようにしましょう。作業2の変化については、この実技試験概要の作業2を読んでいれば「アニメーションの形式はGIF（GIF89a）形式、JavaScriptによる形式のいずれかで作成すること」との文言から判断できたはずです。
また、もしも最新版の問題集などが公式に販売された場合は注意しましょう。問題集の内容が、従来から変化していた場合は、出題内容もそれにあわせて変化する可能性があります。
課題に使うアプリケーションの基本的な操作スキルが必要
「実技試験の課題はかなり簡単」と先に説明しましたが、アプリケーションの操作方法だけはしっかり覚えておきましょう。
例えば、試験用のPCに用意されているアプリケーションである「Adobe Photoshop」は画像素材を作成する作業である「作業1」「作業2」で利用することになるかと思います。作業3以降であれば「Adobe Dreamweaver」が便利です。
試験で使う基礎的な操作は簡単に覚えることが可能ですが、事前にこれらのアプリケーションには一度触れておいて、使えるようになっておく必要はあります。
作業5は、作業5bの方が簡単（選んでいる人も多い）
作業5については、作業5aと作業5bからの選択式となります。
作業5aはデータ送信フォームの作成ですが、作業5bと比べると作業量がかなり多く、難易度が高い傾向があります。
そこで合格を優先するのであれば、作業5bのJavaScriptによるDOM操作がおすすめです。作業5bは実質的に「2行分の決まりきったテンプレートを暗記し、指示に応じてStyleオブジェクトのCSSプロパティを修正する」問題です。
CSSプロパティをある程度覚えておく必要はありますが、Dreamweaverの補完機能を利用すれば、現地である程度は対応可能ですので、やはり作業5bの方がおすすめといえます。
作業3と作業5bについては、初心者はメモを作っておく
基本的にはネットの動画で対応可能な実技試験ですが、作業3と作業5bについてはメモを作っておいて直前に確認できるようにしておくといいでしょう。
とくに初心者の場合「CSSファイルの編集内容はどうすればよかったっけ？」と悩む人が多いかと思います。また、作業5bはDreamweaverの補完機能を利用するとしても、ある程度はStyleオブジェクトのCSSプロパティを知っておいたほうが安全です。このあたりもメモを作っておいて、直前で読み直せるようにしておいた方がいいでしょう。
ウェブデザイン技能検定2級の準備
「Adobe Photoshop」と「Adobe Dreamweaver」を準備する
2級の実技試験のPCには、Adobe PhotoshopやAdobe Dreamweaverが用意されています。3級と同様のテキストエディタもありますが、普段からコーディングで使い慣れている人以外はあえて使う必要はないでしょう。
一方、PhotoshopやDreamweaverの操作に慣れていない場合は、事前に練習しておく必要があります。学習未経験の人には、持っていない人が多いと思います。以下のどれかの方法で準備方法しておくといいでしょう。
- 無料体験版を使う（1週間のみ可能）
- 月額プランで1ヶ月だけ購入
- 「たのまな
」などのオンライン学習とあわせて購入することで、学割を利用して1年分購入（学生は普通に学割でもOK）
教材は「平成25年度 第４回」の過去問が中心
過去問については「平成25年度 第4回」の内容が素材も含めて過去問を紹介しているページからダウンロードできます。
また、最新の3回分が公式サイトの「過去問題の公表」にあります。
最新3回分の過去問については、素材がついていないため、細部まで含めての過去問演習はできません。ですので、学習の中心としては「平成25年度 第4回」を利用していただければと思います。
2級の実技試験の解説
出題内容はおおむね以下のとおりです。
- 作業1・作業2：画像処理（Photoshopを使う）
- 作業3・作業4：コーディング（Dreamweaverを使う）
- 作業5：aかbの選択式（おすすめはbのJavaScriptによるDOM操作。Dreamweaverを使う）
作業1
グローバルナビゲーション用のパーツを作成する作業です。
Youtubeの動画でわかりやすく解説されています。こちらを見ながら学習すれば、必要な知識は十分学習できます。
https://www.youtube.com/watch?time_continue=2...ポイントは以下のとおりです
- Photoshopの使い方を覚えておくこと
Adobe CCで学習しても、本番でCS6になる可能性はあります。時間は十分にありますので、焦らず必要な機能を見つけましょう。 - 指示された形式を守ること
文字の誤り、形式などに注意しましょう。
作業2
JavaScriptかGIF形式でのアニメーションバナーの作成作業です。
作業1と同様に、Photoshopを利用するといいでしょう。おすすめはGIF形式でのバナー作成です。学習については、操作方法を把握することが中心となります。
作成方法については、以下のサイトで詳細に解説していますので、参考にしてみてください。
https://worktoolsmith.com/photoshop-gif-animation/作業2のポイントは以下のとおりです。
- Photoshopの使い方を覚えておくこと（作業1と同様）
- 指示された形式を守ること（作業1と同様）
- 挿入するテキストが読めるような背景を選ぶこと
背景が全体的に黒っぽい、または白っぽいものがおすすめです。位置によって明暗が変化すると、テキストがどうしても読みにくくなりがちで編集が大変です。
作業3
作業3はDreamweaverを使って、HTMLファイルとCSSファイルを編集する作業です。
テキストエディタでも可能だと思いますが、慣れていない人は作業が大変になるのでおすすめしません。とくにロールオーバー機能を実装するのは、Dreamweaverを利用したほうが断然簡単だといえます。
作業3については、Youtubeの動画が参考になります。こちらの動画は作業4も含んでいますので、作業4対策にもそのまま使うことができます。
https://www.youtube.com/watch?v=5k5iowyIJac作業3のポイントは以下のとおりです。
- Dreamweaverの使い方を覚えておくこと
とくにロールオーバーイメージの挿入方法。Adobe CCでは「挿入」→「HTML」→「ロールオーバーイメージ」ですが、バージョンによって変化することがあります。 - 覚えるべきところは暗記する
とくにCSSファイルの編集内容。細部は試験ごとに指示が異なりますので、意味も含めて覚えておきましょう。
作業4
作業3で作成した「index.html」ファイルに、用意された文章を構造化して配置する作業です。ウェブデザイン技能検定3級の実技作業6と似た問題ですが、少しだけ複雑です。
ウェブデザイン技能検定3級との一番の違いといえば「番号付リストの中で、箇条書きリストを使う」必要があるところ。
動画での解説については、作業3の動画の後半を参照していただければと思います。
- 構造化の方法を覚えておく
ウェブデザイン技能検定3級の作業6に回答できれば、ほとんどの内容は問題ないレベル。「番号付リストの中で、箇条書きリストを使う」方法だけはしっかりおさえておくこと。
作業5b
JavaScriptによるDOM操作を行う作業です。
具体的には「index.html」のid属性の値に「change」がしていされた要素をクリックすると、id属性の値にcontentsが指定された要素が、指示通りに変化するよう、「q5.js」というファイルを編集する作業です。
つまり、編集すべきファイルは「q5.js」であり、その内容は初期状態で以下のとおりです（試験内容に応じて、少し内容が増えている場合はあります）。
function change(){
// ここにコードを記入する
}そして、解答パターンは毎回決まりきっており、以下のように編集します。
function change(){
var 変数名 = document.getElementById('対象要素のID名');
変数名.style.CSSプロパティ = '値';
}ここで、対象要素のID名は毎回「contents」となっていますので、変数名は「obj」などと前もって決めてしまえば、実質的に編集するべきところは「CSSプロパティ」と「値」だけです。
Styleオブジェクトのプロパティについては、以下のサイトに一覧がありますので、試験直前に読み直すといいでしょう。
http://alphasis.info/javascript/dom/styleobject/ちなみに、私が確認できた限りでは、以下のような指示が過去に行われています。CSSプロパティなどの解答例もあわせて記載しておきます。
- 文字の色を赤に変化させる
CSSプロパティは「color」
値は「#ee0000」 - 背景色を白に変化させる
CSSプロパティは「backgroundColor」
値は「#ffffff」 - 文字のサイズを20ptに変える
CSSプロパティは「fontSize」
値は「20px」 - 要素を表示させる
CSSプロパティは「display」
値は「block」 - 要素を幅1pxの黒い実線で囲む
CSSプロパティは「border」
値は「1px, solid, #000000」
上記については、今後も出題される可能性があるので暗記しておくといいでしょう。
また、覚えていないCSSプロパティが出題された場合も、Dreamweaverの補完機能を使えば「英単語的にこれっぽい」というレベルでも解答に辿り着ける可能性が高いです。じっくり粘って解答にたどり着きましょう。
- 解法を暗記しておくこと
暗記すべきは２行のみ。編集するのは「CSSプロパティ」と「値」の部分。
- 解法・CSSプロパティについては、メモを作っておいて直前に読み直せるようにしておくこと
- いざとなったらDreamweaverの補完機能で必要なCSSプロパティを探す
本当にウェブデザインをするなら、実技試験を超えた、実践力が必要
はっきり言ってしまえば、ウェブデザイン技能検定2級の実技問題は簡単すぎます。
２級の学科試験については、基礎から理解して問題に解答できるレベルであれば、多少は実践的な技量が身についているといえるかもしれませんが、2級の実技に解答するだけであれば、実践的な能力がなくても可能です。
単に資格が欲しいというだけの人であればともかく、実践的な能力を身につけたいのであれば、試験だけにとらわれず学習をすすめ、しっかりと実力をつけるようにしましょう。
以下の記事ではウェブデザイン関係のおすすめのオンライン講座について紹介しています。無料のものから有料のもの、基礎的なものから中級者向けのものまでありますので、ウェブデザイナーを目指している人や、より洗練されたサイトデザインをしたい人は、学習の参考にしていただければと思います。
