ウェブサイトの設計やデザインに関わる国家資格「ウェブデザイン技能士」になるための試験「ウェブデザイン技能検定」の実技試験について書いてみます。
実技の受験資格はウェブデザイン技能検定のサイトに「当該実技試験が行われる日が、学科試験の合格日より2年以内である場合に限る。」と記載されているので、学科試験の合格後、実質2回しかチャレンジ出来ません。そのため一発合格とするために、事前にポイントを絞って予習し、無事に一発合格となりました。
そこで、試験を振り返って一級ウェブデザイン技能検定の実技試験に対して大事だと思ったポイントをまとめてみました。一級ウェブデザイン技能検定に挑戦する人への一助となると幸いです。
本記事は【実技】に関する内容を書いています。【学科】に関する記事は下記をご参考下さい。
個人的な見解ですので、この記事の内容や学習方針が正解というわけではありません。あくまで参考としてご覧ください。
目次
ポイント１．ペーパー実技は解答用紙が紙であることを前提に、時間配分に注意する
一級ウェブデザイン技能検定の実技は白紙の解答用紙に手書きで書く「ペーパー実技試験」と、PCを使用する「実技試験」に分かれています。
令和3年度では、ペーパー実技試験が午前で60分、お昼の1時間休憩後、午後の実技試験180分というスケジュールでした。どちらも問題内容からしてかなりギリギリの時間なのですが、特にペーパー実技は「解答用紙が紙である」ことを前提に、時間配分に注意する必要があります。
一級ウェブデザイン技能検定の実技には明確な解答がなく、合否しかわからないためこれで良いかわかりませんが、自分が書いた内容を思い出しながら、ポイントをまとめてみました。それぞれの時間配分の目安も書いています。
※令和3年度の問題を元にした内容です
ポイント1-1. モックアップ（目安：20分）
解答例
RFPにキャッチフレーズやターゲットなどが書かれていますが、重要なのは「サイトに要求される機能・情報について」の内容が盛り込まれているか、だと思います。ただ、細かく全ページ用意していると時間がすぐに無くなってしまうので、以下のようなポイントを押さえておくと良いと思います。
- ヘッダやフッタはトップページだけ要素や要求に対する指示が分かるように書き、他ページでは四角に「共通ヘッダ」「共通フッタ」と書く程度とする
- テキストが入る箇所は線を引いたりして簡易的に表現する
ポイント1-2. サイトマップ（目安：5分）
解答例
遷移図にディレクトリ階層を書いてしまえば良い気がするのですが、課題として遷移図と分かれていたので、このような感じで作成しました。
ポイント1-3. 遷移図（目安：5分）
解答例
よくある遷移図ですが、このように作成してみました。上から下の見せ方でも、樹形図になっていれば良いのかなと思います。
ポイント1-4. テーブルの正規化（目安：10分）
これが意外と厄介というか、講座名や講師名を省略して良いものかわからなかったので、ひとまずテーブルの構造だけ先に書いておき、最後に余った時間で全て書く、という流れにしました。1分でも大事な試験において、せめて講師は3名くらいにするとか、手書き解答を考慮した課題にしてほしいな、と思ったところでした。
ER図での解答かという考えもよぎりましたが、課題内容に「テーブルを表にして記述しなさい」とあったので、結構しっかり手書きで解答しました。
テーブルの正規化は精通しているわけではないので何とも言い難いですが、「講座ID＋講座名＋ターゲット層」「講師ID＋講師名」「実施日」のテーブルに分けて、「実施日」テーブルに「講座ID」と「講師ID」を持って紐づける、という解答としました。
ポイント1-5. レイアウト崩れに対する指摘（目安：10分）
これも「紙」なのがネックで、画面とHTMLとCSSを目視で確認することになるので、かなり厄介です。また、解答用紙も他と同様に白紙のため、「どこまで具体的に書けば良いのか」が不明確で困ってしまいました。
うろ覚えですが、概ね以下のように解答したと思います。
新着情報内
CSSの129行目、dd に width を指定する
検定のご案内
CSSの139行目、aside に float: right を指定する
フッタ
CSSの173行目、#copyright に text-align: center を指定する
このポイントのまとめ
配分時間はあくまで参考ですが、上記配分でも計50分です。自分は一応すべて解答出来たものの、ラスト1分で駆け込みでギリギリという状態だったので、「この課題は〇分までにしよう」という感じで時間配分を調整した方が良いと思います。
また、ペーパー実技のその他の注意点でこのような内容があります。
- 定規は持っていきましょう。時間が短く焦る中で手書きの線はかなりツライと思います。
- 解答用紙が足りない場合は、手をあげて追加でもらいましょう。解答用紙は10枚配布されたかと思いますが、全て解答すると足りなくなると思います。
- 解答用紙の左上あたりに、解答対象の課題番号を書く欄があるので、忘れずに書きましょう。
ポイント２．実技試験は過去問題をしっかり実践しておく
ペーパー実技が終わるとお昼の1時間休憩後、180分の「実技試験」があります。PCを持ち込みしている人もいましたが、事前準備が結構大変そうな印象だったので、PCは会場のものを使用した方が楽なのではないかと思います。
実技試験は配布PCにあるデータと課題が書かれた用紙を元に実際にサイトを構築するわけですが、制作要件やRFPがわかりづらく、結構困惑しました。
まずは試験当日の内容をふまえ、試験前日までに押さえておきたいポイントをまとめてみました。
ポイント2-1. 仮想環境について
作業は仮想環境上で行うので「vagrant のコマンドを覚えておかないとそもそも何も出来ないのでは」という気持ちもあり、起動のための「vagrant up」くらいは覚えておこう、、、という気持ちでしたが、配布PCは既にvagrantが起動されている状態のため、資料に書かれているIPアドレスでアクセスできる状態でした。
そのため、VMやvagrantに馴染みがないとしても、大きな問題はありません。
ポイント2-2. データベースについて
こちらもMariaDBが用意されていて、phpMyAdminも使用できる状態です。そのためテーブル設計やデータ投入もphpMyAdminを使えば容易に操作できます。puttyでのSSHアクセスも可能なので、コマンドに慣れている人はそちらでも良いでしょう。
しかし、そもそもDBへの接続や表示のためのPHPはさすがに手打ちで書かないといけないところでしたので、以下のような内容は手打ちで出来るよう予習しておきました。
//DB接続
$db = new PDO("mysql:dbname=test;host=localhost","root","password");
//SQLクエリを投げる
$query = $db->query("");
//表示用のwhile
while($row = $query->fetch()){
echo $row['column'];
}
//joinするためのSQL
select * from table inner join table2 on table.column = table2.column2
ポイント2-3. デザインについて
もしかするとデザイン性も多少の加点評価になるのかもしれませんが、「要件を満たしているか」が重要かと思いますので、デザイン自体はそこまで気にしなくて良いのではないかと思います。
ポイント2-4. マークアップ用エディタ
自分は Sublime Text に慣れているのですが、 Sublime Text のほか VS Code や Dreamweaver も用意されているので、入力補完ありきで問題ありません。
ポイント2-5. 過去問題での練習はネット環境を切った状態で行う
後述する「ポイント3-2. マルチメディア（アニメーション）」にも書いたのですが、ネットに接続されている環境だと知らず知らず外部接続している可能性がありますので、過去問題の練習はネットに接続されていない状態で行うことをおすすめします。
ポイント３．実技試験の制作要件やRFP
続いて試験当日、実際の実技試験で押さえておきたいポイントをまとめてみます。
ポイント3-1. 全体の構成について
令和3年度を例とすると、必須ページは以下の3ページとなっています。
- トップページ
- 持続可能な開発目標:SDGs 学習サイト『JAPAN SDGs Study』ページ
- 『JAPAN SDGs Study』講座受講申し込みページ
「他はダミーページで良い」「ダミーページの作成は任意である」と書かれているので、まずは必須ページの制作に集中した方が良いです。
他のページがどのように採点に影響するかは不明ですが、「作成する場合は適切にリンクが動作する必要がある」「タイトルも任意で適切なものを指定する」とありますので、ダミーページの作成も少なからず加点対象にはなるような気がします。
ポイント3-2. マルチメディア（アニメーション）
実技の過去問題を振り返っても課題の中に「マルチメディア（アニメーション）」があります。
「作業用PCでは Adobe Animate が入っている」という事前情報があったので、試験前日に Animate を使用してjavascriptで簡単なアニメーション用のファイルを一式パブリッシュするような設定を試しておいたので、それを良いかと思っていましたが、試験当日にパブリッシュしたファイルで確認するとアニメーションが動作せず。よくよくソースコードを見てみると「 https://code.createjs.com/1.0.0/createjs.min.js 」というJSを読み込んでいるようなのですが、ネット環境が無いので読み込まれず。すぐにアニメーションGIFの書き出しに変更しました。
マルチメディア（アニメーション）は容量に対する要件を気にしつつ、アニメーションGIFにしておくのが楽ではないかと思います。動きは左右に動き続けるような簡単なもので十分なはずです。
ポイント3-3. CMS
「CMSをスクラッチで作れ」という、このご時世にあまり無い要求が、実技最後の課題です。
「ポイント2-2. データベースについて」で書きましたが、DBの接続やSQLクエリを投げる処理などを手打ちできる状態でないと厳しいです。
過去にオレオレフレームワークでサイトを作ったことがあるような人であれば迷いなく対応できるのではないかと思います。
「XSS(クロスサイトスクリプティング)、SQLインジェクションなどに留意し」といった要求があったりしますので、POSTで受け取った値を htmlentities 等で変換、くらいはしておいた方が良いでしょう。
実技試験対策のまとめ
- ペーパー実技試験は時間配分に注意する
- 実技試験は過去問題をしっかり実践しておく
- データベース接続は手打ちで書けるようにしておく
- アニメーションの指示があればアニメーションGIFでの対応がおすすめ
実技試験においてはおそらく今後も基本的なCRUDあたりは実装を求められるような気がしますので、ある程度のPHPとSQLの経験が重要かと思います。デザイン性は多く求められていないとは思いますが、アニメーションの指示があれば、GIFで良ければアニメーションGIFは作れるようになっておいた方が良いとは思います。
以上、【実技】一級ウェブデザイン技能検定の試験対策ポイント4選でした。
「【学科】一級ウェブデザイン技能検定の試験対策ポイント4選」は下記からご確認下さい。
