WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:GIF形式は国際標準化されていません
HOME
次の記事:過去問題解説で不適切な解説がありました

ウェブデザイン技能検定2級実技試験対策

3件のコメント ウェブデザイン技能検定|資格試験

 

試験日は明日に迫っていますが、実技試験対策の動画が完成したのでまとめておきます。

また、公式サイトの新着情報欄にて実技試験概要が公開されています。ざっと見た感じ今までと同じようですが、一応確認しておくといいでしょう。

 

 

課題1

 

 

Photoshopを使用したナビゲーション画像作成です。Photoshopに触れた事がなくても、レイヤー構造に対する理解があれば、試験日までに数分Photoshopの操作を確認しておくだけでなんとかなりそうな印象です。

 

 

課題2

 

 

Adobe Animate(旧:Flash)を使用したアニメーションGIFバナー作成です。動画で臨んでいる課題では、SWF(Flash)かGIFか作成するファイルを選択出来るのですが、GIFで作成するやり方を覚えた方がいいです。というのも、現状、主要ブラウザがSWFの再生に必要なFlashプレイヤーサポート廃止の方向に進んでいます。ブラウザで確認出来ないとなると、SWFの選択肢が消える日もそう遠くないのではないかと推測します。

Adobe Animateを軽く触った感想ですが、少し癖のあるソフトという印象を受けました。今までフリーソフトでそれなりに動画編集をしてきたつもりですが、Adobe Animateで画像の取り扱いやアニメーションを付けるのに慣れるまでそれなりの時間が掛かりました。一度も動画編集をした事がない方は早めにこのソフトに触れておいた方がいいです。

なお、Adobe Animateを使わなくともPhotoshopでアニメーションGIFを作成する事は可能です(Photoshopメニューバーからウィンドウ →【タイムライン】を選択します)。私は試していないので解説は出来ませんが、実試験前にAdobe AnimateとPhotoshopを触ってみて、自分がやり易いと思った方でアニメーションバナーを作成出来るようにしておきましょう。

 

 

課題3-4

 

 

課題3と4はコーディングアシストソフト、Dreamweaverを使ってHTMLファイルとCSSファイルを作成します。課題1、課題2で作った素材を使用するので、実質課題1から4まで通し作業になります。

Dreamweaverによるコーディングアシストがあるので、3級の実技試験を参考資料無しでクリア出来るレベルであれば、課題3と4は問題無くこなせると思います。

 

 

課題5

 

最後の課題は動画にはしていません。課題5はaとbの2つから一つを選択する形になります。

課題aは資料に基づいたデータ送信フォームの作成です。テキストデータの置き換えで正規表現を用いる必要があり、bと比較すると作業量が段違いに多くなります。

課題bはJavaScriptによるDOM操作です。jsファイルに1、2行コードを追加するだけなので、ほとんどの人が課題bを選択すると思います。私もそちらを選択するつもりです。

以下は実技試験過去問題の解答例です。

 

問(H28第3回試験)

data2 フォルダの q5b フォルダ内にある q5.js を編集し、同フォルダ内にある index.html の id 属性の値 change が指定されたリンクをクリックすると、id 属性の値 contents が指定されたブロックの文字の色が赤になるようにしなさい。q5.js 以外のファイルを編集する必要はない。完成した q5.js は、表示に必要な他の HTML ファイルなどとともにデスクトップ上の wd2 フォルダ内に t5b というフォルダを作成し保存すること。

index.html
(略)
<p><a href="#" onclick="change();" id="change">変更</a></p>
<p id="contents">テスト</p>
(略)
q5.js
function change() {
// ここにコードを記入する
}

q5.js
function change() {
 var obj = document.getElementById('contents');
 obj.style.color = '#ff0000';
}

 

問(H28第2回試験)

一意セレクタ contents で指定されたブロックの文字のサイズが 20pt になるようにしなさい。※前後の問題文省略

index.html
(略)
<p><a href="#" onclick="change();" id="change">変更</a></p>
<p id="contents">テスト</p>
(略)
q5.js
function change() {
// ここにコードを記入する
}

q5.js
function change() {
 var obj = document.getElementById('contents');
 obj.style.fontSize = '20px';
}

 

問(H28第1回試験)

一意セレクタ contents で指定されたブロックの背景の色が #ffffff になるようにしなさい。※前後の問題文省略

index.html
(略)
<p><a href="#" onclick="change();" id="change">変更</a></p>
<p id="contents">テスト</p>
(略)
q5.js
function change() {
// ここにコードを記入する
}

q5.js
function change() {
 var obj = document.getElementById('contents');
 obj.style.backgroundColor = '#ffffff';
}

 

 

var 変数名 = document.getElementById('対象要素のID名');
変数名.style.CSSプロパティ(※) = '';

※ハイフンを取り除き、ハイフン後の頭文字は大文字にする

課題5のbも、急に課題内容が変わらない限りは上記のコードの形さえ覚えておけばなんとかなります。Dreamweaverのコーディングアシストもあるので、ド忘れしても諦めず、覚えている事を打ち込んでみて、答えに辿り着けないか試してみましょう。

 

 

ウェブデザイン技能検定2級実技試験対策

3件のコメント▲コメントを非表示

アニス2017-05-17 07:37:42

こんにちは。2級を今度受けようと思っています。 普段Photoshopを業務で使わないので、 画像の複製の仕方などがイマイチよく分からなかったのですが、動画にしていただき非常に助かっています! 繰り返し過去問を解いて、合格できるよう頑張ります

返信

トーシロ2017-11-09 23:23:33

普段ウェブ制作に携わっていないため実技の勉強に困っていたら、このブログに辿り着きました。 動画での解説最高です。 ありがとうございます。 来週の試験に活用させて頂きます。

返信

国家資格 ウェブデザイン技能検定2級2018-12-06 17:45:13

[&#8230;] とても参考になったサイト:レアカードのWEBデザイン日記 [&#8230;]

返信

コメント

カテゴリ

月別アーカイブ