実技試験対策をしたときの記録です
準備したツール
Adobe製品は1週間のお試し期間中に習得できれば無料で利用することができます。
私はビビりなので1ヵ月前から利用開始しました。
月額2,980円の課金はしましたが結果的には良かったです。
使用教材
公式テキストを購入すると「ネットチャレンジ」という課題の素材を2回分ダウンロードすることができます。
Progateは実技試験だけに限っていえば課題5aを選択しない限り必要ないと思います。
YouTubeは「ウェブデザイン技能検定 2級 実技」で検索して出てきたものを視聴しました。
勉強期間：1ヵ月
実技試験の対策は1週間で済んじゃう方もいるようですが、私は1ヵ月前から始めました。
課題1・2のPhotoshopは使い勝手がまったくわからなかったため時間がかかり
課題3・5は学科試験の対策が済んでいないと全然わかんねえ！ってなる始末。
とくに5aはPHP、5bはJavaScriptの勉強がある程度済んでいないと問題・解答ともに理解できませんでした。
今回PHPやJavaScriptをはじめて勉強しているなら、少し早めに動き出す必要があります。
実際にやった準備
課題1
YouTubeを見ながら1日1回作成する過程を5回繰り返しました。
1ヵ月前に1回、2週間前に1回、前日に2回。
「何これ反映されないじゃん！クリックできないじゃん！」とか、レイヤーという概念が理解できないみたいな感じで最初は超時間かかりました。
Photoshopをはじめて使うレベルではまったくわからなかったのです。
フォトショ使える人ってすげーんだなって思いました（単純）
課題2
課題1で2日ほどPhotoshopと格闘したあとに取り組みました。
GIFアニメーションの作り方はYouTube動画を参考にそっくりそのまま覚えました。
スクリーンショットをまとめながらボタンの位置を覚えるなどしました。
課題3
コードをゼロから書くのは初めてでした。こちらもYouTubeを参考にさせていただきました。
Dreamweverの「コードを印刷する」機能を使ってPDF化し、試験のお昼休みに見直しました。
HTMLでの<div class>は５つ作成。
- 全体：[wrap]
- タイトルバナー：[banner]
- グローバルナビゲーション：[nav]
- コンテンツエリア：[contentsarea]
- フッター：[fotter]
を作成。CSSは
- marginとpaddingはとりあえず0にする
- おかしいところをあとから調整していく
- widthとheightは指定されているものを記入
- メニューの横並びにはdisplay: inline-floatを使う
課題4
文章に構造タグをつけていくだけの作業。
<h1><h2><p><ul><ol>が使えれば大丈夫そうなので特に何もしませんでした。
課題5b
JavaScriptのコードを2行と覚えるだけ、と思いきや出題形式が未知数の問題。
変換するタイプは過去問を3年分を見ても「文字の大きさ」「非表示にする」など統一性はなし。
let obj = document.getElementById(‘contents’);
obj.style.???? =“????”;
この????の部分が未知数で、過去問やサンプル問題で出題されたのは
（fontSize, color, padding, backgroundColor, display, border, textDecoration）
覚えられる自信もなく、超不安のまま試験に挑みました。
→結果：運よく簡単な問題でした。
課題5a
5bの方が簡単なら5aなんてやらないわ～と思っていたけれど、上記の理由で確実に点が取れそうなこちらも対策しました。
ProgateのPHPコース1をクリアした時点でフォームについて理解でき対策もスムーズでした。
過去問を見る限り覚えることは少なくて
<form><input><select><option>の使い方。
何が出るかわからない5bよりも確実だと思ったので何回か練習しました。
→結果：難易度が上がっていて玉砕しました
まとめ
Adobe製品をはじめて使ってわかったことがひとつあります。
それは絶対に人に教えてもらったほうが早いということ。
こんなに機能が多くてわかりづらいとは思いませんでした。まじで。
AdobeCCはずっと値段を理由に躊躇していて、今回のウェブデザイン技能検定をきっかけに購入に踏み切れたって感じです。
