東京都の公式サイトを開く前は、「行政のサイトって難しそう」と思っていました。でも実際に分析してみると、だれでも使えるようにする工夫の丁寧さに驚くことばかりでした。
はじめに
この記事でわかること
- 「防災・緊急情報」をいつも一番上に置いている理由
- 情報を伝えるサイトと、会員サービスのサイトを分けている作り
- 言葉の切り替えや読み上げなど、だれでも使えるための配慮
- 「全員向け」に作ることの難しさについて、私が考えたこと
結論
東京都公式サイトは、見た目の派手さより「だれもが必要な情報に早くたどり着けること」を大切にした行政のサイトです。防災情報をいつも決まった場所に置き、会員サービスは別のサイトに分けるなど、情報の優先順位の決め方が学べます。
サイトの基本情報
- サイト名：東京都公式サイト
- 業種：行政・公共サービス
- 目的：都民向けの情報提供・行政手続きの案内
- 基礎知識：東京都公式サイトは「tokyo.lg.jp」ドメインで運営される地方公共団体のサイトで、多言語翻訳や音声読み上げなど、アクセシビリティ（年齢や障害に関係なく、だれでも使えるようにする配慮）の機能を備えています。
「防災・緊急情報」はいつも一番上
サイトマップを見ると、「防災・緊急情報」が一番上の段に固定されていて、ふだんの手続きなどの情報とは別の枠で扱われていました。
災害のときだけ急に大事になる情報を、ふだんから迷わない場所に置いておく。都民が毎日使う手続きの情報と、緊急のときにだけ必要な情報では、扱い方を変えなければいけません。ふだんは目立たせすぎず、いざというときにすぐ見つかる。この両方を一つの画面で実現しているのが、行政サイトならではの工夫だと感じました。
色は「読みやすさ」のために使う
背景は白で、目立たせる色は最小限です。色は飾りのためではなく、情報の大切さを区別するために使われています。写真やアイコンも、雰囲気づくりより、内容を補うために置かれている印象でした。
情報のサイトと会員サービスのサイトを分ける
トップページでは大事な情報がまとめて置かれ、その下はカテゴリごとに整理されています。ページの上には主なカテゴリが並び、どのページからでも目的の場所へ戻れるようになっていました。サイト内の検索も、分かりやすい位置にあります。
面白いと思ったのは、「My TOKYO」という会員向けのサイトが、別のアドレス（my.metro.tokyo.lg.jp）で用意されていたことです。東京ポイント（PayPayやイオンフィナンシャルサービスと連携する行政のポイント制度）の管理など、一人ひとりに合わせた機能はこちらにまとめられています。
民間の通販サイトは、情報と会員機能を一つのサイトにまとめることが多いと思います。東京都は「みんなに同じ情報を届けるサイト」と「一人ひとりが使うサイト」を分けることで、どちらも分かりやすくしているのだと感じました。
だれでも使えるための配慮
- 文字の大きさの変更と、読みやすい行の間隔
- 色の差をはっきりさせた表示
- キーボードだけでの操作や、音声での読み上げへの対応
- 日本語以外の言葉への切り替え
スマホの画面に合わせた作りにもなっていて、縦に読み進めるだけで情報を追えます。
このサイトから取り入れたいこと
- いざというときの情報は、いつも同じ場所に置く：ふだんは目立たなくても、探す場所が決まっていれば迷いません。
- みんなへの情報と、一人ひとりの機能を分ける：役割の違うものを分けると、どちらも分かりやすくなります。
- だれでも使える配慮を、最初から入れておく：文字の大きさや色の差は、あとから足すより最初に決める方が簡単です。
自分のサイトでまねするなら、たとえばお店のサイトでも「臨時休業のお知らせ」を出す場所を最初から決めておくと、いざというときに慌てずにすみそうです。文字の大きさや色の差も、デザインを決める段階で確かめておくと、あとから大きく直さなくて済みます。
東京都公式サイトを見て、私が気づいたこと
このサイトから学んだこと
文字・アイコン・言葉の切り替えなど、幅広い利用者に配慮された作りが印象的でした。最新の情報が上のほうに整理されている点も分かりやすいと感じました。
自分ならこう作る
スライドの動く方向に違和感があったので、動きの向きはそろえた方が使いやすさが安定すると感じました。また、観光で訪れる人向けの入り口を足せば、東京の魅力がもっと伝わると思います。
「全員向け」の作りがいかに難しいか
東京都のサイトを分析して一番感じたのは、「だれでも使えるサイトを作ること」の難しさでした。乳幼児を育てている親も、高齢の方も、日本語が母語ではない方も、全員が使えるサイトを一つ作る。その幅の広さは、企業のサイトとは根本的に違うと感じました。
Webデザインの専門校で学んでいたとき、「対象をしぼるとデザインがしやすくなる」と教わったことがあります。でも行政のサイトはその反対で、しぼれないことが前提になっています。「しぼらずに作る」ことのほうが、実は難しいのかもしれないと思い始めました。
アクセシビリティは「特別な機能」じゃなかった
文字の大きさの変更や、色の差を強める表示、言葉の切り替え。最初はこれらを「特別な対応」だと思っていました。でも東京都のサイトでは、それが「あって当然のもの」として作られていて、むしろないほうが問題、という感覚が伝わってきました。
Webを学んでいると、アクセシビリティは後回しにしがちです。最初から作りに組み込む視点が大切なのだと、このサイトを見て考え方が変わりました。
※本記事はWebデザイン学習の一環として、実際の公開サイトを観察・分析した記録です。
同じ「行政・公共」のサイトとして、「No.025 名古屋市公式サイトのデザイン分析」も分析しています。見比べると、それぞれの工夫の違いがよく分かります。
この記事のまとめ
東京都公式サイトは、派手さはありませんが、だれもが必要な情報に早くたどり着けることを最優先にした行政のサイトです。防災・緊急情報をいつも一番上に置き、会員向けの機能は別のサイトに分け、文字の大きさや言葉の切り替えなどの配慮を最初から組み込んでいます。「全員向けに作る」ことの難しさと大切さを学べるサイトでした。
よくある質問（FAQ）
Q. 行政のサイトで、だれでも使えるための配慮はなぜ大切なのですか？
A. 高齢の方や障害のある方、日本語以外の言葉を使う方など、いろいろな人が使う必要があるからです。国内には JIS X 8341-3 という規格があり、行政のサイトにはこれに沿った対応が求められています。
Q. 「防災・緊急情報」をいつも一番上に置くのはなぜですか？
A. 災害のときに、だれでもすぐに見つけられるようにするためだと思います。ふだんから場所が決まっていれば、いざというときに探し回らずに済みます。
Q. 行政のサイトと民間のサイトの違いは何ですか？
A. 行政のサイトは「だれでも使えること」が最優先で、民間のサイトは「ブランドを伝えること」や「買ってもらうこと」が優先されることが多いと思います。実際の画面は東京都公式サイトで見られます。
