学習指導案

Transcription

1

2 概略と概要 対象とする学年 高等学校商業科2年生 もしくは3年生を対象 Wordは使えるが Photoshopなどは始めて触るレベルを想定 題材名 商品紹介のWebページを作る 題材の目標 インターネットの基本的な知識 Webサイトの構造 技術的背景を学ぶ さまざまなソフトウェアを使って 素材の加工や制作を実践する 電子商取引 EC を仮想した オンラインショッピングのWebページを擬似的に作る 題材の指導計画 1回2時間 50分 2 の連続授業を想定 適宜 発表やレポート提出 相互評価を行う 1単元の内容を1 8回 全体で7単元 合計最大29回程度を想定 制作環境 作業用パソコン CS6を使用する場合 ディスプレイサイズが px以上必要 デジタルカメラ Adobe Photoshop Adobe Illustrator Adobe Dreamweaver Adobe Bridgeなどのビューア メモ帳などのテキストエディタ Officeソフトウェア一式 Google ChromeまたはFirefoxなどのWebブラウザ 完成イメージの閲覧環境 パソコン Internet Explorer ver 9.0以降 Google Chrome Firefox Safari Operaなど タブレットやスマートフォン iphone / ipad など ios端末 Android 端末 -2 -

3 各単元のねらいと指導のポイント 1.Webページの仕組みとECサイトの利用 ねらい インターネットの仕組みと技術的背景を知る Amazonや楽天などのECサイトでの買い物の方法を理解する 手順 Webブラウザを使って各種ECサイトを閲覧 検索エンジンから各サイトへの遷移を体験する Webブラウザが表示しているファイルとサーバの概略を理解する スーパーの カート と ECサイトの カート を比較して 違いを理解する 指導のポイント インターネット上のクライアントとサーバーの関係が理解できるように用意されたスライド資料 などを利用する ECサイトのカートの概念 決済の方法なども資料や見本を用意 2.店舗のEC化について検討する ねらい 市中に実在する店舗が オンライン上のECサイトに出店することを仮想して メリットとデメ リットを理解する ECサイト上にWebページを公開するまでの企画と 作業工程について考える 手順 店舗をEC化することのメリットとデメリットをレポート化し プレゼンテーションする 実際の店舗を例に挙げ 商品等の紹介の仕方や方法 作業工程の手順について考える 指導のポイント EC化するためのコストなど 具体的な検討材料を示し EC化したことによるメリットとデメ リットを理解できるように工夫する グループ学習など 多様な意見や考えが出るように工夫する -3 -

4

5

6

7 各単元の進行プラン 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などの主要プロトコルについて理解する -7 -

8

9

10

11

12

13 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で画像を加工する色調補正 トリミングといった基本的な部分から ゴミ取 りなどのレタッチ作業を行う

14 [生徒] 色調やレベルを変えてみて Photoshop加工前と見比べる 展開3 7)Webページで使うロゴマークをデザインしてみる紙で構想を練った後 Adobe Illustratorで制作 する [生徒] マークの意味 構成を考えて Illustratorで何案か作ってみる まとめ 8)Webページでは利用者に商品を伝える表現が限られるため 写真や映像などビジュアルの持つ説 得力の高さが求められることを理解させる 9)ベクトルデータ(Illustrator)とビットマップデータ(Photoshop)の違いを確認する [生徒] ベクトルデータとビットマップデータの違いを実際の利用方法から確認する 発展 10)RAWとJPEGの違いを知る 11)デジタルカメラのRAWデータを現像してみる 12)Adobe Fireworksなど 別のソフトウェアも体験してみる 注意点と補足 現バージョンではIllustratorでビットマップを扱うことも Photoshopでベクトルデータを扱うこ とも可能だが 基本概念的には Photoshopはビットマップ Illustratorはベクトルデータという 理解で問題ない

15 5 Webページのレイアウトを考える 想定時間 3回程度 6時間 レイアウト作成 CSSボタン 2回 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ページで使用する画像ファイルを出力する [生徒] 実際に画像を書き出してみて ブラウザでの表示の違いを確認する

16

17 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データを並べて表示し どうして違いが生まれるのか を考察する

18

19 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サイトデザインを進めることの重要性に気付かせる

20

21

22

23

24

25

26