こんにちは。ＳＯＭＰＯシステムズのデザイナーです。
この記事は、３本に渡ってウェブデザイン技能検定１級についてまとめているシリーズの３本目になります。
これまでの記事もぜひご覧ください。
「ウェブデザイン技能検定１級合格への道①」
「ウェブデザイン技能検定１級合格への道②」

前回の記事のおさらい

ウェブデザイン技能検定１級の「実技試験」には、以下の２種類があります！
１．ペーパー実技：６０分
２．作業実技：１８０分
前回は、「ペーパー実技」の内容についてまとめました。
今回は、「作業実技」の内容についてまとめていきます。

作業実技は何が出る？

作業実技は、提示される「ウェブサイト提案依頼書（RFP）」に沿って、実際のウェブサイトを自分の手で構築していきます。
「ウェブサイト提案依頼書（RFP）」に提示のある要件は、すべて反映されている必要があります。
まずは、サイトに必要な要件を確認します。
以下に、過去問のRFPからサイト要件の一部を抜粋します。
この他にも、仕様の指定が多くあるので、以下のRFP抜粋の情報だけでは作業をすることはできませんが、どんなサイトを作ればいいのか？だけは分かると思います。

上記のサイトの構築で、受験者がしなければならない作業は、大きく分けて以下の５つが考えられます。（盛りだくさんですね～！）
１．ロゴマークの作成（illustrator）
２．アニメーションの作成（GIF or JavaScript or SVG）
３．静的ファイルの作成（HTML、CSS）
４．「提供情報」の情報を参照する機能の実装（DB参照機能）
５．入会申し込み機能の実装（DB更新機能）

正直、RFPを読んだだけでは、どんなサイトを作ればよいのかイメージが湧きづらいですよね・・・。
情報量が多いので、一つ一つ要件を整理していきます。

グローバルナビゲーションの項目を確認

まず、必須グローバルナビゲーション項目を網羅することはマストです！
RFPから、グローバルナビゲーション項目は以下を指していると読み取れます。
・ホーム
・提供情報
・運営組織情報
・JAPAN WEB DESIGN ADVANCE
　※フロントエンドおよび入会申し込みページ
・サイトマップ
このうち、中身の作成まで必須なのは、
・ホーム（トップ画面）
・JAPAN WEB DESIGN ADVANCE（フロントエンド）
・JAPAN WEB DESIGN ADVANCE（入会申し込みページ）
この３つであると問題文に明記されていたので、他のページの中身は作る必要がありません。（引用にて抜粋している個所以外は実際の過去問をご確認ください。）

トップ画面に必要な要素は？

先述の内容から、必然的にホーム画面（以降トップ画面と呼びます）に必要な要素は以下であると整理できます。

・ロゴ
・グローバルナビ5つ
　（ホーム、提供情報、運営組織情報、JAPAN WEB DESIGN ADVANCE、サイトマップ）
・メイン画像に表示するアニメーション
・提供情報のエリア
ここまで整理してきて、疑問が４点湧いてきました。（多い！！）

疑問①「提供情報のエリア」って何だろう？？
疑問②JAPAN WEB DESIGN ADVANCEの「フロントエンド」って何だろう？
疑問③会員登録では何を入力させればいいんだろう？
疑問④会員登録の導線はどこから。。？

まず、疑問①の「提供情報のエリア」の件を見ていきます。
「提供情報」についての仕様は以下です。
この記載で、これは一般的なサイトでいうところの「ニュース」「お知らせ」のことだ、と理解できると思います。

トップページには、最新のニュース５件のみを、掲載日の降順で並べて表示させ、全量は「JAPAN WEB DESIGN ADVANCE」ページに掲載させればいいようですね。
疑問②は、「フロントエンドとは・・・はて？」という感じだったのですが、これを見ると、ニュース一覧が全部表示されていればいいのかな、と理解しました。
順番は前後しますが、疑問④会員登録の導線はどこから。。？もここで解決できるように思います。ここは確証が持てないのですが、

とありますので、同じくトップ画面から導線を設ければいいのではないでしょうか・・・？
疑問③会員登録については、別で仕様が提示されていました。
このページは、シンプルに情報を受け付けるフォームだけでよさそうです！

トップページのワイヤーフレームを作ってみました！

以上の情報をまとめて、「こうなんじゃないか！？」というワイヤーフレームを作成してみました。例はあくまで「推測」ですので、参考程度に読んでくださいね！
実際は、指定されたコーポレートカラーを使用したりと、要件に沿った「デザイン」が必要になります。ただ、作成するイメージを持つには十分ではないでしょうか？
受験メンバーで話し合って導き出した渾身のトップページのワイヤーフレームはこちらです！！🎉

ナビゲーションの表記は英語でも日本語でもよく、ある程度自由があるようなので、「JAPAN WEB DESIGN ADVANCE」は長いので、「JWDA」としてしまいました。
しかしながら、依然として疑問は沢山残っています。
「JWDA」の「フロントエンド」には、ニュースの全量が表示される仕様です。だとしたら「提供情報」には何のコンテンツが掲載されるのか・・・？
また、「ニュースなのに件名は要らないないのかな？」や、「本当は『JWDA』には、フロントエンドと申し込みページの２つのメニューが必要なんじゃないかな？」などなど・・・。
用意されている実際のDBの値や画像データを見ないと、何とも・・・、な部分もあります。
どちらにしろそこはあまり深く考えずに、とにかく要件を実現すれば試験的にはOKなのではないでしょうか。

まとめ

いかがでしたでしょうか？
ちゃんとした正解は分からないものの、これで処理もちゃんと実装できてさえいれば（それが難しいのですけど！💦）、レイアウトで不合格になることはなさそうだと思います・・・！繰り返しになりますが、あくまで「推測」です！
とはいえ、資格取得の目的は別として、完全に文章のみから要件を読み取るということは実務でもあまりないので、よいトレーニングになると思いました。

ここまでお付き合いいただき、ありがとうございます。
あと少しで試験日です！！
今回は令和5年度の問題を細かく見ていきましたが、過去3年間は同じような仕様のウェブサイトが題材になっているので、傾向を覚えれば、かなり応用は効くと思います。
この記事の続編で「合格しました！」の更新がなければ、結果は察してくださいますと幸いです・・・👼✨
どのような結果になっても、スキルアップのための努力は今後も怠らないように頑張っていきたいと思います。

また次の記事でお会いしましょう！