令和 4 年度
第4回

ウェブデザイン技能検定
1 級
実技試験問題<注 意 事 項>
1.

受検者が使用する PC は、事前に公開した利用可能なソフトウェア、開発環境などがインストールされており、動作することを受検前に必ず確認すること。事前に公開された利用可能なソフトウェアおよび開発環境以外は利用することは出来ない。検定委員には各種ソフトウェア操作および開発環境の操作方法について質問することは出来ない。

2.

受検用 PC のトラブル等により作成中のデータが失われる場合もあるため、各自データ保存やバックアップについて留意して作業を行なうこと。作成中のデータなど、各自データを保存可能な場所に適宜バックアップすることを推奨する。

3.

特段の理由がある場合、開始後 30 分以内であれば入場を認める。ただし、時間延長は認めない。また試験終了前 10 分間は退出できない。開始より 30 分を超え、制限時間内に作業完了した場合、技能検定委員に、「作業完了」の意思表示を行ない、試験会場より退出することができる。ただし再入場は認めない。

4.

受検者は、受検用ＰＣ、鉛筆、消しゴム、定規等の筆記用具については事前に用意し、利用することができる。また、和英、英和辞書については持込を許可する。手荷物等については、持込を許可するが、受検に関係ないもの（辞書機能などを内蔵した物品、イヤフォン等）については受検中に利用することはできない。携帯電話やスマートウォッチなどの通信機器は机上には置かず、受検中は必ず電源を切っておくこと。携帯電話やスマートウォッチなどの通信機器を時計の代わりに利用することはできない。水分補給の為、閉栓可能な飲料は持ち込み可能であるが、その飲料などが原因で機材等にトラブルが発生した場合は自己責任となるため注意すること。机上に置けるものは、受検用ＰＣ、受検票、筆記用具、和英・英和辞書、時計、閉栓可能な飲料のみとする。事前に持ち込まれた受検用ＰＣは検定委員により検査・確認が行われる。

5.

計時は、受検用 PC の時計で確認するのではなく、技能検定委員に説明された計時機器等を利用すること。また、受検の際には、1 時間経過、2 時間経過、受検終了 30 分前、受検終了 10 分前、受検終了 5 分前、受検終了 1 分前に検定委員からアナウンスを行なう。実技試験終了後は、後述 10 に該当するもの以外は、作業を続けることは出来ない。

6.

受検用 PC から、インターネットへアクセスすることは禁止する。

7.

事前に作成した独自のテンプレートや素材を利用することはできない。事前に用意したデータ等を利用した場合は不正行為とみなし、その場で退場とし、採点は行わない。

8.

受検中の用具の貸し借り、PC およびデータ交換は禁止する。

9.

他受検者の受検を妨害する行為をしないこと。

10. 機器等のトラブルが発生した場合、挙手で技能検定委員に知らせ、待ち時間の記録をすること。なお、この際に作業を行ってはならない。また、受検用 PC のトラブルで停止（フリーズ）した場合、その停止時間も測定する。作業が上記理由等で行なえない場合、その繰越分は、受検時間終了時に連続して行なうこととする。
11. 受検中に不正があった場合、技能検定委員に不正を指摘された場合、受検者は作業を中止して退場すること。
12. 受検中のトイレは必ず技能検定委員に申し出ること。なお、所要時間については作業時間に含まれる。またトイレなどで座席を離れる際、PC をログオフするか、アプリケーション等の操作画面、ブラウザの画面などが表示されないよう配慮すること。
13. その他、いかなる場合にも技能検定委員の指示に従って、受検すること。
14. 制作した課題の著作権は試験主催者である特定非営利活動法人インターネットスキル認定普及協会に帰属する。

ウェブデザイン技能検定 1 級 実技試験

<留意事項>
・ 実技試験は、検定用PCまたは受検者が持参したPCを利用して実施される。
・ 受検者は 180 分間で作業を完了させること。
・ 本検定試験では Google Chrome、Mozilla Firefox、Microsoft Edge の最新安定版を指定ウェブブラウザとする。
・ 課題で利用する素材は、デスクトップの material フォルダ（ディレクトリ）に配布している。それぞれの課題に従い、課題データは適切なフォルダ(ディレクトリ)に保存を行うこと。保存するデータは課題分のみとし、不適切なデータの保存や不要なファイルがある場合は減点の対象となる。また、受検者は作成中の課題が指定のブラウザで正しく閲覧できる状態であるか、適宜、受検中に確認することを推奨する。
・ 作成するファイル名には全角文字は使用せず、半角英数字のみとして、スペースなどを入れずに作成すること。またファイルのデータ形式、拡張子等にも留意すること。保存先は問題で作成を指示されたフォルダを作成し必ず保存すること。問題で規定された以外のデータは一切、採点の対象とならない。
・ 本検定試験では、ハイパテキストマーク付け言語(HTML)については JIS X 4156:2000 (ISO/IEC15445:2000) およびW3C(ワールドワイドウェブコンソーシアム)HTML4.01 以降を対象とし、拡張可能なハイパテキストマーク付け言語(XHTML)はW3C XHTML 1.0 以降を対象とする。段階スタイルシート(CSS)については JIS X4168:2004 およびW3C CSS 2.1 以降を対象とする。ただし、HTML5 についてはHTML Review Draft—Published 29 January 2020、CSS3 の各モジュールは 2022
年 4 月 1 日の時点でW3Cにおいて勧告されているものを推奨する(http://www.w3.org/Style/CSS/ 参照)。なお、素材に予め文書型宣言が記述してある場合は、それに従うこと。また、作成するHTMLファイルの文字コードはUTF-8 にすること。

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

作業課題： ウェブサイト構築
以下の<ウェブサイト制作要件>に従い、ウェブサイトをデザインし構築しなさい。

<ウェブサイト制作要件>
1. 課題 1～4 の指示に従い、仕様 1～4 の要件をすべて満たした全 3 ページ以上のウェブサイト（トップページを含む）を作成しなさい。その際は、サイト構築に必要な情報を、<A.ウェブサイト提案依頼要件(RFP)>を参照し設定すること。
2. 作成が必須であるのはトップページ並びに、「JAPAN WEB DESIGNERS COMMONS(ジャパン ウェブデザイナーズ
コモンズ 略称 : JWDC )」フロントエンド、「JAPAN WEB DESIGNERS COMMONS(ジャパン ウェブデザイナーズ コモンズ 略称 : JWDC )」入会申し込みページの 3 ページである。

3. これらのページには必ず、<A.ウェブサイト提案依頼要件(RFP)>中の「サイトに要求される機能・情報」で指定される内容が含まれなければならない。これら 3 ページ以外のページ（ダミーページ）の作成については任意であるが、作成した際は、ダミーページから必須の 3 ページに対して適切にリンクが稼動する状態としなくてはならない。
4. 下記の図は 2.で指定された各ページを示すが、メニュー、ナビゲーション、各種リンク、階層については、仕様に従う限り自由に構成してよい。ダミーページのページタイトルについては、内容に沿った適切なものを任意で指定すること。

トップページ「JWDC」「JWDC」

フロントエンド

入会申し込みページ

ダミーページ

5. トップページで使用すべき文章の素材が、プレーンテキストの状態でデスクトップの material フォルダの data フォルダに収納されているので利用すること。その他の文章については、任意で創作し追加しても構わない。
6. 各ページで使用すべき画像ファイルは、デスクトップの material フォルダの img_data フォルダに収納されているので、ページ内容にふさわしいものを選択し、適切な状態に加工して使用すること。その他のパーツなどは、任意で創作し追加しても構わない。
7. ロゴマークとして使用すべきグラフィックデータが、デスクトップの material フォルダの graphic_data フォルダに収納されているので、必ず logo.ai または logo.eps のいずれかを選択の上加工し、必要に応じて適切なファイル形式に変換して使用すること。
8. ウェブサイトは PHP、MariaDB を利用した動的なサイトとして構築すること。また必要に応じて phpMyAdmin を利用することができる（http://192.168.33.10/phpmyadmin）。アクセスするユーザ名は root、パスワードはwebdesign である。
9. 情報表示ページに使用するデータベースは VM 上の MariaDB に設置済みであり、検索や登録ではそれを用いること。MariaDB からダンプされたものがデスクトップの material フォルダの db フォルダに sample.db として収納されている。データベース名は kentei_db、アクセスするユーザ名は web、パスワードは design である。
10. 課題の提出については、デスクトップ上の wd1 フォルダ内に提出すること。また DocumentRoot である wd1 内のwww/public フォルダに index.html または index.php を配置することとする。なお、PHP 等で DocumentRootの外にモジュール等のファイルを配置する時は、wd1 フォルダ内に配置すること。
11. VM へのアクセスは 192.168.33.10 でアクセスできる。DocumentRoot に配置したものは http://192.168.33.10/でアクセス可能である。また、PHP のマニュアルには http://192.168.33.10/php でアクセスできる。
12. VM にアクセスする必要のある場合は、material フォルダ内にある putty を使用して SSH アクセスすることができる。ID/パスワードは共に 「vagrant」になっている。

3

ウェブデザイン技能検定 1 級 実技試験

<A.ウェブサイト提案依頼要件(RFP)>
依頼者：特定非営利活動法人インターネットスキル認定普及協会
特定非営利活動法人インターネットスキル認定普及協会について
特定非営利活動法人インターネットスキル認定普及協会は、ウェブデザイン技能競技会実施、ウェブデザイン技能の技能者育成、啓蒙、普及活動を行っている非営利組織である。また、厚生労働大臣により指定され、国家検定であるウェブデザイン技能検定の実施運営を行っている。2022 年からウェブデザイン技能士の交流や情報提供、人材育成を目的としたウェブデザイン技能士会員サービスの提供について検討をしており、2023 年 3 月 1 日より、サイト名称は「JAPAN WEB DESIGNERSCOMMONS(ジャパン ウェブデザイナーズ コモンズ 略称 : JWDC )」として、サービス提供を開始する予定である。キャッチフレーズ(コーポレートステートメント)は、「インターネットにかかわるすべての人へ」である。

ターゲットユーザ
対象利用者は当該協会の実施するウェブデザイン検定の受検者で合格をしたウェブ技能士および、DX 分野に向けた人材育成やウェブデザイン技能士について興味を持つ方、また当該協会実施の技能検定を受検する見込みのある方々。ターゲットとする
年齢層はインターネット、情報技術、ウェブデザインに興味のある 16 歳以上の男女、閲覧者は 16 歳以上で 30 代から 40 代の男女が多い。対象利用者にはパソコン操作に習熟していない高齢者も一定数おり、アクセシビリティやユーザビリティにも配慮した構成、ナビゲーションが必要である。

運営組織情報法人名：特定非営利活動法人インターネットスキル認定普及協会
英字表記：Association for Net Skill Promotion and Certification
コーポレートカラー：#000099
住所：〒160-0023 東京都新宿区西新宿 7-16-1 第 3 歯朶ビル 2 階
電話（代表）：03-XYZX-LMNO FAX：03-XYZX-LMNO

Email: info@netskill.jp

コピーライト表記：Copyright 2023 NSPC All rights reserved.

サイトに要求される機能・情報※注意：要求は順不同であり、1 つの項目が 1 つのウェブページをあらわしているわけではない。
・与えられた組織のロゴタイプを必ず使用し、コーポレートカラーを必ずウェブサイトに用いること。
・トップページにビジュアルイメージとしてアニメーションを使用すること。
・提供情報のエリアをトップページに設定すること。
・ウェブデザイン技能士の為のウェブサイト「JAPAN WEB DESIGNERS COMMONS」の各種提供情報のカテゴリ等を表示できるようにすること。
・「JAPAN WEB DESIGNERS COMMONS」の入会申し込み機能を実装すること。
・プライバシーポリシーを示し、組織情報を提供すること。
必須グローバルナビゲーション項目
ホーム（トップ）
提供情報
運営組織情報「JAPAN WEB DESIGNERS COMMONS」※フロントエンドおよび入会申し込みページ
サイトマップ※グローバルナビゲーション項目は英語表記でもかまわない。

4ウェブデザイン技能検定 1 級 実技試験

課題 1. ウェブサイト制作要件に従い、下記の仕様１を満たすウェブサイトを作成しなさい。
<仕様１ ウェブサイト技術要件>
・（X）HTMLについては JIS X 4156:2000 (ISO/IEC15445:2000) および W3C(ワールドワイドウェブコンソーシアム)のHTML4.01 以降、または拡張可能なハイパテキストマーク付け言語(XHTML) W3C XHTML 1.0 以降に準拠した記述を行うこと。段階スタイルシート(CSS)については JIS X4168:2004 およびW3C CSS 2.1 以降に準拠した記述を行うこと。ただし、
HTML5 についてはHTML Review Draft—Published 29 January 2020、CSS3 の各モジュールは 2022 年 4 月 1 日の時点
でW3Cにおいて勧告されているものを推奨する。（X）HTMLファイルの文字コードは、UTF-8 とすること。
・適切な構造化(structured markup/semantic markup)を行い、ウェブ標準に基づいた設計、実装とすること。
・検定指定ウェブブラウザで、もれなく閲覧でき、操作可能なものとすること。
・ディスプレイ解像度 1366×768 で閲覧でき、操作可能なものとすること。
・JIS X8341-3 または W3C WAI WCAG2.1 に基づき、アクセシビリティに配慮し制作を行うこと。
・画像を使用する際は、画質、階調、圧縮技術など、ウェブ用画像ファイルとしての最適化を行うこと。
・PHP および MariaDB を利用した動的な機能を持つサイトを構築すること。
・ウェブサイト制作要件に沿った、データファイルの保存および提出がされること。

課題 2. ウェブサイト制作要件に従い、下記の仕様 2 を満たすウェブサイトを作成しなさい。
<仕様 2 ウェブグラフィック>
・提供される画像から各ページ内容にふさわしいものを選択し、適切な状態に加工して使用すること。
・logo.aiまたはlogo.epsのグラフィックデータを加工して、ロゴマークを作成すること。その際は必要に応じて、ウェブページで使用する適切なファイル形式に変換すること。

課題 3. ウェブサイト制作要件に従い、下記の仕様 3 を満たすウェブサイトを作成しなさい。
<仕様 3 マルチメディア>・トップページのビジュアルイメージとして、GIF / JavaScript / SVG いずれかの形式によるアニメーションを作成すること。
・アニメーションは 3 秒以上 8 秒以内とし、グラフィックデータlogo.aiまたはlogo.epsから作成されたロゴデータ(イメージ)が含まれていること。内容については規定しない。
・アニメーションファイルの容量は 500kバイト以内とすること。

5

ウェブデザイン技能検定 1 級 実技試験

課題 4. ウェブサイト制作要件に従い、下記の仕様 4 を満たすウェブサイトを作成しなさい。
<仕様 4 DB（データベース）によるコンテンツマネージメント機能仕様>
・次の機能を備えたコンテンツマネージメントシステム（CMS）が、DBとの連携を伴って実装されていること。また、CMSはGUIで操作できること。

コンテンツマネージメントシステムの機能
機 能 名

詳 細提供情報リリース日

提供情報を掲載日順に表示する機能 *1

提供情報詳細指定された情報の詳細を表示する機能 *2

会員登録

会員登録機能*3*1 DB の提供情報は、トップページにおいてはカテゴリを示す "title" 項目を掲載日によって降順に並べた状態で5 件、「JAPAN WEB DESIGNERS COMMONS」ページにおいては全件表示すること。掲載日が同日の場合は、カテゴリテーブルの id を降順にすること*2 DB に格納されている、カテゴリ名、ターゲット層、情報提供元、掲載日、ロゴを表示すること。なお、ロゴのファイル
本体は www/public/images ディレクトリに置かれている。また、入会申込ページへのリンクを表示すること。

*3 会員登録（技能士およびその他）者の氏名、メールアドレスを DB に登録できること。
会員登録機能では、以下のパラメータを送信すること。サーバ側に作成されている members テーブルに登録すること。
登録に失敗しないようバリデーションを行うこと(クライアント、サーバどちらでも可)。登録ページはフォームだけでデザインの必要はない。

リクエストパラメータ
会員種別*1member

氏名namee-mailemail*1 技能士は 1、その他は 2 を送信すること。
・CMSの作成にあたってはXSS(クロスサイトスクリプティング)、SQLインジェクションなどに留意したものとすること。

◇免責事項◇
本検定試験において記載されている会社名、製品名は、それぞれの会社の商標又は登録商標である。
受検上の留意事項、設問内等ではⓇ、TM マークを明記しない。

◇写真素材について◇
本検定試験における写真素材の一部は、写真 AC 様よりご協力をいただいております。

6