この記事は、2014年にイギリスの自治体サイトを構築し、成功した事例です。

自治体サイトの成功事例を学ぼう！

ケンジントン・アンド・チェルシー王室特別区 (RBKC)のWeb担当者は、自治体のサイトを「自らが持っている情報（アーキテクチャ）をより幅多くのデバイスで閲覧できるデザインで実装したい。」と望んでいました。

イングランド南部にあるブライトン・アンド・ホヴの自治体で会議が行われ、実務に合うサイトづくりについて話し、イギリス・ブライトンにあるウェブコンサルタントファーム「Clearleft」にサービスの構築を依頼しました。

１年後、自治体のウェブサイトは大きな成功を遂げました。

成功の要因になっているのは、外見だけでなく、基本構造も一層されたことや、完全なレスポンシブ化が実現されました。その区の住人のニーズを最優先させ、何より、ウェブサイトを管理している100人以上の自治体関係者の作業を楽させました。

今後は他の部署から提供される情報もオンライン上で共有する新システム開発に重点を置き、引き続き「RBKC」との作業を続けていく予定ということです。

自治体サイト構築手法

では、具体的な構築手法を見ていきましょう。
以下は至ってオーソドックスなやり方かも知れません。しかし、ユーザー調査と自治体関係者との公開ワークショップを徹底的に行なったことが成功の鍵にもなっています。

1. 試験的システムの設計
2. 住民と自治体の専門家との公開ワークショップを含めた徹底的なユーザー調査（リサーチ）
3. 革新的な情報アーキテクチャデザイン
4. ユーザビリティテストのためのブラウザベースのプロトタイプ
5. レスポンシブウェブデザインの実装
6. デザイン方針、デザインマニュアル、ライター向けガイドライン、タイポグラフィーの特定

これらの手法をひとつひとつ見ていきましょう。

試験的システムの設計

どこの自治体のウェブサイトも、その地域の住人全員が利用するため、大量の情報とサービスを扱い、大規模になっています。

大規模なウェブサイトを一度に取り組むのは作業的に不可能なため、まずは自治体サイトの中で最もトラフィックが多く、政治力の強い「企画部」を選んで細かいデザイン変更を行うことにしました。私達は、このデザイン変更によって、大きな試験結果が得られると見ています。

企画部の新デザインをベータ版として一般公開し、問題の改善が少しでも見られた場合、徐々に他部署へ同デザインを適用していきました。

ユーザー調査（リサーチ）

次に、ユーザーがどんなサービスや情報を必要とし、それらのサービスや情報を得るために使うキーワードやメンタルモデルを知る必要がありました。

人々が使う「理解しやすい文章（英語）」を理解することで、英国政府や組織内のサポートチームが作成した形式ばった見出しや説明文がそれらとかなりかけ離れている事に気づきました。

これらのデータを使用して、地元住人グループを対象にしたワークショップを開催しました。ワークショップでの主な実習は「オープンカードソート」で、住人が自治体サイトの30ページをグループに分け、それらのグループにラベル（見出し）を付けていくというものです。

これと同じ課題を企画部のメンバーも行いましたが、住人との間で情報取得の際に大きな違いがあることがわかりました。このワークショップによって、人々が諦めてサイトから立ち去ってしまったり、代表電話をする前にいったい何を得ようとしていたかを知るのに大いに役立ちました。

さらにカスタマーサービスの部門から、ユーザーが抱えているサイト上の問題点を直接聞いているので解説してもらいました。

カスタマーサービス部の担当者は、サイトのヘビーユーザーでもあるので、彼らの協力を得ることで、今まで見つけることが困難だった重要な情報も得ることができました。

情報アーキテクチャ

自治体の各部署にはそれぞれ明確な役割がありますが、情報が部署間で重複していたり、並列している領域が多くあります。

古いサイトのナビゲーションでは、これらの部署間の結びつきが曖昧であったり、情報が抜けていたりする部分があったため、人々が求める情報を見つけることが出来ず、結果気づけば堂々巡りしているか、行き詰まっていることがありました。

新サイトは（従来の各部署別ではなく）サービス別でまとめられ、またトピックページを導入したことで、さまざまなサービスの関連コンテンツを１つのページにまとめることが可能になりました。

この変更により、サイトのコンテンツを編集または作成する際に総合参照をつけることもはるかに簡単になりました。結果、住民たちにも情報の見つけやすいサイトになったということです。

情報がぎっしり詰まったホワイトボードの空間を使い、私たちは「ハブ アンド スポーク・ナビゲーションシステム」を開発しました。

レスポンシブウェブデザインの実装

（新サイトの）プロトタイプをつくることが結果として、ナビゲーション構造をきちんとテストしたり、また既存コンテンツがどのように収まるのかを企画部にうまく説明出来る唯一の方法でした。

HTML、とCSS、JavaScript、PHPのバックエンドを使ってプロトタイプを構築しました。その結果として実際のコンテンツをページに流し込み、「建築許可書」 に関する検索といった機能性をテストすることができました。

視覚的デザイン言語をプロトタイプに適用し、基本的には、試験的サイトのデモ版をつくりました。このデモ版は、企画部チームにサイトがどうのように機能するのかを示す手助けとなっただけでなく、モバイル優先を強化したレスポンシブな振る舞いをの動き含め、「これは本物ではありません」、または「プロトタイプなので、それはどれもはっきりしない部分です」など説明する必要なく、私たちのユーザーテスト体験がより正確な結果をもたらすことを意味していました。

テスト参加者がそのことを考慮してしまうため、良い結果が得られないことが多いのです。

ユーザビリティテストで利用したプロトタイプ（Silverbackで録画）

数回にわたる打ち合わせと改良の結果、全員一致で新サイトの方向性に満足し、ベータ版の試験サイトを一般公開しました。
何千人ものユーザーが利用することで、新しいサイトの機能について組織内チームと住人の両方からフィードバックを得る機会ができました。

その結果は素晴らしく、テスト期間中に企画部のページに訪れたユーザーの満足度は50％も上昇しました。
その上、一つも苦情がなく、これは過去メジャーなサイト再設計では前例がないことでです。そして最重要視すべきことは、カスタマーサービスチームがサイトのナビゲーションについてクレーム対応することなく、もっと重大な問題について対処できることになったことです。

デザインマニュアル

ケンジントン・アンド・チェルシー王室特別区のためのデザインマニュアルを作成しました。これは、デザイン方針、ライティングガイド、アクセシビリティガイド、特定のフォーマットやテンプレートをいつ、どんな理由で使用すべきかを詳細に述べたものです。

業界では今日、スタイルガイドやパターンライブラリなどについて語られており、それらは実際、開発チームにサイトのUI要素を提供する非常に有力な方法になり得ますが、結局のところそれらをどう追加するかを説明しているのであって、「なぜ」、「また」、「いつ」であるかの説明はありません。

そこで、デザイン方針についてのマイクロサイトを作成しました。

実装と運用

企画部は新しいデザインをとても気に入り、心から受け入れてくれました。

私たちは一般ユーザーが情報やサービスをより簡単に見つけ出すための手助けをしただけでなく、企画部の業務を楽にすることができました。そしてどんな情報が公開されるべきか（あるいはどの情報が必要ないか）、また実際に公開されたサイトで何に着目しているかが明確になりました。

成功した企画部の試験的サイトはすぐに自治体全体に浸透しました。そして私たちは人々の役に立っただけでなく、各部署の業務を楽にしたのです。翌年、他部署は私たちが作成したデザインマニュアルを元に新サイトに彼ら独自のコンテンツを作り始めました。

ついに、2015年の始め、サイトのトップページにも同じ処理が施され、私たちがデザインした新しい外観や革命的な合理化のもとで稼働し始めました。
これは過去使ってきたウェブサイトの中でもっとも分かりやすく、トップクラスのクオリティであり、自分たちの仕事を誇らしく感じることができました。