作成上のモットー

ユーザビリティとは、一言でいえば使いやすさのことです。つまり千秀小ホームページの使いやすさを追求することです。インターネットに慣れている人であれば、ホームページを訪れた際に、どこがリンクになっているか分かるのも早いですし、目的のページへ到達するのも早いです。しかしながらそういう人ばかりとは限りません。パソコン初心者の方でも、千秀小のホームページから見たい情報がえられるというのが理想です。

ユーザビリティというものにはいくつかの指標があります。リンクをたどって、ゴール(目的のページ)への導線がはっきりするようにナビゲーションがなされているか、情報の優先順位がつけられているか、情報の分類がなされているか、イメージ安全圏におさめられているか、などが挙げられます。千秀小のホームページは、それらに基づいて作成されているでしょうか？

ナビゲーション

十分とは言えませんが、サイトの階層構造にもとづき、ぱんくずリストなどを用いてナビゲーションを行うように努力しています。また、縦に長いページで上部にもどったり、特定の部分へジャンプできるようにページ内リンクをつける場合もあります。年間行事予定のページでは、各月へジャンプできるようにリンクがつけられています。しかしながら、あるページに対して様々なページからリンクが貼られている場合、リンク元へ戻るためのリンクを全てつけることはできていません。JavaScriptを使用したボタン(特定のページへのリンクではなく、１つ前のページに戻るという機能を利用)も場合によっては検討したいと思います。ブラウザの戻るボタンやBackSpaceキーなどもご利用ください。

情報の優先順位

情報の優先順位の高いものから上に並べるようにしています。また、コードにおいてもそのように配慮をしています(アクセシビリティに配慮するを参照)。複数ページにおいて重複する部分や、ニーズの低いものなどはページの脇や下部におくようにして、ニーズの高いものがすぐに表示されるように努力しています。過去トピックスや、児童作成のページでは、最新の記事が上部にくるように設計しております。

情報の分類

ユーザビリティを考える上で重要なのは、作成側の立場ではなく訪問者側の立場です。保護者の方が子どもの様子を見たいと思ったとき。あるいは地域の方が、地域行事に参加した後、その様子を見たいと思ったとき。子どもが自分のクラスの様子を親に紹介したいと思ったときなど様々なニーズが想定されます。作成側が見せたいという意図は、例えばメニューの部分の特集欄を変更したり、更新したことを知らせる表示をすることです。その他はトップページから迷うことなく目的のページへ、より早くたどり着けるように「学校」「子ども」「PTA・地域」「先生」というカテゴリに分類をしております。

イメージ安全圏

これは、千秀小のホームページを見てくださる方のパソコンやディスプレイの性能などに依存する問題です。最近では17インチ以上の液晶ディスプレイも普及してまいりました。そこで画面の解像度も大きくなり、1024×768ピクセルから1280×1024ピクセル程度でインターネットを見る方が多数派であることは確かです。しかし、まだ800×600ピクセル以下の解像度でご覧になる方も多くいらっしゃいます。インターネットでホームページをみるさい、私達は縦のスクロールには慣れており、それほどうっとうしさを覚えませんが、横スクロールに関しては非常に煩わしいものです。なぜならばほとんどのページが横書きで作成されているからです。

作成者のパソコンが新しいもので、そのことに配慮していないと、横幅を800ピクセル以上で作成してしまうことがあります。千秀小のホームページではそのようなことがないように、メニューの幅を150ピクセル、コンテンツ部分の幅をを600ピクセルとして、合計が750ピクセル程度になるように作成しております。800ピクセルギリギリまで使わない理由は、スクロールバーの表示などによってわずかに横スクロールができるおそれがあるためです。もちろん、解像度の高いものを使われている方でも、全画面でインターネットを見るという人ばかりではないので、イメージ安全圏を意識することは重要であると思います。CSSを利用したリキッドデザインについては、フレームを使用しているという致命的な問題と、作成者の技術力の問題で、取り入れるつもりは現段階ではありません。

以上のことが、今のところのユーザビリティへの意識ですが、そもそも作成側には先入観というものが働くので、作成者だけでユーザビリティを高めることは困難だとされています。一番は、やはり千秀小のホームページを見てくださる方からのフィードバックです。これからも見やすい、使いやすいサイトとなるように、ご意見やご感想をくださいますよう、よろしくお願いいたします。

アクセシビリティという言葉を耳にされたことはありますか？最近ではずいぶんとこの言葉が使われるようになりましたが、決して流行りとしてうたっているわけではありません。Webアクセシビリティとは、「情報バリアフリー」とも意訳されるもので、障害者や高齢者でも同じように情報にアクセスができるようにすることを言います。Webというものは一つのメディアとして確立していますので、必要とする人がきちんと情報を得られるようにするというのは、社会的責任であるともいえます。たとえば、アメリカではきちんと法律としてアクセシビリティが決められており、公的機関のホームページにおいては、その法律にのっとらなければならないとされています。日本は法律はありませんが、2004年6月にJIS規格化されました(JIS　X8341-3)。各省庁のページなどでは、JIS規格にのっとるよう、リニューアルに取り組んでいます。

Webアクセシビリティを考えた際に一番先に連想されるのが視覚障害なのですが、視覚障害者にはスクリーンリーダーなど音声ブラウザというものがあります。ですから、音声ブラウザでも同等の情報が得られるように作成するということは、はっきり言ってしまえば当然のことなのです。千秀小学校のホームページでは、アクセシビリティに配慮したページ作りに取り組んでおります。残念ながら完全ではないのですが、新規に作成するページは気をつけて作成しております。

背景

居住地交流として視覚障害のある子が千秀小にきてくれるということがあり、子ども達も視覚障害への関心が高まりました。子どもが総合的な学習の時間を利用して、校内に点字案内を設置する活動をして、それに寄り添った教師も感化されたというのが始まりです。全ての人に千秀小を好きになってもらいたい、そんな思いを込めて作成しております。

代替テキスト

画像のAltを、タイトルやヘルプチップのように使っている作成者が多くいます。これはインターネットエクスプローラー(以下IE)がそのような振る舞いをしてしまうからなのですが、本来の用途は画像が表示されない場合に代わりに表示するテキストです。例えば、ひまわりの画像を表示して、となりに「この花のよいところは大きな黄色い花びらと、食べられる種です」という文章を書いたとします。普通に表示できる人にはなんてことはなく、うんうんとうなずくと思いますが、ひまわりの画像に代替テキストが設定されていなければ、画像が表示されない環境では、なぞなぞになってしまいます。この場合ならば代替テキストには「ひまわり」と入れておく配慮をします。千秀小では、あまりそのような構成はありません。タイトルはタイトルでついていますし、文章だけで意味が通るように作成しています。なので、多くの画像にはAltは空であると設定しています。

配色

カラーバランスは非常に難しいものです。専門的な知識がなければ、十分な表現力はえられないと感じますが、最低限のできることはしようと思っています。たとえば視認性の低い色はつかわない、「赤の部分をクリック」等、色でナビゲートをしない、といったことに気をつけています。今後はカラードクターなどを利用しながら、色覚障害にも対応できるように努力をしたいと思います。

文字サイズ

文字サイズは、小さすぎないように配慮しているほか、ユーザーがサイズを変更できるようにem単位を使うようにしています。十分な大きさの文字に関してはピクセルで指定することもあります。IEであれば、表示のところから文字サイズを最小・小・中・大・最大と選べるようになっています。そのほかのモダンブラウザではもっと容易に文字サイズを大きくしたり小さくしたりできます。

機種依存文字を使用しない

機種依存文字とは、ウィンドウズやマック、携帯端末などで独自に組まれている文字のことで、他の機種では文字化けをしてしまいます。当然ですが、意味が通じなくなります。これは常識ともいえますが、学校の文書では指導案などで丸付き数字を使う機会も多く、その勢いでホームページにも機種依存文字を使用してしまうところが多く見受けられます。千秀小のホームページでは分かる範囲で気をつけていますが、完全とはいえません。文字化けをおこしていましたら、ご報告お願いいたします。

フレーム

フレームとは、１つのページに複数のページを読み込む技術のことを言うのですが、作成側ではフレームを使用することで非常に楽になります。たとえば行事のページを作る際に、いちいち毎回重複するメニュー部分をつくる必要がないからです。しかしながら、アクセシビリティという観点では、致命的なものとなります。

これは、アクセシビリティの一つとも言えますね。ブラウザのシェアは近年変化が見られ、IEのシェアも95%あったものが80%程度になっています。FirefoxやMac Safariを使っていらっしゃる方も増えてきています。

日本や世界のブラウザシェアが一概に千秀小学校HPを閲覧する方にあてはまるわけではありません。千秀小学校HPをご覧下さる方の使われているブラウザはIEが87.5％、Firefoxが6％、Safariが5％、続いて1%以下にGoogle Chrome、Operaとなっています（2008年11月調べ）。

今では、ブラウザに依存しないように標準規格化されたものがあります。もちろんこれも法律などではなく、これ以外は標準ではないと弾劾するものではないのですが、千秀小のホームページでは、構造と見栄えを分化したページ作りをしております。IEで普通にご覧になる分には、ホームページの構造などというものに関心がいくことはないのですが、実は大きな違いがあるのです。

XHTML(Extensible Hyper Text Markup Language)

ホームページを作ったことのない方でも、ホームページはHTML(Hyper Text Markup Languageの略)というタグ言語で書かれていると聞いたことがあるかもしれません。この言語自体もそもそもは標準規格であったのですが、ブラウザごとに独自の拡張タグを開発していき、混乱をまねきました。例えば、ネットスケープでは文字を点滅させるタグがありますが、IEではありません。IEには文字にグローをかけるタグがありますが、ネットスケープにはありません。また、HTMLでは文章に装飾をつけるタグも開発され、サポートされてきました。そのようなことがどんどん進むにつれて、ホームページを構成するコードが乱雑になってきたのです。

そのような流れから、構造と見栄えを分けて、HTMLには文書構造のみを記述して、見栄えは他のファイルを作り、それを読み込ませようということになったわけです。そこで規格化されたのがXHTMLなのです。XHTMLはXMLベースの言語で、HTMLとそっくりですが実は全くの別物です。XHTMLには文を中央揃えさせるcenterタグや、文字の装飾に使うfontタグなどはサポートされていません。今まで適当に文章を書いて、それに装飾をしてきましたが、XHTMLでは全てに意味のあるタグをつけるようになります。もちろんHTMLでも本来はそうであったのですが。例えば見出しには見出しのタグ、段落には段落のタグ、リストにはリストのタグを使うようになります。これにより、非常にすっきりとして、分かりやすいコードになります。子どもに作文指導をするときを思い返せば当たり前のことですよね。

CSS（Cascading Style Sheet）

装飾をあつかう言語としてCSSができました。ページ内の全ての装飾に関わる部分をこのCSSで行います。CSSのよい面は、一つのファイルとして保存でき、それを読み込む形でつかうことで、HTMLのソースをすっきりできること。それだけではなく、JavaScriptと同様に、複数ページで流用がきくということ。そして、読み込み形式にしておくことで、一度表示させたページのCSSは訪問者のパソコンのキャッシュに入るため、次回からの表示が高速化されることなどがあります。これを手書きするのは容易ではないのですが、フリーソフトでもCSSを書けるものがあります。若干、ブラウザでの解釈の違いがあり、このせいで敬遠されることもあるのですが、アクセシビリティには有効なものです。

というわけで、千秀小ホームページではXHTML＋CSSでのページ作りに取り組んでいます。どのブラウザでも情報にきちんとアクセスできるように努力しております。