技術分野ディジタル制作における「Webページ制作講座」
小学校のプログラミング必修化がよく話題になりますが、次期学習指導要領では中学校技術分野でも「情報の技術」におけるプログラミングに関する内容の充実が示されています。
東京都立三鷹中等教育学校では、次期学習指導要領の内容も踏まえつつ、現行の「情報に関する技術」におけるディジタル制作の制作・設計の学習として、ベネッセコーポレーションの提供する「Proglesson：Webページ制作講座」を使って中学3生に授業を行って頂いています。
生徒が自分のペースで進められる教材、先生は進捗をモニターしながらサポートする
Proglesson 生徒用の画面
チャット形式のレクチャー、理解度チェッククイズ、設計内容を登録するフォーム、制作に使えるサンプルなど
教材のポイントは、生徒が自分のペースで自学自習でき、先生はその状況をモニターできること。
多くの中学生に慣れているであろうチャット形式の短い会話で、Webページの特徴や利用方法を知り、HTML、CSSでできることを学びます。その後、生徒それぞれがWebページ（部活紹介や自分の趣味のページなど）を設計し制作する流れになっています。
ほとんどの生徒にとっては初めてのWebページ制作。企画のアイデアに詰まる生徒もいますが、担当の先生がProglessonで学び作ってきた「行きつけの焼肉屋の紹介ページ」も参考にしながら、企画を進めます。
担当の先生が作った、「行きつけの焼肉屋の紹介ページ」
生徒からは一斉に「行ってみたい！」「お腹すいたー」の声が上がる。
写真がどれも美味しそうで、参観していた私は帰りに焼肉ランチしてしまいました。
理解度チェッククイズや設計内容、クラスの人の作品を相互評価するページもあり、その内容はリアルタイムに先生へ通知されていきます。
先生用の画面
クラスごとに生徒の進捗状況が表示される。
結果はExcelで出力できるので、先生は自分の成績評価にそのまま利用できます。
授業の流れ
| 1. Webページを知る・構想を立てる（50分） | ・Webページの仕組み ・Webページでできることを知る ・知らせたい内容を決める ・知らせたい項目を設計する |
|---|---|
| 2. 表示する素材を集めよう（50分） | ・必要な素材とモラルについて ・素材をリスト化しよう ・素材を加工しよう |
| 3. Webページを制作しよう１（50分） | ・テキストエディタなど開発環境の準備 ・HTMLの仕組み ・CSSの仕組み ・テンプレートからWebページを制作 |
| 4. Webページを制作しよう２（50分） | ・HTMLソースを解読しよう ・文字を編集する ・画像を変更する ・色を変更する |
| 5. 全体を見直して改善しよう（50分） | ・自己評価 ・評価を元に改善する |
| 6. 発表と相互評価（50分） | ・発表の準備 ・発表とふり返り |
6単位授業を想定していますが、今回は制作や評価に十分時間をとるため7単位授業での実施にしていただいています。
授業の様子
好きなアイドルや食べ物を紹介するページ、部活動のページなど生徒それぞれの趣味嗜好を表現した企画がどんどん登録されてきます。
「クラス担任の先生に見せると、新たな生徒の側面が発見できて面白いって言ってくれるんですよ！」とは技術担当の先生の談。いろんな意味で興味深い活動になっているようです。
今回は全7回を予定している中の、3・4回目の授業。放課後にもPCルームに来て、課題に取り組む生徒も多くいました。残り3回。企画したものを時間内に実現するのは、想定よりも大変と気づいてきたようです。時間をうまく使って、楽しんでWebページ制作できるように支援していきます。
