デジタル庁が公開している「デザインシステム」の内容を自分用に整理しました。

デザインシステムとは？　（手引き）

デザインシステムとは「あるべきデザインを一貫性を持って、ユーザーに提供するための仕組み」のこと。

デジタル庁のデザインシステムは、使い勝手のよい（行政サービスを）効率よく構築するためのガイドライン or コード or テンプレート or コミュニティを提供する。

現在時点は、ソースコードとコミュニティは未提供。

デザインシステムが必要になった背景は、各府省庁が個別にウェブサービスを提供しているが、デザインがバラバラでユーザーはその都度の対応になっている。

なので、「アクセシビリティ」「ユーザビリティ」を担保したデザインパーツを再利用することで、一貫性のあるデザインを効率よく実現する。

使いやすさの向上
開発効率の向上
改善サイクルの迅速化を図る
課題やサービスの改善に集中する

調達の「前」にデザインの検討をはじめることで、その後の開発プロセスや試験を効率化して、品質を向上することができる。

カラースタイル

個々のサイト/サービスで使用されるスタイルガイドに必要なカラースキームの構築を目的とする。カラーが持つ意味や機能など情報伝達上の役割をユーザーが明確に認識できるカラースキームを構築すること。

カラー設計の原則として、利用者目線に立つことが重要。横断した統一性が重要。（ソフトウェア、マニュアルを含めるなど）

スタイルとは、サービス/ウェブサイトが目指している姿勢/態度/印象を表現する最小単位のルールを定義したもの。具体的には、カラースキーム、角丸半径、フォントサイズ、行間などの情報が含まれる。

デザイントークン

視覚的なデザインの属性に名前を付けたエンティティのこと。

ハードコードされた値に名前を与えることで、データが可読性を備えて、デザイナーとエンジニア間の共通言語として機能する。

プリミティブトークンは具体的な値（１６進数のカラーコードなど）に名前を与えて、セマンティックトークンによって、さらにコンテクストを示す。

キーカラー

カラースキームを構築する上で必要なカラーを同じ色相の階調からキーカラーとして選択する。

プライマリーカラー : 主要となる色。（複数も可）ロゴ/ヘッダーといった重要なアクセント、ブランド要素に使用する。メインの背景色とのコントラスト比は少なくとも３：１以上を維持できる色であること。
セカンダリーカラー : プライマリーカラーを補完。
ターシャリーカラー : プライマリーカラー、セカンダリーカラーを補完。
バックグラウンドカラー : 背景に選ばれるカラー。テキストやコンテンツと良好なコントラストを提供する必要がある。

コントラスト比は、白い部分と黒い部分の輝度の差を比率で示したもの。

コントラスト比の計算方法を学ぶ

共通カラー

白から黒のグレーの階調（ニュートラルカラー）をベースに構築。

ページの共通の要素、テキスト、境界線、背景、UI の構成パーツなどに使用される。

テキストと背景色のコントラスト比は 4.5:1 以上を保つこと。
枠線などは 3:1 以上のコントラスト比。
純粋なデザイン要素とのコントラスト比は考慮する必要はない。

以下は諧調のテーブル：

white : #FFFFFF
gray-050 : #F2F2F2
gray-100 : #E6E6E6
gray-200 : #CCCCCC
gray-300 : #B3B3B3
gray-400 : #999999
gray-420 : #949494
gray-500 : #7F7F7F
gray-536 : #767676
gray-600 : #666666
gray-700 : #4D4D4D
gray-800 : #333333
gray-900 : #1A1A1A
black : #000000

機能カラー

UI でのユーザーのインタラクションの状態をより明確にする役割。

ボタンなどキーカラーで一貫性を維持するものと、テキストリンクカラーなどオンライン上で習慣化されたカラーを使用する場合がある。

リンクカラーは、コントラスト比 4.5:1 以上を確保する。Web の文脈では伝統的な習慣として青 (default) と紫 (visited) を使用する。

アクセントカラー

特定の要素に注意を引くためのカラー。多用されない程度に使用する。特定の意味を持ったハイライト表現や CTA ボタンに使うことで抑揚を抑えて重要性を示すことができる。

CTA = call to action のこと。行動喚起。読者を具体的な行動に誘導する仕組みで CTA をしっかり目立たせることで、行動を誘導する/できる。

セマンティックカラー

セマンティック (semantic) とは「意味の、語義の、意味論の、意味的な」などといった意味を持つ形容詞。

なので、デザインスタイルや UI の種別を問わず、特定の意味や目的が割り当てられたカラーのこと。これらのカラーは特定の情報/文脈で意味を伝えるので、情報伝達上の機能的な意味を持つ。

例えば、緑といえば成功で赤ならエラーといった、一貫性のある特定の意味を持った視覚的な共通言語のこと。

ニュートラルカラー

背景、ボーダーなど、デザイン要素に共通のカラーとして使用する。

プリミティブカラー 2.0

カラースタイルの基盤となる基本的な色で構成される。統一感のあるカラースキームを作成するために利用する。

各ベースカラーは広範なカラー設定を導入するための色相とメイドの段階で構成される。

緑は例。いろんな色を基本にプリミティブカラーを作ることができる。デジタル庁デザインシステムが独自に指定してカラーパレットをプリミティブカラーとして指定しています。

角の形状

ボタンやカードなどのコンポーネントに適用する。画面に視覚的な抑揚を生み出して、コンポーネントの機能理解を促進したり、認識しやすくさせる。

角の形状は、まるみの量に基づいて算出した径をコンポーネントに割り当てること。５つのスタイルを基本の目安とする。

角丸なし
角丸半径 8
角丸半径 16
角丸半径 32
角丸半径：高さ or 横幅 50%

同一の半径スタイルを適用しても、図形の大きさに応じて印象は、図形が小さいときに角丸の印象は強く、図形が大きいときに角丸の印象はなくなっていく。サイズにあわせて、形状とスタイルを設定する。（例：小ボタン 16, 中ボタン 20, 大ボタン 24）

エレベーション

コンポーネントの高さの度合い。高さを表す表現には、ドロップシャドウとオーバーレイシェードがある。

オーバーレイシェードは、コンポーネントの上に重ねて表示するために、下になるコンポーネントとの間に敷き詰められる背景のこと。オーバーレイは「上に置く、上塗りする、うすく覆う、重ね合わせる」といった意味。

ほとんどの要素の高さはレベル０です。高さレベルに応じたスタイル１～８を適用します。

画像のアスペクト比（＋レイアウト）

動画やイメージ画像のアスペクト比は 16:9 です。写真や一部のスクリーンなどは 3:2 を使用する。人物紹介等は 1:1 です。バナーは国際標準バナーサイズなど。

スクリーン幅： 1024px

マージン : > 32px
ガター : 32px
グリッド : 48px

マージンとは、最も外側の左右の領域のこと。ガターは、要素とコンテンツを分離するスペースのこと。グリッドは、基本的なレイアウト構造で、行と列に整理する。カラムグリッドやモジュラーグリッドなどがある。

ブレークポイントは、レスポンシブ/アダプティブの切り替えになる大きさのこと。

デスクトップは、ビューポートの範囲 768 px 以上を推奨する。

余白

見出しの上、見出しと本文の間に使うスペーシングは右の表を基本とする。

	H の上	H と Body の間
H1	64px	24px
H2	64px	24px
H3	40px	24px
H4	40px	16px
H5	40px	16px
H6	24px	16px

バリエーションは 8px のスペーシングを基本とする。大きなサイズのスペーシングはフィボナッチ数列を用いて定義する。小さなサイズのスペーシングは２で割り定義する。

フォント

フォントは「Noto Sans Japanese」を採用。

見出し

サイズ	px	weight	line-height	letter-spacing
XXL	57	Regular	1.4	0.04em
XL	45	Regular	1.4	0.04em
L	36	Regular	1.4	0.04em
L mobile	32	Medium	1.5	0.04em
M	32	Regular	1.5	0.04em
M mobile	28	Medium	1.5	0.04em
S	28	Regular	1.5	0.04em
S mobile	24	Medium	1.5	0.04em
XS	24	Regular	1.5	0.04em
XS mobile	20	Medium	1.5	0.04em
XXS	20	Regular	1.5	0.04em
XXS mobile	16	Medium	1.7	0.04em

その他のテキストスタイル

サイズ	px	weight	line-height	letter-spacing	用途
本文 L	16	Regular	1.7	0.04em	デフォルトの本文テキスト。
本文 M	14	Regular	1.7	0.04em	文量が多いとき、表示領域が限られているときに使用する。
ラベル L	14	Regular	1.5	0.04em	デフォルトのラベルテキスト。
ラベル M	12	Regular	1.5	0.04em	文量が多いとき、表示領域が限られているときに使用する。
補足 L	14	Regular	1.7	0.04em	デフォルトの補足テキスト。
補足 M	12	Regular	1.7	0.04em	文量が多いとき、表示領域が限られているときに使用する。
ボタン	16	Bold	1.5	0.04em	ボタン中のテキスト。