本文へ移動

デザインシステム

デザインシステムをスクリーンキャプチャしたものの一部。

デジタル庁サービスデザインユニットでは、一貫したデザインや操作性でウェブサイトやアプリを提供するための仕組み「デザインシステム」の構築に取り組んでいます。どなたでも構築中のデザインシステムのデザインデータを閲覧することができます。

更新情報

2023年12月26日 [バージョン1.4.1]スタイルやコンポーネントの修正・更新を行いました
2023年10月18日 [バージョン1.4.0]スタイルやコンポーネントの追加・修正・更新を行いました
2023年8月31日 [バージョン1.3.4]スタイルやコンポーネントの修正・更新を行いました
2023年7月31日 [バージョン1.3.3]新規コンポーネントを追加、スタイルやアセットなどについて修正と更新を行いました
2023年6月29日 [バージョン1.3.2]コンポーネントを追加、テンプレートやガイドラインの一部修正と更新を行いました
2023年6月27日 [バージョン1.3.1]イラストレーション・アイコン素材を公開しました
2023年5月31日 入力フォーム構築時の指針となるテンプレートを追加しました
2023年5月31日 カラー、タイポグラフィ、テキスト入力などを更新しました
2022年12月28日 リンクテキスト、テキストエリアのガイドを更新しました

構築と推進の目的

デザインと開発を効率化し、利用者の課題解決に集中する

より良い行政サービスの提供のためには、① 誰もが利用できること(アクセシビリティ)② 使いやすいこと(ユーザビリティ)の検討に多くの時間と労力が必要です。既存のサービスで利用され、使い勝手が検証されたデザインパーツやテンプレートを再利用することで、効率的なデザイン検討を実現します。効率化により、利用者の課題の理解やサービスの改善のための時間を増やすことがデザインシステムの目的です。

大規模なサービスで素早く改善サイクルを回す

デザインシステムを活用すると、専門家の知見や既存のサービスで得られた知見が反映された画面デザインを継承することができます。また、デザインパーツの交換が容易で、素早く改善サイクルを回す必要がある大規模なサービスに適しています。情報整理、利用者の手続きの最適化、ユーザーテストの実施など、開発チームはより大きく複雑な課題解決にリソースを割り当てられるようになります。

一貫性を担保し、行政サービスを使いやすくする

多くの人が、情報収集や申請・手続の際に複数のウェブサイトやウェブサービスを利用します。デザインがサイトごとに異なると、利用者はサイトが変わるたびに操作方法を学び直すことになり「わかりにくい」と感じやすくなります。操作方法や情報の見せ方を統一し、利用者が複数のサービスを利用する際の負担を減らします。一貫性が保たれたサービスでは、デスクトップ、スマートフォン、スマートウォッチなど、どのような端末を使っていても、最小限の負担でサービスを使えるようになります。こうした利用体験の一貫性は、利用者に信頼してもらえるサービスづくりに直結します。

開発チームの円滑なコミュニケーション

サービスの開発にはデザイナーだけでなく、エンジニア、プロジェクトマネージャー、多くの利害関係者が関わります。デザインシステムは、利用者の課題を解決できる体験や実装する画面の試作を素早く見える形にし、チームの共通認識を作る手段としても有効です。認識の違いや誤解を避け、より良い体験をつくるためのコミュニケーションを円滑にします。

デザインデータの公開理由

オープンなデザインシステム運用のため

2022年11月に当ページ及びFigma Communityでデザインデータの公開をはじめました。デザインシステムに関わる活動をオープンにし、デザインシステムの認知向上や改善につなげます。諸外国では、活動内容がオープンになっているだけではなく、一般の方が参画するコミュニティによるデザインシステムの持続的な運用改善が実現されたケースも存在します。日本ではまだ体制構築の段階ですが、その一歩目として、だれもが自由に参照できる状態にしています。

地方自治体での活用の推進

日本には1700を超える地方自治体が存在します。デジタル庁が提供するデザインシステムは府省庁のウェブサイトやウェブサービスへの適用を前提としたものですが、地方自治体の方々も利用できます。これからユーザー視点のデザインを取り入れたい、利用しやすいウェブサイトを作りたいと考えている地方自治体職員の方々が、デザインシステムのデザインデータをご参照・ご活用できるようデータを公開しています。

デザインデータ

デザインツールFigmaが提供するFigma Communityより、デザインデータを閲覧可能です。

Figma Community

現在は以下の4つの内容を提供しています。

スタイル

スタイルの中から一部抜粋した内容。上からカラーパレット、見出しと本文の書体の説明。

色や形など基礎となるもの

コンポーネント

コンポーネントの中から一部抜粋した内容。画像の中にボタンが2つあって、一つは青いボタン、もう一つは白いボタン。青いボタンには「次へ」。白いボタンには「この条件で探す」というテキストは入っている。

ボタンや入力フォームなど、具体的なパーツ集

テンプレート

スタイルとコンポーネントを組み合わせたページレイアウトのイメージが描かれている。

コンポーネントを用いた頻出する画面のテンプレート

イラストレーション・アイコン素材

左半分にアイコン素材のサンプル、右半分にマイナンバーカードを持つ手のイラストのサンプルを配置したイメージ

行政手続きをもっとわかりやすくするために作成した素材集です。どなたでもご利用いただけます。

位置付けとロードマップ

2023年度中を目処に、デジタル社会推進標準ガイドラインへの編入を目指しています。現在はデジタル庁内の一部のウェブサイト・ウェブサービスから適用必須とし、コンポーネントの拡充や資料の改善を進めています。

お問合せ・要望

ご意見・ご要望よりお送りください。