Pages Navigation Menu

For Creative Communication

「全校統一様式」学校Webサイトの光と影(京都と静岡の事例から)

複数の学校で情報発信基盤を揃える「全校統一様式」。奇しくもその光と影を、実家で過ごした連休中に見て、色々と考えてしまいました。リニューアルから3年間で、着実な運用を続ける京都のケースと、今年4月のリニューアル後、情報にたどり着けさえしない静岡のケース。その違いを考察します(あほみたいに長文になりましたので、画像を眺めるだけでもどうぞ…)。

京都の小中学校サイト

実家で祖父母と遊ぶ娘をにこにこ眺めながら、思い出して小学校の学区を調べていたら、京都市の小学校は「どの小学校も同じような見た目のサイトで、しかもすごくしっかり更新をしている」ということに気が付きました。

▼修二小

Shu2

▼修学院中

Chugaku

上賀茂小

Kamikamo

室町小第9回全日本小学校ホームページ大賞 京都府代表校)

Muromachi

実は、京都市は2009年3月16日に、全市立学校・幼稚園のWebサイトを、「全校統一様式」にリニューアルしています。2012年3月16日付け、教育委員会のお知らせ記事「ホームページのリニューアルから3年」には、『この間,学校・幼稚園のホームページに,延べ1,290万回の閲覧をしていただきました。』とあり、情報発信のプラットフォームとしてしっかり機能してきたことが伺えます。また、市の「学校一覧」のページには、この「全校統一様式」にした意図について、「学校・幼稚園のホームページの考え方」と題して、明確な記載がありました。

京都市立学校・幼稚園のホームページは,保護者の皆さん及び地域の皆さんをはじめとするあらゆる利用者のニーズに沿った,迅速かつ豊富な学校情報の提供を行うとともに,だれにでも使いやすく分かりやすいホームページを目指し,次のような考え方に基づいて全校統一様式によるホームページを作成しています。(中略)

使いやすいホームページを目指します。(ユーザビリティへの配慮)

必要な情報が容易に入手できるように,利用する側の視点に立って,情報の探しやすさなど,ホームページの使いやすさ(ユーザビリティ)の向上に努めています。(中略)

だれもが同じように利用できるホームページを目指します。(アクセシビリティへの配慮)

障害の有無や年齢などに関係なく,だれもが同じように利用できる(アクセシブルな)ホームページづくりに努めます。

 

制作者の視点から細部を観察すると、これらのコンセプトが終始一貫して「仕様化」され、運用の軌道に乗っていることが観察できました。以下のようなことに気が付きました。

  • 写真をふんだんに使って、子どもたちの生活の様子を生き生きと伝える「ブログ」機能を中心に運用 ※見た目も少し前のSeesaaブログみたいですが…
  • 更新頻度が非常に高い。上に挙げた4校は「ほぼ毎日」、あるいは一日に複数回の更新をしている
  • 写真は幅420px・約30KB以下に自動リサイズされており、写真ばかりのトップページでも軽量
  • 「カテゴリー」を利用し、日常的なお知らせと、特定コンテキストのお知らせ(校長室から、保健室から等、あるいは学年区切りのエントリー)を区分している #カテゴリーの組み方は各校自由
  • 「年度」区切りで月別アーカイブが区切られており、季節ごとの活動変化が見やすい
  • 紙媒体の「おたより」をPDFで配布。プリントがなくてもデータで内容を確認できる
  • 気になる直近の行事予定をファーストビューに表示。 #ない学校もある
  • 左カラムは記事のナビゲーション、右カラムは行事予定・配布文書・基本情報等の公式情報と、明確な機能のゾーニングがなされている
  • 住所・連絡先は右カラム最下部に常時表示され、参照しやすい
  • 左カラム中央に「教育委員会からのお知らせ」が表示され、各校横串の情報発信場所として機能

Kyoto1

Kyoto2

Kyoto3

これら公立学校サイトのメインターゲットは、例えば小学校なら、「次の春から入学予定の、学区内に住む年長さんの父兄」「子どもがその学校に通っている親御さん」「その学校の学区内に引っ越しを検討している子持ちの夫婦」といったところでしょう。それを考えると、上に挙げたような仕様上の工夫は、全てサイト利用者にとってのユーザビリティに直結するものになっていると感じます。

うちの娘はまだ1歳なので、小学校入学は少し先の話ですが、遊んでいる風景(遊び場や設備、服装など)を眺めるだけでも、教育環境がわかって、非常に安心します。

静岡の高校サイト

一方、「基盤を同じシステムにした」だけで、かえって情報環境が(大幅に)悪化するケースもあります。

実家に帰って「母校のサイトが春から全県統一仕様でリニューアルしたらしい」と聞いて、さっそく母校のサイトにアクセスしてみました。

Bannan1

そもそも検索結果に公式サイトが表示されないのですが、裏技を使ってサイトを見てみました。

Bannan2

かなり崩れています。

Bannan3

不思議なURLルールです。(.nsfはIBM Lotus Notesのファイル名ですね)

静高浜北も…

Shizuko

Hamakita

県立高校職員の知人曰く、「HTMLタグを知らなくても誰でもページの更新ができるようになった」(よくあるWYSIWYGエディタ=Word風の記事編集画面の導入ですね)という効果があるそうですが、「IE以外正しく表示されない」「過去記事の移行はテキストと画像のコピペ」「メニューを入れる場所がない」「表示の崩れが直せない」等の弊害が起こっているということです。

ソースを見てみると、

Source

metaタグが皆無、Titleタグがbodyの下に来ている、DIVタグが大文字、空行を含む1行ごとにfontタグでフォント名を指定しているなど、相当無理のあるマークアップになっていることが伺えます(まあ、HTML4なので…)。一体何があったのでしょうか…(静岡県教育委員会事務局のサイトにも、本件に関係する情報開示は一見見当たりません。ちょっと問い合わせてみます)

考察:複数の組織でサイト基盤を揃える時に忘れてはいけないこと

日頃、CMSを利用した情報基盤の統合管理を行うことが多い仕事柄、今回の発見は改めて気を引き締めるきっかけになりました。

エディタをWYSIWYGにしても、コンテンツはついてこない

Wysiwyg

「誰でも更新できる」から情報発信体制が強化される、というのはCMS導入提案の売り文句のひとつですが、当然そう簡単には行きません。必要なのは『コンテンツ戦略』――どんな情報を・どのように出すのか、という方針が定まり、それが個々の運用者に周知徹底されていることだと思います。

京都の場合、表には見えませんが、「ホームページ担当者」への研修やトレーニング、日々の意識付けが相当激しく行われたことは想像にかたくありません(でなければ、小学校教諭の日常の激務の中で、一日複数回の更新など無理…!)。あるいは、簡単に投稿できるデバイスの配備(ケータイからの写真付きメール投稿とか?Eye-fiでデジカメ→PC同期?)や、業務分担・評価制度への連携もされているかもしれません。

こういった「運用設計」の部分は、組織や人に依存するケースバイケースのもので、体系化は遅れている分野ではないかと思います。ただ、コンテンツ戦略と運用が徹頭徹尾踏まえられていれば、CMSと仕様の力は存分に発揮されるということも実感できました。システム構築においては当たり前の話だとは思いますが…

サイトの目的とターゲットを決して見失わなければ…

学区によって自動的に行き先が決まる公立小学校に比べ、受験競争の中で熾烈な比較にさらされる公立高校のWebサイトの位置づけは格段に大きいはずです。マーケティングを通じた受験者の獲得、という経営目標を意識すれば、学校名で検索して公式サイトに辿りつけない、あるいはIE以外の端末でページ内容が読めない、といった状況が放置されるというのは、本当に異常な事態だと思います(仕様確認時、検収時に最低限確認するでしょうし、事態が判明した時点で即切り戻すべきだと思うのですが…)。

逆に、少し前時代的なデザインの「単機能」サイトでも、ユーザーの目的達成にシンプルに合致したサイトは、見ていて気持ちのいいものです。このシンプルさに常に立ち返れば、大きなサイト構築でも軸がぶれなくなると思います。

情報構造に沿ったWeb標準マークアップは常に正義

いまWeb屋稼業をしていて、一番役に立っていると感じるのは、2007年頃に学習した「Web標準」のXHTML/CSSの作法と、その根底にある考え方です(益子貴寛さんの講演や、『輪っか本』『ホップ本』等の各種書籍に大変お世話になりました)。

Web標準以来、HTML5でさらに強化されている考え方は、「セマンティクス」あるいは「見栄えと構造の分離」です。(X)HTMLには文書構造とコンテンツの内容を、CSSではコンテンツのスタイルを記述し、この2つを完全に分離することで「スタイルが分からなくても情報の中身にはアクセスできる」状態を担保します。この考え方を十分理解し、徹底して実装に落としこむことは簡単ではないようで、マークアップのプロに仕事をお願いしても、見た目を揃えるための不自然なdivタグが頻出するなど、品質がばらつくことがあります。

CMSなどのシステムやアプリケーションによって吐き出されるHTMLソースは、システムの制御用構造を含むため、静的に組むよりも構造が複雑になることはある程度不可避だと思います。しかし、だからこそ、ベースのマークアップを極力高品質(Simple and Elegant)にすることが非常に重要になると思います。WYSIWYGエディタでどれだけ本文モジュールのソースが汚れようとも、大元の構造がしっかりしていれば、サイトの基盤が揺るぐことはありません。

WordPressレベルでも、商用CMSでも、テンプレート開発は静的なHTMLファイルから始まります(サンプルファイルをコーディングし、見出しタグ、本文タグ、分岐、、などとテンプレートタグに置き換え登録する作業手順がおそらく一般的)。この「ベースマークアップ」は本当に妥協できないな、ということを強く感じています。構造さえマークアップで担保されていれば、情報にはアクセスできるのです。

最後に

昨年末、このブログのタグラインに「ウェブとコンテンツとコミュニティをまじめに考えるブログ」を掲げたわけですが、最近ようやくその辺の話が書けるようになってきました。『コンテンツ戦略』を基盤に、情報設計と運用設計に一本軸を通し、コーディングの細部まで妥協しないプロジェクトデザイン――。まだまだこれからですが、引き続き書いていきたいと思います。

ウェブとコンテンツとコミュニティをまじめに考えるブログ

コメントを残す