資格マニアな一面のあるおおつきです。
先日2月に行われた平成27年度第4回試験の合格発表があり、無事合格しました!わーい:D

ウェブデザイン技能検定は国家検定のひとつで、ウェブ系資格としてはレアな国家資格です。この記事では試験勉強のポイントと、つまづきそうなところをピックアップしたいと思います。

試験の詳細は公式サイト↓をご覧ください。
ウェブデザイン技能検定

受験した理由

  • 特に公益系、官公庁系のサイトコンペ要件で2級ウェブデザイン技能士保有者みたいな縛りがあるものがちらほらあった
  • 最近ちゃんと勉強してないなーつまんないなーと思っていた
  • 手軽に達成感を得たかった

私が資格試験を受けるのは完全にゲーム感覚で、ゲームの延長に資格保有者という役に立ちそうな名目があるという感じです。自分でも謎思考ですが、別に悪いことでなないだろうと1-2年に1個ずつ資格取ってます。調理師もそのひとつですw

2級の試験範囲

最新の試験要項は↓をご覧ください。
http://www.webdesign.gr.jp/kentei/items.html#yoko

<学科>

[1]インターネット概論
[2]ワールドワイドウェブ(WWW)法務
[3]ウェブデザイン技術
[4]ウェブ標準
[5]ウェブビジュアルデザイン
[6]ウェブインフォメーションデザイン
[7]アクセシビリティ・ユニバーサルデザイン
[8]ウェブサイト設計・構築技術
[9]ウェブサイト運用・管理技術
[10]安全衛生・作業環境構築

このように出題範囲は多岐にわたります。
私はHTML/CSSは分かるんですがJSやPHP、SQLなんかは見てもよくわからないので、最初?だらけでした。
また、法務、安全衛生・作業環境構築のところは今まで体系的に勉強したことがなかったので、何も無しで過去問に望むとほとんど得点はありませんでした・・・。
また、海外の団体名?W3C等色々ありますが、最初はちんぷんかんぷん(;°Д。)ぐるぐる。。。

あと、プロトコルもいままで接したことのない世界で頑張って覚える必要がありましたね。

<実技>

作業1:仕様に従って、ナビゲーションシステム用のパーツ画像をデザインし作成すること。
作業2:仕様に従ってアニメーションを作成すること。
作業3:仕様に従って、課題 1、2 および 3 で完成したファイルを検定指定ウェブブラウザでもれなく閲覧できるように、HTMLファイルに配置すること。
作業4HTMLファイルのエリアに、指定されるテキストファイルの文章を配置し、更新すること。配置する文章は、その文章内容にもとづいて構造化されること。

※作業5はaかbの選択制です。
作業5a:仕様で示されるフォームの条件、およびHTTPリクエストインタフェース(各パラメータ)に従って、HTMLファイルを作成すること
作業5b:与えられるHTMLファイルが指示どおり動作するように、Javascriptのファイルを編集すること。

実技では使用するPCにPhotoshop、Fireworks、Dreamweaver、Flash、サクラエディタ、TeraPad、Sublime Textがインストールされています。基本的にAdobe系はCS4以上となっています。

実技の方はPhotoshopとDreamweaverで完結しちゃう内容でコーダーなら余裕だと思います。
デザイナーさんやプログラマーさんは一度通して練習しないと不安かな?という内容でした。

作業5はフォームを作るかJSを書くか選択出来ます。
圧倒的にJSの方が作業量が少ないので、私は b を選択しました。(JSは一行書くだけです。)

2級まずこれをやっておけ

受験するとなったら何はともあれ過去問を解いてみましょう

過去問は公式サイトに正答と併せて掲載されています。
ウェブデザイン技能検定は基本的な問題配分は大きく変わりません。なので、何個か過去の問題を解いてみると、自分がどのジャンルの問題が苦手なのかわかります

試験対策(過去問題の公表)

そして、ウェブデザイン技能検定 2級ガイドブックを買いましょう!問題の内容ほぼほぼ網羅されています。

10161146_525dfdf00d818

3,024 円(税込)地味に高い。

この本の内容をきちんと分かっていれば、トリッキーな問題がでても合格ラインは超えられると思います。

※トリッキーな問題と書きましたが、たまにそんなん知るか!みたいなのが出たりします。そういう問題は多くはないので、本番では後回しにすることをお勧めします。

例えば、平成27年第3回[第23問]

R:200 G:100 B:100 と R:100 G:200 B:100 を乗算した場合の色に最も近いものを、以下より 1 つ選択しなさい。

1. R:78 G:78 B:39
2. R:150 G:150 B:100
3. R:200 G:200 B:100
4. R:300 G:300 B:200

乗算の計算方法なんて知るか!と思うんですが、出ちゃうんですよね・・。

ちなみに答えは「1. R:78 G:78 B:39」です。
計算方法はR=200*100/256=78.125、G=100*200/256=78.125、B=100*100/256=39.0625だそうです。知らないよねw

実技試験について

実技に自信がない人は対策講座が有効

普段PhotoshopやDreamweaverを使っていない人だと、どういうレベルの内容で合格するのか分からないと思います。
せっかく高い受験料を払うのに実技を落として再試験は辛いので、対策講座を受けてみると安心できるかもしれません。
実は私も受講しました(小声)なんとなくあった不安が取り除かれたので良かったです。
実技ではコーディングもあるので、この講座を受講しておけばDreamweaverを使った簡単なコーディング方法も分かると思います。内容が変わってたらゴメンナサイ!

ウェブデザイン技能検定2級対策講座

参加料:8,000円(税込・ 教材:「ウェブデザイン技能検定2級ガイドブック」を含む
※すでに教材をお持ちの場合:参加料5,000円(税込)

green_googlekasu20141024215319

見えりゃいいんだよ!

画像、アニメーション作成。デザイナーさんだとこだわっちゃいそうですが、この試験にそんなこだわりは必要ありません!
気をつけるべきは文字の可読性のみです。きちんとコントラスト比が取れていて、文字サイズが小さすぎなければ、デザイン性なんて関係ありません。要件から外れなければ良いのです。

やっぱりDreamweaver

Dreamweaverと連呼していますが、今回の試験で本当にDreamweaverに私は救われました。
作業5でbのJSを選択した私ですが、一行書くだけなのに、頭が真っ白になって書き方が分からなくなってしまいました
残り時間30分ぐらいから10分くらいまでずっとブラウザのコンソール画面を開いて真っ青になってたんですが、ふと開いたDreamweaverのリファレンスに私が求めていた一行がそのまんま書いてあったんです!!!

もうダメかと思いましたが、それできちんとJSも動作するようになり無事合格出来ました。。。
いや~~~冷や汗出た。

Dreamweaverのこういったアシスト機能もルール違反ではないのでどんどん使うと良いと思います!

私と同じ状態になった時のためにリファレンスの出し方載せておきます。
フォントカラーを変えたいけど此処↓から先の書き方忘れちゃったよ!という時

document.getElementById(test).style.color

図1

クリックで拡大出来ます

この「color」の部分を右クリックしてください。するとメニューの中にリファレンスと出てきて例を見ることが出来ます。

例)
document.getElementById("specialDiv").style.color = "green";
これで完璧!コードを忘れてもリファレンスを忘れなければ勝てる!

最後に

という感じに、一部卑怯な手段を使って無事合格しました。

受かってしまえばこっちのもんです。でも、試験から1ヶ月くらいしか経っていませんが、覚えたことほぼ忘れましたw無駄にさっきの乗算の計算は覚えてますがww

忘れちゃったので、記事で書こうと思ってた事も忘れてると思います。思い出したタイミングでちょこちょこ編集すると思いますのであしからず!ではっノシ