電子商取引（EC）サイト制作 学習指導案
制作：アドビ システムズ株式会社 監修：東京都立第四商業高等学校 校長 大林 誠先生目次
概略と概要
2
対象とする学年 2 題材名 2 題材の目標 2 題材の指導計画 2 制作環境 2 完成イメージの閲覧環境 2各単元のねらいと指導のポイント
3
各単元の進行プラン
7
1 Webページの仕組みとECサイトの利用 7 2 店舗のEC化について検討する 9 3 実際の店舗を取材して商品のイメージを考える 11 4 Webページで活用する素材の作成 13 5 Webページのレイアウトを考える 15 6 Webページを作成する 17 7 Webページを仕上げる 19 8 自己評価とまとめ 21プランニングシート「ECサイトを作ろう」
22
ワイアーフレームを描こう
23
Webページ制作相互評価シート
24
概略と概要
対象とする学年
高等学校商業科2年生、もしくは3年生を対象 Wordは使えるが、Photoshopなどは始めて触るレベルを想定題材名
商品紹介のWebページを作る題材の目標
インターネットの基本的な知識、Webサイトの構造、技術的背景を学ぶ さまざまなソフトウェアを使って、素材の加工や制作を実践する 電子商取引（EC）を仮想した、オンラインショッピングのWebページを擬似的に作る題材の指導計画
1回2時間（50分×2）の連続授業を想定 適宜、発表やレポート提出、相互評価を行う 1単元の内容を1∼8回、全体で7単元、合計最大29回程度を想定制作環境
• 作業用パソコン（CS6を使用する場合、ディスプレイサイズが1280×800px以上必要） • デジタルカメラ • Adobe Photoshop • Adobe Illustrator • Adobe Dreamweaver • Adobe Bridgeなどのビューア • メモ帳などのテキストエディタ • Officeソフトウェア一式 • Google ChromeまたはFirefoxなどのWebブラウザ完成イメージの閲覧環境
各単元のねらいと指導のポイント
1.Webページの仕組みとECサイトの利用
ねらい • インターネットの仕組みと技術的背景を知る • Amazonや楽天などのECサイトでの買い物の方法を理解する 手順 • Webブラウザを使って各種ECサイトを閲覧、検索エンジンから各サイトへの遷移を体験する • Webブラウザが表示しているファイルとサーバの概略を理解する • スーパーの カート と、ECサイトの カート を比較して、違いを理解する 指導のポイント • インターネット上のクライアントとサーバーの関係が理解できるように用意されたスライド資料 などを利用する • ECサイトのカートの概念、決済の方法なども資料や見本を用意2.店舗のEC化について検討する
ねらい • 市中に実在する店舗が、オンライン上のECサイトに出店することを仮想して、メリットとデメ リットを理解する • ECサイト上にWebページを公開するまでの企画と、作業工程について考える 手順 • 店舗をEC化することのメリットとデメリットをレポート化し、プレゼンテーションする • 実際の店舗を例に挙げ、商品等の紹介の仕方や方法、作業工程の手順について考える 指導のポイント • EC化するためのコストなど、具体的な検討材料を示し、EC化したことによるメリットとデメ リットを理解できるように工夫する • グループ学習など、多様な意見や考えが出るように工夫する3.実際の店舗を取材して商品のイメージを考える
ねらい • 店舗の店主が期待するECサイトを聞き取り、完成イメージを考える • 取材を通して、紹介すべき商品や店舗のポイントを把握する 手順 • 取材すべき内容をまとめ、インタビューの役割を決める • 実際に取材に行き、店主にインタビューして必要事項を聞き取る • 取扱商品、メニューなど各種情報を整理する • プランニングシートに紹介すべき内容をまとめる • ワイアーフレームを作成する 指導のポイント • 言い回し、キャッチコピーの説得力などについて考えさせ、文章の重要性を理解させる • 出来上がるWebページのイメージが伝わるよう、プランニングシートなどにまとめさせ、Web ページ完成までの事前準備が大切であることを理解させる4.Webページで活用する素材の作成
ねらい • 写真撮影の技法やロゴマークの作成など、ビジュアル素材作成への理解を深める • さまざまなソフトウェアを活用した、デジタル素材の加工方法を学ぶ 手順 • デジタルカメラで商品を撮影する • Photoshopで画像を加工する • Illustratorでロゴマークを作る 指導のポイント • 写真や映像などビジュアルの持つ説得力の高さと、Webページにおける利用の重要性を理解させ5.Webページのレイアウトを考える
ねらい • 作成したワイアーフレームを元に、色やサイズ、使いやすさを考慮したWebページをレイアウト する • 自分がレイアウトしたビジュアルデザインは、実は見る人によって違って見えることを理解する 手順 • Photoshopを活用してWebページをレイアウトする • 最終的にテキストになる部分と画像になる部分を確認する • Webページ作成の準備としてボタンや枠線など、CSSでの再現性について考える • Webページに表示する画像のサイズについて考える 指導のポイント • 最終的な見た目はユーザ側の利用環境によって異なることを理解させる • Webページで利用する適正な画像形式や解像度などについて考えさせる6.Webページを作成する
ねらい • HTMLとCSSそれぞれの機能を理解する • ファイルの親子関係、フォルダ構成を理解する 手順 • Photoshopを活用して作成したWebページのレイアウトをDreamweaverで再現する • HTMLで文章に意味づけをする • CSSで統一性のあるビジュアルデザインを再現する • さまざまなWebブラウザでの表示のされ方を確認し、必要に応じて修正する 指導のポイント • ハイパーリンクや見出しなど、基本的なHTMLタグを理解させる • 一つの画面に見えるWebページでも、実際には多数のファイルで構成されていることを理解させ る7.Webページを仕上げる
ねらい • スマートフォンやタブレット、パソコンでの表示や操作方法など利用環境による違いを理解する • 作成したWebページをお互いにさまざまな利用環境から見てみて評価し合う 手順 • 学内のサーバにアップロードして、お互いのページをさまざまな環境から確認する • 利用環境によって画面の大きさ、表示方法、使われる場面が多様化していることを確認する • CSSやjQueryを活用してさまざまな利用環境に対応できるWebページを作成する • 手直ししたWebページをさまざまさまざまな利用環境で表示し、工夫した点などを発表する 指導のポイント • スマートフォンやタブレットなどスマートデバイスの普及により、旧来のパソコンでの利用概念 にとらわれないことが大切であると理解させる • JavaScriptを通じてプログラム言語への理解を促す8.自己評価とまとめ
ねらい • 作品をグループ間でWebページ評価シートを活用して相互評価し、シートを本人に戻し、自分の 作品を修正する • 自己評価シートを記入し、誤字脱字、写真や表の配置、リンク等をチェックする • 修正したうえで作品を完成する 指導のポイント • 相互評価は、クラスメート同士で問題点を指摘しづらい面もあるが、作品をよりよいものにする ための段階であることを理解させる • 相互評価、自己評価を行うことによって、制作した作品を見直し、チェックすることができる • 作品を完成させることを目的とせず、より良いものを作るために努力することを学ばせたい各単元の進行プラン
1 Webページの仕組みとECサイトの利用
想定時間 1∼2回（2∼4時間） まとめをしっかりと発表させた場合は2回発展を行う場合はさらにもう1回 目的 インターネットの歴史や技術的背景を知り、その中で発展してきたAmazonや楽天などのECサイト について、現状を理解する 使用環境 • パソコンやスマートフォン、タブレットなどの端末 • インターネット回線• Internet Explorerと、Google ChromeやFirefoxなどのWebブラウザ2種類以上 （これらは今後全ての回で必要） 授業の流れ •前準備（導入） 1)単元の目的と授業計画について説明する 2)各自のパソコンや、スマートフォンやタブレットなどのスマートデバイスのWebブラウザを使っ て各種サイトを閲覧してみる [生徒] なぜ学校や企業、役所などが皆Webサイトを持っているのか考えさせる 3)検索エンジンから目的のサイトに到達するまでの一連の流れを体験する •展開 4)インターネットの歴史について学ぶ。特に、1975年以降の急速な進展の歴史を年表にまとめなが ら学ぶ [生徒] 穴あき年表に書き込ませる（テキストを利用） 5)インターネットが学術利用から商業利用へと広がり、その中で電子商取引が発生してきたことを 学ぶ [生徒] 実際にECサイトを閲覧するなどして買い物をする方法を理解する 6)旧来のパソコンの仕組みについて学ぶ（復習を兼ねておさらい） [生徒] マウス、ディスプレイ、キーボードといった入出力デバイスと、CPUやメモリ、HDDなどの 関係性を図を見ながら理解する 7)スマートフォンやタブレットなどのスマートデバイスについて学ぶ [生徒] 旧来のパソコンとの操作方法、利用方法の違いについてまとめる 8)Webサイトを閲覧する際に発生している通信の内容とその仕組みを学習する [生徒] WebサーバーとWebブラウザの関係、TCP/IPなどの主要プロトコルについて理解する
•まとめ 9)今現在のIT環境と電子商取引の広がりを理解する5年後や10年後のIT環境、商取引環境を想像して みる [生徒] 各自が想像する5年後、10年後のIT環境、商取引環境をレポートにまとめて発表する 発展 10)ECサイトの安全性、SSLの話やソーシャルハッキングについて考察する 注意点と補足 GoogleやFacebookなどの有名企業も、まだ創業から20年もたっていない 個人が使うコンピュータとしてのパーソナルコンピュータの定義は広くなっている
2 店舗のEC化について検討する
想定時間 1∼3回（2∼6時間） 発展を行う場合はさらにもう1回 目的 オンライン上のECサイトに出店する意味を理解し、Webページの企画からECサイト公開までの作 業工程について考えられるようになる 使用環境 • 仮定する店舗の各種テキスト情報、写真素材など • Amazonや楽天などの出店規約や関連資料 • ExcelやPowerPoint、WordなどのOfficeソフトウェア 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)実在する店舗を例に、ECサイトとの違いについて話し合う [生徒] 実際に行ったことのあるお店を思い出し、そのECサイトを閲覧してみて違いや同一性を話し 合う •展開 3)商店街の店舗と大規模チェーン店のECサイトを見比べて紹介する商品等の情報量の違いをまとめ る 4)ECサイトの公開には自らサーバを持つ方法から、ショッピングサイトに出店する方法まで、さま ざまな方法があることを学習する [生徒] ECサイトの立ち上げ方が複数あることを調べレポートにまとめる 5)ECサイトを立ち上げる際の費用について学習する [生徒] 費用の多寡と、売り上げ目標、負担のバランスを表にまとめる 6)ECサイト上でのさまざまな決済方法について学習する [生徒] Paypalから代引きまでの代金決済方法や、日本特有の方法や商習慣、手数料について学んだ ことをレポートをまとめる •まとめ 7)商店街の店舗などを例に、ECサイトを展開する場合のメリットとデメリットをまとめる [生徒] グループ等でメリットとデメリットについて話し合い、まとめた内容を発表する 8)結果的にECサイトをやってもメリットが薄い業種があることや、費用対効果が見合わない規模が あることを理解する 発展 9)ECサイトと、実店舗でのPOSとの関連や、NFCやおサイフケータイなどとの関連を考察する注意点と補足
海外のECサイトでも、日本へ発送可能な場合が多く、すでに商圏に国境が存在していない
3 実際の店舗を取材して商品のイメージを考える
想定時間 5∼8回（10∼16時間） 事前学習 1回 取材 1∼2回 整理 1回 キャッチコピー他 1∼2回 発表 1回 発展を行う場合はさらにもう1回 目的 取材を通して、そのECサイトで表現するべきポイントを把握し、どのようにすれば利用者に完成イ メージが伝わるかを考える 使用環境 • 協力店舗へのアポイント • デジタルカメラ • ビデオカメラ、ICレコーダーなど音声収録可能な装置 • 本冊子末尾のプランニングシート • 本冊子末尾のワイアーフレームシート 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)事前学習でプランニングシートを活用し、取材すべき内容を確認する [生徒] 撮影、聞き役、記録係など、各班ごとに役割分担を決める •展開1 3)事前にアポイントを取った商店に取材に行き、お店の現状や課題を聞き取る [生徒] お店の特徴や店主が大切にしていること、紹介して欲しい商品等をノートにまとめる 4)お店の情報を集める [生徒] 商品の価格や内容、セールスポイントなどを聞き取り、ノートにまとめる 5)撮影用に商品を借りる（借りられない場合は、さまざまな角度から何枚かの写真を撮らせてもら う） [生徒] 何を何点借りたのか、チェック表などを使って管理する •展開2 6)取材した結果をもとに、ECサイトのページ構成を考える [生徒] プランニングシートに取材結果をまとめ、Webページで紹介すべき内容を考える 7)プランニングシートを活用し、商品詳細ページの構成を考えてみる [生徒] 一つの画面で表現出来る情報をワイアーフレームに描いてみる8)Webページを効果的に見せるため、キャッチコピーや商品紹介文などを考える [生徒] ワイアーフレームに追加記入する •まとめ 9)Webページはテキスト情報とその補足要素（画像など）の組み合わせであり、効果的な文章や画 像の使い方が重要であることを理解する 10)説得力のある文章、キャッチコピーの大切さを伝える [生徒] キャッチコピーの発表会をし、相互にアイデアを深める 発展 11)日本語以外の言語展開を視野に入れた場合の考察をする 12)英語圏と日本では文化が違うので、同じような商品でも扱いが異なることがある [生徒] 海外のECサイトと日本のECサイトで同じ商品を探し、説明文に違いがあることをレポート する 注意点と補足 ワイアーフレームに必要な内容を記入する際には、付箋を利用すると場所の移動や検討が容易にな る
4 Webページで活用する素材の作成
想定時間 3∼5回（6∼10時間） 撮影 1回 Photoshopによる編集 1∼2回 Illustratorによるロゴマークの制作 1∼2回 発展を行う場合はさらにもう1回 目的 商品の写真撮影やロゴマーク制作などを通し、ビジュアル素材作成への理解を深めるソフトウェア を使ったデジタル素材の加工方法を学習する 使用環境 • デジタルカメラ • カメラ用の三脚（なくても問題ない） • 白い模造紙など（撮影の背景用） • 照明器具（撮影用、明るさを保てればどのようなものもでもよい） • ディフューザー（なくても問題ない） • Adobe Photoshop • Adobe Illustrator • Adobe Bridge • 商品写真のよい例と悪い例を用意 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)食品などの商品写真の良い例と悪い例を並べて見せ、それぞれの印象を話し合う [生徒] どちらが美味しそうに見えるか、どちらが買いたくなるかなど、なぜそう思うか意見を出さ せる •展開1 3)商品の魅力が引き出せるように撮影してみる [生徒] 写真撮影し、思ったように撮れているか確認する 4)自然光や照明の角度、ディフューザーの有無などで写真の出来映えが変わることを確認する [生徒] 光の当たり方や強さによって、写真にどのような変化があるのかを知る5)パソコンに画像を取り込んで、Adobe BridgeでWebページで使う写真を選別する
[生徒] 使われる場面を想定し、写真を複数枚選定する •展開2
6)Adobe Photoshopで画像を加工する色調補正、トリミングといった基本的な部分から、ゴミ取 りなどのレタッチ作業を行う
[生徒] 色調やレベルを変えてみて、Photoshop加工前と見比べる •展開3
7)Webページで使うロゴマークをデザインしてみる紙で構想を練った後、Adobe Illustratorで制作
する [生徒] マークの意味、構成を考えて、Illustratorで何案か作ってみる •まとめ 8)Webページでは利用者に商品を伝える表現が限られるため、写真や映像などビジュアルの持つ説 得力の高さが求められることを理解させる 9)ベクトルデータ(Illustrator)とビットマップデータ(Photoshop)の違いを確認する [生徒] ベクトルデータとビットマップデータの違いを実際の利用方法から確認する 発展 10)RAWとJPEGの違いを知る 11)デジタルカメラのRAWデータを現像してみる 12)Adobe Fireworksなど、別のソフトウェアも体験してみる 注意点と補足 現バージョンではIllustratorでビットマップを扱うことも、Photoshopでベクトルデータを扱うこ とも可能だが、基本概念的には、Photoshopはビットマップ、Illustratorはベクトルデータという 理解で問題ない
5 Webページのレイアウトを考える
想定時間 3回程度（6時間） レイアウト作成 2回 CSSボタン 1回 目的 3「実際の店舗を取材して商品のイメージを考える」で作成したワイアーフレームを元に、色やサ イズ、使いやすさを考慮したWebページをレイアウトする。画像等のビジュアルデザインは、見る 人の環境によって違って見えることを理解する 使用環境 • Adobe Photoshop • Adobe Illustrator • Photoshopでのデザイン見本 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)見本のワイアーフレームとデザインを並べて提示し、これからの作業内容を理解する 3)第3単元で作成したワイアーフレームを数例取り上げて、よい点や問題点を確認する •展開1 4)第3単元で作成した原稿とワイアーフレームを元に、Photoshop上に文章や第4単元で加工した写 真、制作したロゴデータを取り込む [生徒] Photoshop上で配置や、テキストボックスへの流し込みなど一つの画面（Webページ1枚 分）の構成を作ってみる 5)この後のHTML化の流れを説明し、テキスト表示やCSSなど、画像以外の要素が存在することを 理解する [生徒] Photoshopのレイアウト上で、画像の部分とテキストの部分、CSSで作る部分を把握する •展開2 6)物理的な画面サイズ、解像度の違いをふまえ、CSSで作るボタンと画像で作るボタンのメリッ ト、デメリットを理解する [生徒] FireworksやCSSボタンを作るサイトを開いて、CSSボタンを作ってみる 7)ワイアーフレームと実際のPhotoshopデータを見比べる [生徒] 紙での思考と、画面上での思考の違いを考察する 8)PNG,JPEGなどWebサイトで使用する画像形式について、それぞれの違いと使い方を伝える [生徒] PhotoshopデータからWebページで使用する画像ファイルを出力する [生徒] 実際に画像を書き出してみて、ブラウザでの表示の違いを確認する•まとめ 9)出力した画像ファイルをいろいろな端末、ブラウザで表示してみることで、モニターの明るさや 解像度で表示されるイメージが違うことを理解する 発展 10)SVGやWebフォントといった解像度に依存しない手法があることを伝える 注意点と補足 日本語環境では実装への障害が高いこともあり、普及には至っていないが、タイトルやボタンを画 像で保持する以外の方法が主流になりつつある
6 Webページを作成する
想定時間 2∼3回（4∼6時間） HTMLとCSS 1回 演習 1∼2回 目的 Webページのファイルやフォルダの構成と、HTMLとCSSそれぞれの機能を理解する 使用環境 • Adobe Dreamweaver • テキストエディタ • 本冊子末尾の評価シート 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)見本のファイル構成を見せて、画像ファイルとHTMLなどのディレクトリ構成を確認する 3)HTMLやCSSは特殊な形式ではなく、ただのテキストファイルであることを確認する [生徒] HTMLとCSSファイルの中身をテキストファイルで開いてみる •展開1 4)HTMLで基本的なタグだけを使って、ファイルを作ってみる [生徒] Adobe Dreamweaverを使って、HTMLファイルを書いてみる [生徒] 出来上がったファイルをテキストエディタとWebブラウザで開いてみて、タグが処理されて いることを理解する 5)HTMLとCSSの役割分担と機能を確認する •展開2 6)第5単元で作成したレイアウトや画像データ等を元にWebページを作る [生徒] Adobe Dreamweaverを使って、HTMLファイルとCSSファイルを作成する 7)HTMLファイル、CSSファイルの編集 [生徒] 出来上がったHTMLファイルをWebブラウザで表示確認し、修正が必要な場合は DreamweaverでHTMLファイルやCSSファイルの編集作業を繰り返す •まとめ 8)テキストファイルと画像ファイルを組み合わせて、Webページが表現されていることを理解する [生徒] 出来上がったWebページとPhotoshopデータを並べて表示し、どうして違いが生まれるのか を考察する発展 9)HTMLやCSSにも複数のバージョンが存在すること、Webブラウザやそのバージョンによって解 釈が異なることを確認する 注意点と補足 HTMLもCSSもテキストエディタのみで作れるしかし、Dreamweaverなどのコード補完やカラーリ ングを利用することで、制作スピードが上がり品質が安定するメリットが大きい
7 Webページを仕上げる
想定時間 1∼3回（2∼6時間） 発展を行う場合はさらにもう1∼5回 目的 スマートフォンやタブレット、パソコンでの表示や操作方法など利用環境による違いを理解し、そ れらに対応させたWebページ作りの技術を理解する 使用環境 • Adobe Dreamweaver • 各種スマートデバイスや旧来の携帯電話 • 事前に第6単元で作ったWebページを公開するWebサーバ 授業の流れ •前準備（導入） 1)前単元の確認とこの単元の目的について説明する 2)前単元で作成したWebページを学校管轄のWebサーバなどに公開する（各学校で用意できる環境 に準じる） [生徒] 各自がSFTPクライアントなどを使用してファイルをアップロードする 3)パソコンやスマートデバイスなどさまざまな環境からWebページを表示してみる [生徒] 第6単元で作成したWebページを、さまざまな利用環境から表示してみる •展開 4)さまざまな利用環境にも対応出来るWebページを作成するには、CSSやjQueryの利用が有効であ ることを説明する 5)第6単元で作成したWebページを書き換えてスマートデバイスに対応させる [生徒] Adobe Dreamweaverを使って、HTMLファイルとCSSファイルを書き換える 6)JavaScriptの活用について説明する [生徒] JavaScriptを利用している例を見て利用方法を理解する 7)JavaScriptとJavaScriptライブラリーについて説明し、jQueryの仕組みを理解する [生徒] jQueryが使えるように、HTMLファイルを書き換える 8)CSSやjQueryを使って書き換えたWebページをもう一度公開して、利用環境による表示の違いを 確認する [生徒] 各自HTMLファイルやCSSファイルの書き換えで、工夫した点などを互いに発表する •まとめ 9)画面サイズを固定して考える場合より難易度は上がるが、画面サイズは変化するものだという前 提で考え、Webサイトデザインを進めることの重要性に気付かせる発展 10)タッチパネルデバイスに対する理解を深める 11)JavaScriptでWebアプリケーションを作る 注意点と補足 無線LAN環境の整備や検索ロボット対策などをすれば、授業で使うためのWebサーバの準備はそれ ほど難しいものではない
