ローカルデザインシステム（スタイルガイド）｜デジタル庁デザインシステムβ版

ローカルデザインシステムとは、デジタル庁デザインシステムを個々のサイトやサービスの要件に合わせて定義した、デザイン仕様のことです。デジタル庁デザインシステムはプラットフォーム型デザインシステムであり、固有の組織に依拠したブランド概念を備えていないため、使用にあたってはローカルデザインシステムの作成が前提となります。ここでは、編集できる範囲とその要件、および作成の手順について説明します。

デジタル庁デザインシステムを導入先（特定のウェブサイトやプロダクト等）で直接使うのではなく、デジタル庁デザインシステムをベースに導入先専用のデザインシステム（便宜上、これをローカルデザインシステムと呼びます）を定義してから使います。

デザイントークンの定義

ダイアグラム：デジタル庁デザインシステムにデジタル庁のデザイントークンを反映した結果、デジタル庁のサイトのようなスタイルのアウトプットができているという関係性を示した図。左から右にかけて、デジタル庁デザインシステムを模した絵図、デジタル庁のデザイントークンを模した絵図、ローカルデザインシステムを模した絵図、サイト・サービス・プロダクトといったアウトプットを模した絵図へ、順に接続されている。デジタル庁デザインシステムからデジタル庁のデザイントークンへは点線での接続、デジタル庁のデザイントークンからローカルデザインシステム、ローカルデザインシステムからアウトプットへはそれぞれ矢印で接続されている。

デジタル庁デザインシステムが提供するFigmaデータおよびコードスニペットには、カラー、書体の大きさ、角の形状、余白などのデザイントークンがあらかじめ適用されています。これらはコンポーネントの構造や状態の違いを具体的な形で示すための初期値として、デジタル庁ウェブサイトをベースとしたデザイントークンを反映したものです。

ダイアグラム：デジタル庁デザインシステムに導入先のデザイントークンを反映した結果、導入先のスタイルのアウトプットができているという関係性を示した図。左から右にかけて、デジタル庁デザインシステムを模した絵図、導入先のデザイントークンを模した絵図、ローカルデザインシステムを模した絵図、サイト・サービス・プロダクトといったアウトプットを模した絵図へ、順に接続されている。デジタル庁デザインシステムから導入先のデザイントークンへは点線での接続、導入先のデザイントークンからローカルデザインシステム、ローカルデザインシステムからアウトプットへはそれぞれ矢印で接続されている。

初期値として設定されたデザイントークンは、特定の外観を規定するものではなく、編集の起点として位置づけています。ローカルデザインシステムとして、キーカラー、角の形状、余白などの初期値を導入先のデザイントークンに置き換えて編集することで、それぞれの組織やサービスの表現に沿ったコンポーネントの外観を実現できます。

基本デザインの設定

導入先のデザイン方針等に応じて、デジタル庁デザインシステムのデザイントークンを編集します。変更する必要がない項目については、デジタル庁デザインシステムの初期値をそのまま使用して構いません。

基本デザインごとに、編集できる範囲を示します。詳細は基本デザインの各ページを参照してください。

カラー: キーカラーの選択、またはブランドカラーによる上書き。ニュートラルカラー以外の色味を追加した共通カラーの作成。セマンティックカラーの明度・彩度の調整。
タイポグラフィ: コンテンツの種類に応じた書体の大きさの追加・変更。用途別の行ボックスの高さの追加・変更。
余白: 基準となる余白の単位の選定と、その倍率スケールによる余白ルールの設定。
角の形状: コンポーネント単位での角丸値の規定。5段階のスタイルは基本の目安として扱う。
エレベーション: 必要な高さレベルの種類と、その高低差の設計。
リンクテキスト: リンクカラーの選定。青以外の色相を用いることも禁止されない。
レイアウト: カラム割りの変更。ブレークポイントの数の設定。

アクセシビリティ要件

基本デザインやコンポーネント等の設計においては、デジタル庁デザインシステムが備えるアクセシビリティの骨格を維持する範囲で実施しなければなりません。骨格が維持できていることで、JIS X 8341-3:2016・WCAG 2.2の達成基準を満たす、または満たすことが容易となります。

ここでは基本デザインごとに、編集後も満たす必要がある要件を示します。コンポーネント固有の要件は、各コンポーネントのアクセシビリティの解説に記載しています。

カラー: テキストと背景色のコントラスト比4.5:1以上。枠線やディバイダーなど非テキスト要素と背景色のコントラスト比3:1以上。セマンティックカラーの色相と意味の結びつきは変更しない。
タイポグラフィ: 本文やUIは16 CSS pxが基準値。14 CSS px未満は原則として使用しない。読み物コンテンツの本文の行高はフォントサイズの1.5倍以上にする。
余白: 使用する間隔値に規則性を与える。インタラクティブ要素のターゲットサイズを確保する。
エレベーション: 高さを持つ要素は、その要素が置かれる面に対して3:1以上のコントラスト比を確保する。ドロップシャドウは色が1色ではないため、要素にボーダーを持たせてコントラスト比を確保する。
リンクテキスト: 色以外のテキスト装飾等の要素と組み合わせる。青以外を用いる場合は、コントラスト要件および色覚多様性のほか、リンクであると認識できることに配慮する。
レイアウト: リキッドレイアウトを採用する。視覚的な要素の配置と読み上げ順序をできるだけ一致させる。

規定値を下回らないように定義する

良い例

たとえば「ボタン」コンポーネントでは、キーカラーの変更、角の形状の変更、余白の調整が可能です。ただしいずれも、アクセシビリティ要件を満たした範囲で調整しなければなりません。

悪い例

ラベルと背景のコントラスト比が規定値を下回ったり、余白を詰めたことでターゲットサイズが規定値を下回ったりすることは許容されません。

コンポーネントに備わるアクセシビリティの仕組みを維持する

各コンポーネントには、アクセシビリティを確保するための仕組みが組み込まれています。外観の調整の際にこうした特徴が失われていないことを確認してください。

アイコンは、ラベルと組み合わせて使用する構成になっています。

スクリーンショット：フォーカスインジケーターで囲われた「プラス記号に続けて『追加』」というラベルの塗りボタン。フォーカスインジケーターは外側が黒、内側が黄色の二重線、ラベルテキストは白文字、塗りボタンの背景色は青、また、ボタンが配置されている全体の背景色は白が想定されている。

キーボード操作時の位置を明確に示すフォーカスインジケーターを備えています。このフォーカスインジケーターは変更してはなりません。

スクリーンショット：「プラス記号に続けて『追加』」というラベルの塗りボタン。ボタンのボーダーが白の二重線、ラベルテキストは白文字、塗りボタンの背景色ならびにボタンが配置されている全体の背景色は黒。

強制カラーモードでも、要素の境界や状態を判別できるように実装されています。コードスニペットのサンプルに従って実装してください。

ローカルデザインシステムの構成

ローカルデザインシステムには、一般に次の項目が含まれます。デジタル庁デザインシステムではローカルデザインシステムの構成に対する規定はありません。必要な項目を自由に追加して構成してください。

ブランドやコミュニケーション方針に関する規定: ロゴの使用方法やブランドカラーの定義、コミュニケーション指針のデザイン原則への落とし込みです。既存のブランドガイドラインがある場合は、それに基づいて定めます。
編集した基本デザイン: ブランドに関する規定にもとづいて決めた、カラーやタイポグラフィ、余白などの値です。
UIコンポーネントの定義: 使用するコンポーネントを選定し、編集した基本デザインを反映したものです。掲載するコンテンツに応じたコンポーネントの定義も含みます。

なお、個々のウェブサイトはそれぞれ固有の情報アーキテクチャをそなえており、そこから導出される情報コンポーネントやUIコンポーネントが、デジタル庁デザインシステムのプリミティブな定義だけでは足りない場合があります。この場合は、デジタル庁デザインシステムが提供する枠組みの中で、独自の定義を追記します。

ローカルデザインシステムの作成手順の例

ローカルデザインシステムは、ブランドやコミュニケーション方針に関する規定を最初に定め、次にスタイル定義を更新して、最後にUIコンポーネントを調整するという順序で作成します。

Figma Communityからデジタル庁デザインシステムデザインデータ（Figma）を取得します。
ファイル名とカバーのタイトルを、導入先に合わせて変更します。バージョン番号も、導入先で管理する体系に変更します。
導入先のブランドアセット等に基づき、デザイントークンに反映するルールを決めます。決めたルールに基づき、キーカラーをブランドカラーに置き換えます。プリセットから選択するほか、独自のカラーパレットを作成して差し替えることもできます。
導入先で使用するコンポーネントを選定します。使用しないものは削除するか、後から参照できるよう別の領域に移動します。
決めたルールに基づき、コンポーネント単位で角の形状や余白などの値を調整します。
使用頻度の高いボタンのラベルなどをあらかじめ入力した状態でコンポーネントとして定義します。画面を組む際の作業効率が上がり、文言の揺れも防げます。
組み合わせが定まっているコンポーネントについては、そのセットを定義します。

上記と並行して画面仕様書を作成し、定義済みコンポーネントを使って画面を構成します。また、画面を構成する過程で調整が必要になった点は、コンポーネントの定義に反映します。

Figmaデータのコンポーネント構成

Figmaデータのコンポーネントは、状態や表示の組み合わせを示すための構成です。この構成を維持したまま使用する必要はありません。想定する使い方に合わない場合は、コンポーネントを切り離し（detach）したうえで組み直し、あらためてコンポーネントとして定義できます。構成を変更せずに使用できる場合は、そのまま使用します。

スクリーンショット：デジタル庁デザインシステムの注釈ブロックのFigmaコンポーネントがそのまま使われている状態のスクリーンショット。「チップラベル付きタイトルとテキストの例」というテキストの下に、Figmaでのインスタンス選択状態にある注釈ブロック。

たとえば注釈ブロックは、提供している構成のままでも使用できます。

スクリーンショット：デジタル庁デザインシステムの注釈ブロックのFigmaコンポーネントが切り離し（detach）された状態のスクリーンショット。「インプットテキストと共に注釈ブロック（チップラベルテキスト）を用いる例」というテキストの下に、「申請番号」というインプットテキストに対するラベルおよび「※必須」という要否ラベル、その下に、Figmaでの選択状態にある注釈ブロック、さらに下に「半角数字10桁」というサポートテキスト、その下にインプットテキストの入力フィールド。

一方、内包するチップラベルにテキストを回り込ませるといった構成は、提供している構成のままでは実現できません。この場合は切り離して組み直し、構成が定まった時点でコンポーネントとして定義し、ローカルデザインシステムに含めます。

コードスニペットの取り扱い

コードスニペットは実装のサンプルとして提供しています。実際の利用環境やフレームワークの構成に合わせて書き換えて使用してください。

一方、コードスニペットには、WAI-ARIAの指定や強制カラーモードへの対応など、アクセシビリティを確保するための実装が含まれています。書き換えの際にこれらを取り除かないよう注意してください。導入方法および各コンポーネントが備えている仕組みについては、Storybookに解説があります。