【第1話】デジタル庁のデザインシステムを読み解く｜アイコン編

この記事はDesiral編集部による独自の解釈や意見が含まれており、全てがデジタル庁の意図と合致しているとは限りません。あくまで個々のデザイナー視点で解釈してみたひとつの整理としてご拝読いただきますようお願いいたします。

日本中の期待を背負って2021年9月1日に発足した「デジタル庁」。日本人の文化や特徴を踏まえ、「誰一人取り残されない、人に優しいデジタル化を。」というキャッチコピーのもと、デジタル基盤や施策を支える様々な取り組みを行なってくれています。

そしてそのデジタル庁が注目された要素の一つとして、政策としてのサービスデザインをしっかり体系化しようとしていることが挙げられます。多くの人口を抱える日本において、すべての人を取り残さないためにも、デザインやアクセシビリティの観点で様々なルール作りがそこにはあるようです。

この連載企画第1回では、「デジタル庁のデザインシステムを読み解く」と題して、政策としてのデザインシステムとは一体なんなのかを分析してみたいと思います。

デジタル庁専用サイトで公開されている「デザインシステム」

デジタル庁では、「デザインシステム」と呼ばれる様々なガイドラインやアイコン等のデータアセットを公開してくれています。

2024年5月30日からは、デジタル庁の公式サイトから「デジタル庁デザインシステムβ版」のサブドメインにて閲覧が可能です。

出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/

デザインシステムとは？

まずデジタル庁のサイトを見て感じるのは、これまでの行政や自治体のシステムに比べ比較的シンプルで使いやすい構造に整理されていることです。余白が多く、誰にも嫌われにくいデザインにするため、クセのある配色やフォントは一切使われていません。

デザインシステムの定義については、デジタル庁が配布している「デジタル庁デザインシステム v1.4.3」のデザインシステム利用の手引きを見ると「あるべきデザインを一貫性を持ってユーザーに提供するための仕組み」であり、「使い勝手のいい行政サービスを効率よく構築するためのガイドライン、コード、テンプレート、コミュニティを提供します」と示されています。

出典：デジタル庁デザインシステムウェブサイト https://design.digital.go.jp/ およびデジタル庁Figma Community https://www.figma.com/@digitalagencyjp

ざっくり言うと「ルール作りをしておくから、それに則ってもらえれば素早く一定の品質を担保した行政サービスや公共サービスが作れるよ」といった感じです。

ただし、現状はこのデザインシステムに準拠することが絶対とされるのは、「デジタル庁システム」のみであり、共同プロジェクト型のシステムや各府省システムには推奨でとどめているようです。

同時に公開されているイラストレーション・アイコン素材

デザインシステムについて深掘りしようとするとかなり大変になってしまうので、今回はとっつきやすい部分として、一緒に公開されている「イラストレーション・アイコン素材」についてを読み解いていきます。

デジタル庁公式のフリー素材集

デジタル庁では、細かいデザインシステムの一部として誰でも無料で利用できる素材集を提供してくれています。素材アセットの利用については、商用利用も可能でクレジット表記も不要。

注意点としては、この素材を使ってあたかも政府や公共機関が作成したかのような表現をするのは誤解を生むためNGという部分くらいでしょうか。

素材集に関しては、Figmaでのデータと、zipファイルでのsvgアイコンがダウンロードできるようになっているようです。

出典：デジタル庁ウェブサイト https://www.digital.go.jp/policies/servicedesign/designsystem/Illustration_Icons

株式会社日本デザインセンターと設計したデザインアセット

デジタル庁が公開しているアイコンやイラストレーションの素材アセットは、調べてみると日本デザインセンターの「大黒デザイン研究室」が担当しているようです。

日本デザインセンター WORKS デジタル庁 デザインアセット

https://www.ndc.co.jp/works/digital-agencydesign-assets2023/

出典：デジタル庁ウェブサイト https://www.digital.go.jp/policies/servicedesign/designsystem/Illustration_Icons

専門的でわかりにくい手続きや行政全体でのコミュニケーション品質を高めることを目的として、汎用性を持たせつつ視覚的にもわかりやすいシンプルな表現に落とし込まれています。

線と塗りで様々なステータス変化などにも対応

配布されているアイコン素材は、機能を表現するシステムアイコンと、サービスやコンテンツを表現するサービスアイコンの2種類があり、線で表現されたアイコンのパターンと塗りで表現されたパターンが存在しています。

ボタンとして使用される際などは「アクティブ／非アクティブ」で使い分けができるように設計されているようです。

種類は全部で60個で、線と塗りのパターンを合わせて120個のsvgファイルがダウンロードできました。

マイナンバーカード関連を中心にしたアイコン群

デジタル庁のnoteによると、現在配布されているアイコン素材は、

• 行政手続の種類、中身を伝えるもの

• オンライン行政手続で頻出するマイナンバーカードの使い方を表すもの

• マイナンバーカードの申請方法の解説

など一部の利用シーンに絞って作成されていて、今後は意見を吸い上げた上で改善や拡充が進められる可能性もあるようです。

全体的に角があるようなオブジェクトであっても、一見丸みや柔らかさを感じるシェイプに整えられている印象を受けます。まさに「やさしいデジタル化」と銘打っているように、様々な行政手続きを「わかりやすい」「自分でもできそう」と思ってもらえることを主眼としたディテール設計のようです。

ピクトグラム発祥の日本ならではのアイコンアセット

このような横断的なアイコンを作成して使用するという取り組みは、海外ではどうなのか少し気になったので調べてみました。

国連経済社会局（UNDESA）が2年ごとに発表する世界電子政府ランキングというものがあり、これはデジタル政府の進捗度を比較するための一つの指標です。

2022年発表のデータでは、デンマークが1位、フィンランド、韓国が2位と3位に続きます。

出典：United Nation Department of Economic and Social Affairs “e-Government Survey 2022”

デンマークのデジタル庁におけるアイコンの使用

デンマークのデジタル庁のサイトは以下のようです。日本のデジタル庁と比べると文化の違いもあってかまた違った印象を受けます。

出典：デンマークデジタル庁サイト https://en.digst.dk/

日本におけるマイナンバー制度のようなデジタルID制度「MitID」や運転免許証、健康保険証のアプリ化等も実用化されているようです。

デンマークの運転免許証アプリ「kørekort-app」

デンマークのアイコン事情を見るために、提供しているアプリから運転免許証アプリを調べてみると、いくつかアイコンを発見できました。免許証なので車のアイコンが見受けられます。ただこれだけではなんとも比較のしようがなさそうなのでさらにみてみることに。

出典：デンマークデジタル庁サイト https://en.digst.dk/systems/driving-licence-app/

デンマークの健康保険証アプリ「sundhedskort-app」

こちらは健康保険証アプリ。ぱっと見アイコンのようなものは見受けられません。

出典：デンマークデジタル庁サイト https://en.digst.dk/systems/health-insurance-card-app/

何やら使い方のような動画を発見しましたが、イラストレーションはあれどアイコンのようなものはほとんど見受けられませんでした。

デンマークのデジタルポストアプリ

こちらはデンマークの公共機関からのデジタルポストにアクセスできるアプリ。こちらの画像ではいまいちアイコン事情はわかりませんが、デジタルポストに関する解説のページにアーキテクチャのアイコンが見られました。アイコン自体は色々と存在していそうですが、日本のものとはまた雰囲気が違いそうです。文化や感じ方の違いはあれど、世代を超えた柔らかさや親しみやすさのようなものはデジタル庁の方が個人的には好みです。

出典：デンマークデジタル庁サイト https://en.digst.dk/systems/digital-post-app/

柔らかでシンプルなアイコンは日本文化の表れ

2020東京オリンピックがでも話題となったピクトグラムは、日本が発祥という説もあるものです。先日のパリオリンピックのピクトグラムを見ても、日本のピクトグラムやアイコンは不要なものを削ぎ落として洗練された唯一無二のアイコンと言えるのかもしれません。

また、そこに込められた「誰一人取り残さない」という思いが、デジタル庁のデザインシステムのアイコンアセットにもしっかり現れているのではないかと感じます。

デジタル庁のアイコンは柔らかシンプルで素敵

月並みのまとめにはなりますが、デンマークのデジタル庁サイトも合わせて拝見してみて、改めて日本人としての感性と柔らかいアイコンの親和性を非常に感じることとなりました。

デンマークのデジタル分野も非常に進んでおり、学ぶところは多いと思うと同時に、背景にある歴史や文化を考えると日本のデジタル庁がやろうとしていることはこれまでにない大きな取り組みの一つなのかなと思います。

アイコンを配布してくれた上で無料でクレジット表記なしに使えるというのは便利ですし、開発やデザインの部分での効率化をはかるという面において、今後のデザインシステムのアップデートも楽しみにしています。

連載記事第2回まではしばらく気が向くまでお待ちください。

長文でしたがご拝読いただきありがとうございました。