自治体サイトの改修の打ち合わせで、「デジタル庁デザインシステムに沿ってお願いします」と言われました。フロントエンドのフリーランスエンジニアは、Storybookに並ぶボタンのコードを写そうとして、ふと手を止めます。ボタンの色を自治体のものに変えてよいのか、変えたらアクセシビリティを壊してしまわないか。答えは、そのまま貼るのでなく、骨格を残して自分たちの版に仕立てることにあります。

1. フロントエンドのフリーランスがデジタル庁デザインシステムを確かめる理由

公共系の画面で名前が挙がる背景

デジタル庁デザインシステムは、官公庁や地方自治体などの行政機関や公共性の高い組織等のウェブサイトやオンラインサービス等で利用することを念頭に置いて構築されています¹。自治体や公共系の画面を受ける案件で、発注側がこの名前を出すのは、設計の出発点がそこにあるからです。

ただし、念頭に置かれているのは公共系の利用であり、民間のサイトでは使えないと読み取れる記載ではありません。この記事では、資料が書いている範囲、つまり公共系を念頭に置いた設計という点までを前提にします。

フロントエンドの仕事との接点

公式の使い方のページには、フロントエンドエンジニアは、デザインシステムで標準化されたコンポーネントを再利用することで効率的な開発ができる、と書かれています²。標準化されたコンポーネントがあるからこそ、どこまで自分の手で変えてよいのかを先に確かめる価値が出てきます。

Remogu（株式会社LASSIC運営）は、リモートワーク案件特化のエンジニアマッチングで、案件の90%以上がフルリモート可能です³。次の節では、まずデジタル庁デザインシステムそのものを見ていきます。

2. デジタル庁デザインシステムとは

3つの要素でできたデザインアセット

デジタル庁によると、デジタル庁デザインシステムは、デザイン言語、UIコンポーネント、ユーザビリティとアクセシビリティを踏まえた設計や実装のためのガイドラインから構成されるデザインアセットです¹。コンポーネントのコードだけがあるわけではなく、見た目の言語と、設計や実装の指針がそろって1組になっています。

そのため、Storybookのボタンを写すという作業は、3つのうちUIコンポーネントの一部だけを取り出す作業にあたります。残りの2つを知らないまま写すと、なぜその作りになっているのかを説明できないまま納品することになります。

出典：デジタル庁「デジタル庁デザインシステムβ版」をもとに作成

β版が示すリビングスタンダード

デジタル庁によると、デザインシステム本体の「β版」は、リビングスタンダードであることを示しています¹。完成して止まった規格ではなく、更新が続く前提で出されているということです。

コードを一度写して終わりにする運用とは、相性がよくありません。参画した時点で発注側が使っている版と、公式サイトの最新の版が違うことも考えられるため、どの版を前提にしているかを最初に尋ねる価値があります。

更新の時点を確かめる

デジタル庁によると、2026年9月9日にデザインデータ（Figma）のv2.18.0を公開しました¹。バージョン番号がここまで細かく刻まれていることからも、更新が続いていることが読み取れます。

発注側から渡されたFigmaデータや仕様書に、どの時点の版か書かれていなければ、まずその版を聞いておくと食い違いを防げます。では、その版をそのまま使ってよいのでしょうか。

3. そのまま使わずローカルデザインシステムを作る

ブランド概念を持たない仕組み

デジタル庁によると、デジタル庁デザインシステムは固有の組織に依拠したブランド概念を備えていません⁴。どの自治体や組織にも当てはまるように作られている反面、特定の自治体の色や雰囲気は最初から入っていないということです。

そのため、使うにあたってはローカルデザインシステムの作成が前提となります⁴。冒頭の場面で手が止まったのは、この前提があるのに、貼る前にそこへ触れていなかったからです。

ローカルデザインシステムの意味

デジタル庁によると、ローカルデザインシステムとは、デジタル庁デザインシステムを個々のサイトやサービスの要件に合わせて定義したデザイン仕様のことです⁴。本体を土台にして、その案件専用に決め直した仕様と読めます。

案件の初日に確かめたいのは、発注側にこの仕様がすでにあるかどうかです。あれば、それが写す元になります。無ければ、どの項目を決める必要があるのかが、最初の打ち合わせの話題になります。

導入先専用に定義してから使う

デジタル庁によると、デジタル庁デザインシステムは、導入先で直接使うのではなく、それをベースに導入先専用のデザインシステムを定義してから使います⁴。本体、ローカルデザインシステム、導入先の順に、間にもう1段をはさむ形です。

出典：デジタル庁「ローカルデザインシステム（スタイルガイド）」をもとに作成

この1段があるおかげで、導入先ごとの色や言葉づかいを、本体を書き換えずに決められます。次は、そのローカルデザインシステムの中で、何を変えてよく、何を初期値のまま使えるのかを見ます。

4. 変えてよい範囲と初期値のまま使う範囲

変える必要がない項目は初期値のまま

デジタル庁によると、デザイントークンのうち変更する必要がない項目については、デジタル庁デザインシステムの初期値をそのまま使用して構いません⁴。ローカルデザインシステムを作るといっても、すべての項目を一から決め直す作業ではありません。

リンクカラーを例にした変更の余地

変えてよい項目の例として、資料はリンクテキストのリンクカラーを挙げています。デジタル庁によると、リンクカラーは、青以外の色相を用いることも禁止されません⁴。

冒頭の自治体のコーポレートカラーに寄せたいという相談は、少なくともリンクの色については、禁止されない変更として扱われています。ただし、これは1つの例です。資料の記載が及ばない項目は、発注側のローカルデザインシステムで確かめます。

項目ごとの資料の記載

表1は、変更を考えるときの項目と、資料がその項目について何を書いているかを並べたものです。初期値のまま使えるもの、色相を変えても禁止されないもの、変えるときに条件が付くものの3行で、判断の入口になります。

項目	資料の記載
変更する必要がないデザイントークン	デジタル庁デザインシステムの初期値をそのまま使用して構わない4
リンクテキストのリンクカラー	青以外の色相を用いることも禁止されない4
基本デザインやコンポーネント等の設計	アクセシビリティの骨格を維持する範囲で実施しなければならない4

3行目だけは、変えてよいかどうかの話ではなく、変えるときの条件の話です。次の節では、この条件にあたるアクセシビリティの骨格を見ます。

5. アクセシビリティの骨格を残す

設計の条件として書かれていること

色や初期値を変えてよいとしても、資料には条件が付いています。デジタル庁によると、基本デザインやコンポーネント等の設計は、デジタル庁デザインシステムが備えるアクセシビリティの骨格を維持する範囲で実施しなければなりません⁴。

つまり、自由に決め直せるのは骨格の外側までです。ローカルデザインシステムを作る作業は、骨格を保ったまま、導入先の色や言葉づかいを乗せていく作業と言えます。冒頭のボタンの色を変える相談も、この条件の内側で考えることになります。

骨格が保たれたときに言えること

デジタル庁によると、アクセシビリティの骨格が維持できていることで、JIS X 8341-3:2016・WCAG 2.2の達成基準を満たす、または満たすことが容易となります⁴。資料の書き方は、満たすと言い切るものではなく、満たす、または満たすことが容易になる、というところまでです。

そのため、納品物の達成基準への適合は、骨格を残したうえで、別に確かめる作業が残ります。骨格を守ることは、適合の確認を軽くする土台であり、確認そのものの代わりではありません。

図の作成：Remogu編集部。デジタル庁「ローカルデザインシステム（スタイルガイド）」の記載を整理したもので、統計データではありません

次の節では、実装のサンプルであるコードスニペットと、デザインデータの提供の仕方を確かめます。

6. コードスニペットとFigmaデータの扱い

スニペットはサンプルとして書き換える

デジタル庁によると、コードスニペットは実装のサンプルとして提供されており、実際の利用環境やフレームワークの構成に合わせて書き換えて使用します⁴。Storybookで見たコードをそのまま貼る前提ではなく、案件の環境に合わせて直す前提で置かれているものです。

ただし、書き換えには注意があります。デジタル庁によると、コードスニペットにはWAI-ARIAの指定や強制カラーモードへの対応など、アクセシビリティを確保するための実装が含まれており、書き換えの際にこれらを取り除かないよう注意します⁴。見た目を整えるつもりで余分な属性を削ると、骨格まで落としてしまいます。

Figmaデータの入手と系統

デジタル庁によると、デザインデータ（Figma）はFigma Community上にあり、取得のためにはFigmaの会員登録（無料）が必要です⁵。デザイナーから共有されない場合でも、自分で取得して中身を確かめられる入口があるということです。

一方で、系統には違いがあります。デジタル庁によると、v1系統のデザインデータは、今後はエラー修正のみの更新となります⁵。先に見たとおり、2026年9月9日に公開されたのはv2.18.0でした。発注側がどの系統を使っているかは、参画の早い段階で確かめておきたい点です。

実装のサンプル集と資料の記載

デジタル庁によると、デジタル庁デザインシステムをプレーンなHTML/CSS/JavaScriptまたはReact/Tailwind CSSで実装したサンプル集を公開しています⁵。案件の技術構成に近いほうを手がかりにできます。

表2は、この節で触れたスニペットとデザインデータについて、資料が書いている内容を項目ごとに並べたものです。書き換えられるものと、取り除かないものを分けて読めます。

項目	資料の記載
コードスニペット	実装のサンプルとして提供。利用環境やフレームワークの構成に合わせて書き換えて使用する4
WAI-ARIAの指定、強制カラーモードへの対応	書き換えの際に取り除かないよう注意する4
デザインデータ（Figma）の取得	Figma Community上にあり、Figmaの会員登録（無料）が必要5
v1系統のデザインデータ	今後はエラー修正のみの更新5
実装のサンプル集	HTML/CSS/JavaScript版と、React/Tailwind CSS版を公開5

次の節では、資料の記載を、参画後に使える確認の順番にまとめます。

7. 参画してから確かめる順番

最初の打ち合わせで尋ねる3つ

最初に尋ねたいのは、発注側にローカルデザインシステムがあるかどうかです。デジタル庁デザインシステムは、導入先専用のデザインシステムを定義してから使うものなので⁴、これがあれば、写す元もそこになります。

無ければ、次に決めるのは、何を初期値のまま使うかです。変更する必要がないデザイントークンは、初期値をそのまま使用して構いません⁴。変える項目だけを先に挙げてもらえば、決める量が絞られます。

3つ目は、変える項目がアクセシビリティの骨格を残せるかどうかです。設計は骨格を維持する範囲で実施するもの⁴なので、リンクカラーのような変更も、この条件の内側で確かめます。

実装に入ってから確かめる2つ

実装に入ったら、スニペットを書き換えるときに、WAI-ARIAの指定や強制カラーモードへの対応を残したかどうかを見ます⁴。

最後に、Figmaデータがv2系統かどうかです。v1系統は今後エラー修正のみの更新となるため⁵、どの系統を使っているかが食い違っていれば、設計の参照先が古いままになります。

確認の順番を一覧にする

表3は、上の5つを確認する順に並べ、それぞれの根拠となる資料の記載を添えたものです。案件の初日から納品前まで、同じ順で使えます。

順番	確かめること	根拠となる資料の記載
1	発注側にローカルデザインシステムがあるか	導入先専用のデザインシステムを定義してから使う4
2	無ければ、何を初期値のまま使うか	変更する必要がない項目は初期値のまま使用して構わない4
3	変える項目は、アクセシビリティの骨格を残せるか	骨格を維持する範囲で設計を実施しなければならない4
4	スニペットを書き換えるとき、WAI-ARIAなどを残したか	書き換えの際に取り除かないよう注意する4
5	Figmaデータはv2系統を使っているか	v1系統は今後エラー修正のみの更新5

図の作成：Remogu編集部。デジタル庁の資料の記載をもとに確認の順を整理したもので、統計データではありません

貼る前に手が止まった場面へ戻る

冒頭で手が止まったのは、色を変えてよいのかが分からなかったからでした。いま答えははっきりしています。そのまま貼るのでなく、骨格を残して自分たちの版に仕立てます。リンクカラーの色相を変えることは禁止されず⁴、変えない項目は初期値のまま使えます⁴。

この順番を持っていれば、打ち合わせの席で「ローカルデザインシステムはありますか」と最初に尋ねられます。

自分の経験に合うリモート案件の条件を知りたいときは、Remoguに登録して確かめてみてください。案件の中身を見てから、自分が尋ねる前提を整える手もあります。そのときも、骨格を残して自分たちの版に仕立てる、という一言があれば迷いません。

8. よくある質問

デジタル庁デザインシステムはそのまま使えますか

資料はそのままの利用を前提にしていません。固有の組織に依拠したブランド概念を備えていないため、使うにあたってはローカルデザインシステムの作成が前提となります⁴。導入先で直接使うのではなく、それをベースに導入先専用のデザインシステムを定義してから使います⁴。

色を自治体のものに変えてもよいですか

資料が例に挙げているリンクカラーは、青以外の色相を用いることも禁止されません⁴。変更する必要がないデザイントークンは初期値のまま使えます⁴。ただし、設計はアクセシビリティの骨格を維持する範囲で実施するものです⁴。リンクカラー以外の項目は、発注側のローカルデザインシステムで確かめます。

コードスニペットは書き換えてよいですか

コードスニペットは実装のサンプルなので、実際の利用環境やフレームワークの構成に合わせて書き換えて使用します⁴。書き換えの際は、WAI-ARIAの指定や強制カラーモードへの対応を取り除かないよう注意します⁴。

※公開中の案件数は時期によって変わります。記事中の案件の傾向は執筆時点のものです。

出典・参考情報

＊1 デジタル庁「デジタル庁デザインシステムβ版」（2026年10月・2026年10月確認）
＊2 デジタル庁「使い方」（2026年10月・2026年10月確認）
＊3 Remogu（株式会社LASSIC運営）公開情報：扱う案件の90%以上がフルリモート可能
＊4 デジタル庁「ローカルデザインシステム（スタイルガイド）」（2026年10月・2026年10月確認）
＊5 デジタル庁「リソース」（2026年10月・2026年10月確認）