生徒による学校WEBページデザイン

中学校３年・美術科（デザイン）
山口大学教育学部附属山口中学校
美術　高下正明
takachan@ymg-jhs.yamaguchi-u.ac.jp
http://www.ymg-jhs.yamaguchi-u.ac.jp/
キーワード　中学校，３年，美術，ホームページ

インターネット利用の意図
　美術科には，目的や条件，機能と美の調和などを考え，自分を含めて使う人や見る人の立場や気持ちを尊重し，快さや美しさ，あるいは楽しさや使いやすさの調和した表現を求める，デザイン領域の学習がある。中でも，伝えたい内容を図や写真などで効果的で美しく表現し，伝達・交流を効果的に企画する力を「ビジュアルコミュニケーション（視覚伝達）の力」と呼んでいる。
　このような学習は，かつてはポスターや文字のデザインなどを中心に行ってきた。しかし今日の社会ではそのような表現が主にコンピュータ上で行えるようになり，視覚伝達の場もインターネットなどのデジタルメディアが中心となってきている。
　デザイン学習におけるコンピュータ利用の長所は，従来の画材と比べて，彩色の失敗や手間に気持ちをとられることなく，形や色による画面構成と視覚効果に集中した学習が行えることにもある。また，短時間の内に制作できるため，新学習指導要領に示された美術科の時間数削減にも対応するためにも，有効な学習素材となるのではないだろうか。
　ビジュアルコミュニケーションの学習は，情報化社会に不可欠な基礎基本の能力を養うことにつながる。今後，全中学校現場にコンピュータが導入され，各学級からインターネットにアクセスできるようになることを考えると，ホームページ制作はインターネット活用，ひいては情報活用のための意識づくりにつながるだろう。また，制作されたホームページを校内などのローカルな環境で公開すれば，作品完成後の鑑賞も可能となり，ホームページを通した相互理解をはかるための学習につながるだろう。

１　社会に働きかける
(1) ねらい
　本校には現在，生徒に開放されたインターネット端末が50台あり，特に総合的な学習の時間には，多くの生徒がインターネット検索を盛んに行い，様々なホームページから情報を得ている。その利用経験などから生徒は，ホームページには個人的な好みを反映したものが多くあることを知っており，それらのように自分自身や自分の好きなものやこと，自分の主張について表現したいと思っている。
　また，生徒はコンピュータに強い興味・関心を持っており，これを利用する学習に意欲的である。本単元の対象となる第３学年は技術家庭科の「情報基礎」の学習でマルチメディア環境を扱っている。生徒たちはすでにコンピュータの操作やテキスト入力，画像や音声処理について基礎的な知識を持っている。２年時には美術科の学習でドローツールを使って作画した経験もある。
　本単元はホームページ制作を通して，ビジュアルコミュニケーションの学習を行うことを目的としている。ホームページは自分の思いや主張を表現し伝達することを目的として制作するものだが，作り手の一方的な思いばかりでなく，見る人・使う人，情報を受けとめる立場に立って表現方法を考えなくては効果的なものになり得ない。そういった面から本単元は，ビジュアルコミュニケーションの基本的な考え方や，効果的なレイアウトや画像の処理方法などのビジュアルコミュニケーションに必要な基礎技法について学習することに適している。
　ホームページは，不特定多数の人々が利用することを前提として制作される。どのようなレイアウトが効果的か，形や色の組み合わせや配置などの表現のし方を工夫させたい。最近のホームページには，画面のレイアウトや視覚的な効果を創意工夫して使用している実例がたくさんあるのでそれらを参考にさせたい。また，表現の効果などを友達と話し合う時間を何度もとり，作品が他人から見たときどのような効果を上げているのかを確認させたい。
　制作に当たっては，テーマの選択から，イメージスケッチ，レイアウトの検討，デザインの決定，画像の制作まで，できるだけ紙上で検討させた。直にコンピュータにデザインしたり描画するよりも自由に発想できると考えたからだ。
　指導上特に気をつけたいのは著作権についてである。生徒は自分の好きなアイドルやアニメのキャラクターなどを図柄として使いたがるだろう。そういったものと自分を同一視する傾向が強い時期でもあるので，単純に創作物でなくてはいけないと禁止するのではなく，著作権保護の意味と必要性を十分に考えさせたい。一方で著作権フリーの画像データなどの利用についても紹介などを行いたい。

(2) 指導目標
　自分の伝えたいことを，色や形による図柄や画面構成（レイアウト）に置き換え，ホームページをデザインする。また，見る人や使う人の立場に立って，自分の思いが相手に伝わるように図柄やホームページの画面構成（レイアウト）のデザインを工夫する。
　できあがった作品は実際に校内のネットワークに公開して，鑑賞会を開き，どのようなデザインや伝達の仕方が望ましいか考えさせ，このような作業を通してビジュアルコミュニケーションのあり方を体験的に学習する。
　同時に，情報発信に際して気をつけることや守るべきことについて，心構えを持たせる。

(3) 利用場面
　本単元の学習では，下記の制作過程でコンピュータを活用する。
　(a) 自分の設定したテーマに共通する内容のホームページを見る
　参考資料として，自分が扱うテーマや内容をどのように表現しているか，ホームページを鑑賞する。
　(b) ホームページを制作する
　自分のテーマに沿って用意した画像やテキストなどのデータをホームページ制作ソフトに取り込んで，作品を制作する。制作途中の作品，あるいはできあがった作品はファイルサーバに蓄積する。ネットワークにつながれた端末で制作するので，自分の作品の加除修正はいつでも可能であるほか，必要に応じて友達の作品も見ることができる。
　(c) できあがったホームページを鑑賞し，互いに批評や意見交換をする
　制作が終了したらこれらを校内向けのWEBサーバで公開し，いつでも見ることができるようにする。美術の授業では発表会を，TVモニタに接続した端末を使って行い，互いの作品のよい点や問題点について話し合い，どのようなホームページが望ましいか，意見をまとめる。

(4) 利用環境

(a) 使用機種 　(b) 周辺機器 　(c) 稼働環境 　(d) 利用ソフト

Apple　iMac（MacOS）6台 　Apple　 PowerMacintosh 7500/100（MacOS）４台 　Compaq　プレサリオ（Windows 95）20台 　Apple　PowerMacintosh G3（ファイルサーバ）１台 　Epson　GT-7000（イメージスキャナ）２台 　デジタルビデオカメラ３台（機種は統一されていない） 　デジタルカメラ３台（機種は統一されていない） 　情報検索室　iMac　16台（2Mbpsでインターネット接続） 　　　　　　　PowerMacintosh 7500/100　４台（スタンドアロン） 　CAI教室　プレサリオ　20台（128Kbpsでインターネット接続） 　美術研究室 PowerMacintosh G3　１台（2Mbpsでインターネット接続） 　Adobe PageMill 3.0J（iMacにプリインストール）， 　Clarisクラリスワークス 4.0（iMacにプリインストール）， 　Adobe PhotoShop LE （Adobe PageMill 3.0Jを単体購入すると付属している）

２　指導計画

３　利用場面
(1) 目標
　本時は，すでにコンピュータや専用ソフトについての説明を終え，テキストデータを入力した後から授業が始まっている。画像を読みこんでホームページを仕上げていくわけだが，デザインに関わることとして，画像を中心として色や形の調和をはかり，自分の好みを反映しながらも見る人にとってわかりやすく印象的なものにできるかが本展開の要となってくる。
(2) 展開

４　実践を終えて
　本校にコンピュータが整備されてから２年以上経つ。これまで美術科では初歩的なグラフィックスの指導しか行っていなかったので，今回は情報活用能力の育成に迫る学習をと考え，ホームページのデザインを学習の題材として取り上げた。しかし実際に学習を行ってみると，以下のような点で大変なことであることがわかってきた。また，今後の改善点をワンポイントアドバイスとしてまとめたい。
(a) 教師はホームページはデザインを主体とした情報と考え，ホームページ制作をポスター制作の学習と同じような指導過程で取り上げたが，実際にはテキストや音などの様々な要素があり，アニメーションなどより高度な知識が必要な場合もある。それをビジュアルコミュニケーションとして学習を進めていくにはかなりの無理があったように思う。
(b) 最初は「学校を紹介するホームページ」をつくらせようと考えて本テーマを考えたが，美術科の学習の性格上，生徒が個人の思いを前面に出して制作した方がよりコミュニケーションの質が深まると思い，「自分のつくりたいホームページ」もよいとした。そのことがかえって初めてホームページを制作する多くの生徒を困らせたようである。
(c) 教師は絵で描いた方が創意工夫ができると考えたが，コンピュータに強い興味を持つ生徒にとっては煩わしい作業となったようだ。学習の最後になって理解できた生徒がほとんどだった。
(d) コンピュータの習熟度が生徒によってまちまちで，CGIのプログラムを組む生徒もいれば，ローマ字入力に苦労する生徒もいる。