デジタル庁デザインシステム
デジタル庁デザインシステムとは、名前の通りデジタル庁が提供しているデザインシステムです。
行政機関や公共性の高い組織のWebサイト、アプリケーションを構築する際に利用することを念頭に置いて構築されています。
2024/05/30にv2.0.0としてベータ版が公開されました。
デジタル庁デザインシステムの内訳
デジタル庁デザインシステムには以下の成果物が含まれています。
以降は内容物をそれぞれ確認しつつ、デジタル庁デザインシステムがどのようなものかを考えていきます。
デザインシステム本体
デジタル庁デザインシステムベータ版のWebサイトのことを指します。
はじめて本ウェブサイトを見る方への業務での活用についての項目を確認します。
想定利用者: 開発者
画面自体や画面遷移をプログラム開発する際に、コンポーネントの仕様が明確になっていることでコードを記述しやすくなる。
テンプレートが提供されている場合は、あらかじめテンプレートをコード化しておくことで、その後の作業の効率化を図れる。
コードスニペットが提供されている場合はコンポーネントのコードをいちから作らず、コードスニペットを編集して作ることができる。
アクセシビリティ上の注意点が書かれており、開発作業においてすぐに参照できる。
どうやらデジタル庁デザインシステムにはUIコンポーネントライブラリは付随しておらず、Webサイト上に掲載されているデザインガイドラインとFigmaやイラストレーションの成果物をまとめてデザインシステムと呼称しているようです。
デザインシステムと聞くとデザインガイドラインとUIコンポーネントライブラリがセットのイメージが一般的な認識だと思っていたので、UIコンポーネントライブラリを公開していない点には少し驚きました。
Figmaデザインデータ
Figma上に構築されたUIコンポーネントのデザインデータです。
ベータ版に対応するデザインデータはv2のため、そちらを参考に見ていきます。
ページは基本デザイン、コンポーネント、利用上の注意事項の3ページに分かれており、それぞれWebサイトのページに対応しています。
Figma上での情報とWebサイトで確認できる情報にはほとんど差がないように見えますが、実際にはWebサイト側の方がより多くの情報を記載しています。
例として基本デザインのカラーに焦点を当ててみます。
Figmaデータ上では、デジタル庁デザインシステムが定義しているカラースキームが簡単な説明とともに提供されています。
一方、Webサイトの方ではFigmaにあったカラーの項目はカラーパレットと呼ばれるタブにまとめられており、概要とアクセビリティという要素が追加されています。
概要では、デジタル庁デザインシステムで定義されている色について、その名前や用途・要件といった情報がまとめられています。
アクセシビリティでは、概要で説明されている要件(カラーではコントラスト要件)がどのような規格で求められているのか、具体的にどういった要件なのかという情報がまとめられています。
また、v1系には主に行政手続きを主軸にしたイラストレーション・アイコン素材が含まれており、ダウンロードして利用可能となっています。
React製のコードスニペット
React/TailwindCSSで構築されたデジタル庁デザインシステムv1.4.2のコードスニペットです。
デザインシステム本体の項目で触れた通り、これが公式のUIコンポーネントライブラリ本体というわけではなく、あくまで作例の一つとして提供されています。
内部ではReact、TailwindCSS、ViteやStorybookが利用されており、cloneしてstorybookスクリプトを叩けば手元でコンポーネントの動作を確認することができます。
公開自体はちょうどv2.0.0リリースと同時にされていますが、コードが準拠しているガイドラインのバージョンはv1.4.2となっています。
デザイントークンの謎
当然v1.4.2準拠のコードスニペットのため、v1のFigmaに記載された通りの表現を期待していました。
しかし、読んでいるとどうやら一部v2.0.0以降の表現が混在していることに気がつきました。
src/tokens/Typography.tsxにて、後述のようなコード片があります。
<p className='text-std-45N-4'>std-45N-4 デザインシステム</p>
この std-45N-4 という表記はv2.0.0基準の表現です。(stdの先頭が大文字じゃないとか細かい部分については一旦置いておきます。)
v2.0.0のタイポグラフィにおいて、タイポグラフィのデザイントークンは次の形式をとります。
[テキストスタイル]-[フォントサイズ][太さレベル]-[行間レベル]
- テキストスタイル
- Dps、Std、Dns、Oln、Monoの5種類のうちいずれかのテキスト用途に分類される文字列
- フォントサイズ
- 14-64CSS pxのいずれかの値を取る数値
- 太さレベル
- N、M、Bのいずれかに分類される文字
- 行間レベル
- 1-7のいずれかの整数を取る数値
デザイントークンとして定義されている中で、太さレベルと行間レベルがv1.4.2の仕様と明確に異なります。
v1.4.2の仕様によれば、line-height(行間レベル)をデザイントークンで表現する際は s m l のいずれかとされています。
また、weight(太さレベル)についても r m b のいずれかとされています。
v1.4.2での具体的なデザイントークンの組み合わせについては現在公開されているドキュメントからは確認できないためv2.0.0とどの程度異なっていたのかはわかりませんが、少なくとも公開されているコードスニペットが完全にv1.4.2に準拠しているとは考えにくいです。
デザイントークンの実装を遡ってみる
タイポグラフィのデザイントークンはdigital-go-jp/tailwind-theme-pluginにてTaiwlindCSSのプラグインとして定義されています。
このプラグインのリリースはコードスニペットの公開日と同日の2024年5月30日付近の一回のみになっています。
Readmeにはリリースされているバージョンである 0.1.15 は Figmaの v1.4.2と対応するとされています。
一方、0.1.15時点でのコードを見てみると、下のようになっています。
fontSize: {
'dsp-64N-4': [
tokens.FontSize[64].value,
{
fontWeight: tokens.FontWeight[400].value,
lineHeight: tokens.LineHeight['1_4'].value,
},
],
...
}
この時点で太さレベルや行間レベルの表現がv2.0.0基準になっていることがわかります。
ではdigital-go-jp/tailwind-theme-pluginはデザインシステムベータ版リリースに合わせて作り始めて始めからv2.0.0準拠で製作されていたのでしょうか。
コミットログを遡ると、2023年11月のテーマアップデートでフォントサイズ周りを含む大きな変更が入っていることがわかりました。
ということは、少なくとも2023年11月の段階でv2.0.0に向けた更新が進められていることがわかります。
デザインシステムv1.4.2のタイポグラフィに関する記述の最終更新日が2023年10月になっていることから、v2.0.0のタイポグラフィの仕様策定が早い段階絵始まっていたことが伺えます。
また、更新以前のTailwindテーマを確認すると、v1ではタイポグラフィのデザイントークンを下のように表現していたことがわかります。
[テキストスタイル]{-mobile}-[サイズ]{-[用途]}
v1.4.2時点のFigmaでは、mobileフォントの仕様に難がありdeplicatedになった旨が記載されているため、v1系デザイントークンの表現を再考するよりもv2系に寄せる決定をしたのかもしれません。
結論として、デザイントークンの表記揺れに関してはTailwindCSSテーマのデザイントークンがv2.0.0準拠の定義に移行していたからということがわかりました。
所感
この記事ではデジタル庁デザインシステムベータ版を読み、気になった点についての調査を行いました。
デザインガイドラインについてはかなり作り込まれており、行政手続き関連に限らず参考にできるようになっています。
一方で、一部v2.0.0とv1.4.2の仕様が混在しているため資料を参考にする場合は注意しながら読み進める必要があると感じました。
コンポーネントのページ等まだ未完成な部分も多いですが、FigmaやTailwindCSSプラグインの定期的なアップデートを見るに今後も意欲的な更新が見込めると思います。
Discussion