当日公表

第60回 技能五輪全国大会

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

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

目次
目次

2

はじめに

3

選手への指示3

Task1：モザイク4

Task2：バナー作成

4

Task3：円グラフ

4

Task4：フルスクリーンスクロール5

Task5：ピクセルエディタ

5

Task6：モーダルウィンドウの作成

6

Task7：FizzBuzz

6

Task8：簡易掲示板の作成

7

Task9：検索フォーム作成

7

Task10： 配列

7Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

2/7

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

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

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

Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

3/7

Task1：モザイク
素材として提供されている画像にグラフィックソフトを使用して、四角で囲われた中をモザイク効果を加え「 Task1.png 」として保存すること。

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

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

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

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

ドキュメントサイズは、横：300px、縦：250px で作成すること●「 Task2.jpg 」として保存すること

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

Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

4/7

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

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

各要素には「Section 01」「Section 02」などの文字を表示すること●

配色は任意だが視認性に配慮すること●

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

Task5：ピクセルエディタ
下図のようなピクセルエディタを作成しなさい。

●

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

保存機能は必要ない

Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

5/7

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

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

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

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

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

Task7：FizzBuzz
以下のプログラムを実装しなさい。
1 〜 100 までの数字を下記にある要件に注意しながら コンテンツ内 に出力しなさい。
3の倍数の場合は、数字の代わりに Fizz を表示させ文字の色を「 red 」。5の倍数の場合は、数字の代
わりに Buzz を表示させ文字の色を「 blue 」。3 、5 両方の倍数の場合は、数字の代わりに FizzBuzz を表示させ文字の色を「 green 」とすること。

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

Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

6/7

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

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

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

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

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

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

DBの接続情報host

db.skilljapan.info

user

web

passwordcompe2022

DB名

module1_db※ DBに格納されている情報はすべてダミーです。

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

Date: 2022.11.4
第60回技能五輪全国大会-SpeedTest（当日公表）

Version: 1.0©︎ WorldSkills Japan.

7/7

当日公表

第60回 技能五輪全国大会

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

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

目次

目次

2

はじめに

3

プロジェクトの説明

3
4

タスク
1. UIタスク

4

共通仕様

4

ボード

4

カテゴリ

4

タスク

4

2. 通信タスク

5
5

完了タスク機能
3. 追加タスク

6

ドラッグ&ドロップ

6

完了タスクリスト画像ダウンロード
キーボード操作

6
7

4. ソースコード

7

選手への指示8

評価について8

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

Version: 1.0©︎ WorldSkills Japan.

2/8

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

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

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

Version: 1.0©︎ WorldSkills Japan.

3/8

タスク
1. UIタスク
共通仕様●

テキストの編集○

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

Enterキーで入力を確定する

ボード●

ボード名を表示する○

ボード名を編集できる

カテゴリ●

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

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

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

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

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

タスク●

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

タスクを追加できる○●

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

タスク名を表示する○●

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

タスク名を編集できる

タスクを完了できる○ 完了したタスクを一覧表示する■ タスク名、カテゴリ名を表示する■ カテゴリと異なるデザインでもよい■ 完了したタスクを削除できる

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

Version: 1.0©︎ WorldSkills Japan.

4/8

2. 通信タスク
完了タスク機能提供されるAPIを使用し、完了したタスクを操作するUIを作成してください。
●

共通仕様
○

通信中は操作を受け付けない○通信に失敗した場合は、エラーのアラートダイアログを表示する■●

完了タスク一覧APIを使用し、完了タスクを一覧表示する○●

未完了タスクの下に表示する

完了タスク格納APIを使用し、タスクを完了させる○●

エラーの文言の指定はない

API実行後に、完了タスク一覧APIを使用し、最新の状態を表示する

完了タスク削除APIを使用し、完了タスクの完全に削除する○

削除前に確認ダイアログを表示する○

API実行後に、完了タスク一覧APIを使用し、最新の状態を表示する

API仕様
URIと認証トークンは、インフォメーションページの参考資料を参照してください。
●

完了タスク一覧API○

メソッド: GET○

URI: /api/completed_tasks○

Content-Type: application/json○

認証: Bearer認証○

ResponseBody: [{ “id”: タスクID, “name”: “タスク名”, “category”: “カテゴリ名”,“created_at”: “格納日時” }]●●完了タスク格納API○

メソッド: POST○

URI: /api/completed_tasks○

Content-Type: application/json○

認証: Bearer認証○

RequestBody: { “name”: “タスク名”, “category”: “カテゴリ名” }○ResponseBody: { “success”: ブール値 }完了タスク削除API

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

Version: 1.0©︎ WorldSkills Japan.

5/8

○

メソッド: DELETE○

URI: /api/completed_tasks/{タスクID}○

Content-Type: application/json○

認証: Bearer認証○

ResponseBody: { “success”: ブール値 }3. 追加タスク
ドラッグ&ドロップ
ドラッグ&ドロップに関する以下の機能を提供します。
完了タスクについては考慮する必要はありません。
●

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

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

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

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

背景色: 白(#FFFFFF)●

文字色: 赤(#FF0000)●

サイズ: 指定なし●

レイアウト: 指定なし●

拡張子: PNG●

内容: 完了タスク一覧のカテゴリ名とタスク名が一覧表示されていること

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

Version: 1.0©︎ WorldSkills Japan.

6/8

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

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

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

タスク名の変更: Enterキー○●

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

タスクの完了: cキー○

キーを押下すると、選択したタスクが完了される

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

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

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

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

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

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

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

Version: 1.0©︎ WorldSkills Japan.

7/8

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

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

配 点

UIタスク

9

通信タスク

8

追加タスク

8

ソースコード5

合 計

30

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

Version: 1.0©︎ WorldSkills Japan.

8/8

当日公表

第60回 技能五輪全国大会

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

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

目次

目次

2

はじめに

3

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

3

選手への指示9Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

2 / 10はじめにこのモジュールでは、PHP ( フレームワーク ) とデータベースを使用してバックエンド部分 ( 管理画面とRESTful API ) を構築します。
セキュリティへの配慮を行いつつ、各機能が問題なく動作するように構築してください。

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

◎課題全般について●

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

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

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

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

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

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

割引で購入することができる「クーポンデータ」■○

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

必要項目：店舗ID、クーポンコード、割引金額

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

必要項目：商品ID、クーポンコード、配送先住所、支払い金額

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

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

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

●

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

●

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

●

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

●

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

●

クーポンリストにて、一覧表示ができるようにしてください。

●

クーポンは削除ができるようにしてください。

●

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

●

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

◎RESTful APIについて●

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

●

商品をウェブサイトから注文するためのAPIを構築してください。

●

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

●

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

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

対象テーブル：飲食店マスタ、商品マスタ、注文データ

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

●

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

参考例：
■

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

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

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

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

特徴:A1
○

●

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

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

■

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

ID: admin●

PASS: gorin

シナリオ:A1a○

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

●■

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

■

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

シナリオ:A1b○

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

●

シナリオ:A1c○

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

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

■

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

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

5 / 10

●

特徴:A2
○

商品管理
■

●

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

シナリオ:A2a○

商品情報の新規登録■

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

■

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

■

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

■

必要な項目が不足している場合はエラーとし、「エラーが発生しました」というメッセージが表示されること。

●

シナリオ:A2b○

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

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

シナリオ:A2c○

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

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

■

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

■

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

■

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

■

必要な項目が不足している場合はエラーとし、「エラーが発生しました」というメッセージが表示されること。

●

シナリオ:A2d○

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

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

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

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

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

6 / 10

●

特徴:A3
○

クーポン管理■●飲食店ユーザが、クーポンを管理できること。

シナリオ:A3a■

クーポンの新規登録●

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

●

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

●

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

●

必要な項目が不足している場合はエラーとし、「エラーが発生しました」というメッセージが表示されること。

●

シナリオ:A3b○

既存のクーポンリスト表示■●

クーポンリストに、登録したクーポンが表示されていること。

シナリオ:A3c○

既存のクーポン情報の削除■

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

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

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

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

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

特徴:B1
○

商品情報の読み取り（ エンドポイント: /api/items ）メソッド：GET■●

アプリケーションから商品情報のJSONデータ読み取りができること。

特徴:B2
○

商品情報の絞り込み（ エンドポイント: /api/items?x=y ）メソッド：GET■

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

■

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

■

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

●

■

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

■

該当するデータが存在しなかった場合はエラーとすること。（特徴:B4を参照）

特徴:B3
○

商品の注文（ エンドポイント: /api/order ）メソッド：POST■

アプリケーションからの注文データを、POSTで受信できること。

■

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

■●

商品ID（item_id）の数値。（必須）●

クーポンコード（coupon_code）の文字列。（任意）●

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

商品の金額。（必須）

受信後、データベースの注文データに以下の値を格納すること。
●

商品ID（必須）●

クーポンコード（任意）○空の場合はnullを入れることとする。

●

配送先住所（必須）●

支払い金額（必須）○

クーポンコードが入力されていた場合は、クーポンデータから情報を取得し、その割引率金額に応じて金額を変動させること。
■（例）商品金額：1000円、クーポン割引金額：100円のとき、格納する数値は900円とする。

■

商品ID、またはクーポンコードについて、該当するデータが存在しなかった場合はエラーとすること。（特徴:B4を参照）

●

特徴:B4

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

8 / 10○HTTPステータスコードの返却■

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

■

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

■

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

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

9 / 10

選手への指示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. 注意事項：競技サーバにアップロードされたデータのみが採点対象となります。

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

配 点

ER作成

4

管理画面

9

RESTful API

9

ソースコード（セキュリティ含む）

8

合 計

30

Date: 2022.11.05
第60回技能五輪全国大会-Back-End（当日公表）

Version: 1.0©︎ WorldSkills Japan.

10 / 10

第60回 技能五輪全国大会 ウェブデザイン- Web Technologies -競技課題 M3 補足資料

（1）文章修正●

シナリオ:A3a■

クーポンの新規登録●

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

「及び商品を選択」を削除。

（2）補足
先ほどの質疑応答にて「クーポンコードはユニークである必要があると考える」というご意見をいただきましたが、本モジュールではユニーク制約が付けられているかどうかは考慮に含めなくて良いこととし、採点には影響しません。

（3）補足
●

特徴:B3
○

商品の注文（ エンドポイント: /api/order ）メソッド：POST■

アプリケーションからの注文データを、POSTで受信できること。

■

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

商品の金額。（必須）（任意）受け取るパラメータのうち、「商品の金額」を必須から任意に変更。
商品の金額は、商品IDから商品データを参照して取得しても良いこととします。
どちらを優先するかは考慮に含めなくて良いこととし、採点には影響しません。

（4）補足
●

特徴:B3
■

支払い金額（必須）●

クーポンコードが入力されていた場合は、クーポンデータから情報を取得し、その割引率金額に応じて金額を変動させること。
○（例）商品金額：1000円、クーポン割引金額：100円のとき、格納する数値は900円とする。

クーポンの割引金額によっては、商品金額がマイナスになるケースがありますが、本モジュールでは考慮に含めなくて良いこととし、採点には影響しません。

当日公表

第60回 技能五輪全国大会

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

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

目次
目次

2

はじめに

3

サイト制作の背景

3

フロントエンドの詳細

4

必須コンテンツ

4

コンテンツ管理箇所

5

最適化に対する作業

5
6

バックエンドの詳細
ユーザープロファイルの作成

6

プラグインの追加・作成

6

説明資料の作成

6

選手への指示7

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

7

評価について8

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

2/8

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

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

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

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

3/8

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

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

トップページ○

メインビジュアル

○最新のお知らせ3件のタイトルと記事ページに遷移できるリンクを設置する

お知らせ・出展情報ページ（一覧ページ／記事ページ）○●●

ページアクセス時に一覧を表示する■

投稿日、カテゴリ、マップ番号、タイトル、画像を表示する■

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

一覧内のタイトルをクリックすることで記事ページに遷移できるようにする○

記事ページでは本文を含めた全ての項目を表示する○

マップ番号と画像は入稿時に空欄でも問題なく一覧や記事を表示できるようにする

お問い合わせページ○

お名前、メールアドレス、タイトル、本文、送信ボタンを表示する○

フォームは送信ボタンを押下しても動作しない状態でよい

チケット購入ページ○

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

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

全ページ共通要素○

ナビゲーション
■各ページ（トップページ、お知らせ・出展情報一覧ページ、お問い合わせページ、
チケット購入ページ）に遷移できるようにする

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

4/8

コンテンツ管理箇所
入稿する記事は下記項目とします。
●

お知らせ・出展情報
○

投稿日

○

カテゴリ
■

○

「お知らせ」「企業ブース」「出展情報」が選択できるようにする

マップ番号
■

3桁の英数字が入力される想定で用意する■入稿時に空欄の場合もある

○

タイトル

○

画像
■

○

入稿時に空欄の場合もある

本文

最適化に対する作業●

SEOの実装○ページを検索エンジンに最適化をするため、meta descriptionの設定をすること。
■●

プラグイン使用の有無は問わない

セキュリティの実装○

管理画面のURLを変更し、URLを「/making-login2022」とすること。
■

プラグイン使用の有無は問わない

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

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

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

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

Username：AdMiN●

Password：Much2Secure!

クライアントユーザー - WordPressのダッシュボードのうち、「設定」にアクセス出来ないようにする。
●

Username：4Clients●

Password：Never4Get!

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

プラグイン名: MakingShowLogo●

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

プラグイン作者: MakingShowAdmin

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

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

アピールポイント

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

6/8

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

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

説明

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プラグイン※提供される画像データの一部は写真ACの素材を使用しています

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

7/8

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

配 点

UI・UXデザイン

12

レイアウト実装

7

WordPress実装

11

合 計

30

Date: 2022.11.06
第60回技能五輪全国大会-CMS（当日公表）

Version: 1.0©︎ WorldSkills Japan.

8/8