「ちがいを ちからに 変える街。渋谷区」を未来像に掲げる渋谷区は、その一環として2023年3月に、渋谷区公式Webサイト「渋谷区ポータル」をリニューアルした。誰一人取り残さないWebサイトを目指して一新された同サイトは、そのコンセプトやデザイン性が評価され、2023年度グッドデザイン賞^※1を受賞。「グッドデザイン・ベスト100」にも選出されている。そこで、渋谷区ポータルのリニューアルプロジェクトを担当した、広報コミュニケーション課DX^※2推進主査の安東直美氏に、リニューアルに際して意識したポイントや、モリサワ「UD新ゴ コンデンス90」を採用した理由、そして、ユニバーサルデザインフォント（以下、UDフォント）への考え方などについて話を伺った。

今回のリニューアルに際して渋谷区が注視していたのは、スマートフォンユーザーの増加だと安東氏は言う。「情報入手の方法がPCからスマートフォンに移行するなかで、区民の皆様はどのように情報を得ているのか。その変化に合わせて、渋谷区ポータルの利便性を向上させること、情報発信を強化していくことが目的の一つにありました。そこで今回のリニューアルでは、スマートフォンのアプリのような使用感を目指しました」。

渋谷区ポータルには、これまでにもスマートフォンユーザーの増加を意識した改良が重ねられてきた。実際に、前回のリニューアルが行われた2018年の時点で、すでにレスポンシブデザインが採用されている。今回のリニューアルでは、さらにスマートフォンでの利用増加を想定し、アプリのような使用感を実現した。しかし、高齢者のスマートフォン利用率を考慮すると、渋谷区ポータルのようなリニューアルに踏み切れない自治体もあるのではないだろうか。

「高齢者の方のスマートフォン利用率の増加を示す総務省の調査なども出ていたので、スマートフォンを意識した情報発信は今後ますます重要になるだろうと考えていました」と安東氏。“まずはスマートフォンで調べる”という動きが当たり前になってきた現代では、行政サービスの検索も例外ではない。「自治体のWebサイトは、区民の皆様との重要な接点の一つです。そのため、『渋谷区ポータルはオンライン上の行政窓口』という意識を強くもってリニューアルに取り組みました」。

もともと渋谷区は早くからDX化に注力してきた自治体であり、目指す姿として「誰も来ない庁舎」を掲げてきた。これは、庁舎に訪れることなくオンライン上で行政サービスを受けられることを表したものだ。その理由を安東氏は、「インターネット上で手続きが完結できるものは、そこで完結させるようにする。来庁が不要になることで時間を選ばず手続きができるようになり、行政サービスの利便性が向上します」と説明する。

そうした構想が進むなかでコロナ禍が重なり、DX化をさらに加速させる必要があるという機運が高まった。区民にとっても意識変革のきっかけとなり、DX化が受け入れられやすい土壌ができたのではないかと安東氏は分析する。

「誰も来ない庁舎」という構想のもと、渋谷区ポータルのリニューアルの方向性は「マルチインデックス型オウンドメディア」に定めたという。つまり、サイト訪問者が必要な情報へスムーズにたどり着き、行政サービスを受けられることを目指している。これについて安東氏は「例えば、ごみの出し方を調べたいとき。昨今では、自治体のWebサイトに直接行って調べるだけではなく、検索ツールやSNSといったさまざまなメディアを通じてWebサイトにやってくることも考えられます。そのため、どこから渋谷区ポータルに来ても、調べたい情報にスムーズにたどり着けるような動線を意識しました」と解説する。

またその方向性に併せて、課題視されていたサイトツリーも見直したと安東氏は言う。「組織割のサイトツリーになっており、利用者が情報を探しにくいという課題を抱えていました。そこでリニューアルの機会にサイトツリーを見直して、利用シーンに応じて情報を得やすいように組み直したり、サイトツリーから外れているものを紐付け直したりしました」。

さらに渋谷区は、渋谷区ポータルのリニューアルと並行して、さまざまな行政手続きをオンライン上で行えるシステムの導入や個々人に合わせた情報を提供するパーソナライズドサイト「渋谷マイポータル」をローンチ。部署を超えて連携し、オンラインサービスの利便性向上に取り組んだ。

「さまざまな経緯を経て決まった物事があるので、部署を超えた連携には大変なこともありました。また、デジタルでできること、できないことがあるなかで、制度を優先するのか、それとも制度をシステムに合わせていくのかは、どの自治体でも苦労されていると思います。ただ『区民の方により良いサービスを』という思いはどの職員も同じなので、大いに議論しながら進めました」と安東氏は振り返る。顧客目線に立ったWebサイトづくり。渋谷区ポータルの背景にある思いは、民間企業のサービスサイトにも通ずるところがある。

そのためデザインや機能に関しても、細やかな調整が行われている。「スマートフォンユーザーを意識して、シンプルで直感的なデザインを重視しました。色についても、さまざまな方が利用されることを考慮して、白・黒・グレーを基調に、ニュートラルで公共施設的な印象を意識しています。また機能面では自動翻訳機能の言語数を大幅に増加させ、『やさしい日本語』にも対応しています」。

ユーザーファーストの視点からさまざまな工夫が凝らされた渋谷区ポータルのリニューアルは、2023年3月に完成を迎えた。公開後の反響について安東氏は「特に使いやすさ、見やすさにご好評をいただいています。また、スマートフォンでの読みやすさを意識して採用したモリサワさんのコンデンス書体^※3についても、多くの方にとって新しいトピックになったのではないかと思います」と話した。「誰も来ない庁舎」というコンセプトから発想された優れたデザイン。その設計思想は高く評価され、渋谷区ポータルは「2023年度グッドデザイン賞」を受賞し、「グッドデザイン・ベスト100」にも選出されている。

渋谷区ポータルに採用された「UD新ゴ コンデンス90」の選定理由について、安東氏は「視認性が高く、読みやすさに優れているところが決め手になりました。また、スマートフォンはPCと違って文字数が少なく表示されてしまいます。そこで、コンデンス書体を用いることで、読みやすさを保ちつつ、少しでも表示できる文字数を確保できるようにしました」と語った。

モリサワのWebフォントはレスポンシブ対応のため、例えばスマートフォン向けにコンデンス書体、PC向けに別の書体といった設定も可能だ。フォント選定にあたっては、そういった選択もあったのだろうか。「今回はスマートフォン優先で決めました。Webサイト全体で見ると約7割の方がスマートフォンからご覧になっています。お仕事の関係で調べられる場合はPCでご覧になることが多いと思いますが、一般区民の方はほぼスマートフォンからの閲覧だと推測しました。そのため、まずはスマートフォンでどう見えるか、次にPCでどう見えるかを判断していきました」。

見やすさ、読みやすさに徹底してこだわる渋谷区は、視認性・可読性に優れるUDフォントに対する意識も高い。実際に渋谷区ポータルには、UDフォントが一般的にそこまで認知されていなかった2016年から、モリサワのUDフォントが採用されている。

「誰にとっても見やすいWebサイトという考え方が一貫してあります。今回のリニューアルにおいてもその考えはぶれることなく、当初からUDフォントの使用は決めていました。近年ではUDフォントという言葉を耳にすることも増えましたが、UDフォントといえばモリサワさんが先行しているという印象がありました」

フォント選びの一方で、渋谷区ポータルにWebフォントを実装する際に意識したことを尋ねると、「視認性と可読性を最優先に考えました。特にフォントサイズや行間の調整、余白の取り方、そして色のコントラストには注意を払って読みやすさを意識しています」と安東氏。そのうえで「Webフォントの表示速度の最適化にも気を配りました。キャッシュの扱いをどのようにするかを含めて表示速度の短縮は必要だと思うので、今回からホスティング利用^※4に切り替えて使用しています」と答えた。

また渋谷区で運営するその他のWebサイトについても、「すでに渋谷マイポータルや図書館のWebサイトにはWebフォントを使用していますし、今後もさまざまなWebサイトに活用していきたいと考えています」と語った。

近年ではインターネットを使った情報検索は暮らしに欠かせないものとなり、Webサイトは重要な情報源の一つとなっている。そこで、利用者の年齢や障害の有無、利用環境にかかわらず、誰もがWebサイト上の情報やサービスを利用できること、またその到達度を示す「Webアクセシビリティ」が求められている。それにおいて渋谷区ポータルは、「JIS X 8341-3:2016^※5 適合レベルAA に準拠^※6」している。

「どんな方でも情報が取れるように、文字の大きさ、色などにこだわりながら、音声読み上げ機能なども精査しました。特に障害のある方や高齢者の方が使いやすいように、アクセシビリティオーバーレイのツールを導入することで、より見やすくより使いやすいWebサイトにしています。また、今後もWebアクセシビリティの基準は変化していくと思うので、そこに対応できるようなカラーコンテクストを作成しました」

とはいえ、デザインとの両立は難しい場面もある。「Webアクセシビリティのガイドラインに則ることは当然ですが、それだけでは利用者の方の利便性とデザイン性を実現できない場合があります。それらを両立できるバランスにはこだわりました」と安東氏は言う。

そうした一つひとつの積み重ねによって、渋谷区ポータルは単に情報が見やすく行政手続きがしやすいだけではなく、“渋谷らしさ”も感じられるWebサイトになっている。

「例えばファーストビューのアイコンに使われているピクトグラムは、公共性を保ちながらも、さまざまな色を用いて渋谷の多様性を表現しています。また、グレーのニュアンスについても、アクセシビリティ的なコントラストに配慮しながら、洗練された印象になるようにこだわっています。行政サービスとしてのあり方だけではなく、渋谷という街らしさも表現できるように意識しました」

「ちがいを ちからに 変える街。渋谷区」という未来像に向けて、先進的な取り組みを続ける渋谷区。誰一人取り残さないWebサイトを目指した渋谷区ポータルは今後、DX推進が求められる自治体Webサイトにおいて、一つのモデルケースになっていくだろう。