技能五輪・アビリンピック2025 ウェブデザイン職種競技解説ガイド

講義担当者

戸田駿太

第60回（2022年）技能五輪全国大会ウェブデザイン職種金賞
第61回（2023年）技能五輪全国大会ウェブデザイン職種金賞
第47回技能五輪国際大会（WorldSkills）Web Technologies職種日本代表

国際大会のブログ記事

ワークショップの概要

本日は技能五輪ウェブデザイン競技の世界を体験するワークショップです。生成AI（Claude）を活用しながら、実際にウェブアプリケーションを作成し、プロフェッショナルレベルの技術に触れることができます。

まずはこれを開いて！

NotebookLM

NotebookLMを開く

ここに技能五輪全国大会ウェブデザイン職種のデータが入っているので、AIとチャットして自由に理解することができます。先生に質問するより気軽に、正確な情報を提供してくれます。

わからないことがあればAIに質問するを徹底してください！！
これくらいの内容であればAIが全て回答してくれます

技能五輪全国大会とは

技能五輪全国大会は、国内の青年技能者（原則23歳以下）を対象に、技能競技を通じて青年技能者に努力目標を与えるとともに、技能に身近に触れる機会を提供し、広く国民一般に対して技能の重要性や必要性をアピールし、技能尊重の機運を高めることを目的とした大会です。
また、技能五輪国際大会が開催される前年の全国大会は、国際大会で実施が見込まれる関連職種の日本代表選手選考も兼ねています。

目的

青年技能者に努力目標を与え、技能の重要性や必要性を広くアピールする

対象

国内の青年技能者（原則23歳以下）

国際大会との関係

国際大会前年の全国大会は、日本代表選手の選考も兼ねる

技能五輪の階層構造

この3つのレベルがあります。

それぞれの大会で出場条件があり、満たせた選手が出場できます。

技能五輪の公式サイト

ウェブデザイン職種とは

ウェブ上のインターフェース設計・構築を行い、ユーザーに最適な形で情報を提供する技能を競う職種です。現代のデジタル社会において、ウェブ技術は情報プラットフォームの中心となっており、非常に重要なスキルとされています。

求められる能力

要件理解とコミュニケーション

クライアントの要求を正確に把握する力

技術的知識と応用力

HTML/CSS、JavaScript、PHP、データベース等の幅広い技術

多角的な技能

フロントエンド開発、バックエンド開発、デザイン、セキュリティ対策

全国大会と国際大会の違い

全国大会

4つのモジュール、2日間（計8時間30分）

国際大会

7つのモジュール、4日間、より高度な技能とスピードが要求される

競技モジュール（全国大会）

スピードテスト（1時間）

デザイン・レイアウト・フロントエンド・バックエンドの基本技能を高速で処理

バックエンド（2時間30分）

PHPフレームワークとデータベースを用いた管理システム構築

フロントエンド・インタラクティブ（2時間30分）

JavaScriptを中心としたインタラクティブなゲーム開発

マーケティングページ（2時間30分）

レスポンシブデザインによる商品プロモーションサイト制作

今日の学習目標

体験目標

実際にウェブアプリを作って動かしてみる

理解目標

ウェブ技術の基本構造を理解する

発見目標

技能五輪選手のすごさを実感する

ウェブアプリケーションとは？

ブラウザ上で動作するアプリのことです。スマホアプリをダウンロードしなくても、ブラウザでアクセスするだけで使えるのが特徴です。

2つのタイプがあります

静的ウェブサイト

情報を見るだけのサイト（会社のホームページ、ニュースサイトなど）
内容が変わらない、一方向の情報提供

動的ウェブアプリケーション

ユーザーの操作に反応して内容が変わる
双方向のやりとりができる

身近な例

YouTube

動画検索、再生、コメント投稿

Instagram

写真投稿、フィルター加工、いいね

Google Maps

地図検索、ルート案内、リアルタイム交通情報

オンラインゲーム

ブラウザで遊べるゲーム

ネットショッピング

商品検索、カート機能、決済

ウェブ技術の基本構造

ウェブアプリケーションは主に3つの技術で構成されています：

HTML（構造・骨組み）

<h1>見出し</h1>
<p>段落</p>
<button>ボタン</button>

ページの骨組みを作る
見出し、段落、画像、リンクなどの要素を定義

CSS（デザイン・見た目）

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

色、フォント、レイアウトを制御
美しく使いやすいデザインを実現

JavaScript（動的機能）

function greetUser() {
  const name = document.getElementById('nameInput').value;
  alert('こんにちは、' + name + 'さん！');
}

ユーザーの操作に反応する機能
インタラクティブな動作を実現

生成AIで作ってみよう

ここにアクセス

Claude AI

ログイン後はこの画面になると思います。

真ん中のチャットボックスにプロンプト（AIへの命令）を記述します

送信するとAIが回答してウェブサイトを作ってくれます
アーティファクトというものがウェブサイトを表示する機能です。

完成したウェブサイトを確認してみましょう！

ここのボタンでプログラムのコードに切り替えられます

コードを表示した時の画面
ここでウェブサイトはどのように作られているのか確認できます
全て理解して記述できるように訓練しているのが技能五輪の選手たちです

HTML, CSS, JavaScriptがどこで使われているのか見つけましょう

効果的なプロンプトの書き方

悪い例

ウェブアプリを作って

良い例

以下の仕様でタスク管理ウェブアプリを作成してください：

【機能要件】
- タスクの追加、削除、完了マーク
- 優先度の設定（高・中・低）
- 期限の設定と表示

【デザイン要件】
- モダンでシンプルなデザイン
- 青を基調とした配色
- スマートフォン対応

【技術要件】
- HTML、CSS、JavaScriptのみ使用
- 1つのファイルで完結

AIの得意・不得意

得意分野

基本的な機能の実装
定型的なコードの生成
バグ修正の支援

不得意分野

複雑な要件の理解
創造的なデザイン判断
ユーザビリティの判断

実践演習の流れ

基礎レベル：自己紹介サイト

作成内容: 名前・年齢・趣味を入力して自己紹介文を生成

学習ポイント:

HTMLフォームの使い方
JavaScriptイベント処理
CSSスタイリング

中級レベル：メモアプリ

作成内容: メモの追加・削除・編集機能付きアプリ