デジタル庁のデザインシステムはMITライセンスで公開されている

自社でデザインシステムを作ろうとして、途中で止まっている会社は多いと思います。作り始めると分かりますが、コンポーネントを作る作業より、色と余白と文字サイズの体系を決める作業のほうが時間がかかります。

その部分が、すでに公開されています。

デジタル庁デザインシステムのデザイントークンと参照コンポーネントは、GitHubでMITライセンスとして公開されています。リポジトリは digital-go-jp/design-tokens と、HTML版およびReact版の design-system-example-components です。

MITライセンスなので、商用利用も改変も再配布もできます。

何が手に入るか

トークンというのは、色、余白、文字サイズ、角丸、影といった値の定義集です。ここが決まっていないと、コンポーネントを作っても一貫性が出ません。

デジタル庁のトークンは、行政サービス向けに作られています。つまり、幅広い年齢と条件の利用者を前提に、コントラスト比などが検証された状態で組まれています。

前の記事で触れたとおり、日本の65歳以上のネットバンキング利用は10.0%です。コントラストと文字サイズが検証済みの体系から始められることには、実務上の意味があります。

参照コンポーネントのほうは、フォーム、ボタン、通知、テーブルといった基本的な要素です。そのまま使うより、自社のトークンに載せ替えて使う形が現実的だと思います。

使い方は3通り

1. そのまま採用する。 行政向けのサービスを作る場合や、ブランドの独自性が要件でない社内システムでは、これが最も早い選択です。

1. トークンだけ借りる。 体系の構造（何を変数として持つか、どの粒度で分けるか）を参照して、値は自社のブランドカラーに差し替える。ゼロから体系を設計する時間が省けます。

1. 検証の基準として使う。 自社のデザインシステムがすでにある場合、コントラスト比や文字サイズの下限を照合する対象として使う。

多くの会社にとっては、2番目が現実的だと思います。

注意点

いくつか実務上の注意があります。

バージョンの参照方法。 変更履歴が日付で管理されています。2026年8月5日時点でv2.17.0です。バージョン番号だけで議論すると齟齬が出るので、日付で参照するのが確実です。

リポジトリ名。 digital-go-jp/design-system というリポジトリは存在しません。トークンは design-tokens、コンポーネントは design-system-example-components-html と -react です。

行政の文脈が入っている。 命名や一部のコンポーネントは行政手続きを前提としています。そのまま民間サービスに持ち込むと、文脈が合わない箇所が出ます。

ライセンス表記。 MITなので、利用時にライセンス表記の保持が必要です。社内利用でも、依存関係として記録しておくのが無難です。

社内で通すときの言い方

デザインシステムへの投資は、社内で説明しにくい部類の投資です。成果が画面に見えないからです。

デジタル庁のものを起点にする場合、説明は少し簡単になります。ゼロから作るのではなく、公開されている体系を自社に合わせる作業だと言えるからです。工数の見積もりも立てやすくなります。

そして、アクセシビリティの検証がある程度済んでいる体系から始めることは、前の記事で書いた合理的配慮への備えにもなります。ここは繋げて説明できます。