技術科×家庭科で学ぶ！「EC体験Webアプリ教材」

著作：鷲見昂哉＆村松研スタッフ信州大学教育学部・村松研究室
動作環境：Googleスプレッドシート＋Google Apps Script
配布用スプレッドシート　こちらからのリンクから，使用するGoogleドライブのフォルダに入れてください

情報技術が社会のさまざまな場面で活用される現在、Webサイトを「利用する」だけでなく、その仕組みを理解し、適切に活用する力が求められています。
今回紹介する「EC体験Webアプリ教材」は、生徒が「制作者（販売者）」と「消費者（購入者）」の両方の立場を体験できる学習用Webアプリケーションです。技術科では情報発信やプログラミング、家庭科では電子商取引や消費者行動について学ぶことができ、教科横断的な授業展開を想定しています。
本教材は，アプリ開発委員会「ねそプロ」を参考にしながら，より発展させる教材として開発しました。

※近日体験用アプリを公開

「作る」と「買う」を一つの教材で体験

この教材の大きな特徴は、ECサイトにおける販売者と消費者、双方の視点を体験できることです。
技術科の学習では、ビジュアルプログラミング環境「Blockly」を使い、商品名、価格、画像、説明文などのブロックを組み合わせながら商品ページを制作します。HTMLを直接記述しなくても、レイアウトを考えながらWebページを構成できるため、「情報をどのように表現・発信するか」を試行錯誤しながら学ぶことができます。
さらに、画面上には実際のページのプレビューが表示されるため、制作した結果を確認しながら改善していくことができます。
一方、家庭科の学習では、生徒が消費者として疑似ECサイトを利用します。クラスメイトが制作した商品が並ぶECモールから商品を選び、商品説明や価格、送料、決済方法などを確認して購入を判断します。
つまり、生徒は単にECサイトを見るのではなく、
「どのような情報があれば消費者に伝わるのか」
「その情報は信頼できるのか」
「本当に購入してよい商品なのか」
といったことを、販売者と消費者の双方の視点から考えることになります。
生徒用マニュアル

授業は4つのステップで展開

教材では、技術分野と家庭分野を連携させ、次の4段階で授業を進めるモデルが示されています。

導入〈家庭・技術〉
電子商取引の仕組みや情報発信の工夫、権利・危険性などについて事前学習する。
制作〈技術〉
制作者モードにログインし、Blocklyを組み合わせて自分の商品ページを制作・出品する。
体験〈家庭〉
消費者モードにログインし、クラスメイトの商品を比較・検討しながら購入体験を行う。
振り返り〈技術・家庭〉
レビューや購入結果をもとにページを改善したり、自分自身の消費行動について振り返ったりする。

添付資料の8ページでも、この流れが「導入→制作→体験→ふりかえり」という4ステップとして整理されています。

クラス全員の商品が「疑似ECモール」に

消費者モードでは、同じ「モールID」を入力した生徒の商品が一覧表示されます。
見た目は実際のECサイトに近く、商品画像、価格などを見ながら気になる商品をクリックし、詳細情報を確認します。商品一覧では限られた情報しか表示されないため、「第一印象で気になる商品を選び、詳しい情報を確認する」という実際のECサイトに近い行動を体験できる点も特徴です。
商品詳細画面では、説明文の信頼性、送料、決済方法などを確認し、「安全に購入できるか」を自分で判断します。
また、予算などを意識しながら購入手続きを進めることで、単なるクリック操作ではなく、消費者として意思決定する疑似体験になるよう設計されています。

レビューが「改善」につながる

購入後には、商品に対して評価やコメントを投稿できます。
特徴的なのは、購入した商品だけでなく、購入しなかった商品についても、

「なぜ選ばなかったのか」
「どうすれば買いたくなるのか」

といった改善意見を投稿できることです。
制作者は自分のマイページから、商品の出品数や売上、評価などを確認できます。こうしたフィードバックをもとに商品ページを再び改善することで、制作→公開→評価→改善という情報発信のサイクルを体験できます。
単にWebページを「完成させる」ことをゴールにするのではなく、利用者からの評価を受けてよりよいものへ改善していく点は、技術科における問題解決的な学習とも親和性があります。

Google Apps Scriptとスプレッドシートで運用

教員にとって導入しやすい点も、この教材の特徴です。
システムはGoogle Apps Script（GAS）とGoogleスプレッドシートを中心に構成されており、独自サーバーや複雑なネットワーク環境を準備する必要がありません。
資料では、配布されたマスター用スプレッドシートをGoogleドライブにコピーし、Apps ScriptからWebアプリとしてデプロイする流れが示されています。クラスごとにスプレッドシートを複製して利用でき、生徒の活動データはそのスプレッドシート内に集約されます。
データは「Products（商品）」「Orders（注文）」「Reviews（レビュー）」「Code（プログラム）」といったシートにリアルタイムで記録される仕組みになっています。
そのため教員は、生徒がどのような商品を制作したのか、何を購入したのか、どのようなレビューを書いたのかなどを一覧で確認でき、評価や授業後の振り返りにも活用できます。

パスワード管理を簡略化した「個人コード」

生徒は任意の「個人コード」を設定してログインします。
複雑なアカウントやパスワード管理を行うのではなく、この個人コードに出品・購入履歴などを紐付けることで、生徒一人ひとりの活動を管理します。
授業のフェーズに合わせ、

商品を作る
自由に買い物
マイページ

などのモードを切り替えて利用できる構成になっています。

EC体験Webアプリ教材のインストール方法

この教材は、GoogleスプレッドシートとGoogle Apps Script（GAS）を使って動作します。専用サーバーを用意する必要はなく、Googleアカウントがあれば導入できます。教材データはスプレッドシート内に集約される仕組みです。
教員用マニュアルはこちら

導入は、次の流れで行います。

教材用スプレッドシートをコピーする
配布されたマスター用スプレッドシートをこちらからのリンクから自分のGoogleドライブにコピーします。元のマスターは直接編集せず、授業やクラスごとにコピーして利用します。
Apps Scriptを開く
コピーしたスプレッドシートから、「拡張機能」→「Apps Script」を選択します。
プログラムを確認する
スプレッドシートのApps Scriptが開きます。教材はこのプログラムとスプレッドシートを組み合わせて動作します。
Webアプリとして公開する
Apps Script画面右上の
「デプロイ」→「新しいデプロイ」
を選び、種類を**「ウェブアプリ」**に設定してデプロイします。発行されたURLが、教材にアクセスするためのURLになります。
初回のみアクセスを承認する
初めてデプロイする際には、Googleからアクセス許可を求められる場合があります。画面の案内に沿って承認してください。
発行されたURLを開く
デプロイ完了後に表示されるURLへアクセスし、教材のスタート画面が表示されれば準備完了です。