デジタル庁デザインシステムをもっと使いやすく！ 「Color」編（完全版）【Web Design Talk】

こんにちは、How many designs です。
Web Design Talk というタイトルで、デザインに関するお話を少しだけ書いていこうと思います。気軽に読んでいただければ幸いです。

この記事は何？（この段落は読み飛ばしOKです）

デジタル庁のデザインシステムはアクセシビリティに優れたデザインシステムです。誰でも使いやすい、分かりやすいウェブサイトを作るためのツールとして開発されています。この記事では、デジタル庁のデザインシステムを、より多くの場所で活用できるように、CSSのみで実装してみます！

この記事を書こうと考えた経緯は以下の記事に書きました。

---

さて、本題です。

デジタル庁のデザインシステムの「Color 2.0」で定義されているカラーパレットとは？

デジタル庁のデザインシステムでは「プリミティブカラー 」として10色と「Solid Gray」を加えた11色のカラーパレットが定義されています。

（補足: ここでの「Solid Gray」とはどのようなグレーを指すのかデジタル庁デザインシステムでは明示されていません。知りたい。。。）

プリミティブカラーはカラーの基盤となる基本的な色で構成され、多様なウェブサイトごとに統一感のあるカラースキームを作成するために利用します。各カラーは広範なカラー設定を導出するための色相と明度の段階で構成されています。プリミティブカラーを参考とし、色相、明度、彩度などを調整しウェブサイトのトーン＆マナーとして相応しいカラースキームを構築します。

デジタル庁

プリミティブカラーとSolid Gray

「Color 2.0」をCSSに書き直す！全て！

Reactコンポーネントとして記述されているコードを、React以外の環境でも使えるようにCSS(SCSS)で書き直します。

以前の記事でBlueのコンポーネントをCSS(SCSS)に書き直してみたところ、好評でしたので全てのカラーパレットを書き直してみようと思います！

CSS(SCSS)の書き方

Blueの記事でも書きましたが、カラーパレットが段階的にどのように変化するのかというアルゴリズムが公開されていないので、以下のように一つ一つのRGBカラーコードはベタ打ちするしかありません。これは仕方がない。。。

// Define color map using SCSS variables
$color-variations: (
  "blue": (
    50: 232 241 254,
    100: 217 230 255,
    200: 197 215 251,
    300: 157 183 249,
    400: 112 150 248,
    500: 73 121 245,
    600: 52 96 251,
    700: 38 74 244,
    800: 0 49 216,
    900: 0 23 193,
    1000: 0 17 143,
    1100: 0 0 113,
    1200: 0 0 96,
  ),
  "light-blue": (
    50: 240 249 255,
    100: 220 240 255,
    1000: 0 66 140,
    1100: 0 49 106,

...他の色も同様にベタ打ちで定義します（アルゴリズム公開して欲しい。。。）

さらに、デジタル庁のデザインシステムでは色関連のクラスとして、背景色用のbg-*、テキストカラーのtext-*、の他、fill-*、border-*のクラスが定義されています。

これを全てベタ打ちで書くのは非効率ですし、運用やカスタマイズも大変です。

しかし、SCSSの関数を使うことで効率的に記述することは可能です。これだけで全てのカラーの背景色 .bg-{色の名前}-500やテキストカラーの .text-{色の名前}-500 といったスタイルを作成することができます。

ありがとうSCSS！。標準的な技術でできる良さ！

/*------------------------------
Generate classes dynamically
------------------------------*/
/*
Background Color
*/
@each $hue, $values in $color-variations {
  @each $key, $value in $values {
    .bg-#{$hue}-#{$key} {
      background-color: rgb($value);
    }
  }
}
/*
Text Color
*/
@each $hue, $values in $color-variations {
  @each $key, $value in $values {
    .text-#{$hue}-#{$key} {
      color: rgb($value);
    }
  }
}
/*
Fill Color
*/
@each $hue, $values in $color-variations {
  @each $key, $value in $values {
    .fill-#{$hue}-#{$key} {
      fill: rgb($value);
    }
  }
}
/*
Border Color
*/
@each $hue, $values in $color-variations {
  @each $key, $value in $values {
    .border-#{$hue}-#{$key} {
      border-color: rgb($value);
    }
  }
}

利用方法

• VSCodeなどでSCSSをCSSにコンパイルします

• HTMLでCSSを読み込みます

• HTMLで使用したいクラスを記述します

（例）背景色をbg-blue-500にしたい場合のクラスの書き方

<div class="bg-blue-500"></div>

実装例

実際に実装したコードをCodePenで確認できるようにしました。よかったら使ってみてください！

まとめ

デジタル庁のデザインシステム、とても便利ですよね。でも、Reactで提供さてているので少し敷居が高いと感じていませんか？そこで、このデザインシステムのReactコンポーネントのカラーパレットを、より多くのWebデザイナーが扱いやすいCSSに書き換えてみました。

カラーパレットはデザインシステムの土台です。CSSのような標準的な技術で利用できれば多くのプロジェクトに取り入れることができます。

メリットはこれだけではありません。

• 学習コストが低い: CSSは多くの開発者がすでに知っているので、新しいメンバーを育成するのも簡単です。

• 柔軟性が高い: Reactに比べて、CSSはより自由なカスタマイズが可能です。

• 保守性が高い: シンプルな構造なので、長期的なメンテナンスも容易です。

更新

2025/1/6

CodePenのCSSを修正しました。色の名前をダブルクォーテーションで囲みました。VSCodeでワーニングが出ていたためです。

修正前

blue: (
50: 232 241 254,

修正後（blue以外の色についても同様）

"blue": (
50: 232 241 254,