2023年6月現在、マイナンバーカードのトラブルで何かと世間を賑わせているデジタル庁ですが、Qiitaのデジタル庁のサイトやばすぎるwwwがバズってたので、ちょっと見てみました。
デジタル庁が考えるデザインプロセスは今からウェブデザインを学ぶ人たちだけでなく現役のウェブデザイナーにもかなり有益な情報となっているので、ぜひ、目を通しておきましょう。
デジタル庁のウェブサイトがヤバい
デジタル庁のウェブサイトはこんな感じです。
構成は3カラムで1024pxのディスプレイに対応したシンプルな作りです。12カラムのグリッドシステムを採用していてモダンですね！
技術としてはNext.jsやReactといったJavaScriptのフレームワークが使われていて、WordPressではありません。
デジタル庁デザインシステム利用の手引き
デジタル庁がFigmaで公開しているデザインシステムの考え方は非常にリアルで、現状の根本的な問題が示されています。
各府省庁が個別に構築しているウェブサイトやサービス。デザインがバラバラで、ユーザーは構造や機能をその都度理解し、必要な情報にたどり着くのに時間がかかります。運営側も、開発や更新に手間のかかる状態となっています。
より分かりやすいシンプルなデザインを行うことで、開発者にも利用するユーザーにも優しくすることができるということですね。
できあがったものを改善していくことは大切ですが、そもそもの設計を明確にして、それに準じたウェブサイトやシステムにすることを目標としています。
また、サービスデザイン｜デジタル庁には政府が管理しているウェブサイトについても言及されています。
行政情報を提供するウェブサイトについて、現在は各府省が個別に整備・運用しているため、UI/UXに一貫性がなく、類似する情報が複数のウェブサイトに散在しているケースもあります。そこで、各府省のウェブサイトのデザインや情報の伝え方等の標準化・統一化を進めることで、あらゆる人が必要な情報に素早く辿り着き、簡単かつ正確に理解できるように改善します。
素晴らしいですね。
官公庁の現実
デジタル庁は2021年9月1日に設立された機関ですので、昔からある機関も参考にしながらデジタル庁以外ののウェブサイトも見てみましょう。キャプチャはいずれも2023年6月現在のものとなっています。
スポーツ庁
2015年10月1日に設立されたスポーツ庁のウェブサイトはこんな感じです。
上部にヘッダー、コンテンツ、フッターというシンプルな1カラム構成で、上部にあるslick.jsのスライダーを実装するためにjQueryを使っています。WordPressで良いような気がしますが、オリジナルのCMSを採用しているのだと思われます。
また、スポーツ庁 Web広報マガジン｜DEPORTARE（デポルターレ）にはTwitterやLINEといったサービスとの連携ができるウィジェット、アイコンにFont Awesomeを使っているのには好感が持てますね。
比較的新しい機関なので、デザインも新しさを感じます。
警察庁
1954年7月1日に設立された警察庁のウェブサイトはこんな感じです。
.topicsArea-box-list-link-inner-titleに文字がはみ出したときの指定がされてないため、.topicsArea-boxで指定しているフレックスボックスの良いところをぶっ壊しにかかってます。
こちらはスポーツ庁とは違って少し古いウェブサイトで、スライダーに使用しているのはSwiperというライブラリです。
CSSを見てみるとユニバーサルセレクタでリセットしているのも時代を感じますね。
* {
margin:0; /* 全ての要素をリセット */
padding:0; /* 全ての要素をリセット */
}
デジタル庁のデザインは無視されているので、いつか改善されると思います。
こども家庭庁
2023年4月1日に設立されたこども家庭庁のウェブサイトはこんな感じです。
トップページはシンプルかつ印象的な軽めの動画が使われています。Next.jsやReactなどJavaScriptを基本としたモダンなスタイルなのが特徴的です。
下層ページはデジタル庁のトップページと同じテンプレートを採用しているため、とてもシンプルで視認性の高いものになっています。
こども家庭庁のYouTubeチャンネルには、子供に寄り添った分かりやすい動画を配信することで、「少子化が非常にまずいので子供をマジ大切にしたい！」という内閣の意図が大人にも伝わってきますね。
さいごに
デジタル庁が発端となって行政機関の統括を行うことで、開発者にも国民にも優しいインターフェイスのシステムが提供されるという未来が予測できるので、楽しみに待っておきましょう。
また、官公庁のウェブサイトは下記から見ることができるので、「自分だったらこうするのになー」とデザインを考えてみるのも楽しいかもしれませんねー！
