資料室
　　　学校Webサイト作成ヒント集
スキルアップ情報活用研修会Webページコース
(2003/8/18･19)で作成したものの改訂版です。
LAST UPDATE 2005-09-17 13:20 　by kurochan©
※「９★リンク」に注釈追加････2004/11/9
※冒頭に改訂増補メモを追加････2005/9/17

【改訂増補メモ】
「学校webサイト作成ヒント集」もあれこれ改訂増補をしたいところ。クラブ活動の結果はマメに掲載したいところだし、日常の行事計画も丁寧に載せたい。給食がある学校なら日替わりの献立も載せよう。これらは保護者がもっとも関心をよせるコンテンツだ。従来から文書で配布してきた保護者への情報は多々あるし、図書室や保健室等からのたより、生徒指導や人権教育からの通信、育友会や同窓会関係の連絡や案内もサイトに載せられるものは多々あり、有意義でもある。高校なら中学生とその保護者への学校紹介は重要だ。また、進学先の学校や就職先企業以外にも、行事等で来校してもらう人々が学校サイトをチェックしてから来校される場合も多い。義務制なら校区の話題や歴史を取り上げることが、地域との連携につながる。生徒の写真や作品の掲載には慎重さが必要だが、生き生きとした学校生活を伝えるには恰好の材料だ。校歌のダウンロード音楽ファイルも準備したいところ。警報発令時の対応や、体育祭や遠足等が当日開催されるかどうかの速報も予告したうえで流すと、朝から電話の対応に忙殺されたり、何度かけても話し中の不快感を与えずにすむようになる。泊を伴う行事では、無事着いた・こんな活動をしたといった情報をできれば画像入りで現地から伝えたい。サイトの掲載内容は通常学校長に責任があるが、慎重な決裁と速報性確保の兼ねあいをどうするかも、サイト管理者と管理職とで呼吸を合わせておく必要がある。情報処理クラブがあるなら、いろんな機会に活躍の場を作ってやりたい。複数の教員が管理できるシステムとソフトを導入できればなおよい。などなど、改訂増補版を気長に期待しておいてくださいね。(日々雑感659、05/9/17)

はじめに

　Web作成・更新が日課のようになっているkurochanですが、普段は「Dreamweaver ４」というソフトを使うか、直接タグ打ちで作成しています。このページは、奈良県教育委員会の教員向け研修講座「スキルアップ情報活用研修会Webページコース」(2003/8/18･19)で作ったものを、改訂したものです。研修では「ホームページビルダー７」を使いましたが、このソフトはほとんど初心者ですので、僕も苦労しました。

　研修初日の講座で、Webサイト(ホームページ)を作るに当たってふまえておくべきことをいろいろと教わりました。

・著作権保護
・個人情報の保護
・デザインの一貫性
　　背景・ナビバー・タイトル・スタイル・レイアウトの一貫性
・作成情報
　　作成者とe-mailアドレス、最終更新日
　　Webアドレスを文字で記載
・データ量
・対応するブラウザ

　また２日目には、優れた実践発表も伺いました。そして、研修参加者が各自Webページ作成に取り組んだわけですが、僕は「kurochan資料室」を作りました。「教材研究」「ユーティリティー」等、いくつかのコンテンツを設置しましたが、それらのうち、「Web作成ヒント集」を改訂して、ここにアップすることにいたします。

　素人ながら、３年近くWeb作成に携わってきたものとして、おこがましくも、思いつくままに、僕のこだわりを何点かご提案したいと思います。すでに了解されている当然のことばかりかもしれませんけどね。

１★ページの重さ

　「トップページは５秒以内、他のページは10秒以内」などとアドバイスするWebデザイナーがいます。そうでないと閲覧者が去ってしまうというのです。学校Webサイトの場合、ある程度の目的意識を持って訪問する方も多いと思いますし、そういう人をターゲットにしたページでもいいのですが、やはりこの原則は守った方が良さそうです。アナログ回線のことを考えると、トップページは10Kb以内、他のページは30Kb以内ならまず安心でしょう。また、サイト名を画像表示する場合、読み込みに時間がかかるのもスマートではありませんね。それと、ワープロソフトの「WORD」や「一太郎」などでもWebページを作ることができますが、再編集用のタグが書き込まれてしまいます。特に｢WORD｣の場合はその量が膨大になるため、アップロードする際には、タグの整理をすべきですね。

２★レイアウト

　背景画像やロゴマークを統一することで、サイトの視覚的同一性を確保するほうが、訪問者に安心感を与えます。できれば、学校名(サイト名)は常に表示されるようにしましょう。
　フレーム非対応ブラウザへの配慮からフレームを嫌う方もおられますが、フレームは使い方次第では大変便利です。ただし、targetの指定を少しでも間違うと、とても見づらい表示になったりしますので、要注意です。
　また、少し難しくなりますが、各ページの共通部分は、テンプレート･スタイルシート･外部JavaScript等を導入すると、更新・アップロード作業も大変楽です。共通部分を別フレームに常時表示させるのも一方法です。

３★３クリックの原則

　Webページデザインの書籍などでは、よく、「３クリック以内で全てのページへ」と書かれています。各ページの重さ(容量)を考慮に入れた上、サイト内構成やサイト内リンクを工夫しましょう。情報量の多いサイトでは、無理があるのですが、それでも工夫は必要です。
　また、トップページはなるべくスクロールせずに閲覧できるようにしましょう。挨拶文やコンテンツ紹介等もすっきりさせた方が良い印象を与えると思います。

４★カウンター

　つけるつけないは、趣旨に応じてですが、つけるなら最初からつけておいた方が、気分はすっきりします。二重アクセスの可否も最初から一貫して設定しておく方が良いと思います。学校のサイトなどへは、宣伝無しの無料レンタルカウンターをお薦めします。無料アクセス解析カウンターも、サイト運営に役立ちますので、ご検討ください。カウンターページ(フレーム)以外への直接アクセスへの対応については、「９リンク」で述べます。

５★更新履歴・サイトマップ

　更新履歴は、サイトの更新記録にもなりますし、再訪問者へのサービスにもなります。サイト開設と同時にこのページを作成しましょう。またこのページから各ページにサイト内リンクをはる場合、フォルダ名変更やページ削除に気をつけるのは当然ですね。もちろん、Webサイトは頻繁に更新しなければ、訪問者は増えません。逆に、更新が滞りがちなサイトはハッカーの攻撃対象にされやすくなります。
　ページが増えてきたら、サイトマップを作ることも大切です。索引は必要に応じて作成しましょう。サイト内検索プログラムは少々難しいので、検索サイト(検索エンジン)のサービスを利用するといいでしよう。ただしその場合、最新メニューの登録に最大３ヶ月ほどかかることがあります。

６★Wat's New

　また、最近の更新が何なのかすぐにわかるように、トップページで、ピックアップして並べたり小窓を作ったりして紹介(リンク)しましょう。コンテンツメニューにや等の記号を付けると分かりやすいですね。

７★BGM

　いきなりBGMが鳴り出して慌てたことはありませんか？BGMは自動で鳴り出すのではなく、再生開始・停止ボタンで操作できるようにした上で、初期設定は停止にしておきましょう。校歌の著作権等についても確認しておきましょう。

８★検索サイト対策

　「Google」や「infoseek」等のロボット型検索サイトは定期的に指定ページのリンクを頼りに、各ページに適当なキーワードをつけて情報収集しています。検索されやすくするには適切なキーワードを多数登録してもらう必要があります。ロボット型検索サイト用のキーワード設定タグがあります。

<meta name="keywords" content="○×高校,○×高等学校,○×こうこう,○×こうとうがっこう,○×,まるぺけ">

といった記述をHTMLの冒頭にある<HEAD>～</HEAD>の間に書き込みましょう。
　また特定のファイルやフォルダを検索させないプログラムもあるんですが、長くなりますので、サンプルプログラム集や検索サイト内から見つけてくださいね。

９★リンク

　「リンクは自サイトの特定のフレーム内には開かない」と、講義の中でお話がありましたが、そんなサイトもままありますね。また、他のサイト内の特定のページにリンクを貼っているものも見受けられます。どちらも、マナーに反しますし、権利侵害にあたる場合もあり得ますので、厳に慎みましょう。
　初心者の方も凝っておられる方も同じくですが、Web作成はかなりの労力と時間がかかります。アイデアもテクニックも必要です。それらの成果をトップページのカウンターに託す方もいれば、掲示板の書き込み数に託す方もおられます。自分のページと他人のページの区別があいまいなのも、トップページ以外へリンクをはるのも失礼だと心得ましょう。もちろん「盗用」「盗作」は厳禁ですよ。

人権教育カレンダー

自己紹介

最新クイズ

　参考までに、僕の個人サイト内の途中のページにリンク訪問があった場合、フレーム構造のトップページを開いて、所定のフレームにその訪問ページを読み込むプログラムを作成しました。まだ改良の余地があるのですが、ご参考にしていただければ幸いです。
　また、公的機関のリンク先は組織・利害関係が絡んできますので、慎重に選定しましょう。
　※ポップアップ広告ウィンドウを拒否できるブラウザか普及し、別ウィンドウに所定のフレームセットを開く方法には問題が出てきましたので、僕の個人サイトでは、2004年11月からは、インラインでサイト名やカウンターを表示させる方法に改造しました。(日々雑感562)

10★ガイドライン

　学校Webサイトの場合には必ず作りましょう。ガイドラインをネット上で公開するか非公開にするかは各学校で決めればいいのですが、公開されている学校のWebページ管理ガイドラインはたくさんあるので、参考にしましょう。ただし、検索サイトで探す場合、こうしたページのタイトルは「Webガイドライン」であったり「ホームページ運営指針」であったり、様々ですので、いろいろなキーワードで探さないとなかなか見つからないかもしれません。kurochanの現任校でも、奈良県外教でも作成してありますが、一応非公開ですのでここでは紹介できないことをお詫びいたします。
　個人情報や著作権の保護については、僕が改めて述べるまでもないことですが、学校Webサイトとして特に注意すべきは、まず児童生徒や卒業生の個人情報を厳重に保護する必要があることです。「良かれと思って掲載した情報や画像が、悪意を持って利用される」例は、学校Webサイトに限らず、様々なサイトで報告・指摘されています。本人や保護者の同意を得ることは当然ですが、Webサイトを管理する側はより慎重に取り扱う必要があります。また、教材や新着図書などの画像も著作権に触れる場合がありますので、適正な手続きをふまえた上で、掲載してください。
　さらに、児童生徒や保護者のアクセス権を保障しようという取り組みもあります。学校のＰＣ室を開放することが必要になりますが、施設管理の点も含めて積極的に取り組みたいものです。

11★掲示板

　学校Webサイトの場合、不特定多数に公開された掲示板は避けるべきです。教育関係者や人権問題に関わる者をターゲットにした攻撃が、ネットの世界ではまま見受けられます。設置する場合は、厳重な管理が必要です。閲覧者・投稿者制限を加えた上、投稿時のメール通知システムもできれば設定したいものです。もちろん、公開チャットも避けましょう。「荒らし」への対応は相当神経をすり減らします。生徒や保護者または受験生からの問い合わせに掲示板を使うことも危険が多すぎます。ただし、メールで問い合わせるように記載した場合は、頻繁なメールの確認が必須です。尚、掲示板には、アダルト系サイトからの宣伝投稿がよく見られますが、そうした投稿を放置することは、掲示板管理者としてはもちろん、学校Webサイトの信用性にも関わりますので、ご注意ください。

12★お気に入り登録

　「お気に入り登録」のボタンを設置して、閲覧者に登録してもらいやすくしまょう。これは、トップページを正しいアドレスで登録してもらうための手法でもあります。ためしにすぐ上の画像をクリックしてみてください。ただし、これはInternet Explorer４以上でしか機能しませんので、ブラウザ判別プログラムとセットで記述するか、但し書きを添えるかしましょう。

13★印刷

　Webページを印刷すると、通常はディスプレイ通りには印刷されません。文字サイズや画像配置が変わってしまったり、レイアウト用に使った枠線無しのテーブルの枠が印刷されてしまうこともあります。「学校便り」などをプリントアウトしてもらう場合は、ワープロデータをダウンロードしてもらうか、PDFを使いましょう。「Acrobat Reader」などのソフトのダウンロードボタンを備えると親切ですね。

14★ツール・タグ

　たとえば、Internet Exploreの場合、ツールバーの「表示」→「ソース」をクリックするとサイトのソースを見ることができます(フレーム構造の場合は各フレームで右クリックします)。すると、相当無駄な記述がなされているページがまま見つかります。学校のサイトにも多いようです。無駄な記述を自動削除させるコマンドが各Web作成ツールにもあろうかと思いますが、直接タグを確認するとまだまだスリムにできる場合があります。できれば、HTMLの基本だけでも勉強すれば、こうしたスリム化の作業ができますし、市販のWebデザインのサンプルプログラム集を参考に様々な工夫を凝らしたページ作りができます。さらにJavaScriptやスタイルシートなども使えるようになると、さらに多彩な表現力を備えることができます。

15★ブラウザ対応

　特に学校Webサイトは、往年の卒業生や、ご年輩の保護者・親族の訪問も多く、中には、相当古いブラウザで閲覧される場合が想定されますし、そうした閲覧者を排除するわけにはいきません。フレーム非対応ブラウザやモノトーンブラウザへ対応しているか、HTMLタグやJavaScriptが、Internet ExplorerやNetscape Navigatorその他のＯＳに対応しているか、またＯＳの古いversionにも対応しているか、詳細に確認するべきです。Web作成ツールには、それらのチェックがある程度できるものもありますが、やはり、タグのリファレンスマニュアルで逐一確認することと、非対応の場合の処理プログラムをページに組み込みたいものです。とりあえずは、「このサイトの閲覧はＩＥ6.0以上を推奨します」等の但し書きを入れましょう。動作確認をした上で、表記のversionを下げていったりしましょう。

16★携帯サイト

　携帯電話の功罪は様々に指摘されていますが、携帯電話サイトを作るのも、パソコン用サイトと同様にできます。ただし、様々な制約があります。各ページの重さ(容量)は最大で10Kb。できれば５Kbまでにしましょう。また、機種によって文字装飾やテーブル表示などに違いがあります。携帯サイト作成関連の書籍等を購入して確認することも必要なのですが、新機種が続々と登場するので、あまり凝ったページは避ける方が無難です。むしろ、携帯専用のタグや記号があるので、それらを使って工夫しましょう。また、アイコン等はパソコン用と同様簡単に作れますが、画像は相当圧縮する必要がある上、専用ツールで上手に圧縮しないと見栄えのいいものはなかなか作れません。また容量制限と通信料のことを考えると、極力軽いものを作る必要があります。携帯用カウンターも広告無しの無料レンタルがありますので、いろいろと探してみてください。

17★裏サイト

　学校Webサイトに裏サイトが登場することがあります。表サイトは見せかけの姿だ！とばかりに、現職の教員や在校生が裏サイトであれこれと暴露・告発する例も見受けられます。大学浪人生などが、出身校以外を誹謗する例が奈良県内でも見られます。また、卒業生などが自主的・良心的にWebサイトを作ってくれる場合もありますが、そんなWebサイトの掲示板に中傷投稿があったりする例も、やはり奈良県内にあります。検索サイト等で、自校に関わる記述がネット上でどのようになされているかを常々調べるようにしましょう。kurochanも、勤務校の女子生徒の制服を売買する写真付きサイトを見つけて驚いたことがあります。
　また、裏サイトを使って、サイト管理者間でアップロードの事前協議をすることもできますが、ロボット型検索エンジンに無視してもらうためのプログラムを組み込んでおかないと、すべて筒抜けになってしまいますので注意してください。

と、エラそうに長々と書きましたが、僕もまだまだ初心者です。
それでもよろしければ、メール等で問い合わせていただければ、
僕の力の及ぶ範囲で、ご協力させていただきたいと思っております。
では、みなさん、ネット文化の豊かな未来を創造するために
ともにがんばりましょう。ありがとうございました。