デジタル庁デザインシステム（DADS）とは？──中身とルール、教材・学習サービスづくりへの生かし方

DADSは、デザインの考え方を示すガイドライン、画面の部品（コンポーネント）、設計と実装の手引きをまとめたものです。提供されているのは次の4つです。

- ドキュメント：公式サイトに、基本デザイン、コンポーネントの仕様、ガイドライン、作例、アクセシビリティの考え方がまとめられています。サイト全体をMarkdown形式で一括ダウンロードすることもできます。
- デザインデータ：デザインツールのFigmaで使えるデータが、Figma Communityで公開されています。
- コードスニペット：HTML/CSS/JavaScript版と、React/Tailwind CSS版の実装サンプルが、GitHubと動作見本（Storybook）で公開されています。
- イラストレーション・アイコン素材：行政手続きの説明などに使うことを想定した素材です。

誰のためのものか

DADSは、官公庁や地方自治体、公共性の高い組織のWebサイトやオンラインサービスで使うことを想定してつくられています。特定の組織のブランドに寄せたものではなく、さまざまな組織が自分たちに合わせて使える「土台」として設計されているのが特徴です。誰でも無料で利用でき、想定する利用者として、デザイナーや開発者だけでなく、企画や情報設計の担当者、調達仕様書をつくる担当者も挙げられています。

3つの理念

公式サイトは、DADSの理念として3つを掲げています。1つめはアクセシビリティファーストで、WCAG（Webコンテンツのアクセシビリティの国際的なガイドライン）などを最大限取り込み、誰もが使えるものをつくりやすくすることです。2つめは高い汎用性と利便性で、小さな要素の組み合わせで部品を構成し、サービスごとに調整しやすくしています。3つめは継続的な改善と研究で、技術や利用環境の変化に合わせて更新を続けることです。「β版」という表示は、完成品ではなく改善を続けるものであることを示しています。

はじめての教材制作も
まずはお気軽に
ご相談ください

制作事例・料金表を無料でチェック

過去の事例や制作フローを
パンフレットで紹介しています

過去の事例や制作フローを
パンフレットで紹介

資料ダウンロード

見積もり・納期を無料で相談

オンラインで打合せをしながら
予算に応じたご提案をいたします

オンラインでの打合せや
予算に応じたご提案なら

無料相談申し込み

デジタル庁のデザインシステムは、2022年11月にFigmaのデザインデータの初版として公開されました。2023年には入力フォームのテンプレートやカラー、タイポグラフィの更新が続き、6月にはイラストレーション・アイコン素材も公開されています。2024年5月30日には、内容が専用サイト「デジタル庁デザインシステムβ版」に移されました。

現在のデザインデータはv2系で、v1系はエラーの修正だけが続けられています。2026年10月21日に公開されたv2.18.2では、日付を選ぶ部品に週末の色分けや「今日」へ戻るボタンが加わり、コードの側ではReact 19への対応が進みました。更新は頻繁に行われており、更新の内容は公式サイトのお知らせやRSSで確認できます。

基本デザインの8つの要素

DADSの土台になるのが「基本デザイン」です。カラー、タイポグラフィ（文字）、アイコン、レイアウト、リンクテキスト、余白、角の形状、エレベーション（画面上の重なりの高さ）の8つについて、考え方と値が示されています。たとえばカラーは、組織を表すキーカラー、白から黒までの14段階の共通カラー、リンクやフォーカスなどの機能カラー、成功・エラー・警告を表すセマンティックカラーといった役割で整理されています。

文字と色の基準

基本デザインには、具体的な数値の基準があります。主なものは次のとおりです。

- 文字の大きさ：本文やボタンなどの文字は16px以上が基準です。14pxはフッターなど例外的な場面に限られ、14px未満は原則として使いません。
- 行の高さ：本文の行の高さは、文字の大きさの1.5倍以上にします。
- コントラスト：文字と背景の明るさの差（コントラスト比）は4.5:1以上、枠線や区切り線など文字以外の要素は3:1以上を保ちます。
- 書体：推奨書体は、オープンソースで無料のNoto Sans JPです。

リンクの色にも工夫があります。慣習的なリンクの青と、訪問済みリンクの紫は、色覚の多様性によっては見分けにくい組み合わせです。そこでDADSでは、紫に少し赤みを加えて明るさに差をつけ、区別しやすくしています。

そのまま使える部品

コンポーネントとして、ボタン、チェックボックス、ラジオボタン、テキストエリア、セレクトボックス、パンくずナビゲーション、メニューを引き出すドロワー、災害時などに使う緊急時バナー、日付を選ぶ部品などが用意されています。各部品には使い方のガイドがあり、どのアクセシビリティの基準（JIS X 8341-3:2016とWCAG 2.2）に関係するかも示されています。

「すべての人が確実に使える」ための品質基準

DADSは、アクセシビリティを「すべての利用者がWebサイトやオンラインサービスを確実に使えるようにするための品質基準」と位置づけています。背景には法制度があります。2024年4月1日に施行された改正障害者差別解消法では、事業者が前もって環境を整えることが努力義務とされ、Webサイトのアクセシビリティの確保はこれに当たると説明されています。

DADSが配慮する領域は、色の組み合わせとコントラスト、文字の大きさ、キーボードでの操作とフォーカス（いま操作している場所）の表示、リンクやボタンの押しやすい大きさ、操作に応じた見た目の変化、動きのある表現の扱い、文字の拡大や内容の増減に耐える構造の7つです。これらがFigmaのデータ、部品の仕様、作例に反映されています。公式サイト自身も、JIS X 8341-3:2016の適合レベルAAへの準拠を掲げ、2025年12月10日時点で準拠しているとしています。

デザインシステムだけでは足りない

一方で公式サイトは、デザインシステムで達成できるのはアクセシビリティの一部にすぎないとも明記しています。部品が整っていても、画像に代わりの文章がない、動画に字幕がない、文章が分かりにくいといったコンテンツの側の問題は、つくる人が自分で解決しなければなりません。継続して保つには、運用の設計と予算、人材の確保も欠かせないとされています。

DADSは特定のブランドを持たない土台なので、使う組織が自分たちのブランドに合わせて定義し直してから使います。この組織ごとのデザインシステムを「ローカルデザインシステム」と呼びます。DADSのカラーや書体、角丸、余白の値は、あくまで編集の出発点となる初期値で、DADSと同じ見た目にすることを求めているわけではありません。

作り方も示されています。Figmaのデータを取得し、キーカラーを自分たちのブランドカラーに置き換え、使う部品を選び、角の形や余白を調整します。よく使う文言を入れたボタンや、よく使う部品の組み合わせを定義しておくと、画面ごとのばらつきを防げます。

変えてよいもの、守るもの

変えてよいのは、キーカラーやブランドカラー、文字サイズの追加、余白の基準の単位、角の丸み、カラムの割り方やブレークポイント（画面幅による切り替え点）などです。リンクの色も、青以外にしてかまいません。

一方で、アクセシビリティの基準は下回れません。文字と背景のコントラスト比4.5:1以上、文字以外の要素の3:1以上、本文の文字16px以上と行の高さ1.5倍以上は守ります。フォーカスの表示は変えてはいけないとされ、リンクは下線など色以外の手がかりと組み合わせ、アイコンは原則として文字のラベルと一緒に使います。コードを自分たちの環境に合わせて書き換える場合も、読み上げ用の指定（WAI-ARIA）など、アクセシビリティのための実装は消さないよう注意が促されています。

利用条件は、提供物ごとに分かれています。

- ドキュメント：使うときは、出典としてデジタル庁デザインシステムのWebサイト名とURLを示します。編集・加工した場合はその旨も記載し、加工したものをデジタル庁がつくったように見せてはいけません。
- デザインデータ（Figma）：CC BY 4.0が適用されます。一部のアイコンにはApache License 2.0が適用されます。
- コードスニペット：MIT Licenseが適用されます。
- イラストレーション・アイコン素材：専用の利用規約の範囲で無料で使えます。

デザインデータとコードは、編集・加工してつくった部品であれば出典の記載は不要で、手を加えずにそのまま公開する場合は出典を記載します。ライセンス上は、民間の教材や学習サービスでも利用できます。入札などで特定のバージョンが必要な場合は、デジタル庁の問い合わせフォームから申請する仕組みもあります。

DADSは行政向けですが、アクセシビリティを最優先にした基準と部品は、教材や学習サービスにも生かせます。考えられる使い方を4つ挙げます。

1. 共通の部品は、そのまま土台にする

ログイン画面、設定画面、保護者向けの申し込みフォーム、お知らせの一覧など、教材の周りには行政サービスと同じような画面がたくさんあります。こうした部分にDADSの部品と基準を使えば、一から決める手間が省け、アクセシビリティの基礎も確保しやすくなります。入力の誤りの知らせ方やエラーの色など、細かな決めごとがすでに整理されているのも利点です。

2. 子供向けには、基準を下回らない範囲で調整する

DADSの基準は大人を含む幅広い利用者を想定しています。低学年向けの教材であれば、文字を大きめにする、漢字にルビを振る、ボタンをさらに大きくするなど、基準を下回らない方向での調整が必要になります。ルビはブラウザの初期設定では親の文字の半分の大きさになるため、本文の文字が小さいと読みにくくなる点にも注意が必要です。学年ごとの文字の大きさや語彙の基準は、ローカルデザインシステムとして自分たちで決めておくとよいでしょう。

3. 教材ならではの画面は、独自に定義する

問題・解答・解説の画面、図を動かして考える操作、音声を聞いて答える問題など、教材ならではの画面はDADSには用意されていません。ローカルデザインシステムには、独自の部品を書き足すことができます。その際も、コントラスト、文字の大きさ、キーボードで操作できること、押しやすい大きさといったDADSの考え方をそのまま当てはめれば、教材全体で品質をそろえられます。教材のアクセシビリティの具体的な配慮は「だれもが使えるデジタル教材のつくり方」でも解説しています。

4. 発注の共通言語にする

DADSは、調達仕様書をつくる担当者も利用者として想定しています。教材や学習サービスを発注するときに「DADSの基準に沿う」「コントラスト比や文字の大きさはDADSに準じる」と書けば、発注者と制作者の間で品質の基準をそろえやすくなります。デジタル教科書でも字幕や再生速度の調整が標準の機能として示されるなど（デジタル教科書に字幕・速度調整が「標準装備」へ）、教育分野でもアクセシビリティを仕様として求める流れが強まっています。

DADSは民間の教材やサービスでも使えますか？

使えます。行政や公共の組織での利用を想定していますが、誰でも無料で利用でき、デザインデータはCC BY 4.0、コードはMIT Licenseで公開されています。ドキュメントを使うときは出典を示し、加工したものをデジタル庁がつくったように見せないことが条件です。

DADSを使えば、アクセシビリティは十分ですか？

十分ではありません。公式サイトも、デザインシステムで達成できるのはアクセシビリティの一部だとしています。画像の代わりの文章、動画の字幕、分かりやすい文章など、コンテンツの側の配慮は制作者が行う必要があります。

DADSと同じ見た目にしなければいけませんか？

その必要はありません。DADSの色や書体、余白の値は出発点となる初期値で、組織ごとにローカルデザインシステムとして作り直すことが前提です。ただし、コントラスト比や文字の大きさ、フォーカスの表示など、アクセシビリティに関わる基準は下回れません。

どこから手をつければよいですか？

まず公式サイトの「はじめに」と「ガイダンス」で考え方をつかみ、基本デザインのカラーとタイポグラフィの基準を確認するのが近道です。そのうえで、Figmaのデータやコードの動作見本で部品を確かめ、自分たちのローカルデザインシステムに必要なものを選んでいきます。

β版のままで使って大丈夫ですか？

β版は、完成していないという意味ではなく、改善を続けるものであることを示す表示です。更新が頻繁なため、どのバージョンをもとにしたかを記録しておき、更新の内容を定期的に確認すると安心です。

デジタル庁デザインシステム（DADS）は、行政や公共のWebサービス向けに、デザインのルールと部品をまとめて無料で公開したものです。ドキュメント、Figmaのデータ、HTML版とReact版のコード、イラスト・アイコン素材で構成され、アクセシビリティを最優先に、本文16px以上、コントラスト比4.5:1以上といった具体的な基準を示しています。組織ごとにローカルデザインシステムとして作り直すことが前提で、色や形は変えられても、アクセシビリティの基準は下回れません。

教材や学習サービスでは、共通の部品を土台に使い、子供向けの調整と教材ならではの画面を自分たちで定義することで、誰もが使える品質を最初から組み込むことができます。発注者と制作者が同じ基準で話せる共通言語としても役立ちます。

エデュコンは、デジタル教材制作でアクセシビリティに配慮した教材アプリやWeb教材を、学校向けシステム開発で学習管理などの仕組みを、企画から運用まで一貫して承っています。デザインの基準づくりから、お気軽にご相談ください。

はじめての教材制作も
まずはお気軽に
ご相談ください

制作事例・料金表を無料でチェック

過去の事例や制作フローを
パンフレットで紹介しています

過去の事例や制作フローを
パンフレットで紹介

資料ダウンロード

見積もり・納期を無料で相談

オンラインで打合せをしながら
予算に応じたご提案をいたします

オンラインでの打合せや
予算に応じたご提案なら

無料相談申し込み