23 学校のサイト(小学校~高等学校) | デザインってオモシロイ -MdN Design Interactive-


23 学校のサイト(小学校~高等学校)
制作・文=さわだえり


ユーザーを逃さないための3カ条
■学校のイメージカラーを見極め、色を多用しない
■音声読み上げソフトなどに対応したサイトづくり
■携帯で閲覧できるサイトを用意して活用させる




学校のカラー、イメージを検討する


学校のサイトは、生徒やその学校に進学を希望している子どもたちから、保護者である大人たちまで、幅広い年齢層のユーザーが訪れることが想定される。どんな年齢層の人が見ても、教育に対する方針、楽しい学校生活、活発な部活動などが明確に伝わるようにするとよい。

ベースカラーは、やはりもっとも視認性がある白を使用するのが好ましい。清楚・清潔というイメージをもたせることができ、どんな色とでも相性がよいので使いやすい。ほとんどの学校には校章や制服があり、それが学校のイメージカラーに沿っていることが多い。そのため、白をベースにその色を使ってデザインすることができれば、ユーザーに学校のイメージカラーを印象づけられる。

イメージカラーが特にない場合や、別の色を使用したい場合などは、子どもたちの教育・成長の場であることをふまえた色を使おう。たとえば青や緑などは、爽やか・落ち着き・信頼などのイメージをもたせることができ、学校のサイトのイメージには最適といえる。また小学校のサイトでは、オレンジなどのパワー・陽気・躍動感などのイメージをもたせるカラーを使用するのもよいし、女子校であれば、ピンクなどのかわいい、可憐な印象の色を使うのもよい【1】【2】。

黒や茶などのダークカラーの場合、厳格で引き締まったイメージをもたらすことができるものの、使い方によっては学校サイトにそぐわないイメージになってしまう恐れもある【3】。あまり多用せず、ポイント程度の使用にとどめよう【4】。

学校の雰囲気や活動に興味をもってもらう


学校のサイトを公開するにあたって、おもにどのようなユーザーにたくさん見てほしいか、どのような情報を知ってほしいかなど、サイトの大きな目的を考えてみよう。在学生にはもちろん、その学校に興味をもっている生徒やその保護者にもサイトを見てもらい、学校での教育や生活を知ってもらうことがいちばん大きな目的ではないだろうか。学校サイトのコンテンツを考える際には、まずその学校の大きな特長や目立った活動をピックアップし、どうやって効果的に見せるかを考慮しよう。

たとえばほかの学校にはない学部があるのであれば、その学部についてのページを大きく扱ったり、進学・進路先などを詳しく説明するなどすれば、ユーザーに他校との違いを印象づけられる【5】。

また、部活動の成績や、詳細な活動内容も学生には魅力的なコンテンツだ。その際、文章だけでなく、写真を使って大きく紹介すると心に残りやすい。動画を使って紹介するのもかなり効果的だ【6】。まずは、「この学校に通うとこんな楽しい学校生活が送れる」という印象をもってもらえるようなコンテンツづくりをしてみよう。

情報の頻繁な更新で再訪を促す


これは学校サイトだけのことではないが、サイトを訪れた人に古い情報ばかりを与えてしまわぬよう、なるべく細かい情報も、ブログや新着情報として更新することが望ましい。入試情報や進路・進学の情報など、重要な内容はサイト内で専用ページをつくり、新しい情報に書き換えるたびに、新着情報で知らせるという方法をとるとよい【7】。また学校内でのイベントの情報やリポート写真、部活動の大会などでの結果や活動内容はブログを活用してどんどん紹介しよう。頻繁に更新することによって、サイトの活発さだけでなく、学校自体の活発さもアピールできる。新しい情報を求めて再訪してもらえる可能性も高い。

外部の人も参加できるオープンキャンパスや、学校祭などのイベント情報も積極的に掲載すると、より効果的だ。さらに、在校生や保護者向けのコンテンツも充実させたい。授業や試験の情報から、年間のスケジュール、災害や病気などの緊急情報まで、校内で配布や掲示する情報をサイト上にも掲載すれば、学生間のサイトの認知度も上がっていく【8】。

ケータイサイトもコンテンツを充実させる


多くの世代にPCが普及しているとはいえ、若い世代は携帯端末で、サイトを閲覧することが多い。そこで、携帯端末でも見られるサイトをつくっておくことも効果的な方法だ【9】。PCで閲覧できるサイトよりも、見やすく簡潔になるようコンテンツを縮小しつつ、重要な情報やイベント、部活動や学校生活などのエンターテインメント性のある情報は充実させよう。写真も一緒に掲載するときはサイズや内容に注意したい【10】。また、在校生向けの情報や連絡事項を掲載するコンテンツもあれば、さらに活用度は高くなる【11】。

音声読み上げソフトにも対応させる


学校サイトはその学校の情報を求めてさまざまな人が訪れる。中には視力が弱かったり目の不自由な生徒や保護者も訪れることもある。テキストサイズを大きくしても、レイアウトが崩れないサイトづくりをすることは基本だが、視覚的なデザインだけでなく、音声読み上げソフトウエアでの閲覧にも問題がないサイトつくりも目指したい【12】。

まずは基本的なこととして、コンテンツの配置方法に気をつけるだけでなく、機種依存文字を使わない、タイトルやボタン、写真、イラストなどの画像に適切でわかりやすいalt属性を記述し、そのコンテンツがどんな内容であるかを明確に表すマークアップをすることが重要である。

さらに、レイアウトや表組みでテーブルを使用する際も、音声読み上げソフトが読み上げる順序に配慮しよう。音声読み上げソフトウエアには、見出しだけを拾って読む機能がある。コンテンツを組む際は、見出しと内容をしっかりと見極め、視覚的にも聴覚的にも迷わないサイトづくりを心がけたい。



【1】オレンジには快活で元気なイメージを与えられる



【2】淡いピンク色であれば、女性らしい可憐なイメージを与えられる



【3】黒背景は引き締まって見えるが、そのかわりに清潔感、爽やかさなどのイメージが失われる



【4】適当な色を多用してしまうと、まとまりがなく文章も読みづらくなる



【5】進学校や大学部のある学校では、進学先情報のコンテンツもあるとよい



【6】写真や動画で、視覚的に学校生活のイメージを伝えるほうが効果的だ



【7】新着情報で頻繁な更新を知らせれば、ユーザーの再訪につながる



【8】在校生向けのコンテンツを用意すれば、サイトの活用度がアップする



【9】携帯端末向けWebサイトでは文章や見出しなどをある程度簡潔にするとよい



【10】ブログでは写真なども掲載したい。ただし、サイズや内容には十分に気をつける必要がある



【11】在校生向け連絡板があると、情報が生徒にリアルタイムで伝えられる



【12】alt属性や見出しを正しくつけることで、音声ブラウザにも対応できる


[INDEX]
>>> 04 採用情報
>>> 19 支払い&送料
>>> 23 学校のサイト(小学校~高等学校)


twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

6.17-6.23

MdN BOOKS|デザインの本

Pick upコンテンツ

現在