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

前の記事:ウェブデザイン技能検定2級受験レポート 学科試験編
HOME
次の記事:ウェブデザイン技能検定1級 学科試験対策 平成26年過去問題解説 その1

ウェブデザイン技能検定2級受験レポート 実技試験編

ウェブデザイン技能検定|資格試験

 

ウェブデザイン技能検定2級受験レポート 学科試験編

前回、学科試験を終えた所まで書きました。今回はその続きからです。

 

学科試験終了時間が11:30。その後、実技試験の受付開始時間12:00まで待合室でゆっくりと昼食を取る時間はありました。おそらくどの試験会場でも外に買い物に行くほどの余裕はないと思うので、昼食は持参した方がいいです。

12:00を迎え、受付が終わるとそのまま実技試験を行う部屋に案内してもらいました。試験用のPCは立ち上がっていて、試験で使用出来るソフトがデスクトップに表示されています。練習で使用したのはAdobe Animateですが、デスクトップに表示されていたのがAdobe Animateの旧バージョンAdobe Flashだったので、説明開始時間の12:15までスマホでAdobe Flashの情報を検索していました。

※試験用のPCには試験開始まで触れる事は出来ません(試験官から動作確認の指示があった場合を除く)。

 

Adobe AnimateとAdobe Flashの差異について、有用な情報を得られないまま試験説明の時間となりました。説明時間は12:15から30分ありますが、使用ソフト全ての動作確認を指示されるので、そこまで長い時間には感じられません。

説明時間も終わり、いよいよ実技試験開始です。実技試験は12:45~14:45で、2時間の内に5つの課題をこなさなければなりません(途中退室可)。

実技試験の課題内容は何年も変わっていません。今回の課題も、画像サイズの指定などに若干の違いはあるものの、内容としては例年と同じものでした。

 

 

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

試験日当日までに実技試験の対策として、実技試験の課題をこなしていく過程を動画化までしたので、正直舐めてかかっていた部分がありました。

実際の試験ではソフトのバージョンの違いによる操作性の違いにかなり苦しめられました。Adobe Flash(現Animate)においては使用を諦めました。

課題毎に練習と違った点を説明してきます。なお、試験中に使用したソフトのバージョンや、苦労した点をメモとしてまとめるような余裕はなかったので、これから挙げる点以外でも、解説動画でやっていた操作と異なる部分があるかもしれません。

 

 

課題1

 

ロールオーバーで色が変化するナビゲーション画像をPhotoshopで計8つ作成します。

 

photoshop

手が止まったのはテキストの操作パネルがデフォルトで表示されていない事くらいで、あとは練習通りに作成出来ました。テキスト操作パネルは画面上部の表示タブから選択表示出来たと思います。

 

 

課題2

 

用意された画像とテキストを組み込んでアニメーションバナーを作成します。

「画像サイズは800×50で作成」の指示に従い、Adobe Flashでそのサイズのキャンバスを作成しました。練習でやっていたように、用意された画像を読み込み、ライブラリ上に表示する事も出来ました。

問題はその後です。ライブラリからステージに画像を移動した所、800×50のキャンバスが消し飛んでしまいました。レイヤーを追加して試したり色々とやったのですが、結局どうにもなりませんでした。

先述した通りAdobe Flashの使用は諦め、Photoshopでアニメーションバナーを作成する事にしました。練習ではPhotoshopでアニメーションバナーの作成には臨んでいなかったのでぶっつけ本番です。

 

新規レイヤー作成

Photoshopで右クリックからレイヤーの新規作成が出来ず戸惑いましたが、下の小さなアイコンからレイヤーを新規作成する事が出来ました。

 

結果を言うとアニメーションバナー(GIF)は作成出来ました。アニメーションと言っても、1秒経ったら背景画像が切り替わるだけのものです。ただ、これでも指定要項は守れているはずです。

うろ覚えな知識で説明をして受験者の方に変な知識を埋め込んでしまっては申し訳ないので、Photoshopでのアニメーションバナー作成の説明は割愛させていただきます(ググればいくらでも解説が出てきます)。

 

 

課題3

 

課題3はDreamweaverを使ってHTMLファイル及びCSSファイルを編集する作業です。Dreamweaverも練習の時とはバージョンが違い、最初は使い勝手が分からず戸惑いました。

新規作成時、サイトプレビュー画面と気付かずにそこにコードを打ち込んでいました。テンプレートが表示されず(DOCTYPE宣言やhtml要素、head要素やCSSファイルのリンクetc)、コードアシストも無かったので、「普通のテキストエディタと変わらないじゃないか」と思いました。すぐに作業ウィンドウ上の【HTMLタブ】【プレビュータブ(違う名称だったと思います)】【CSSタブ】の存在に気が付いて事なきを得ましたが。

練習ではHTML5で作成しましたが、実試験で用意されたテンプレートがHTML4.01仕様だったので、練習で使ったheader要素、nav要素、main要素、footer要素は使っていません。全てdiv要素にid名を振ってボックス分けしました。

あとはロールオーバーイメージの挿入方が練習と違っていました。練習では挿入タブ →【HTML】→ 【ロールオーバーイメージ】で挿入出来ましたが、試験で使ったバージョンでは挿入タブ→【イメージ】→【ロールオーバーイメージ】で挿入でした。他にも細かい所で色々と違いはあったと思います。

 

そしてなんとか完成まで持っていけたHTMLファイルをブラウザチェックする段階になって、また一つ問題が発生しました。IEでのみグローバルナビゲーションが800pxの横幅に収まらず2段表示となってしまったのです。

要素の検証をするとimg要素に2pxのborderが付与されている事が分かりました。ブラウザが自動で画像に枠線を付けるとかいつのバージョンのIEでしょうか。これはCSSファイルでimg要素のborder設定を0にする事で解消しました。

 

 

課題4

 

ここまで来ると試験で使ったバージョンのDreamweaverの操作にも慣れ、コーディングを卒なくこなせました。

 

 

課題5

 

課題5は選択式です。実技試験対策の記事で宣言していた通り課題5のbを選択しました。

ある要素がクリックされた時、対象となる要素の背景色が白に変わるよう、jsファイルを編集せよという内容でした。いつも通りですね、何の問題もありませんでした。

 

 

試験終了

 

序盤はどうなる事かと思いましたが、蓋を開けてみると、見直しを2回した後に途中退室出来るくらい時間に余裕がありました。といっても全体で1時間30分ほど費やしましたが。

おそらくは学科も実技も合格出来たのではないかと思います。

ウェブデザイン技能士についてあれこれ語るのは合格証書が届いてからにします。偉そうな事を書いて不合格だったりしたら目もあてられませんからね。

 

ウェブデザイン技能検定の勉強方については、とにかく過去問題を繰り返しやる事です。時間が無ければ公式サイトで公開されている直近3回の過去問題を完璧にこなせるようにしておくだけでも、十分合格への望みは繋がると思います。

実技試験の練習は参考書や動画を見て終わるのではなく、無償体験版でいいのでAdobe製品をダウンロードして必ず実践する事。実際にソフトに触れておかないと、不慮の事態となった時、対応出来るものも対応出来なくなってしまいます。

 

私がこれまでしてきた、分からない問題をブログにまとめる、というやり方もお勧めです。

見直しをしっかりやって記事をアップロードすれば、何度も問題と解答を目にする事になるので嫌でも頭に入ります。それでも時間が経てば忘れてしまうものですが、その時はまたやり直せばいいだけです。

 

ウェブデザイン技能検定2級受験レポート 実技試験編

0件のコメント

コメント

カテゴリ

月別アーカイブ