デジタル庁のデザインシステムをパクろう！
はじめに
画面設計はなんとなくやってしまうと UI/UX が悪くなりがちです。
なるべく設計段階でイケてるデザインにしたいところです。
設計指標として、様々な企業がデザインシステムと呼ばれるデザインのルールを制定しています。
これは民間企業だけでなく、2021 年に設立されたデジタル庁もデザインシステムを公開しています。
デジタル庁のデザインシステムは主に行政機関や公共機関で利用されることを目的にしていますが、行政機関や公共機関であるかどうかを問わず、誰でも利用してよいことが明文化されています。
ここではデジタル庁のデザインシステムで個人的に学びになった部分をまとめていきます。
まるっと学習したい方は以下から読んでみてください！
カラー
Web サイトにおけるカラーは、見やすい UI を体現するだけでなく、コンポーネントがもつ意味や機能に一貫性を付与して、ユーザーが直感的に情報を認識できるようになります。
キーカラー
デザインに必要なカラーを同じ色相の階調からキーカラーとして選択する。
キーカラーは以下の 4 つのカラー要素を含みます。
プライマリーカラー
ウェブサイトのトーン＆マナーを確定するカラー。
セカンダリーカラー
プライマリーカラーを補完して、あまり目立たなくていい UI で使用する。
プライマリーカラーと同じ色相で、明度が高いまたは低いものを選択する。
ターシャリーカラー
セカンダリーカラーと反対の明度で設定する。
バックグラウンドカラー
基本的にバックグラウンドカラーは白または黒が想定されますが、キーカラーと同色相で設定することもできます。
その場合、上記のコントラスト比が満たされるように調整する必要があります。
出典：キーカラーの例
共通カラー
白から黒のグレーの階調（ニュートラルカラー）をベースに構成され、ページの共通の要素、テキスト、境界線、背景、またUIの構成パーツなどに使用されます。
キーカラーの色相とは両立させる形で利用することができます。
出典：共通カラー
機能カラー
一般的に慣習化されたカラーを表現します。
リンクカラー
ウェブの文脈では伝統的な慣習となっている青（Default）と紫（Visited）を使用します。
リンクカラーの青と紫は、色覚多様性の観点からは見分けにくい色の組み合わせとなっているため、
紫に少しの赤みを足し、青との明度差を作ることで識別性を向上させます。
セマンティックカラー
特定のセマンティクス（意味や目的）が割り当てられたカラーです。
特定の情報や文脈で意味を伝えるために使用され、情報伝達上の機能的な役割を持っています。
サクセス（Success）
成功、安全、完了などを意味するカラーです。
出典：セマンティックカラー
エラー（Error）
失敗やエラーのほか、危険情報や制約条件の提示など注意喚起を意味するカラーです。
出典：セマンティックカラー
警告（Warning）
警告や禁止事項などを意味するカラーです。
出典：セマンティックカラー
コントラスト比
コンポーネントに使用する場合は、背景色とのコントラスト比が 3:1 以上、
テキストのカラーとして使用する場合は、コントラスト比が 4.5:1 以上にする。
これは一般的な識別のしやすさのほかに、色覚多様性への配慮のためという側面もあります。
また、色だけで識別することを避け、下線をつける等、別の識別方法を提供するべきです。
フォント
フォントはオープンソース（SIL Open Font License 1.1）で、かつ Web フォントとしても利用可能な「Noto Sans JP」と等幅フォントの「Noto Sans Mono」を採用します。
太さ
フォントの太さはfont-weightのプロパティを指定します。
| 太さレベル | font-weightの数値（ウェイト名） |
|---|---|
| N | 400 (normal) |
| B | 700 (bold) |
フォントサイズ
フォントサイズは、それぞれに意図された用途や意味づけがなされます。
| 大きさ（CSS px） | 主な用途 |
|---|---|
| 48 ~ 64 | 視覚的なインパクトが必要なデザイン要素としての文字サイズ。 |
| 16 ~ 45 | 読み物コンテンツ向けに多く使用される見出しや本文を構成する文字サイズ。 なお、本文やUIにおいては16 CSS px以上が基準値となります。 |
| 14 | 基本的には使用しません。 フッター要素などコンテンツに付随する情報や、UIやコンテンツを構成する際の領域的な制約がある場合のように標準的な文字サイズ（16 CSS px以上）の使用が難しいケースにおいてのみ使用される文字サイズです。 なお、14 CSS px未満の大きさの使用は原則として許容されません。 |
レイアウト
一貫性のあるレイアウトは、ページの閲覧やサイト内の回遊を促進し、ユーザー体験を向上させます。
グリッドシステム
グリッドを基準としたレイアウトは、一貫性を持った基本的なレイアウトのフレームワークとなります。
このグリッドの仕組みのことをグリッドシステムと呼び、レイアウト設計が効率的に行えます。
出典：基本的なグリッドシステム
- マージン
カラム全体とページの余白を設定し、グリッドシステムの配置を決定します。 - カラム
ページ内のコンテンツエリアを形成する 1 つ以上の列で構成されます。
12列のカラムは、その柔軟性と分割・結合の容易さから一般的です。 - ガター
カラム間の余白スペースです。原則として本文の文字サイズの2倍を確保します。
程よい幅のガターを与えることで、レイアウト全体の読みやすさや視覚的な明確さを維持します。 - メニューやナビゲーション
主にシステムなどを構築する上で配置する必要性があり、その領域を確保します。
メニューやナビゲーションの右端からマージンを設定し、グリッドを形成します。
ブレークポイント
レイアウトが切り替わるトリガーとなる画面幅の値をブレークポイントといいます。
例えば、デスクトップに最適なレイアウトから、モバイルデバイスでの表示に最適なレイアウトへ切り替わるようなつくりにすることができます。
| デバイス | ビューポートの範囲 |
|---|---|
| モバイル・タブレット | 768px未満 |
| デスクトップ | 768px以上 |
リンクテキスト
リンクテキストは色や下線などで通常のテキストと区別され、URL と関連づけられたテキスト文字列です。
この関連付けをハイパーリンクと呼び、Web の基本的な概念のひとつです。
ブラウザの新規タブを開くリンクには、リンクテキスト末尾にアイコンを配置してその旨を喚起します。
また、PDF文書やダウンロードファイル等、ウェブページ以外へのリンクを示す場合は、リンクテキストにファイル形式や容量などを明記します。
ステート
リンクカラーや装飾等の表現を変えることで、ユーザーにリンクのステート（状態）を示すことができます。
ユーザーの操作に対する視覚的なフィードバックを提供でき、直感的となります。
出典：リンクのステート
リンクステートの補足説明
| 名前 | 説明 |
|---|---|
| Default | 未訪問のリンク |
| Hover | リンクの上にマウスカーソルが重なっている状態 |
| Active | リンクに対してマウスボタン押下中の状態 |
| Visited | 訪問済みのリンク |
余白
デザイン全体で一貫したバランスの良い余白を維持することで、より使いやすい UX を実現することができます。
CSS ボックスモデルの中で、余白を示すものはパディングとマージンがあります。
パディング
出典：パディング
要素の内部に設定する余白のことをパディングと呼びます。
パディングを適切に設定することで、要素の過密感を防ぐことができます。
マージン
出典：マージン
要素の外部に設定する余白のことをマージンと呼びます。
マージンを適切に設定することで、全体的なバランスだけでなく、要素間の関係性を調整できます。
余白ルール
基準となる余白の単位を選定し、基準単位の倍率スケールからルールの範囲を決めます。
一般的に利用されることの多い基準単位は 8 CSS px です。
この基準単位をもとに、コンポーネントやデザインエレメントのレイアウトを検討します。
スタイルガイドで定義される余白スケールは、3 ～ 5 つ程度になることが多いです。
余白スケールは、マージンまたはパディングに適用する余白の段階のことです。
上記の例では、基準単位に 8 CSS px、3 倍の 24 CSS px、8 倍の 64 CSS px という 3 つの余白スケールを使うという余白ルールを定めたうえで、コンポーネントを配置しています。
視覚的に関係性をつくったり視認性を高めるデザインにするために、複数の余白スケールを用途に応じて組み合わせます。
ボタン
大きさ
出典：ボタンのターゲット領域
ボタンのターゲット領域は 44 CSS px 以上にする必要があります。
44 CSS pxに満たない場合はパディングを設けて、ターゲット領域を確保します。
重要度
出典：ボタンの視覚的階層例
ボタンのスタイルによって重要度を表現します。
上記の例では、以下のように設定しています。
-
プライマリー（重要度：高）
- 画面内で最も重要なアクションに使用する。1 画面につき、原則 1 つまで。
- 例：塗りボタン（ボタン背景色が色付きでラベルが白）
-
セカンダリー（重要度：中）
- プライマリー以外の選択肢がある場合に使用する。原則最大 3 つまで。
- 例：アウトラインボタン（外周とラベルが色付きでボタン背景色が白）
-
ターシャリー（重要度：低）
- キャンセル行為のために使用。1 画面につき、原則 1 つまで。
- 例：テキストボタン（ボタン自体は透明で下線で装飾されたラベルが色付き）
ボタンの配置
「OK」または「完了」「次へ」などのボタンを右寄せ、
「キャンセル」または「中止」「戻る」などのボタンを左寄せで配置することを原則とします。
右であればあるほど重要度が高いものとするため、プライマリーのボタンを右端に配置します。
右寄せされたセカンダリーのボタンは、事前に検討すべきオプションなどが該当します。
意味的な順序としては、セカンダリー、プライマリー、ターシャリーのボタンの順となります。
まず進行方向である右寄せされたボタン群を左から確認し、セカンダリーを把握したうえでプライマリーを押下するか、あるいは左端へ移ってターシャリーを押下するかを選択するということです。
モバイルデバイスの場合は意味的な順序をそのまま縦に配置します。
ボタンの無効化に関する注意点
ボタンは disabled 属性を指定することで無効化することができます。
特定の条件を満たしていなければ無効化し、条件を満たすと有効化する使われ方をすることがあります。
しかし、これはユーザーアクセシビリティ・ユーザビリティの観点から避けるべきです。
アクセシビリティ上の問題は、ロービジョンのユーザーがスクリーンリーダーとキーボード操作を併用している際など、無効ボタンの位置を正確に把握することができない場合があります。
ユーザビリティ上の問題は、ユーザーからは見えているのになぜ押せないのかが分からないことがあります。
出典：悪い例
例えば、この画面ではボタンを有効化する条件が不明瞭であり、ユーザーはなぜ送信ボタンが押せないのか理解できないことがあります。
出典：良い例
この画面ではユーザーがやるべきこと（名前と生年月日の入力）が明示されています。
また、送信ボタンを無効化する必要はなく、条件を満たしていないままボタンを押下された場合は、エラーメッセージでやるべきことを案内します。
このように、ボタンを無効化しないで済むように設計することが原則となります。
ラジオボタン
ラジオボタンは、複数の項目から 1 つを選択するときに使います。
複数選択したいときは、後述するチェックボックスを利用します。
項目の数は 2 ～ 5 個が最適とされています。
チェックボックス
チェックボックスは、複数の項目から複数の選択肢を選ぶときに使います。
また、ひとつの選択肢のオン・オフの切り替えにも用いることができます。
インプットテキスト
インプットテキストは、1行以内のテキストを入力するときに使います。
複数行にまたがるテキストを入力する場合は、後述するテキストエリアを使います。
インプットテキストの横幅は入力される文字の長さによって調整します。
これにより、入力すべき内容がより直感的に理解できるようになります。
テキストエリア
テキストエリアは、1行以上のテキストを入力するときに使います。
テキストエリアを配置する際、以下に注意します。
-
できるだけ質問をクローズドクエスチョンにする
自由入力は利用者にとって負荷が高いため、例えば「その他を選んだ方だけご記入ください」など、質問を分割した後の使用を検討する -
文字数制限がある場合はラベルで最大文字数を、エリア下部で現在の文字数を明確に表示する
最大文字数や現在の文字数が不明な場合は UX が著しく低下する
モーダルダイアログ
モーダルダイアログは、重要な通知や確認をする場合に使います。
モーダルダイアログ表示中は画面上の他の領域や要素の操作ができません。
出典：モーダルダイアログ
モーダルダイアログのテキストは短く論理的にする必要があります。
二重否定や回りくどい表現は避け、ボタンの内容にも注意します。
出典：モーダルダイアログ
通知バナー
通知バナーは、重要度の高い情報をサイト側からユーザーへ提示する場合に使います。
例えば、メンテナンスを通知したい、ユーザーの対応が必要な情報を通知したいなどです。
出典：通知バナー
通知内容の属性ごとに異なるタイプを設定します。
視認性が不十分だと思われる場合は、背景色を設定してください。
出典：通知バナー
通知バナーの目的はあくまで情報を明確に告知することですので、複雑なリンクやアクションは避けてください。
バナーを閉じる場合はアクションボタンではなく、× のパーツを使います。
また、通知バナーの配置場所によって関係性を示すことができます。
- 画面上部
一般的な通知バナーの配置場所です。
画面を開いた方であれば必ず表示され、視認性が高まります。 - 特定のコンポーネント付近への配置
画面内の特定のコンテンツに関連する内容の場合は特定のコンポーネント付近への配置を検討します。
これにより情報が必要なユーザーへのみ通知することができます。
プログレスインジケーター
プログレスインジケーターは、ユーザーのアクションに対して処理が進行中であるときに使います。
アクセシビリティ確保のために基本的にはラベル有りで使います。
出典：プログレスインジケーター
残り時間や進捗の表示は必須ではありません。
これらの情報が不正確な場合は UX を損ねる可能性がありますので、基本的には正確に実装できる場合のみ表示します。
ラベルはアクションの状態を明確に表現します。
できるだけ少ない単語で説明することを推奨します。
出典：プログレスインジケーター
おわりに
デジタル庁のデザインシステムの一部を紹介しました。
カラーや余白など全体に関わる共通コンポーネントから、ボタンや通知バナーなどの特定のコンポーネントまで設計されており、これに準拠すれば画面設計としてある程度の質が担保されると思います。
デザインは奥深いものだと思いますが、右も左も分からない初心者がモダンな画面設計を行うための教材としてデジタル庁のデザインシステムはもってこいだと思います。
ぜひ読んだことのない方はご一読ください！
Discussion