その辺の参考書よりもデザインの参考になる「デジタル庁のデザインシステム」が公開中。

こんつくしー。

先日、デジタル庁のサイトにアプリ・ウェブサイトのデザインをまとめた「デザインシステム」なる資料を発見。
さっそく中見したところ、その辺の参考書よりも参考になったのでご紹介。

ウェブサイト・アプリデザインの指針まとめた「デジタル庁のデザインシステム」

デジタル庁公開の「デザインシステム」イメージ(https://www.digital.go.jp/policies/servicedesign/designsystem/)

デジタル庁からのメッセージ

今回のように「デザインシステム」なるガイドラインが公開されたのは以下のような目的があるようです。

■ デザインと開発を効率化し、利用者の課題解決に集中する
■ 大規模なサービスで素早く改善サイクルを回す
■ 一貫性を担保し、行政サービスを使いやすくする
■ 開発チームの円滑なコミュニケーション

デジタル庁:デザインシステム・構築と推進の目的
(https://www.digital.go.jp/policies/servicedesign/designsystem/)

こういった効率化共通化を行うことで、利用者の課題の理解やサービスの改善のための時間を増やすことがデザインシステムの目的とのことです。
一般的なサイトではなく、省庁や市政のアプリ・ウェブサイトのサービスに向けた取り組みのようですが、内容的には参考になる箇所も多々あり。

かなり具体的なガイドラインの中身

こちらのデジタル庁公認のFigma(https://www.figma.com/community/file/1172530831489802410)から資料が見ることができます。

カラーのコントラストや、角丸の半径サイズやマージンの距離、見出しの大きさや行間など数値が具体的に記載されています。
個人的にはPC・タブレット・スマホのブレイクポイントも記載されていたのが良かったですね。

ある意味「オンラインのウェブデザイン参考書」

オンラインのため、資料が常に最新に更新されるのも魅力ですね。(管理が続けばですが。。)
更新履歴からどういった更新をしているかも一目でわかりますし、内容が常にアップデートするのは助かります。
ただ、制作前や一定期間ごとに更新をチェックしておかないと、「前に見たときはいまより情報が古かった!」ということにもなりかねないので、要所要所で確認した方が良さそうです。

記事時点のデジタル庁「デザインシステム」の更新履歴画面

まとめ:省庁や市政のデザインには使える内容だが

元々が省庁や市政のサービスに関するデザインの効率・共通化し一貫性を持たせることが目的のため、企業や個人サイトでのデザインにおいては、当てはまらない項目もあるなぁっと感じる部分もあります。
ですが、内容的にはとても参考になり、過去に見てきた参考書よりも具体的に記述してあり、さらにそれがオンラインで見れるのはかなり好感がもてました。

私自身、(実績は契約上、ここでは出せませんが)国や市のサイトデザインに携わることがあるので、そのデザインの中のひとつの根拠としても十分使えるのではないかと思います。

これからウェブサイト・アプリを制作しようとしている方や担当者は見てみても損はないと思います。
ではまた!

デジトー 管理人: 普段はデザイン関係に勤めながら、感じたこと・伝えたいことを思うがままに発信中。ウェブ・デザイン・お仕事をお伝えしつつ、たまに愚痴を言います。またこれまでに読んできた様々な本や書籍、おすすめアイテムや日常・在宅勤務(テレワーク)で活躍できるアイテム等をご紹介しています。