情報科教育法 II 2003 ＃ 8
久野靖∗

2002.12.17

はじめに前回著作権について色々やりましたが、別の授業でやったのですべて知っていたという人と知らなかったことが沢山あったという人とがあったようです (すべて知ってたなんてそう安易に言えるもんですかねえ?)。
さて、今回は前半で「Web とユーザビリティ」の話題を取り上げ、後半は Web ページにおけるリンクや画像をテーマに取り上げて解説し、 HTML 教室もそのテーマでやることにします (だから HTML 教室ではないような気もする)。

1

Web とユーザビリティ

1.1

ユーザビリティ(使いやすさ) とは?

ユーザビリティ(使いやすさ)って何だと思いますか? 明らか?
たとえば、日用品の場合だったらほぼ明らか。栓抜きだったら、無理に力を入れなくても確実に栓が抜けることとか。しかし、使いやすくないものも沢山出回っている。なぜか?

• 安くするために、使いやすさを犠牲にしている。
• かっこよさのために、使いやすさを犠牲にしている。
• 法律等の制約があって (?)、使いやすさを犠牲にしている (e.g. 学校の机)
つまり、世の中の「ものごと」には多くの場合「トレードオフ」 (あちら立てればこちら立たずの関係) がある。だから使いやすさだけを優先できないかも知れない。
もう 1 つの問題: 人によって (用途によって) 同じものでも「使いやすさ」の基準が異なるかも知れない。

• 「Windows は UNIX よりも使いやすい」ですか?
たとえば次の点を考えてみる。
○ ファイルやディレクトリ (フォルダ) がアイコンなどの形で表示されるから、名前を覚えていなくてもアクセスできる。名前が長くても (打ちにくくても) 特に問題ない。(Win)× ファイルやディレクトリの名前を知らないと指定できない。知らない場合は「ls」などのコマンドで調べる手間が掛かる。長い名前は打ち込むのが大変。 (UNIX)
しかし実はこれもトレードオフになっている。
× ファイルやディレクトリをアイコンとして表示するということは、画面に表示されていないものを表示させるまでにはクリックしたりスクロールしたりしてすごく時間が掛かる。つまり大量のファイルやディレクトリがあると段々大変になる。 (Win)∗筑波大学大学院経営システム科学専攻

1

○ 覚えているものを打ち込むのであれば、ファイルがいくつあろうどどこにあろうと打ち込むだけだから同じこと。(UNIX)
もう 1 つ、次の点を考えてみよう。
○ プログラムの機能 (コマンド) はメニューで示されているから、どんな機能がどこにあるか覚えていなくてもメニューを探しながら使うことができる。 (Win)× プログラムの機能 (コマンド) は文字列や打鍵列 (Control-X とか) で示すので、覚えていないとどうしょうもない。(UNIX)
しかしこれも逆の面がある。
× コマンドが非常に多くなってくると、どこにそのコマンドがあるか探して指定するまでにものすごく時間が掛かってしまう。(Win)○ コマンドを覚えていれば、単に打つだけだから速いしコマンドがいくつあろうと同じこと。 (UNIX)
つまり、Windows と UNIX のどちらが使いやすいか、ということは「どういう人にとってか」が違うと全く違ってしまう。

• ファイルを少ししか持っていなくて、コマンドを覚えるほど使っていなくて、ゆっくりでいいから、どんな機能があるか探しながら使いたい人→ Windows がいい• ファイルを大量に利用し、しょっちゅう使っているのでコマンドもファイルも覚えてしまって、できるだ
け速く済ませたい人→ UNIX がいい
実際、私 (久野) は Windows はかったるくて使っていられない。UNIX でないと絶対に嫌。まあ皆様がそうじゃないことは了解しているが、ここでは一応 UNIX も習っているということなので、私の好みでよろしく。

1.2

Web ページの使いやすさとは?

Web ページにとって、使いやすさは重要だと思いますか?
• Web ページは見ためかっこよくてすてきならそれでよい。
• Web ページはかっこよいのは大切だけど使いやすさも重要だと思う。
じゃあ使いやすさって何?
あなたは、Web ページを見る時何を求めて見ていますか?

• 退屈だから何か面白い情報はないか何となく見ている。
• 学校の掲示、趣味関係の最新情報など、特定の「新しい情報」を求めて見ている。
• 何か分からないことがあってそれについて調べて説明を読むために見ている。
• 家電製品、本、音楽関係などで、「売られているものの情報 (カタログ) を調べて買うかどうか検討するために見ている。
• 企業訪問などに行くので、所在地とか連絡先とか地図などの情報を求めて見ている。
それぞれの読み手 (ユーザ) にとって、「自分の目的を効率よく達成させてくれる」ようなページが「使いやすいページ」。
先に述べたように、ユーザによって違うので「誰にとって使いやすいか」で作り方は変わって来る。しかし、ある特定サイトについて言えば、そこを訪れるのが「どんなユーザか」はある程度絞れる。それぞれのユーザにとってうまく使えるようにすれば「使いやすいサイト」になる。
しかしそもそも、そんなことを気にしないで「かっこいい」ページを作ればいいじゃないかって? それはアマチュア (趣味でページを作っている人) ならその通り。しかしプロだったら? たとえばあなたが作ったら2

1000PV/day(ページビュー/日)、 A さんが作ったら 10000PV/day だとしたら、あなたはクビになるか仕事が取れなくなるでしょうね。
では「情報の先生」だったら? もちろん、学校の評価が PV/day でなされるわけではない。ただ、生徒さんに「ユーザビリティの劣るページ」を作らせたままそれでイイと思っていたら痛い目にあいますよ、ちゃんと生徒にも上に書いてあるようなこと (使いやすさとは何か) を学んでもらってくださいね、ということ。

2

模擬授業
今回の模擬授業は「情報 C」p.86-87「効果的な情報のさがし方」です。先生役の人、よろしく。

3

Web とユーザビリティ(2)ではさっきの続きで、ユーザビリティの高い (使いやすい)Web ページとはどんなものか、具体的に考えてみよう。ユーザビリティの高い Web ページを作るためには、次のどれがいいと思う?

(a) 文字よりも画像の方がぱっと見て分かりやすいので画像をできるだけ多く使うのがよい。
(b) 飾り画像には情報がないので、ページの内容に有効な画像以外は一切使わない方がよい。
(c) 飾り画像も見た目のためにあってよいが、ページの内容にとって有効な画像が分からなくならないように調整して使う。
これはやっぱり (c) でしょうね。ページの目的を分からなくさせるようなことは避けるのがいちばん。

(a) 画像は大きいほど情報も多いので入手できる限りの大きくて詳細な画像を使うのがよい。
(b) 画像は最大でも典型的な PC 画面でスクロールせずに見られる大きさにとどめる (大きすぎたらその大きさになるように調整する)。
(c) 詳細な画像と軽さを両立させるために、小さい切手大の画像をリンクにして、そこをクリックすると大きい画像が見られるようにする。
これはまず (a) は×。重いだけでいいことがない。画像を見せることがメインなら (c) がよいが、あくまでページ内容が中心で、画像はその説明ということなら、画像が別になってしまうのはよくないから (b)。

(a) ページの背景を画像にすると文字が読めなくなるので、絶対やらない方がよい。
(b) ページの背景を画像にするのは、画像の大きさを気にせずにページに入れることができるので、よい方法である。
(c) 画像を薄い色に加工して文字が読めるようにすれば背景にしてもよい。
(b) は×だが、(c) もあまりよくはない。本当に薄くて「飾り」にしかしないのなら、その画像を入れる意味はどれくらいあるのか。まあやりたければやってもよい程度。 (a) がいちばん。文字の入らない場所の背景ならよい。
(a) 複数ページから成る Web プレゼンテーションを作る場合、基本的にすべてのページは同じ構成、同じ色づかいにそろえるのがよい。
(b) 複数ページから成る Web プレゼンテーションを作る場合、単調にならないために各ページの構成や色づかい等はページごとに変える方がよい。
Web の特徴はリンクによってすぐ別のサイトへも行けること。そのため、「まだ同じサイトにいるのかどうか」が分かるために、構成は揃えておくべき。だから (b) がよい。

3

(a) 画像には画像の説明を記したものも必ず付属させるのがよい。
(b) 画像は<img ...ておけばよい。

alt="説明">により説明を書いておけばその説明がポップアップするのでこれを書い(c) 画像は見て分かるので説明は必ずしも不要。
まず、(c) は一般には×だが、特に意味のない飾り画像ならこれでもよい。普通は (a) にする。 (b) は一見よさそうだけど、ページをプリントしたときに説明が印刷されないしマウスを上に持って行かないと見えない。
alt="説明"と文章と両方にするのがベスト。

(a) ページの大きさは PC 画面の大きさによってまちまちなので、大きさが変わっても大丈夫なようにページをデザインする。
(b) きっちりデザインするために画面サイズは想定して、ページに「このページは 1024x768 ピクセル用です」等と書いておく。
(c) 複数サイズのデザインを用意して入り口ページで選択できるようにしておく。
これは (a) にするべき。たとえ (c) でもサイズを想定してデザインするのは繁雑なわりにいいことがない。(b)はサイテー (それ以外の画面サイズの人は見てくれなくていい? それは傲慢すぎ)。

(a) 画像等を入れて重くなっても、ロード時間 10 秒までは許される。
(b) 同、5 秒までは許される。
(c) 1 秒しか許されない。
これは (c)。どうしても必要なら待つのかも知れないが、ライバルの多いサイト (検索とか商品情報とかショップ) だと「1 秒待って出なければよそへ行ってしまう」と言われている。それ以上掛かってもよそへ行かれないですむためには「処理中、あと○秒」といった表示をつけて進捗を知らせる。ともかく、ユーザは「きれい」より「速い」がずっと好き、ということは覚えておくこと。

(a) トップページ (入口ページ) の内容はスクロールが必要なほど多くしてはいけない。
(b) 色々な情報を入れてすぐ飛べるようにするため、ある程度多くてもよい。
(c) 情報は多くてもよいが、最初の 1 画面 (スクロールしないで見える範囲) 以外を見てもらえると期待してはいけない。
これは (c)。だから、トップページの下の方には「補助的な」情報を入れるようにして、必要な情報は先頭の部分だけで一覧できるようにする。入り切らないようならページを分ける。

(a) よいリンクのしかたは「ここ をクリック」みたいなの。
(b) よいリンクとは「NHK のページ を見てください」といった感じのもの。
(c) よいリンクとは「NHK のページ (http://www.nhk.or.jp/)」みたいなもの。
(a) は×。「ここ (here)」をリンクにするのは「here 症候群」と呼ばれてサイテー。クリックして新しいページが表示されるまでは何があるのか分からない。欲しいものじゃないと分かって戻るまでに何十秒も浪費させられる。(b) が最低線。プリントアウトしても必要な情報が残るのは (c) だけどちょっと長いかも。
(a) トップページ以外のページはトップページを通って来ることを前提として作成してよい。
(b) トップページ以外のページも直接そこにリンクされることがあるので、一通り前提なしの説明からはじめる。
(c) トップページ以外のページも「何のページか」は分かるタイトルにするが、あとは「トップへのリンク」が分かるようになっていればよい。
4

これは (c) が正解。検索エンジンとかは途中のページをばしばし見つけるので (a) はダメ。「直リン禁止」なんて無意味。

(a) 「フレーム機能」は「どのページ」というリンクが張れないのでサイテーな機能である。
(b) 「フレーム機能」は 1 つの画面内で色々な情報を提供できるすぐれた方法である。
フレームは作るのが難しいし (フレーム定義 HTML と、中身の「枠」ごとに別の HTML が必要)、間違えると色々不便なことが起きるし (たとえば別のページに行くつもりがフレームの中に閉じ込められてしまうとか)、「この情報」というリンクが張れないので、よくないとされている。だからユーザビリティ的には (a)。なので、このクラスではフレームの作り方は説明しない。見た目は CSS を使えばフレームと同等以上にかっこよくできる。

4

WWW とリンク/画像

4.1

リンクの作り方

ここまで HTML で色々やったけど、リンクは作って来なかった。別に知っている人は知っているけど、リンクを作るには次のタグを使う。

• <a href="リンク先">テキスト</a> — リンクを作る。「テキスト」の部分をクリックすると「リンク先」として指定した URL に表示が切り替わる。
• <a href="リンク先" target="名前">テキスト</a> — 上と同じだが、新しい窓ができてその窓に「リンク先」が表示される。ただし 2 回目からは新しい窓が開く代わりに、既に開いている「名前」に対応した窓の表示が切り替わる (特に名前として「 blank」を指定すると、常に新しい窓が開くようになる)。
「テキスト」をどのように指定するかは、先のユーザビリティのところもよく見て考えること (「ここ」をリンクにするのはやめよう!)。たとえば次のような感じで使える。

<p>私のよく見るテレビ局は<a href="http://www.nhk.or.jp/">NHK</a>と<a href="http://www.tbs.co.jp/">TBS</a>です。</p>このような、文章に埋め込んだリンクは文章を読みながら意味が分かるのでそれなりに使いやすい。
一覧的なもの (リンク集) は箇条書や表にするのがよい。

<h2>テレビ局のリンク集</h2><ul><li><a href="http://www.nhk.or.jp/">NHK</a></li><li><a href="http://www.tbs.co.jp/">TBS</a></li><li><a href="http://www.ntv.co.jp/">NTV</a></li></ul><table border="2"><tr><th>テレビ局のリンク</th></tr><tr><td><a href="http://www.nhk.or.jp/">NHK</a></td></tr><tr><td><a href="http://www.tbs.co.jp/">TBS</a></td></tr><tr><td><a href="http://www.ntv.co.jp/">NTV</a></td></tr></table>5

4.2

画像の利用方法

まず、画像は上と同様にリンクで指定することもできる。その場合、そのリンクを選択すると、ブラウザの窓の中がその画像の表示に切り替わる。また、target を指定して別窓で開かせることもできる。
画像単独で表示させるのではなく、画像を HTML で記述したページ中に埋め込むには次のタグを用いる。

• <img src="画像ファイル" alt="説明"> — ページに画像を埋め込む。
この場合、Web ページとしては画像とその他のものが一緒に見えるが、 HTML ファイル上では画像の「ありか」を指定しているだけ。なお、「画像ファイル」となっているが、実際には任意の URI を指定できる (もっともよその画像を指定することはあまりやらない方がよい)。あと、画像は段落の途中に埋め込むとあまり見やすくないから、前回やった float 指定などをつけてやるのがよい。そのためには、<div>...</div> で囲むのがやりやすい。たとえば次のような感じ。

<div class="center"><img src="jr_tokyo002.jpg" alt="東京駅"></div>
もちろん、CSS 指定でさらに枠などをつけてみてもよい。
あと、3 番目の画像の利用方法として、CSS で背景に画像を指定することができる。もっとも、写真などを背景に使うと文字が読めないので、通常は薄い模様などのついた背景用の「壁紙」を使う。CSS での指定方法
は次の通り。

• background-image:url(画像ファイル) — 背景画像を指定。

たとえば次のような感じ。

<style type="text/css">
body { background-image: url(ii0340.gif) }h1 { background-image: url(ii0342.gif) }...
</style>5HTML 教室5.1

演習用の素材屋さん

今回は画像をテーマに色々やるので、画像ファイルが必要だが、自分で取材に行っている暇はない。そこで素材屋さん (画像等を集めて公開しているサイト) を利用する。Web 上では「フリーの画像」と呼ばれるものが多数公開されているが、実は「ちょっといいものを使おうとしたり、外部に公開しようとするとお金を取る」ものが多かったり、本当にタダのものは「そんなのタダでも要らない」ようなものが多い。とりあえず今日は写真用には次のを使おう。

http://www.shihei.com/free01/
ここは作者が「加工したり各自のページで公開することを許諾」しているのでわりあい自由に使える。もう 1
つ、壁紙の素材屋さんは色々あるが、とりあえずここを使ってみる。

http://home.att.ne.jp/zeta/akira123/
いずれも、画像を手元に持って来てから使うこと。持って来る方法は次の通り。

(1) ブラウザの窓に画像を表示させる。
(2) 画像の上でマウスの「右ボタンを」クリックする。
6

(3) メニューが出るので「画像の保存」「Save Image As」を選ぶ。
(4) ファイル名は適宜変えてもよいしそのままでもよい。
(5) あとは上で説明したようにファイル名を指定して使う。
演習 1 上の 2 つの素材屋さんを訪れ、自分の演習ページを作るための風景写真を数枚、壁紙を数枚保存する(自分のディレクトリに!)。保存したものを確認するのは UNIX 上では「xv 画像ファイル名」でできる。
なお、画像が大きすぎるようなら「右ボタンクリック」で xv のコントロールパネルを出し、「Image size」メニューから「Half size」や「10% smaller」などを選んで小さくしから「Save」で保存し直してください (保存の時いろいろ聞かれるけど「OK」でよい)。

5.2
cp

リンクと画像の演習~kuno/work/image1.html なんとか.html

でコピーしてきて、次の演習をやりましょう。
演習 2 最初の「テレビ局」のところの見出しと文章を書き換えて、自分の好きなテーマにする。それに関連したサイトの URL をリンクするように直す。直したらページを表示し、ちゃんとリンクが働くことを確認する。
演習 3 その後の「未定.jpg」のところに持って来た画像を入れ、タイトルや説明の「未定」「説明」を書き換えて直す (3 箇所あるが、面倒なら全部同じでもよい)。
演習 4 冒頭の CSS 指定の「background-color: 色」のところを順次「background-image: url(ファイル)」に取り替えてみる。壁紙ファイルは演習 1 の素材屋さんから持って来たものを使う。
なお、サンプルの回答例をつけておきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Traisitional//EN"><html lang="ja"><head><title>Sample</title><style type="text/css">.center { text-align: center; margin-left: auto; margin-right: auto }.left { float: left }.right { float: right }hr { clear: both }body { background-image: url(ii0340.gif) }h2 { background-image: url(ii0342.gif); padding: 5mm }p { background-image: url(ii0624.gif); padding: 8mm }</style></head><body><h1>東京散歩</h1><h2>テレビ局</h2><p>散歩とはあまり関係ないですが、東京にはテレビ局が沢山あります。<a href="http://www.nhk.or.jp/">NHK</a>とか、<a href="http://www.tbs.co.jp/">TBS</a>とか。</p><h2>新宿</h2><div class="center"><img src="gyoen002.jpg" alt="新宿御園">

7</div><p>私が東京で好きなところは新宿御園です。ここには大温室や日本庭園やバラ園などがあっていろいろな植物が楽しめます。</p><hr><h2>新宿</h2><div class="left"><img src="gyoen002.jpg" alt="新宿御園"></div><p>私が東京で好きなところは新宿御園です。ここには大温室や日本庭園やバラ園などがあっていろいろな植物が楽しめます。</p><hr><h2>新宿</h2><div class="right"><img src="gyoen002.jpg" alt="新宿御園"></div><p>私が東京で好きなところは新宿御園です。ここには大温室や日本庭園やバラ園などがあっていろいろな植物が楽しめます。</p></body></html>A

冬休み課題について

第一学習社「情報 C」の序章を除く 1 章〜4 章の各節から好きな 1 節を選び、その節全体を通した指導構成案を作成する。またその各時限の授業案を作成する。必ずしも教科書の 1 項目 (2 ページ) が 1 時限 (50 分) に対応するとは限らないことに注意。授業案には全時間の 1/3 以上の実習が含まれていること。
次に、2 人以上でグループを組み、順番に 1 人が先生役、残りが生徒役となって各々1 時限 (50 分) の模擬授業を実施する。生徒は 2 人以上何人でもよい。この授業に出ていない「ゲスト」を入れることが望ましい。ゲストは学芸大の学生であれば誰でもよい。 2 人でグループを組む場合は最低 1 人のゲストが必須ということになる。
授業範囲にはできるだけ、実習が含まれていることが望ましい。生徒役は授業終了後に、いつも模擬授業で記入しているのと同じ評価票を記入し、先生役に渡す。その際、先生役が作成した授業案も見せてもらい、それに対するコメントを一緒に書くこと。評価票の用紙は配付済みだが、不足の場合はコピーして増やす。
レポートはすべて A4 版の紙を使用し、次のものがこの順番で含まれていること。

(1) 表紙。タイトル「情報科教育法 II 2003 年度 レポート」および提出日付、学籍番号、氏名のみを記入する。
(2) 概要。選択した節、および模擬授業実施箇所を明示し、なぜその箇所を選んだのか、どのような方針で指導案・授業案を作り、模擬授業を行ったかをひととおり解説する。
(3) 指導構成案。選択した節全体に渡るもの。形式は自由だが「情報科教育法」の第 7 章が参考になると思う。全体で何時限を使用し、各時限でどの部分を学ぶかが明確に分かることが必要である。
(4) 授業案。指導構成案に書かれている各時限それぞれについて、その時限の授業案を作る。形式はいつもHTML で提出してもらっているようなもの (細かいフォーマットは各自に任せる)。これまでの各週の課題で提出してもらった範囲と重なる場合でも、改めて書くこと。
(5) 模擬授業実施日時、実施場所、生徒役の学籍番号・氏名。
(6) 模擬授業を行った箇所について、配付した資料やプリント等があればそのコピー。
(7) 各生徒役に記入してもらった評価票 (コピー不可。原本)。
8

(8) 模擬授業に対する自分なりの評価・反省・考察。評価票に書かれたことに対するコメントがあればここで述べる。
(9) レポート全体として考察・感想・まとめ。
レポートは 1 月 14 日 (水) の授業時に提出すること。

9