生徒による学校WEBページデザイン
中学校3年・美術科(デザイン)
山口大学教育学部附属山口中学校
美術 高下正明
takachan@ymg-jhs.yamaguchi-u.ac.jp
http://www.ymg-jhs.yamaguchi-u.ac.jp/
キーワード 中学校,3年,美術,ホームページ
インターネット利用の意図
美術科には,目的や条件,機能と美の調和などを考え,自分を含めて使う人や見る人の立場や気持ちを尊重し,快さや美しさ,あるいは楽しさや使いやすさの調和した表現を求める,デザイン領域の学習がある。中でも,伝えたい内容を図や写真などで効果的で美しく表現し,伝達・交流を効果的に企画する力を「ビジュアルコミュニケーション(視覚伝達)の力」と呼んでいる。
このような学習は,かつてはポスターや文字のデザインなどを中心に行ってきた。しかし今日の社会ではそのような表現が主にコンピュータ上で行えるようになり,視覚伝達の場もインターネットなどのデジタルメディアが中心となってきている。
デザイン学習におけるコンピュータ利用の長所は,従来の画材と比べて,彩色の失敗や手間に気持ちをとられることなく,形や色による画面構成と視覚効果に集中した学習が行えることにもある。また,短時間の内に制作できるため,新学習指導要領に示された美術科の時間数削減にも対応するためにも,有効な学習素材となるのではないだろうか。
ビジュアルコミュニケーションの学習は,情報化社会に不可欠な基礎基本の能力を養うことにつながる。今後,全中学校現場にコンピュータが導入され,各学級からインターネットにアクセスできるようになることを考えると,ホームページ制作はインターネット活用,ひいては情報活用のための意識づくりにつながるだろう。また,制作されたホームページを校内などのローカルな環境で公開すれば,作品完成後の鑑賞も可能となり,ホームページを通した相互理解をはかるための学習につながるだろう。
1 社会に働きかける
(1) ねらい
本校には現在,生徒に開放されたインターネット端末が50台あり,特に総合的な学習の時間には,多くの生徒がインターネット検索を盛んに行い,様々なホームページから情報を得ている。その利用経験などから生徒は,ホームページには個人的な好みを反映したものが多くあることを知っており,それらのように自分自身や自分の好きなものやこと,自分の主張について表現したいと思っている。
また,生徒はコンピュータに強い興味・関心を持っており,これを利用する学習に意欲的である。本単元の対象となる第3学年は技術家庭科の「情報基礎」の学習でマルチメディア環境を扱っている。生徒たちはすでにコンピュータの操作やテキスト入力,画像や音声処理について基礎的な知識を持っている。2年時には美術科の学習でドローツールを使って作画した経験もある。
本単元はホームページ制作を通して,ビジュアルコミュニケーションの学習を行うことを目的としている。ホームページは自分の思いや主張を表現し伝達することを目的として制作するものだが,作り手の一方的な思いばかりでなく,見る人・使う人,情報を受けとめる立場に立って表現方法を考えなくては効果的なものになり得ない。そういった面から本単元は,ビジュアルコミュニケーションの基本的な考え方や,効果的なレイアウトや画像の処理方法などのビジュアルコミュニケーションに必要な基礎技法について学習することに適している。
ホームページは,不特定多数の人々が利用することを前提として制作される。どのようなレイアウトが効果的か,形や色の組み合わせや配置などの表現のし方を工夫させたい。最近のホームページには,画面のレイアウトや視覚的な効果を創意工夫して使用している実例がたくさんあるのでそれらを参考にさせたい。また,表現の効果などを友達と話し合う時間を何度もとり,作品が他人から見たときどのような効果を上げているのかを確認させたい。
制作に当たっては,テーマの選択から,イメージスケッチ,レイアウトの検討,デザインの決定,画像の制作まで,できるだけ紙上で検討させた。直にコンピュータにデザインしたり描画するよりも自由に発想できると考えたからだ。
指導上特に気をつけたいのは著作権についてである。生徒は自分の好きなアイドルやアニメのキャラクターなどを図柄として使いたがるだろう。そういったものと自分を同一視する傾向が強い時期でもあるので,単純に創作物でなくてはいけないと禁止するのではなく,著作権保護の意味と必要性を十分に考えさせたい。一方で著作権フリーの画像データなどの利用についても紹介などを行いたい。
(2) 指導目標
自分の伝えたいことを,色や形による図柄や画面構成(レイアウト)に置き換え,ホームページをデザインする。また,見る人や使う人の立場に立って,自分の思いが相手に伝わるように図柄やホームページの画面構成(レイアウト)のデザインを工夫する。
できあがった作品は実際に校内のネットワークに公開して,鑑賞会を開き,どのようなデザインや伝達の仕方が望ましいか考えさせ,このような作業を通してビジュアルコミュニケーションのあり方を体験的に学習する。
同時に,情報発信に際して気をつけることや守るべきことについて,心構えを持たせる。
(3) 利用場面
本単元の学習では,下記の制作過程でコンピュータを活用する。
(a) 自分の設定したテーマに共通する内容のホームページを見る
参考資料として,自分が扱うテーマや内容をどのように表現しているか,ホームページを鑑賞する。
(b) ホームページを制作する
自分のテーマに沿って用意した画像やテキストなどのデータをホームページ制作ソフトに取り込んで,作品を制作する。制作途中の作品,あるいはできあがった作品はファイルサーバに蓄積する。ネットワークにつながれた端末で制作するので,自分の作品の加除修正はいつでも可能であるほか,必要に応じて友達の作品も見ることができる。
(c) できあがったホームページを鑑賞し,互いに批評や意見交換をする
制作が終了したらこれらを校内向けのWEBサーバで公開し,いつでも見ることができるようにする。美術の授業では発表会を,TVモニタに接続した端末を使って行い,互いの作品のよい点や問題点について話し合い,どのようなホームページが望ましいか,意見をまとめる。
(4) 利用環境
(a) 使用機種 (b) 周辺機器 (c) 稼働環境 (d) 利用ソフト |
Apple iMac(MacOS)6台 Apple PowerMacintosh 7500/100(MacOS)4台 Compaq プレサリオ(Windows 95)20台 Apple PowerMacintosh G3(ファイルサーバ)1台 Epson GT-7000(イメージスキャナ)2台 デジタルビデオカメラ3台(機種は統一されていない) デジタルカメラ3台(機種は統一されていない) 情報検索室 iMac 16台(2Mbpsでインターネット接続) PowerMacintosh 7500/100 4台(スタンドアロン) CAI教室 プレサリオ 20台(128Kbpsでインターネット接続) 美術研究室 PowerMacintosh G3 1台(2Mbpsでインターネット接続) Adobe PageMill 3.0J(iMacにプリインストール), Clarisクラリスワークス 4.0(iMacにプリインストール), Adobe PhotoShop LE (Adobe PageMill 3.0Jを単体購入すると付属している) |
2 指導計画
指導計画 |
留意点 |
(a) ホームページにおける色や形の効果について学習する。 |
・いくつか具体的な例をあげ,そのホームページのデザインが与える印象について発表させ,その内容とのつながりについて話し合わせる。 |
(b) ホームページ制作上で,考えなくてはならない点について学習する。 |
・ホームページは不特定多数の様々な人々が利用することを考えさせる。 |
(c) テーマを決定する。 ・教師の作品を鑑賞する。 |
・紙上で画像とテキストについての配置を考えさせる。 |
(d) ホームページのレイアウトを決定する。 |
・画像やテキストの準備のし方について,生徒個別に,描いたスケッチをもとにしながら要望を聞き,指導を行う。 |
(e) ホームページのための画像やテキストなどの素材を用意する。 |
・計画に沿って,水彩絵の具やクレヨンなど描画材などを用意させる。 |
コンピュータを使ってホームページを制作する。 |
・コンピュータの操作方法について指導する。 |
(g) 完成した作品の鑑賞会を行う |
・完成した作品を校内向けWEBサーバに蓄積し,内容に問題点がないかチェックして,公開する。(図1) |
|
|
3 利用場面
(1) 目標
本時は,すでにコンピュータや専用ソフトについての説明を終え,テキストデータを入力した後から授業が始まっている。画像を読みこんでホームページを仕上げていくわけだが,デザインに関わることとして,画像を中心として色や形の調和をはかり,自分の好みを反映しながらも見る人にとってわかりやすく印象的なものにできるかが本展開の要となってくる。
(2) 展開
学習活動 |
活動への働きかけ | 備考 |
1 これまでの作業を振り返る。 2 本時の目標を確認する。 |
・これまでに作られた画像で作者の独創性が表れているものを紹介する。 |
・コンピュータ |
色や形の調和をはかりながら,文字の大きさや色,背景の色,レイアウトを工夫して,見る人にとってわかりやすく印象的なホームページをつくろう。 |
| |
3 ホームページ作成用ソフトを使って,すでにテキストが入力されている作品に画像を貼り付けていく。 4 次の観点からレイアウトについて検討する。 5 友達と互いの作品を見比べて修正点などを考える。 6 学習プリントに本時に工夫した点と今後の改善点を記入する。 7 ファイルサーバに自分の作品を保存する。 |
・下絵を参考にさせながら作業を進めさせるが,下絵と食い違った部分ができても,それがよりよい作品につながるならば,問題ないことを伝える。 ・注意点として次の事柄を話し,個別に援助や指導を行っていく。 |
ホームページ作成用ソフトはAdobe PageMillを使うが,レイアウトが自由自在に作れるほどでない。限られた機能の中で十分に工夫させる。 大型ディスプレイ |
4 実践を終えて
本校にコンピュータが整備されてから2年以上経つ。これまで美術科では初歩的なグラフィックスの指導しか行っていなかったので,今回は情報活用能力の育成に迫る学習をと考え,ホームページのデザインを学習の題材として取り上げた。しかし実際に学習を行ってみると,以下のような点で大変なことであることがわかってきた。また,今後の改善点をワンポイントアドバイスとしてまとめたい。
(a) 教師はホームページはデザインを主体とした情報と考え,ホームページ制作をポスター制作の学習と同じような指導過程で取り上げたが,実際にはテキストや音などの様々な要素があり,アニメーションなどより高度な知識が必要な場合もある。それをビジュアルコミュニケーションとして学習を進めていくにはかなりの無理があったように思う。
(b) 最初は「学校を紹介するホームページ」をつくらせようと考えて本テーマを考えたが,美術科の学習の性格上,生徒が個人の思いを前面に出して制作した方がよりコミュニケーションの質が深まると思い,「自分のつくりたいホームページ」もよいとした。そのことがかえって初めてホームページを制作する多くの生徒を困らせたようである。
(c) 教師は絵で描いた方が創意工夫ができると考えたが,コンピュータに強い興味を持つ生徒にとっては煩わしい作業となったようだ。学習の最後になって理解できた生徒がほとんどだった。
(d) コンピュータの習熟度が生徒によってまちまちで,CGIのプログラムを組む生徒もいれば,ローマ字入力に苦労する生徒もいる。
ワンポイントアドバイス |