事前公表

第60回 技能五輪全国大会

ウェブデザイン職種
競技概要

技能五輪全国大会 ウェブデザイン職種競技委員会

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

1. 競技概要
ウェブデザイン技能とは、「ウェブ上のインタフェースや情報の整理・設計・構築を行い、ユーザ
ーに最適な形で提供すること」と定義する。ウェブデザイン職種競技では、競技課題に基づき、ウェブサイトの設計・構築に関わる技能について競技を行う。
評価は以下の各モジュールによる作業で行う。
1. スピードテスト（その他ウェブデザインに関わる諸技能）
2. フロントエンド（ウェブアプリケーション）
3. バックエンド（アプリ、サーバサイドおよびバックエンド開発）
4. CMS（コンテンツ マネジメント システム）
各項目の詳細については「6.本競技で求められる技能」を参照すること。
なお、この定義は、技能五輪国際大会の当該職種の職種定義や技能五輪全国大会、若年者ものづくり競技大会の競技委員会、同職種分科会で適宜見直すものである。

2. 競技日程および競技時間
2.1. 競技時間
競技は制限時間10時間以内で3日に分けて実施する。
1日目は競技時間を1時間、2日目は競技時間を6時間、3日目は競技時間を3時間とし、3日間で合計10
時間の実施とする。
競技は下記のスケジュールで行い、競技会場下見の際は10時00分より会場確認、機材確認、競技課
題の発表及び競技説明を行なう。
11月4日（金）は、1日目の競技、競技課題発表、競技説明および各自競技用PC等設定を行う。この時に選手はキーボードなどを設置することができるが、競技会場に持ち込んだ機材は競技が終了するまで会場外へ持ち出すことはできない。また、競技スケジュールについては変更する場合もあるので留意すること。なお、各競技日に実施されるモジュールで定められた競技時間の半分以上が経過した後に課題が完成した場合は、適宜作業完了を競技委員に宣言して作業を終了することができる。一方、競技時間内に課題を完成できなかった場合は、入賞対象としない。

2

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

2.2. オープンコミュニケーション
各競技日において、オープンコミュニケーションが設けられている。このオープンコミュニケーシ
ョンは、選手のコーチ（指導者、監督）が選手と競技における確認や戦略を含めてコミュニケーシ
ョンすることができる。
選手（所属先により複数の場合もある）とコーチは、（複数名の）選手と1名のコーチが原則コミュ
ニケーションを行うこと。ただし、オープンコミュニケーションは、原則競技エリア外、または、選手の競技席外の競技エリア内で行うこととし、その際、コーチや選手はパソコンやスマートフォンなどの携帯端末を用いて、資料を提示しながらのオープンコミュニケーションを行ってはならな
い。
オープンコミュニケーションでは、コーチ（指導者、監督）は競技課題を使用することができるが、選手はオープンコミュニケーション時に自身の競技課題を持ち出すことはできない。
また、コーチや選手は電子機器で調べたり、筆記用具などで書き込みを行うことはできない。
オープンコミュニケーション時に順次複数のコーチが交代で選手（複数の場合も）とコミュニケー
ションを行うことを禁ずる。

2.3. 競技日程
11月4日（金）説明会（開会式・競技会場下見）・競技1日目（競技時間：1時間）
時

間

内

容

〜 10:00

集合・受付

10:00 〜 10:10

競技説明、注意事項等

10:10 〜 10:40

競技用PCの設定など

10:40 〜 10:50

質疑応答

10:50 〜 11:10【休憩：20分 】

11:10 〜 12:10

モジュール1（スピードテスト）競技：60分

12:10 〜 12:20

オープンコミュニケーション（ロスタイム消化）12:20 〜

競技2日目の競技課題発表※14時より開会式（オンライン形式）実施予定。予定変更の場合は競技スケジュールも変更する

3

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

11月5日（土）競技2日目（競技時間：6時間）
時

間

内

容

09:00 〜 09:10

選手集合および受付

09:10 〜 09:20

モジュール説明

09:20 〜 09:30

オープンコミュニケーション

09:30 〜 11:00

モジュール2（フロントエンド）競技：90分

11:00 〜 11:10【 休憩：10分 】

11:10 〜 12:40

モジュール2（フロントエンド）競技：90分

12:40 〜 13:30【 昼食：50分 】

13:30 〜 15:00

モジュール3（バックエンド）競技：90分

15:00 〜 15:10【 休憩：10分 】

15:10 〜 16:40

モジュール3（バックエンド）競技：90分

16:40 〜 16:50

オープンコミュニケーション（ロスタイム消化）16:50 〜

競技3日目の競技課題発表

11月6日（日）競技3日目（競技時間：3時間）
時

間

内

容

09:00 〜 09:10

選手集合および受付

09:10 〜 09:20

モジュール説明

09:20 〜 09:30

オープンコミュニケーション

09:30 〜 11:00

モジュール4（CMS）競技：90分

11:00 〜 11:10【 休憩：10分 】

11:10 〜 12:40

モジュール4（CMS）競技：90分

12:40 〜 13:30【 昼食：50分 】

13:30 〜 14:50

プレゼンテーション

14:50 〜

講評・片付け・解散

競技時間中、情報機器作業における規定に基づき、競技選手が各自休憩すること。

4

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種「情報機器作業における労働衛生管理のためのガイドライン」等の資料は、以下のURLを参照すること。

https://www.mhlw.go.jp/web/t_doc?dataId=00tc6314&dataType=1&pageNo=1

3. 使用機材等
使用機材などについては、下記のインフラリストを参照すること。
https://gorin.skilljapan.info/2022/infra.html

4. 競技課題概要
本職種競技の実施に当たっては、これまでの技能五輪国際大会での競技課題および実施方法を職種分科会において分析するとともに、国内での当該分野で求められる技術・技能・業務内容、その他の状況なども考慮の上、競技課題のあり方を検討した。その結果、チームジャパンとしての方向性も踏まえた上で完全モジュール方式の競技として、以下の4つのモジュール毎に実施する。
それぞれは、設定された時間で実施する。
1．スピードテスト（その他ウェブデザインに関わる諸技能）
2．フロントエンド（ウェブアプリケーション）
3．バックエンド（アプリ、サーバサイドおよびバックエンド開発）
4．CMS（コンテンツ マネジメント システム）

4.1. 各モジュールの概要
4.1.1. モジュール1「スピードテスト」1時間
ウェブデザインに必要とされる技能・作業の速さを競う。ウェブデザイン作業における各種の専門的な問題を時間内に完成させる。各問題の配点は同⼀得点とする。このモジュールで評価されるのはウェブデザイン技能に必要となる作業の速度と正確さである。

5

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

4.1.2. モジュール2「フロントエンド」3時間
ウェブブラウザで動作するウェブアプリを作成する。HTML/CSSを用いてアプリのレイアウトを作成
し、JavaScriptによりアプリの機能の実装を行う。このモジュールでは、JavaScriptによる機能の実装、Ajaxを用いたデータ通信、クライアントサイドWebAPIなどを用いた応用機能の実装、拡張性や保守性を意識したコーディングの4つの要件を下に評価が行われる。

4.1.3. モジュール3「バックエンド」3時間
PHP（フレームワーク）とデータベースを使用して、バックエンド部分（管理画面とRESTful API）の構築を行う。このモジュールで評価される技能は、ウェブ開発におけるプログラミング技能である。これにはPHPなどのコーディングの他にDBの操作、テーブル設計なども含まれる。

4.1.4. モジュール4「CMS コンテンツマネジメントシステム」3時間
広く普及しているCMSパッケージであるWordPressを用いて、管理者や編集者が内容等を容易に更新可能なウェブサイトの導入を支援することを目的とする。このモジュールでは、顧客の要求を理解し、CMSを考慮したテーマデザイン・レイアウト、WordPressプラグインの組み込みや作成、管理画
面のカスタマイズなど、CMSを構築する上で必要となる総合的な技能が求められる。
WordPressのテーマである「BlankSlate」の「Child-theme」を活用してテーマのレイアウトを行う。
WordPress本体やテーマ、プラグインなどは素材として配布されるため、要件に応じて選手自ら導入やカスタマイズを行う必要がある。

4.2. 各モジュールの提出期限と進め方
1日目は、モジュール1を行う。1日目では、次のモジュールに進むことはできない。
2日目は、モジュール2とモジュール3を行う。モジュール2が終了した場合は、モジュール3に進むことができる。2日目の午前終了後はモジュール2に戻って作業することはできない。
2日目は、モジュール4に進むことはできない。
3日目は、モジュール4のみを行う。
モジュール提出期限
モジュール1

1日目の競技終了まで

6

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

モジュール2

2日目の午前中まで

モジュール3

2日目の競技終了まで

モジュール4

3日目の競技終了まで※ 提出期限間際等での競技用サーバへの負荷によっては競技委員会より別途指示を行う場合がある

各モジュールの提出期限が過ぎた後に修正をしても採点対象としない。また、各モジュールの対応
順序については、競技全体の各課題を円滑に進められるよう競技者自身が調整する必要がある。

5. 競技課題
競技課題の詳細を含んだ事前公表課題は競技の1ヶ月前を目途として別途公開する。
競技日の前日に事前公表課題よりおおよそ 10 〜 30% 程度を変更したものを最終課題として発表する。

6. 本競技で求められる技能
6.1. ウェブサイトデザイン● 利用ユーザーや利用目的を理解し、適切に情報を伝達できるデザインができること● 指定されたデバイスや利用場所、利用目的を考慮し、適切なデザインやコンテンツの提案、選定ができること● コンテンツに対して、適切なアニメーションや表現を構築できること● ユーザビリティ、アクセシビリティに配慮したデザインができること● JIS X8341-3、WCAGのガイドラインを考慮したデザインができること

6.2. UI・UXデザイン● 利用ユーザーや利用目的を理解し、適切に利用できるインタフェースのデザインができること● 指定されたデバイスや利用場所、利用目的を考慮し、適切なインタフェースや機能を提案、選定ができること● インタフェースにおけるアクションに対して、想定通りのリアクションを構築できること● ユーザビリティ、アクセシビリティに配慮したデザインができること

7

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

6.3. フロントエンド● 指定されたデバイスや利用場所、利用目的を考慮し、適切な画面の実装ができること● HTMLおよびCSSを用い、計画したデザインの表現ができること● 標準規格に準拠したHTML、CSSコーディングができること● 構造化されたHTMLを記述できること● ライブラリを適切に利用して実装ができること● アクセシビリティガイドラインを含むW3C標準に基づいた実装ができること● デバイスや利用場所、利用目的を考慮し、適切なインタフェースの実装ができること● 提供されたAPIの仕様を理解し、要件通りに正しく結合できること● CSSを用いて、計画したデザインの表現ができること● 再利用可能なコードを記述できること● Async/Await、オブジェクト指向や⾼階関数などを正しく利用できること● 通信等のエラーに対して、例外処理が記述できること● ライブラリを適切に利⽤して実装ができること

6.4. バックエンド● サーバサイドにおける全体像が理解できること● 保守性を考慮したDBのテーブル設計・構築ができること● 指定された要件を満たすAPIの実装および検証ができること● セキュリティを考慮した実装ができること● フレームワークを適切に利用して実装ができること

6.5. プロジェクトマネジメント● 作業時間や手順を考慮し、適切な作業の計画ができること● 指定された形式で、適切に課題を提出できること● 情報伝達やサイトの目的を達成するために留意され、訴求力のある制作を行えること● 目的に応じた要求を満たし、情報を漏れなく含み、完成された状態で課題を提出できること● プレゼンテーションが適切に行われ、作業および制作物の要旨を正しく伝達できること

8

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

7. 評価について
本競技では「6.本競技で求められる技能」について評価を⾏う。
また、配点については以下の表のとおりである。
モジュール項⽬

配 点

スピードテスト

10

フロントエンド30

バックエンド

30

CMS

30

合 計

100

9

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

8. 注意事項
1.

競技の際に利用する基本的な筆記用具は、主催者より提供を⾏う。また、和英、英和辞書、手荷物等については、持込みを許可するが、競技に関係のないもの（携帯端末等）などについては、競技中に利⽤することはできない。机上に置けるものは、配布された筆記用具・時計（必要であれば目薬）等とする。スマートフォンを時計として利用することはできない。また、各自でマーカー等、使用したい筆記用具があれば持参すること。持参した筆記用具などは競技委員がチェックし確認する場合がある。

2.

選手は競技実施日において、本⼈確認のため、学生証、社員証、公的に証明する写真貼付の身分証明書などの提⽰を求められることがある。

3.

競技中、水分補給の必要がある場合は、閉栓可能なペットボトルなどの飲料を持参することができる。または、主催者より飲料水等が支給される場合がある。ただし、その飲料などが原因で機材等にトラブルが発生した場合は、自己責任となる。

4.

競技は、見学者などにより、騒音等が発生する可能性がある。騒音防止のために音楽CDおよびヘッドフォン、イヤフ
ォン等の持込みを認める。音楽CDについては、競技用PCを用いて再生すること。タブレットやスマートフォン等は使用不可とする。音楽CDについては不要なデータが含まれていないか競技委員がチェックすることがある。

5.

計時については、競技用PCの時計で確認せず、競技委員に説明された計時機器等を利用すること。また、競技時には、適宜、競技委員から経過時間のアナウンスを行う。

6.

競技の際、服装等は、競技にふさわしいものを着⽤すること。選手は寒暖の変動に対処できるように留意すること。
また、騒音や見学者、撮影、取材などが予想されるため、必要であれば耳栓などを、競技委員に申し出て使用することができる。ゼッケン等が配布されるので競技委員の指示に従い、競技中には必ず着用すること。

7.

競技⽤PCについては、動作確認の際に事前にその動作を確認しておくこと。また、競技実施前日の説明会の際に競技用サーバ等への接続設定等について説明を行うので、接続方法、操作方法について必ず確認を行うこと。また、その際、各自、環境設定の為に持ち時間30分程度を与えるので、PCの環境設定等を行うこと。また、競技に必要な機器等
や検証用機材等を競技委員より支給される場合は、使用上の注意等に必ず従うこと。

8.

原則、競技用PCおよび検証用機材から、インターネット（競技用ネットワーク外）へアクセスすることはできない。
また、選手が競技委員の指示なくネットワークの設定を変更することはできない。競技用ネットワーク外へ故意にアクセスした場合は失格とする場合がある。ただし、競技委員より許可された場合においてはその限りではない。

9.

競技の事前に作成した独自のプログラム、ソース、テンプレートや素材を利用することはできない。ただし、競技課
題により規定された場合は競技委員の許可を得て利用することができる。

10. 競技用PCに、各ソフトウェア標準の状態でインストールされている。素材データやテンプレートについては、各自の判断で利用することは許可する。
11. 競技中に他の選手と用具の貸し借り、PC、競技用機器およびデータ交換は禁止する。
12. USB方式のキーボードおよびマウスについては、ドライバを新規で組み込む必要のないものに限っては持込みを許可する。その他の入力デバイス（タブレット等）については、持ち込みは不可とする。また、持ち込む機器については
選手各自の責任とし、競技用PCで満足に動作しないこともあるため選手各自で判断すること。競技委員は一切のサポートを行わない。競技会場に持ち込んだ機材は競技終了後まで会場外に持ち出すことはできない。

10

競技概要

第60回 技能五輪全国大会 ウェブデザイン職種

13. 他の選手や競技の進行、運営を妨害する行為をしないこと。
14. 競技機材、機器等のトラブルが発生した場合は、挙手などをして競技委員または関係者に作業の待ち時間の記録をしてもらうこと。なお、この際に作業をしてはならない。また、競技用PCが障害などにより、競技中に停止（フリーズ・クラッシュ）した場合、その停止時間も競技委員が測定を行う。作業が上記理由等で継続できない場合、その繰
越分は、競技終了時に連続して行うこととする。プレゼンテーションの順番および割り当て時間を越える場合には別途、協議し変更する場合がある。
15. 競技用PCのトラブルにより作成中のデータが失われる場合もあるため、各自データの保存やバックアップについて十分に留意し作業を行うこと。作業データは、ハードディスクに保存することを推奨する。作成中のデータに関して
は、競技用PCのハードディスクおよび競技用サーバ、データ保存用のメディアとしてUSBメモリ（2GB以上を各競技用PCに設置）が利用できる。以上のデータ保存可能な場所にデータを適宜バックアップすること。
16. 競技開始後9時間を超え、制限時間内に作業を完了した場合、「作業完了」と挙手などをし、競技委員に意思表示を行うこと。競技委員の確認後、指示に従い、控室等で待機すること。
17. 競技中に不正があった場合、また、競技委員に不正を指摘された場合、選手は失格とする。
18. 競技中のトイレは各自が適宜行うこと。その際は必ず競技委員に申し出ること。なお、所要時間については作業時間に含まれる。
19. 安全衛生上の観点から各自、作業中に適当な休憩を取ること。また、競技時間中に休憩時間を設けている。その際に不正行為などを防ぐ目的から競技エリアからの退出は禁止する。また、他の選手の妨害にならないように注意すること。
20. 選手はトイレまたは、休憩、昼食時には、適宜データを保存し、PCからログオフするか、アプリケーション等の操作
画面、ブラウザなどに制作途中の課題が表示されないよう配慮すること。
21. 競技実施中、各自の作業および操作中のPCの画面等が会場見学者にむけて提示されることがある。
22. 今年度は、新型コロナウイルス感染症対策を行いプレゼンテーション競技を実施する。また後日、競技委員会より選手の競技データの一部について参加選手や参加施設が閲覧できるよう、作品集として公開することを予定している。
23. 制作した課題の著作権は大会主催者である中央職業能力開発協会に帰属する。また、制作した著作物の引用の責任については競技（制作）者側にあるものとする。

11

事前公表

第60回 技能五輪全国大会

ウェブデザイン- Web Technologies 競技課題

M1

スピードテスト（その他ウェブデザインに関わる諸技能）
作業時間： 1時間

目次
目次

2

はじめに

4

選手への指示4Part A: Website Design5

A1：画像のぼかし（簡単）5

A2：透明な背景（簡単）5

A3：パターン（簡単）5

A4：ローディングGIF（普通）5

A5：UIキット（難しい）5

A6：画像の合成（簡単）6

A7：ピクトグラム（普通）6A8：サムネイル画像の作成（普通）6

A9：メッセンジャー（難しい）6

A10：モザイク（簡単）6

A11：バナー作成（普通）7Part B: Layout

7

B1：HTMLタグ（簡単）7

B2：CSSグリッド（普通）7

B3：段落（簡単）

8

B4：グラデーションアニメーション（簡単）8

B5：段落と大文字への変換（簡単）8B6：リンクリスト（簡単）8B7：トライアングル（簡単）8B8：グレースケール画像（簡単）8B9：トグル（普通）9B10：ジャンプするボール（簡単）9

B11：お問い合わせフォーム（普通）9B12：円グラフ（普通）9B13：フルスクリーンスクロール（普通）10B14：スクエア アニメーション（普通）10B15：表の背景色（簡単）10Part C: Front-End Development

11

C1：Canvasアニメーション（簡単）Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

11

Version: 1.0©︎ WorldSkills Japan.

2 / 17

C2：計算（簡単）11C3：canvas による描画（普通）11

C4：アナログストップウォッチ（普通）11

C5：行の追加と削除（難しい）12

C6：カーソルを追う（簡単）12C7：マウスオーバー（簡単）12

C8：RGBスライダー（普通）12

C9：FizzBuzz（簡単）13

C10：ローディングアニメーション（普通）13

C11：合計値（簡単）13C12：ピクセルエディタ（普通）14C13：モーダルウィンドウの作成（普通）14Part D: Back-End Development

15

D1：DB接続（簡単）15

D2：重複を削除する（簡単）15

D3：ページネーション（普通）15

D4：配列（簡単）

15

D5：主要な色の取得（簡単）15

D6：大小チェック（簡単）16D7：画像に透かしを入れる （簡単）16

D8：フォームバリデーション（普通）16D9：ファイルマネージャー（普通）16

D10：簡易掲示板の作成（普通）17

D11：検索フォーム作成（普通）17

D12：末日の出力（簡単）17Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

3 / 17

はじめにこのモジュール競技では、与えられた複数のタスクから 10 問を 1 時間で行います。タスクには、デザイン、レイアウト、フロントエンド開発、バックエンド開発 の 4つのパートがあります。

すべてのタスクをこなす必要はありません。

事前公表から、競技日までに抽選によって 10 問が決定されます。
競技課題の内容の 0〜30% 程度は競技当日変更される場合があります。

選手への指示1. 選手は自身が何のタスクを作業したか分かるようにフォルダ管理を行うこと
2. 作業したタスクは、競技サーバにアップロードされたものが採点対象なる
3. 競技サーバにアップロードされてないものは採点されない

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

4 / 17

Part A: Website Design

A1：画像のぼかし（簡単）
素材として提供されている画像をグラフィックソフトを使用してグレースケールにし、ぼかし効果を加え、「 a1.jpg 」として保存しなさい。

A2：透明な背景（簡単）
素材として提供されている jpg の画像をグラフィックソフトを使用して背景を透明にし、「 a2.png 」として保存しなさい。

A3：パターン（簡単）
任意のラインパターンを 100 × 100 px 毎に繰り返す背景画像を作成し、1920 × 1080 px で「 result.jpg」として保存しなさい。

A4：ローディングGIF（普通）「 Loading 」の文字が画面の左端から右端の外側に移動する GIF アニメーションを作成しなさい。文字サイズやドキュメントサイズなどは任意とする。アニメーションは 3秒以内 で完了させること。

A5：UIキット（難しい）
次の要素の ウェブサイト用 UI キットを作成しなさい。
テキストボックス、検索用テキストボックス、ボタン、ドロップダウンリスト、チェックボック
ス付きのラベル、ラジオボタン付きのラベル、ドロップダウンカレンダー、レンジスライダー、
プログレスバー。作成した UIキットは「 uikit.png 」として保存しなさい。ドキュメントサイズは任意とする。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

5 / 17

A6：画像の合成（簡単）
素材として提供されている「 photo1.jpg 」の人物の背景を透過し「 photo2.jpg 」に合成して 1
つの画像を作成しなさい。作成した画像は「 a6.jpg 」として保存しなさい。

A7：ピクトグラム（普通）ジャンケンゲームというコンテンツ(ゲーム)で使用するピクトグラムを作成しなさい。
グー（ rock.svg ）、チョキ（ scissors.svg ）、パー（ paper.svg ）の 3つのファイルを作成し保存しなさい。

A8：サムネイル画像の作成（普通）指定されたフォルダにある画像 30枚のサムネイル画像 100 x 80 px を作成しなさい。サムネイル
画像のファイル名は 元のファイル名の image を thumb に変更して保存すること。
例：image_01.jpg → thumb_01.jpg

A9：メッセンジャー（難しい）
サイズ 360 x 640 のメッセンジャーアプリの画面モックアップを 2枚作成しなさい。
画面1 - リスト（アバター、フルネーム、メッセージのプレビュー）。
画面2 - ユーザーとのチャット（アバター、フルネーム、メニュー（3点）、メッセージ、テキス
トフィールド、送信ボタン）。全ての要素が存在すること。

A10：モザイク（簡単）
素材として提供されている画像にグラフィックソフトを使用してモザイク効果を加え「a10.png 」
として保存すること。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

6 / 17

A11：バナー作成（普通）
提供されている素材を使い、グラフィックソフトを使用してバナーを作成しなさい。
●

提供されている写真・テキスト素材は、すべて利用すること●

写真は適宜、加工して利用すること●

テキストは可読性にも注意すること●

ドキュメントサイズは、横：468px、縦：60px で作成すること●「 a11.jpg」として保存することPart B: Layout

B1：HTMLタグ（簡単）
提供されている文章データを、Webブラウザで表示できるように HTML 化しなさい。ウェブブラウ
ザで適切に表示できるよう、HTMLを使ってコンテンツを構造化すること。また、セマンティック
タグやアクセシビリティにも配慮すること。

B2：CSSグリッド（普通）次のグリッドに基づくレイアウトプランを、 CSS グリッドで実装しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

7 / 17

B3：段落（簡単）HTML 文書中の段落の 1文字目の色を変更しなさい。
指示のない段落は作業する必要はない。
1段落目「 #ff0000 」、2段落目「 #00ff00 」、3段落目「 #0000ff 」※ CSS のみ編集する事

B4：グラデーションアニメーション（簡単）HTML と CSS を使用して、ページにグラデーションのアニメーションを作成しなさい。グラデーシ
ョンは任意の方向で構わない。

B5：段落と大文字への変換（簡単）HTML 文書中の段落 1文字目を大文字に変更し色を変えなさい。
1段落目「 #ff0000 」、2段落目「 #00ff00 」、3段落目「 #0000ff 」※ CSS のみ編集する事

B6：リンクリスト（簡単）HTML にはリンク（ a要素 ）のリストがある。このリンク先の HTML ファイルが web で始まるリ
ンクのフォントの色を赤に、design で始まるリンクのフォントの色を青になるよう、 CSS を編集しなさい。

B7：トライアングル（簡単）画面中央に赤い正三角形を作成し、これをアニメーションさせて黄色の正四角形に変形させなさい。アニメーションは流動的で、無限にループさせること。

B8：グレースケール画像（簡単）
提供されている画像をCSSを利用してグレースケールにし、画像の上にマウスを置くと画像がカラーにトランジションするようにしなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

8 / 17

B9：トグル（普通）HTMLとCSSのみでトグルスイッチを作成しなさい。

B10：ジャンプするボール（簡単）ジャンプするボールのループアニメーションを作成しなさい。

B11：お問い合わせフォーム（普通）未完成の問い合わせフォームの HTML と CSS を、完成見本を元に完成させなさい。
動作については動画ファイルを参考にする事。なおこの問題は JavaScript を利用することはできない。

B12：円グラフ（普通）下図のような円グラフを作成しなさい。
配色は任意とするが、差が分かるように着色を行うこと。JavaScriptは利用できない。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

9 / 17

B13：フルスクリーンスクロール（普通）フルスクリーンで作成された要素をスナップスクロールして切り替えなさい。JavaScriptは利用できない。
●

切り替えの確認ができるように各要素に違う背景色を設定すること●

各要素には「セクション 01」「セクション 02」などの文字を表示すること

●

配色は任意

●

3つ以上の要素を切り替えること

B14：スクエア アニメーション（普通）大きな黄色の正方形で始まり、小さな赤い円に変わるアニメーションを作成しなさい。
アニメーションはビューの中央に配置する必要があり、ループする必要があります。

B15：表の背景色（簡単）
表の td 要素の背景色を、下図のようになるよう style.css を編集しなさい。 使用するカラー
コードは #fff 、#aaa とする。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

10 / 17

Part C: Front-End Development
C1：Canvasアニメーション（簡単）Canvas を使用して、高さ 300px、幅 400px のコンテナに円形のオブジェクトを描画しなさい。な
お円形オブジェクトは、ブラウザが再読み込みされたときに左から右に移動するアニメーションとして作成しなさい。

C2：計算（簡単）指定された配列に格納されている数字のうち、奇数のみを二乗し合計を計算する関数を実装しなさい。

C3：canvas による描画（普通）canvas を使用して、次の機能を備えた描画領域を作成しなさい。
●

マウスをドラッグして移動することで描画●

描画色を3色に切り替え

C4：アナログストップウォッチ（普通）HTML 内の #watch 内にアナログのストップウォッチを作成しなさい。この #watch は縦横 400pxとなっている。実装するのは秒針だけでよい。
スタートボタンをクリックすると計時開始（秒針が動き始める）、ストップボタンをクリックすると計時終了（秒針が停止する）、リセットボタンをクリックすると秒針が 0 にもどる機能とすること。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

11 / 17

C5：行の追加と削除（難しい）
画面には表がある。この表は「 追加 」をクリックすると一番下に行を追加でき、「 削除 」をクリックすると行を削除できる。ただし入力行が1つの場合は削除できないようにしなさい。
また、表には数字入力ができる。入力された全ての数字の平均値を画面に出力できるようにしな
さい。※ json ファイルに格納されている情報は、全てダミーデータである。

C6：カーソルを追う（簡単）
配布されている index.html 内には #square が存在している。この #square が、ウィンドウ内にあるパソコンのマウスカーソルを追いかけるようにしなさい。

C7：マウスオーバー（簡単）HTML には img 要素が 3つある。この各要素におけるマウスオーバー時にそれぞれ “A”、”
B”、”C”という文字が表示されるように CSS を編集しなさい。
例：1番目の img要素でマウスオーバーした時、その画像上に「A」と表示させること。

C8：RGBスライダー（普通）以下のような、赤、緑、青の値を調整するための3つのスライダーを持つRGBスライダーを実装しなさい。 ※ デザインは採点に含まない。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

12 / 17

C9：FizzBuzz（簡単）以下のプログラムを実装しなさい。
1 〜 100 までの数字を下記にある要件に注意しながら Console に出力しなさい。
3の倍数の場合は、数字の代わりに Fizz。5の倍数の場合は、数字の代わりに Buzz。3 、5 両方の倍数の場合は、数字の代わりに FizzBuzz とすること。

1 〜 15 の出力例
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz

C10：ローディングアニメーション（普通）
配布されている動画を元に、以下のようなCSSローディングアニメーションを作成しなさい。

C11：合計値（簡単）HTML 内の li 要素のテキスト部分には整数が記載されている。この整数の合計を計算し #calc 要
素内に出力しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

13 / 17

C12：ピクセルエディタ（普通）
下図のようなピクセルエディタを作成しなさい。

●

描画マスは、縦：16 x 横：16 で構成する●パレットは選択されている色が分かるようにすること●パレットが選択されている状態で、描画マスをクリックすると選択されてる色で描画●

保存機能は必要ない

C13：モーダルウィンドウの作成（普通）ブラウザで表示された要素をクリックしたら、モーダルウィンドウを表示させなさい。
●

モーダルウィンドウが表示中は、body要素はスクロールさせない●

モーダルウィンドウが表示中は、背景色を付けるなどして視覚的に分かりやすくすること●

モーダルウィンドウが表示中は、背景および閉じるボタンでモーダルウィンドウを閉じる
ことができる●

レスポンシブで横幅：375pxで正しく確認できること

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

14 / 17

Part D: Back-End Development
D1：DB接続（簡単）
データベース compe に接続し、テーブル sample の全てのデータを 1行ずつ出力するプログラムを作成しなさい。

D2：重複を削除する（簡単）
配列を指定し、重複する値を削除し、新しい配列を表示しなさい。

D3：ページネーション（普通）JSON を読み取り、1ページにつき 10個のデータを表示させなさい。
別ページに移動するための 5ページ分のリンクを 1つのページに表示する必要があり、かつ前と次の 5ページを一度に移動するためのボタンを制作する必要がある。このページリンクは、中央に配置しなさい。
HTML / CSS / PHP のみ使用できるが、json データとページネーションコードの読み取りには、P
HPのみを使用しなさい。Bootstrap を使用しても構わないが、JavaScript は利用できない。
※ jsonに格納されている情報は、全てダミーデータである。

D4：配列（簡単）
提供ファイルにいくつかの PHP配列がある。2つの配列を比較し、その共通項の値を文字列として出力する関数を完成させなさい。

D5：主要な色の取得（簡単）
素材で提供された画像から

1つの主要な色を特定し 16進数の色コードを画面上に表示させなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

15 / 17

D6：大小チェック（簡単）以下の条件の場合において機能を実行するコードを実装しなさい。
●

GET パラメータ num により出力するメッセージを変える●

50 より大きい場合「大きすぎます」●

50 より小さい場合「小さすぎます」●

50 の場合「50です」

例：「 http://192.168.33.10/D6/index.php?num=30」にアクセスがあった場合「小さすぎます」と表示される。

D7：画像に透かしを入れる （簡単）提供された画像に透かし（ .png ファイル）を付けなさい。透かしの位置は右下隅とすること。

D8：フォームバリデーション（普通）入力フォームに対してバリデーション機能を付けなさい。 バリデーションは送信ボタンをクリッ
クしたらクライアントで行うこと。
パラメータ

制限

Name

入力必須

Mail

アドレス形式の確認（＠ が含まれているかのみでよい）

Number1-10 の整数

D9：ファイルマネージャー（普通）
ファイルやフォルダの追加、ファイルやフォルダの削除、ファイルの編集や保存を行うことができるファイルマネージャーを作成しなさい。

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

16 / 17

D10：簡易掲示板の作成（普通）同一ページ内で入力・表示を行う簡易掲示板を作成しなさい。JavaScriptは利用できない。
●

入力された内容は「 log.json 」に保存●

入力内容は「名前」「内容」とする●表示欄を設け「名前」「内容」「投稿日時」を表示する

D11：検索フォーム作成（普通）指定されたDBに接続し、検索フォームを作成しなさい。
●

検索するための入力フォームを1つ作成すること●検索された内容は、同ページ内に表示すること●

DBに格納されている情報は、検索時に該当するものをすべて表示すること

D12：末日の出力（簡単）
2022年 の 1月 から 12月 までの末日を一覧にして出力させなさい。
例：2022年01月31日

Data: 2022.9.15
第60回技能五輪全国大会-SpeedTest（事前公表）

Version: 1.0©︎ WorldSkills Japan.

17 / 17

事前公表

第60回 技能五輪全国大会

ウェブデザイン- Web Technologies -

競技課題

M2

フロントエンド（ウェブアプリケーション）
作業時間： 3時間

目次

目次

2

はじめに

3

プロジェクトの説明

3

タスク

4

1. UIタスク

4

ボード

4

カテゴリ

4

タスク

4

共通仕様

4

2. 通信タスク

5
5

削除タスク履歴一覧

6

3. 追加タスク
ドラッグ&ドロップ

6

タスクリストダウンロード

6

キーボード操作

7
7

4. ソースコード
選手への指示9

評価について9

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

2 / 9

はじめに
このモジュールでは、カンバン方式の「タスク管理アプリ」を作成します。

プロジェクトの説明
全体をボード、横並びのリストをカテゴリ、カテゴリ内の要素をタスクとして定義します。ボードには複数のカテゴリを作成でき、カテゴリには複数のタスクを作成することができます。アプ
リに必要な機能を実装し、提供されたAPIをもとにデータを保存・表示する機能や、指定された追加機能を実装してください。
UIのデザインは任意ですが、ユーザーが機能を利用する際の使いやすさを考慮し、実装を進めてください。CSSフレームワークの利用は任意です。

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

3 / 9

タスク
1. UIタスクボード●

ボード名を表示する○

ボード名を編集できる

カテゴリ●

カテゴリを横並びに一覧表示する○●

カテゴリを追加できる○●

カテゴリ追加時には、カテゴリ名を入力できるカテゴリ名を表示する○●

カテゴリが画面外になった場合には、ボード内で横スクロールできる

カテゴリ名を編集できるカテゴリを削除できる

タスク●

タスクを縦並びに一覧表示する○●

タスクを追加できる○●

タスク追加時には、タスク名を入力できる

タスク名を表示する○●

タスクが画面外になった場合には、カテゴリ内で縦スクロールできる

タスク名を編集できるタスクを削除できる

共通仕様●

テキストの編集○

テキストの要素をクリックすることで、テキストが入力ボックスとなる

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

4 / 9

○

Enterキーで入力を確定する

2. 通信タスク
削除タスク履歴一覧
提供されるAPIを用い、削除されたタスクを一覧表示するUIを作成してください。
●

タスク削除時に履歴に格納する○APIを使用する■●

削除タスクの履歴を一覧表示する○

APIを使用する■○●

通信中は操作を受け付けない

通信中は操作を受け付けない

タスク名、カテゴリ名、削除日時を表示する

履歴をリセットするボタンを配置する○

APIを使用する■○

通信中は操作を受け付けない

リセット前に確認ダイアログを表示する

API仕様
認証トークンには「compe2022」を指定して認証を行ってください。
●

一覧API
○

メソッド: GET○

URI: /api/deleted_tasks○

Content-Type: application/json○

認証: Bearer認証○

ResponseBody: [{ “name”: “タスク名”, “category”: “カテゴリ名”, “created_at”: “格納日時” }]

●

格納API

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

5 / 9

●

○

メソッド: POST○

URI: /api/deleted_tasks○

Content-Type: application/json○

認証: Bearer認証○

RequestBody: { “name”: “タスク名”, “category”: “カテゴリ名” }○ResponseBody: { “success”: ブール値 }リセットAPI○

メソッド: DELETE○

URI: /api/deleted_tasks○

Content-Type: application/json○

認証: Bearer認証○

ResponseBody: { “success”: ブール値 }3. 追加タスク
ドラッグ&ドロップ
ドラッグ&ドロップに関する以下の機能を提供します。
●

カテゴリをドラッグ&ドロップすることで、カテゴリの並び替えができる●

タスクをドラッグ&ドロップすることで、カテゴリ内の並び替えができる●

タスクをドラッグ&ドロップすることで、タスクのカテゴリ間の移動ができる

タスクリストダウンロード
タスクリストを画像でダウンロードできるようにします。
●

背景: 白(#FFFFFF)●

文字色: 黒(#000000)●

サイズ・レイアウト: 指定なし●

拡張子: PNG●

内容: ボード名、カテゴリ名、タスク名の全てのデータが出力されること○情報のテキストが長い場合、テキストが改行されること

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

6 / 9

キーボード操作
キーボード操作に関する以下の機能を提供します。
●●

タスク選択の移動: 矢印(方向)キー○

キーを押下すると、タスクが選択状態となり、選択を移動できる○カテゴリを縦断できる

タスク名の変更: Enter○●

キーを押下すると、選択したタスク名が編集状態になる

タスクの削除: BackSpace○キーを押下すると、選択したタスクが削除される

4. ソースコード
ソースコードは以下の観点で評価をします。
●

共通的に利用する機能などは切り分けられ、再利用可能な状態になっていること●

ソースコード管理の観点から、ページだけでなく各パーツがコンポーネントとしてファイ
ルごとに切り分けられ、再利用性や可読性に貢献していること●

JavaScriptにおいてのクラス名やメソッド名、関数名、変数名などが、保守性を考慮し正しく命名されていること●

CSSにおいてのクラス名およびCSS構造が、再利用可能かつ拡張性の高い状態になっている
こと

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

7 / 9

●

ソースコードの中で複雑な処理を記述している箇所については、コメントで正しく内容が説明されていること。または規則的なコメントが記述されていること

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

8 / 9

選手への指示1. 提供されている material フォルダ内のファイルを使うことができます。
2. パッケージマネージャー(npm)が提供されていますが、パッケージのインストールを行うことはできません。ライブラリを利用する際は、提供されているライブラリを適切なフォルダに配置し、読み込みを行ってください。
3. 「 m2」フォルダに作成したウェブアプリを保存してください。 メインファイルがindex.htmlという名前であることを確認してください。CLIなどを利用する場合はビルド後のファイルを格納してください。
4. 「 m2」フォルダ内に「SOURCE」という名前のフォルダを作成し、ソースコードのデータを提出してください。ソースコードの採点は「SOURCE」のファイルをもとに実施されるため、ファイルが存在しない場合は採点不可となります。CLIなどを利用する場合はビルド前のファイルを格納してください。ただしnode_modulesなど容量の大きいファイルがアップロードされている場合は減点対象となります。
5. 注意事項：競技サーバにアップロードされたデータのみが採点対象となります。

評価についてモジュール項⽬

配

点

UIタスク

9

通信タスク

7

追加タスク

9

ソースコード

5

合

30

計

Data: 2022.9.13
第60回技能五輪全国大会-Front-end-

Version: 1.0©︎ WorldSkills Japan.

9 / 9

事前公表

第60回 技能五輪全国大会

ウェブデザイン- Web Technologies -

競技課題

M3

ウェブプログラミング（アプリ、サーバサイドおよびバックエンド開発）
作業時間： 3時間

目次

目次

2

はじめに

3

プロジェクトと課題の説明

3

選手への指示9

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

2 / 9

はじめに
このモジュールでは、PHP ( フレームワーク ) とデータベースを使用してバックエンド部分( 管理画面とRESTful API) を構築します。

セキュリティへの配慮を行いつつ、各機能が問題なく動作するように構築してください。

プロジェクトと課題の説明
巣ごもり需要の高まりを受け、新規でデリバリー事業を始める企業があります。
下記の要件に合うよう、飲食店が利用する管理画面と、RESTful APIを構築してください。
また、各テーブル間の関係性がわかるよう、簡易的なER図を作成してください。

◎課題全般について●

データベース ( userXX_m3 ) を使用して、用意されているスキーマを利用できる。
※ XX はゼッケン番号 ( 例：ゼッケン番号「1」の場合、user01_m3 )●飲食店マスタには、下記に指定されている通りにデータを直接挿入すること。
○●

飲食店マスタ用に users テーブルを用意してあるが、利用しなくても良い。

必要なテーブル、及び必要項目は次の通り。「必要項目」とは最低限必要な項目を指し示
すため、これ以外の項目が必要と判断する場合は適宜追加すること。
○

飲食店の情報を格納する「飲食店マスタ」■○

各店舗の商品情報を格納する「商品マスタ」■○

必要項目：店舗ID、セットメニュー名称

セットメニューに複数の商品を関連付ける「セットメニュー・商品リレーション」■○

必要項目：店舗ID、商品名、価格

複数の商品を１つの「セットメニュー」として格納する「セットメニューデータ」■○

必要項目：店舗名、住所、電子メールアドレス、アカウント、パスワード

必要項目：セットメニューID、商品ID

お客様の注文を格納する「注文データ」■

必要項目：商品ID、セットメニューID、配送先住所

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

3 / 9◎管理画面について●

管理インターフェースを作成してください。

●

商品情報を新規登録できるインターフェースを構築してください。

●

商品情報リストにて、一覧表示ができるようにしてください。

●

商品情報は編集・更新・削除ができるようにしてください。

●

上限３点までの商品を１つのセットメニューとして新規登録ができるインターフェースを構築してください。

●

管理画面のURIは「/admin」とします。

●

仕様に関する追加情報は、下記に別途記載されています。

◎RESTful APIについて●

商品情報をウェブサイトで表示するためのAPIを構築してください。

●

商品またはセットメニューをウェブサイトから注文するためのAPIを構築してください。

●

APIのURIは「/api」とします。

●

仕様に関する追加情報は、下記に別途記載されています。

◎ER図について●各テーブルの関係性がわかるように関係性を記述してください。
アトリビューションを記載する必要はありません。

●

ファイル形式はPDFで、名称を「userXX-ER.pdf」として提出してください。
※ XX はゼッケン番号 ( 例：ゼッケン番号「1」の場合、user01-ER.pdf )●提出は「ER」ディレクトリを作成してアップロードしてください。

●

カーディナリティは最低限「１対１」「１対多」を記載してください。
○

参考例：
■

１つの学校は複数の教員を持つ■

１人の教員は複数の授業を持つ

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

4 / 9

【管理画面の仕様に関する追加情報】
●

特徴:A1
○

飲食店ユーザとしてログインとログアウト■

飲食店ユーザとして機能にアクセスするため、管理画面にログイン／ログアウトで
きること。

■

●

飲食店ユーザは以下の通りとする。
●

ID: admin●

PASS: gorin

シナリオ:A1a○

飲食店ユーザが正常にログイン■「ログイン」ページにて、指定されたユーザ名とパスワードを入力後、「ログイン」
ボタンを押すことで管理画面に遷移できること。

●■

管理画面に遷移後、「商品情報リスト」が表示されること。

■

管理画面に遷移後、「ログアウト」ボタンが表示されること。

シナリオ:A1b○

飲食店ユーザログイン失敗■「ログイン」ページにて、間違ったアカウントとパスワードを入力後、「ログイン」
ボタンを押した際、「アカウントまたはパスワードが正しくありません」というエ
ラーメッセージが表示されること。

●

シナリオ:A1c○

飲食店ユーザログアウト■

ログイン状態で 「ログアウト」ボタンを押すと、「ログイン」ページに転送されること。

■

ブラウザバックで履歴を戻っても、管理画面は表示されないこと。

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

5 / 9

●

特徴:A2
○

商品管理
■

●

飲食店ユーザが、商品を管理できること。

シナリオ:A2a○

商品情報の新規登録■

ログイン状態で「商品新規登録」ボタンを押下することで、入力画面に遷移すること。

■

必要な項目を入力後、「登録」ボタンを押下することで、商品情報がデータベースに保存されること。

■

正常に登録された場合、「商品情報が登録されました」というメッセージが表示さ
れること。

●

シナリオ:A2b○

既存の商品情報リスト表示■●

商品情報リストに、登録した商品が表示されていること。

シナリオ:A2c○

既存の商品情報を編集する■

商品情報リストから「編集」ボタンを押下することで、編集画面に遷移すること。

■

編集画面には、リストで選択した商品情報が予め入力されていること。

■

情報を編集して「保存」ボタンを押下することで、データベース上の商品情報が更新されること。

■

正常に更新された場合、「商品情報が更新されました」というメッセージが表示さ
れること。

●

シナリオ:A2d○

既存の商品情報を削除する■

商品情報リストから「削除」ボタンを押下することで、「削除してよろしいです
か？」というダイアログが表示されること。

■「OK」を押下した場合、データベース上の商品情報が削除されること。

■「キャンセル」を押下した場合、商品情報リストに留まること。

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

6 / 9

●

特徴:A3
○

セットメニュー管理■●

飲食店ユーザが、セットメニューを管理できること。

シナリオ:A3a■

セットメニューの新規登録●

ログイン状態で「セットメニュー新規登録」ボタンを押下することで、入力画面に遷移すること。

●

入力画面では、商品を増減できるインターフェースがあること。

●

必要な項目を入力、及び商品を選択後、「登録」ボタンを押下することで、セットメニューがデータベースに保存されること。

●

正常に登録された場合、「セットメニューが登録されました」というメッセージが表示されること。

●

シナリオ:A3b○

既存のセットメニューを編集する■

セットメニューリストから「編集」ボタンを押下することで、編集画面に遷移すること。

■

編集画面には、既に登録されたセットメニューが表示されており、商品を増減できるインターフェースがあること。

■

情報を編集して「保存」ボタンを押下することで、データベース上のセットメニュ
ーが更新されること。

■

正常に更新された場合、「セットメニューが更新されました」というメッセージが表示されること。

●

シナリオ:A3c○

既存のセットメニューリスト表示■●

セットメニューリストに、登録したセットメニューが表示されていること。

シナリオ:A3d○

既存のセットメニュー情報の削除■

セットメニューリストから「削除」ボタンを押下することで、「削除してよろしいですか？」というダイアログが表示されること。

■「OK」を押下した場合、データベース上のセットメニューが削除されること。

■「キャンセル」を押下した場合、セットメニューリストに留まること。

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

7 / 9

【RESTful APIの仕様に関する追加情報】
●

特徴:B1
○

商品情報の読み取り（ エンドポイント: /api/items ）■●アプリケーションから商品情報のJSONデータ読み取りができること。

特徴:B2
○

商品情報の絞り込み（ エンドポイント: /api/items?x=y ）■APIの引数にshop_id（数値）を加えることで、店舗での絞り込みができること。

■

APIの引数にprice（数値）を加えることで価格での絞り込みができること。

■

APIの引数にtitle（文字列）を加えることで、商品名での絞り込み（LIKE部分検索）ができること。

■

絞り込みについて、複数の引数が加えられていた場合はAND検索での絞り込みとす
ること。

●

特徴:B3
○

セットメニューの読み取り（ エンドポイント: /api/sets ）
■

●

特徴:B4
○

セットメニューの絞り込み（ エンドポイント: /api/sets?x=y ）■●アプリケーションからセットメニューのJSONデータ読み取りができること。

APIの引数にshop_id（数値）を加えることで、店舗での絞り込みができること。

特徴:B5
○

商品、またはセットメニューの注文（ エンドポイント: /api/order ）■アプリケーションからの注文データを、POSTで受信できること。

■

受け取るパラメータは以下。
●●●

商品ID（item_id）、またはセットメニューID（sets_id）。
○

どちらかは必須とする。

○

空の場合はnullを入れることとする。

配送先住所（address）の文字列。

特徴:B6
○

HTTPステータスコードの返却■

データ取得成功時には、HTTPステータスコード200を返すこと。

■

データ更新成功時には、HTTPステータスコード201を返すこと。

■

エラー発生時には、HTTPステータスコード404を返すこと。

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

8 / 9

選手への指示1. 提供されている material フォルダ内のファイルを使うことができます。
また必要に応じて、提供されているフレームワークを使用できます。
2. 「 m3 」という名前のサーバ上のディレクトリに作業中のアプリを保存してください。
メインファイルがindex.html または index.php という名前であることを確認してください。
3. フレームワークは Laravel、CodeIgniter、Yiiが提供されています。
SFTPでアップする際はパーミションの設定を行う必要があります。
a. Laravelの場合
storage配下をすべて777に設定（例： sudo chmod -R 777 storage/ ）b. CodeIgniterの場合
writable配下をすべて777に設定（例： sudo chmod -R 777 writable/ ）c. Yiiの場合
web/assets配下をすべて777に設定（例： sudo chmod -R 777 web/assets/ ）4. 時間管理は自身で行ってください。
5. 注意事項：競技サーバにアップロードされたデータのみが採点対象となります。

Data: 2022.10.17
第60回技能五輪全国大会-Back-End（事前公表）

Version: 1.3©︎ WorldSkills Japan.

9 / 9

事前公表

第60回 技能五輪全国大会

ウェブデザイン- Web Technologies -

競技課題

M4

CMS（コンテンツ マネジメント システム）
作業時間： 3時間

目次

目次

2

はじめに

3

サイト制作の背景

3

フロントエンドの詳細

4

必須コンテンツ

4

コンテンツ管理箇所

4

最適化に対する作業

5

バックエンドの詳細

5

ユーザープロファイルの作成

5

プラグインの追加・作成

6

説明資料の作成

6

選手への指示6

必要な機器、機械、設備、および資料

7

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

2 / 7

はじめに
このモジュールでは、ウェブサイトのデザイン、ウェブサイトのレイアウト、クライアントサイドのスクリプト、サーバーサイドのスクリプトなど、CMSの構築において必要な技能を用いてウェ
ブサイトを構築します。
SEOやセキュリティを考慮して、CMSとして機能するようにテーマを作成し、最終的にウェブサイ
トとして閲覧可能にすることがあなたのタスクです。

サイト制作の背景
10代〜20代へのハンドメイド文化の推進を目標に、幕張メッセでリアルイベント「メイキングシ
ョー」を開催する。ここでは、日頃からハンドメイド作品を制作しているクリエイターが会場に集い、作品の展示や販売、制作のデモンストレーションなどが出来る。
このイベントでは、個人による参加だけではなく、イベントに出資している企業による企業ブースも用意されている。
この「メイキングショー」のイベント情報をまとめた、プロモーションサイトの制作を依頼された。
このサイトではイベントを成功させるため、メインターゲットの10代〜20代に向けた「メイキングショー」への認知、また最終的に入場チケットの購入をしてもらえることが期待される。

ここでは、最も普及しているコンテンツ管理システムのひとつであるWordPressを使用します。WordPressテーマの「Blankslate」を使用し、子テーマとして独自のテーマを作成、クライアントが管理画面を用いてコンテンツを更新できるページの開発をします。テーマの名前は「MakingShow」とします。
訪問者に最新の情報を提供するために、クライアントが管理画面を用いて、イベント情報、お知らせ、企業ブース情報を更新できるようにします。また、カスタマーサポートを実施するため、問い合わせフォームを用意します。

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

3 / 7

フロントエンドの詳細
テキストデータ、ロゴ、写真素材が提供されます。提供素材を組み合わせてデザインの作成を進めてください。ウェブサイトの目的に貢献するものであれば、文言を含めた構成要素の追加や変更をすることが可能です。提供素材はウェブサイトの目的や利用用途に合わせて、加工や最適化をする必要があります。与えられたテーマ(Blankslate)を使い、独自のテーマを作成する必要があります。さまざまなデバイスでアクセス出来るように、PCでもスマートフォンでも利用できるデザインを作成してください。

必須コンテンツ
制作するウェブサイトには、以下の要素を導入する必要があります。
●●●

トップページ○

メインビジュアル

○最新のお知らせ3件のタイトルと遷移できるリンク

お知らせページ○

投稿日、カテゴリ、タイトル、画像、本文を表示する○

カテゴリで絞り込むことが出来るようにする

企業ブース情報ページ○●

お問い合わせページ○●

企業名、マップ番号、ブース画像、ブースタイトル、ブース説明を表示する
お名前、メールアドレス、本文、送信ボタンを表示する

チケット購入ページ○

内容は空白のダミーページとする■●

空のページは必ず作成し遷移出来るようにする

全ページ共通要素○

ナビゲーション
■各ページに遷移できるようにする

コンテンツ管理箇所
●

お知らせ
○

投稿日

○

カテゴリ

○

タイトル

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

4 / 7

●

○

画像

○

本文

企業ブース情報
○

企業名

○

マップ番号

○

ブース画像

○

ブースタイトル○ブース説明

最適化に対する作業●

SEOの実装○ページを検索エンジン用に最適化する必要がある。
提供されているプラグインを選択するか、独自のSEOを実装することができる。

●

セキュリティの実装○

セキュリティプラグインをインストールして設定することで、ページを安全に保つことができる。

○

プラグインによって管理画面のURLを変更する場合はURLを「/making-login2022」とすること。

注：選択したプラグインが意図せずに壊れていたり、期待通りに動作しない場合は、別のものを選択するかプラグインを修正する必要があります。

バックエンドの詳細
ユーザープロファイルの作成
管理上の理由により、2つのユーザープロファイルを作成する必要があります。
●●

Adminユーザー - WordPressの全てのダッシュボードにアクセスできる。
●

Username：AdMiN●

Password：Much2Secure!

クライアントユーザー - WordPressのダッシュボードにアクセスし、ページ、投稿、メディ
ア、関連プラグイン（セキュリティ、SEO）のみを表示する。
●

Username：4Clients

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

5 / 7

●

Password：Never4Get!

プラグインの追加・作成
WordPressのログインページのロゴを変更するためのプラグインを追加・作成します。
プラグインが有効化された時には、デフォルトのロゴの代わりに、提供されたロゴをログインページに表示します。
無効化された時には、デフォルトのロゴを再表示します。
●

プラグイン名: MakingShowLogo●

プラグイン説明: Login Page Logo●

プラグイン作者: MakingShowAdmin

説明資料の作成
ウェブサイトの説明資料をPDFにて作成し、競技終了までに「m4」ディレクトリ直下にファイル名
を「ゼッケン番号-presentation.pdf」として格納してください。
※ファイル名の例：01-presentation.pdf
下記内容は、必ず記載すること。
●

デザイン意図●デザイン意図やサイト制作背景に基づいて採用した仕様・機能●

アピールポイント

選手への指示1. 完成したウェブサイトを http://m4.userXX.skilljapan.info に提出します。
※ XX はゼッケン番号となります。
( 例：ゼッケン番号「1」の場合、http://m4.user01.skilljapan.info )2. Wordpressの機能が組み込まれていなくても、提出URLからウェブサイトが閲覧可能であれば採点対象とします。ただし、CMSに関わるコンテンツについては全て採点対象外となります。
3. 注意事項：競技サーバにアップロードされたデータのみが採点対象となります。

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

6 / 7

必要な機器、機械、設備、および資料
各選手に提供されるファイル
素材

説明

wordpress-6.x.x-ja.zip

WordPress本体

blankslate.2022.x.zip

ブランクテーマ

advanced-custom-fields.6.x.x.zip

カスタム投稿プラグイン

contact-form-7.x.x.x.zip

フォームプラグイン

contact-form-plugin.4.x.x.zip

フォームプラグイン

contact-forms-builder.2.x.x.zip

フォームプラグイン

all-in-one-wp-security-and-firewall.5.x.
x.zip

セキュリティプラグイン

jetpack.11.x.x.zip

セキュリティプラグイン

wordfence.7.x.x.zip

セキュリティプラグイン

autodescription.4.x.x.zip

SEOプラグイン

wordpress-seo.19.x.x.zip

SEOプラグイン

seo-by-rank-math.1.x.x.x.zip

SEOプラグイン

Date: 2022.10.06
第60回技能五輪全国大会-CMS（事前公表）

Version: 1.0©︎ WorldSkills Japan.

7 / 7

第 60 回技能五輪全国大会

ウェブデザイン職種

Q＆A
Q1．JS フレームワークのダウンロード用 zip は今後インフラストラクチャリストで公開されますか。

A1．準備ができ次第インフラリストで公開を行います。インフラリストについては今後も更新される場合がありますので適宜ご確認ください。

Q2．モジュール２の「タスク削除」とは、タスクを完了することという認識でよろしいでしょうか。

A2．完了ではなく削除という前提でデザイン・実装を行なってください。

Q3．モジュール２の各 API で認証に失敗した場合の表示や、POST・DELETE に失敗した
ときの表示・メッセージに何か指定はありますか。

A3．特に指定はございません。

Q4．モジュール２のタスクやカテゴリーを DB に追加するための API がないようですが、これらは DB では管理しないということでしょうか。その場合、localStrage などを使ってブラウザでこれらを管理する機能を考える必要はないのでしょうか。

A4．提供 API 以外のデータ保持機能は必須ではないため、特に考慮する必要はございません。

Q5．モジュール２の API の URI が全て deleted_tasks になっていますが、閲覧履歴を残す
ための API 以外は存在しないという事でしょうか。

A5．ご質問頂いている内容ですが、閲覧履歴を残す API ではございません。

Q6．モジュール２の API における HTTP Header と HTTP Body のスキーマの詳細な記載がありません。

A6．事前公表課題をご確認ください。

Q7．モジュール２において、認証は Bearer 認証とのみ記されていますが、これは Tokenを意味するのでしょうか。
その場合、一般的にはユーザ側から ID とパスワードが PAPI 側に POST され、API 側でそれらを認証した上で Token を戻す、ということになるはずですが、いかがでしょうか。

A7．頂いたご質問は、Bearer 認証についての質問となります。課題の解答説明になってしまうため、ご自身でお調べになって頂ければと思います。

Q8．モジュール２において、Bearer 認証における Token は固定されたハッシュ値でしょうか。

A8．事前公表課題をご確認ください。

Q9．モジュール３において、飲食店マスタ用に users テーブルを用意してあるとあるが、飲食店マスタで使用するテーブルとは別に users というテーブルを用意したという事でしょうか。それとも飲食店マスタ用のテーブルが users なのでしょうか？

A9．飲食店マスタ用のテーブルが users です。

Q10．モジュール３において、飲食店ユーザの認証に ID が指定されているが、ID を格納す
るデータベースが存在しません。データベース上に認証ユーザを持たないという事でしょうか。

A10．ログイン ID に利用できる項目として「アカウント」を記載しましたが、「これ以外の項目が必要と判断する場合は適宜追加すること。」と記載した通りにご判断ください。

Q11．モジュール３において、提供されているテンプレートを使用して管理インターフェ
イスを作成するとあるが、テンプレートに関する記載がどこにもありません。提供されているテンプレートとは何を指すのでしょうか。

A11．「提供されているテンプレートを使用して」の一文が不要でしたので、削除いたします。

Q12．モジュール３において、商品またはセットメニューをウェブサイトから注文するための API を構築するとありますが、API の仕様に情報がありません。商品またはセット
メニューをウェブサイトから注文するための API とはどの様な内容を指すのでしょうか。

A12．P.8 に記載されている「特徴：B1」からの記述をご覧ください。

Q13．モジュール３において、商品情報を削除する項目において、「削除」ボタンを押した後に「OK」ボタンを押すことで、商品情報ではなくセットメニューを削除する事を求めていますが、これはどういう事でしょうか。

A13．誤記のため修正しました。

Q14．モジュール３において、テーブルや注文に関する仕様が不足しています。

A14．記載漏れのため追加しました。

Q15．会場の設備の詳細（パソコンの性能やディスプレイの枚数など）を教えてください。

A15．競技用 PC は以下の予定です。なお、外部ディスプレイはありません。
OS:Windows 10 Version 21H1
CPU:Core i5 2.70Ghz
メモリ:16GB
SSD:250GB
ディスプレイ:15inch（解像度 1366x768）

Q16．音楽 CD およびヘッドフォン、イヤフォン等の持込みを認めるとありますが、競技用のパソコンは Bluetooth に対応はしているのでしょうか？

A16．競技用 PC は Bluetooth に対応しておりますが、Bluetooth のヘッドフォン、イヤホ
ンの利用は認めておりません。有線のものをご利用ください。

Q17．モジュール３課題のテーブルに必要項目とありますが、必須項目ではないので使用しなくてもいいのでしょうか？

A17．必要なものとなりますので使用してください。

Q18．モジュール２課題の API 仕様の一覧 API を見ると、ResponseBody に created_atの項目がありますが、格納日時の表現は多くあると思いますので、例などを載せてもらえないでしょうか？

A18．MySQL における TIMESTAMP 型により定義された日付を、文字列型で返却いたします。例としては次のようになります。

例：2022-11-01 08:30:00

詳細は TIMESTAMP 型の仕様をご参照ください。

Q19．モジュール１課題では、D3 タスクのみ Bootstrap などの CSS フレームワークの使用を明言していますが、その他のタスクでの JS・CSS フレームワーク・ライブラリの使用はできないのでしょうか？

A19．記載がある場合のみ利用可能です。また、素材として配布されている場合のみ利用
可能で、それ以外の場所では利用はできません。

Q20．VScode プラグインに Remote-SSH が許可されているのですが、競技サーバに
VScode で Remote-SSH を使用して SSH 接続することはできるのでしょうか？

A20．事前アンケートによって要望があったため Remote-SSH はプラグインとして提供しています。競技サーバに接続は可能となりますが、プラグインの設定などにつきまして
は、一切のサポートは行いませんので利用される場合は、選手自身で設定を行っていただく必要があります。

Q21．Bootstrap は CSS のファイルだけでなく JS のファイルも配布されるのでしょうか？
その他、CSS フレームワーク・ライブラリの配布はされるのでしょうか？

A21．公式サイトで配布されているものが、そのまま配布予定です。
また、インフラリストに公開されている CSS フレームワークやライブラリは選手のパソコンに素材として配布されます。

Q22．Laravel のディレクトリの中身一式を普通にサーバに設置した場合、アクセスする
URL は"ドキュメントルート URL/public/admin"といったように、URL に"public"を含めなければアクセスが出来ません。URL から public を取り除く必要はありますか？

A22．本番環境では各モジュールの「public」フォルダがドキュメントルート設定されています。そのため、public の処理は不要となります。

Q23．PHP フレームワークの配布は行われないのでしょうか？
また、インフラリスト https://gorin.skilljapan.info/2022/infra.html からダウンロー
ドできたりするようになりますでしょうかA23．ご要望が多数ありましたので、インフラリストよりダウンロードできるようにいたしました。

Q24．最新のインフラリスト https://gorin.skilljapan.info/2022/infra.html に、
jQUeryUI の追加はお願いできないしょうか。

A24．開発終了のため、大会では追加の予定はございません。

Q25．モジュール３の P3 に「データベースにはサンプルデータが含まれている」とありますが、どのテーブルにデータが入っていますか？また、テーブルはすべて自分で作成することになりますか？

A25．事前課題中、上記文言については削除し、更新版を公開いたしました。
users 以外のテーブルはすべて選手にて作成してください。

Q26．提供された VM にあるデータベースが、本番環境の VM と同じ内容ですか？

A26．事前配布された VM は、本番時にも各 PC にローカル開発環境として同じものが配布されます。ただし、本番課題の内容変更により VM の変更が行われる場合もあります。

Q27．競技３日目にプレゼンテーションが予定されていますが、どのモジュール成果物を用いてプレゼンを行うのでしょうか。

A27．どのモジュールを使って、プレゼンをしていただいても構いません。選手が自信を持ってプレゼンを行えるものを選択してください。

Q28．モジュール４の成果物でプレゼンを行うということであれば、・作成した Web サイトを表示してプレゼン
・課題内で作成する説明資料 PDF を表示してプレゼンの、どちらを想定すればよいのでしょうか。

A28．もし、モジュール４を使ってプレゼンを行う場合は、作成したサイトを使ってプレゼンを想定していただいて構いません。
ただし、説明資料を使ってはいけないという訳ではありませんので、説明に必要な場合はご活用してください。

Q29．モジュール２において、『「 m2」フォルダに作成したウェブアプリを保存してください。メインファイルが index.html という名前であることを確認してください。』とある一方、『「 m2」フォルダ内に「SOURCE」という名前のフォルダを作成し、ソースコードのデータを提出してください』とありますが、成果物を提出するドキュメントルートは「m2」フォルダ直下なのでしょうか、それとも「m2/SOURCE」 フォルダ直下なのでしょうか？

A29．ドキュメントルート（成果物）の提出場所は「 m2 」の直下になります。これは、ビルド後のデータ想定になります。
フレームワークを使った際、ビルドするとソースコードの解読が難しくなるため、「 m2/SOURCE 」ディレクトリに格納するものは、ビルド前の編集時のソースコー
ドの格納場所となります。