ウェブデザイン技能検定2級を受検しました

資格

申込みするまでの道のり

前回3級を受検して合格したので、すぐさま令和5年度 第4回 2級試験(試験日:2024年2月18日(日))の申し込みをしました。

実務経験ほぼゼロ、知識はProgateと書籍2冊読んだぐらいというレベルで2級なんて受けてしまっていいんだろうか、と思いつつ(3級受かったので受検資格はあるはず)12月中旬(試験日は2月中旬)から勉強をスタートしました。

勉強方法はどうするか

2級もとりあえず過去問やっとけばOK!みたいな記事をいくつか見つけたので、まずは公式サイトにある参考書籍を見てみました。

実は今回小さなチャレンジがあって、3級が思ったより簡単だったので過去問題集の3,000円は無駄だったのでは!? と考えていて、「いやいや、落ちたら受検料無駄になるし、安全策で行くべきだ!」と私の心の中の天使が囁きましたが、「3級を思い出してみろ! 1回しか読んでないなら必要ないだろ。3,000円で美味しいものを食べて頑張れ!」と心の中の悪魔が応援してくれたので、過去問題集は買いませんでした。

3,000円得した気分で試験に臨んだ、というよりは2級の過去問題集が古すぎて参考にならなそうだし、他に手頃な教材がなかったというのが実情です。ということで、じゃあ2級は受検料だけで受けてみよう!と無謀な無課金チャレンジをしてみることにしました。

また、ウチの会社ではAdobe CCのライセンスが制作部門の社員に付与されていて、PhotoshopとDreamweaverでの実技試験の勉強が容易だったこともこのチャレンジの理由の1つです。

学科試験の勉強

過去3回分は公式サイトの問題を参考にするとしても、解答しか載ってないので、知識の定着が難しそうだな、と思い、ネットで検索したところ、神のような学科試験用過去問サイト(株式会社DOLさんのコラム)を見つけました。令和3年度第2回から令和5年度第1回までの8回分の学科試験問題がまとまっており、さらに解答の解説まであります(まさに神!)。直近の2回分は公式サイトの問題で勉強して、それ以前はこの神サイトで勉強することにしました。

2級の学科試験は問題数が40問、70%以上で合格なので、28問以上正解する必要があります。とりあえず過去10回分の過去問を解いてみたところ、22〜35問正解(平均29.3点)で、平均ではギリギリ合格してるが下振れたら不合格という結果でした。
問題の傾向としては、3級と同じジャンルも多数出題されますが、より深い知識が求められます。また、PHPやJavaScript、データベースの問題などもあり、3級をすっとばして2級を最初に受けなくてよかった、と痛感しました。

2級も過去問がそのまま出るので、過去問対策を怠らないように10回分を6周しました。2周目から30点台後半を安定して出せていたので6周はやりすぎでしたが、安心するためにやっておいてよかったです。
また、PHPやJavaScript、データベースの問題は、Progateの学習をかすかな記憶でなんとなく覚えていたのも役に立ったのかもしれません(JavaScriptはビックリするぐらいほとんど覚えていなかった)。

とくにJavaScriptの問題の対策はしませんでした。何度もmdnのJavaScriptのメソッドを見たりしたものの、ほとんど頭に入らなかったので、どのコードを選択するかの問題では、神サイトの解説にも書いてあるように問題文をよく読めばヒント(正解のコードの日本語訳など)が隠されていると思っていたので、それに賭けていました。

実技試験の勉強

実技試験の勉強は、3級の過去問題集を購入した際、2級の試験素材もダウンロードできたので、それを使用しました。2級も3級同様、細かな数値や名称は毎回微妙に変えてきていますが本質的には同じ問題が出題されます。
問題数も3級と同じように、6問の中から5問を選びますが、選べるのは5問目だけで5aか5bのどちらかを選びます。

前回の試験内容を確認したところ、スキル的に厳しそうと思ったのは2問目と5問目でした。2問目のGIFアニメーションは一度も作ったことがなかったので、まったくやり方がわかりませんでした。ちなみにPhotoshopの操作については普段から使用しているので問題なかったです。5問目の5a(フォーム作成)と5b(JavaScriptのコード)はどちらも経験がなく、いくら過去と同じような問題が出題されるとしてもかなり不安でした。また、個人的な資質の問題だと思うのですが、とにかく設問の意味がわからない。この試験に限らず、ITパスポートの設問(擬似言語の問題とか)でも問題の意味がわからず、「そういう意味だったのか」と解答を見て気づくことが多い。

そこでいろいろ2級の記事を検索してみると、5問目の5aはJavaScriptのコードもしくは正規表現でテキストを整形しつつ、数十行のhtml/cssのコードを書く必要があるらしいが、5bなら2行程度のJavaScriptのコードをほぼ丸暗記で書ければ正解できるそうなので、5b一択で勉強をすることにしました。

アプリケーションの選択

2級で使うアプリケーションは、3級でも使用したシンプルなエディター以外にもVS CodeとDreamweaver、Photoshopが使用できます(Photoshopは必須ですが)。

普段(普段と言えるほど頻度は高くない)からVS Codeを使用しているので、エディターはVS Codeで勉強しようと思っていましたが、おそらく(というか絶対)試験会場のPCにネットワークはつながっていないので拡張機能などはダウンロードして使えないだろうな、と考えて、Dreamweaverで勉強することにしました(Adobe CCのアカウントもあるし)。

Dreamweaverに慣れちゃうと便利すぎて他のエディターが使えなくなるという恐ろしい噂を聞いていたので、今までAdobe CCのアカウントがあっても一度も立ち上げたことすらなかったのですが、合格するためには使わざるを得ないということでここで解禁しました(そんな大袈裟なことではないですが)。
※申し込み後しばらく気が付かなかったのですが、令和6年度からDreamweaverは指定アプリから外されるのでご注意ください。

勉強するには正答がわかってないと答え合わせができないということで、実技の詳しいサイトを探していたところ、実技でも神サイト(YouTube)を見つけることができました。
というか、直接見つけたわけではなく、下記の記事に紹介されていました。ありがとうございます!

【独学】ウェブデザイン技能検定2級(会社員のマネーハックさん)

そして、その神YouTubeはこちらになります。
uiopyuioさんありがとうございます。非常にわかりやすく大変参考になりました。


 

いろいろ書きましたが、何も見ないでこの動画とまったく同じにできるなら、それだけで合格できると思います(私は1〜3問目を色や文字サイズ、GIFアニメーションやclass名など若干アレンジしました)。ですので、それぞれの問題の解答の解説はしません(役に立たない記事ですみません)。

しかし、過去3回分の問題を見比べると、5bのJavaScriptの問題は解答するstyleプロパティが毎回変わるので、他にどんなパターンがあるのか対策する必要がありました。また、「backgroundColor」など複数語で形成されているものはキャメルケースになるらしく、下記のようにcssと記述方法が違う場合もあるようです。

  • textDecoration = “underline”
  • backgroundColor = “#ffcc66”
  • fontWeight = “bold”

 

ちなみに5bは、下記の2行目のコードの ●●●● =”●●●●” に問題に該当するプロパティを入れれば正解です。
※1行目の先頭の変数宣言は”var”でも”let”でも大丈夫そうです。

  
var obj = document.getElementById(‘contents’); 
obj.style.●●●● ="●●●●";
  

 

そこで、過去3回分より前の試験問題に他にどのようなプロパティがあったかを調べることにしました、…がなかなか見つからない。色々な語句を織り交ぜて検索し、やっと見つけたのがこの2サイトになります。過去の問題が掲載されていたわけではないですが、対策になる記事がありました。こちらのサイトのおかげで5bの問題でもなんとかやれそうな自信がつきました。ありがとうございます。

【ウェブデザイン技能検定2級】実技試験の独学勉強方法の記録(mariparaさん)
【[資格取得]”ウェブデザイン技能検定2級” に(たぶん)合格した話 (すぴっちさん)

やっと合格できる準備が整ったのであとはひたすら繰り返し勉強です。物覚えが悪いため、数十行のコーディングが必要な問題3とJavaScriptの問題5bを自信を持って解答できるまでにだいぶ時間がかかりました(8回ぐらい練習しました)。最悪、Dreamweaverにはコード補完機能やソースコードのフォーマット、ロールオーバーを簡単に作れる機能があるのでなんとかなるだろうとは思っていました。

試験当日

会場は3級と同じく、あるスクールの教室でした。席にはWindowsのノートPCのみ。3級もですが、着席→試験説明→試験開始までが長い…(30分ぐらい?)。この待っている時間がけっこう苦痛でした。

学科は難しい問題もありましたが手応えは十分で、記入ミスがなければ大丈夫だろうと思っていました。3級と同じく問題用紙は持ち帰れるので、解答した番号に丸をつけておいて、自己採点できるようにしました(35問正解でした)。実技は問題の内容が過去と同じか、5bのプロパティは何を求められているかを真っ先に確認し、内側の余白(padding)だったので安心して試験に臨めました。

まさかの落とし穴

問題の内容には安心しましたが、じつは試験開始前のアプリケーションの動作チェックの際に驚くべき事実が…。

なんとDreamweaverとPhotoshopのバージョンがCS6でした。まあ、Adobe CCだと買い切りではないので、維持費が大変だからだろうと推測。そういえば、CS6だったというブログ記事もあったな、と思い出しましたが後の祭り。

PhotoshopのCS6は普通に使っていたのでとくに問題はありませんでしたが、Dreamweaverはこの試験の勉強で初めて使ったので「2021(しかもMacだよ)」でしか練習していません。こういったアプリケーションはバージョンが上がると、新機能が増えたり、UIがガラッと変わったりする場合があります。「2021」で勉強した際は、カスタマイズしていなかったのでそんなに使用感は変わらないだろうと思っていましたが、コード補完が使いづらくてかなりタイピングに苦労しました(今思えばコードの入力だけはVS Codeを使えばよかった)。事前に知っていても同じ環境を準備するのは無理だったかもしれませんが、環境設定などカスタマイズする練習ぐらいはできたのに…。

「2021」で勉強していた時よりだいぶ時間はかかりましたが、実技も手応えはあり、なんとか無事に終えることができました。

結果と次の高みへ

結果は、無事合格!
無課金チャレンジ成功しました!(Adobe CCが使えているので邪道ですが)

合格通知

実務経験ほぼゼロの私にとっては、2級はなかなか難しい試験でした。受検前も独学でWebの勉強はしていましたが、html/cssの知識が乏しく、コーディングもほとんどしていなかったので試験勉強を通じて、Webの勉強をやっているんだな、とやっと実感できたぐらいです。過去問をひたすら暗記・動画と同じように手を動かす、という勉強スタイルが今後の役に立つのか微妙ですが…。

「基本情報技術者試験を受検しました」に続く…かもしれません。