デザインシステム
色・活字・部品の役割を揃えて、画面を再利用しやすくします。
01
原則
見た目のルールは、中身が読めて、同じ部品を何度でも使えるようにするためです。
- 中身が先。情報の階層をはっきりさせる。デバイスの枠を原則にしない
- 装飾より本文。数字と正誤が読めること
- 読める密度。余白と行間でスキャンできるようにする
- 色は役割名で選ぶ。同じ役割には同じトークン
- 部品を再利用する。画面ごとに形を増やさない
02
色と活字
ブランドの色と、画面で使う役割の色。文字は見出しを大きく、本文は読みやすい行間にします。
ブランドの色
デビクレではレッスンは青・道場は紫・模試は緑をテーマカラーにしています。
deep
deep accent
primary
primary
cyan
cyan accent
teal
teal accent
green
green accent
purple
purple accent
sky
surface
役割の色
ボタンや本文は、こちらの名前で選びます。
primary
主CTA
heading
見出し
foreground
本文
muted
薄い面
destructive
危険・誤答
border
境界
活字
見出しの見本
ページの見出し
本文。数字と解説が読める大きさと行間です。
補助の説明やメタ情報
状態のラベル
余白と角丸
隙間は 4 の倍数。面の区別は影より境界です。
4
8
16
24
32
03
マークアップ
記事・解説・問題文は同じルールです。見出しの段階、本文の行間、リンクや枠を揃えています。
見出し
仕訳は、借方と貸方に分けて記録します。勘定科目の型を先に押さえます。
- 現金
- 売掛金
- 取引を読む
- 勘定科目を決める
色だけに頼らず、正解・不正解と書きます。
本文中の 借方 はインラインコードです。
現金 100 / 売上 100
| 勘定 | 区分 |
|---|---|
| 現金 | 資産 |
| 売上 | 収益 |
見出しと本文の段階を揃えます。
04
レイアウト
デジタル庁デザインシステムは、マージン・カラム・ガター・ブレークポイントでページを説明します。ここも同じ語で考えますが、12カラムのグリッドは持っていません。幅は実際のページコンテナに合わせています。
マージン / カラム / ガター
左右マージン 16px（広い画面は 24px）· 上下 32px
1カラムの本文
既定 768px · 広め 896px · 広い表 1600px · 案内ページは 1024px
カード
ガターは 16px。2列は 640px から。
カード
3列は 768px から。
本文と flush
一覧やフォームは左右に余白を残します。長い本文は、狭い画面で端まで面を伸ばします。
余白つき
カード
ページの内側に置きます。
flush
本文カード
狭い画面では左右の角を落とします。
画面の枠
一部の画面だけ、狭い画面で下部タブを出します。集中する画面ではタブをしまい、下に操作バーを置きます。
05
コンポーネント
製品と同じ部品です。見本の値だけを渡しています。
ボタン
紫・緑はアクセント。削除は塗りつぶしではなく線です。
バッジ
カード
入力
狭い画面でも 16px。拡大されないようにします。
入力内容を確認してください
ダイアログとシート
区切り
上
下
テーブル
管理の一覧向け。学習の仕訳表はマークアップ側のルールです。
| 役割 | トークン |
|---|---|
| 見出し | heading |
| 本文 | foreground |
読み込み
カウントダウン
残り時間。期限が来ると空になります。
01:59:59
パンくずとページ見出し
ページタイトル
公開ページと同じ組み立てです。
トーンアイコン
円の色は primary / purple / green / deep。
進捗
結果はリング。一覧はバー。セグメントは正解・誤答・未回答を分けます。
primary
purple
green
正誤
色だけにせず、「正解」「不正解」と書きます。
連続日数
StreakFlame の段階は 0 から 7。md と sm。
md
sm
状態・級・実績
学習カード
アイコン・級・進捗・中断を組み合わせた行です。
活動ヒートマップ
直近7日の密度。マスの濃さは回数です。
2日連続
月
7
火
8
水
9
木
10
金
11
土
12
日
13
得点の推移
同じ系列の点数を線でつなぎます。