なんらかのWebサービスやアプリケーションを作っていると、余白、色、文字サイズ、フォーム、エラー表示など、細かなUI / UX判断が次々に出てきます。
僕はデザイナーではないので、できればその場の雰囲気やAIの提案に頼るのではなく、安定したデザインシステムがあればいいなと思っていました。
そこで見つけたのが、デジタル庁デザインシステム（以下、DADS）です。DADSはDigital Agency Design Systemの略です。
読んでみると、想像していた以上に内容が充実していました。
基本デザインやUIコンポーネントだけではなく、ユーザビリティとアクセシビリティを踏まえた設計・実装のガイドラインまで用意されています。
せっかくならこれを普段使いしやすいようにしたかったので、CodexやClaude CodeなどからDADSを呼び出せる非公式Agent Skill「apply-digital-agency-design-system」を作りました。今回はこれをご紹介しようと思います。
安定して使えるデザインシステムを探したら、あった
DADSは、デジタル庁が公開しているデザインアセットです。
スタイリングの考え方を提供するデザイン言語、UIコンポーネント、ユーザビリティとアクセシビリティを踏まえたガイドラインから構成されています。
リソースページを見るとわかる通り、
- Figmaによるデザインデータ
- HTML/Reactのコードスニペット
- Markdown形式のドキュメント・アクセシビリティガイドライン
- ウェブアクセシビリティ導入ガイドブック
- イラストレーション・アイコン素材
と、「これを無料で公開していいのだろうか・・・？」と思うほどの充実っぷりです。
AIが扱う上でも非常にありがたく、構造化されたテキストなら検索や必要な部分の抜粋が安定して行いやすいです。
せっかくなのでSkillにした
今回作ったSkillは、DADSの公式Markdownを根拠に、WebページやUIコンポーネントの作成、改修、レビューを支援します。CodexとClaude Codeで利用できます。
Node.js 22.20.0以上を使える場合は、以下のコマンドでCodexとClaude Codeの両方へインストールできます。
1npx skills add https://github.com/Hideki-Kobayashi/apply-digital-agency-design-system/tree/main/skills/apply-digital-agency-design-system -g -a codex -a claude-codeこの方法では第三者製のskills CLIを使います。CodexではSkill Installerへリポジトリ内のSkillを指定する方法、CodexまたはClaude CodeのSkillフォルダへ手動で配置する方法もあります。詳しい手順と必要条件はリポジトリのREADMEを確認してください。
使い方はシンプルです。例えば、次のようにSkill名を明示します。
1$apply-digital-agency-design-systemを使って、この申請フォームを改修してください。新しいページの作成だけでなく、既存画面のレビューにも使えます。
1$apply-digital-agency-design-systemを使って、この画面をレビューしてください。ファイルは変更しないでください。DADSをあらゆるWeb UIへ適用するのは適切ではないため、このSkillは次のいずれかの場合にだけ呼び出されます。
- 利用者が本Skill、もしくはDADSの利用を明示した場合
- 対象プロジェクトが明確にDADSをUI基準として採用している場合
また、毎回すべてを読み込む必要もないので以下のような動作としました。トークン消費が大きく増加することを防ぐ意図です。
- ローカルへ保存したMarkdownを検索する
- 画面全体へ影響する
foundationsの関連資料を読む - 次に対象UIに対応する
componentsを確認する - 必要があればその他のガイダンスを読む
例えばフォームを扱うなら、画面全体に関係する基本デザインを押さえた上で、入力欄やボタンなど、対象となるコンポーネントの資料へ進む流れです。
これなら公式資料を常に根拠としつつ、指示と関係のない文書まで読み込まずに済みます。
ちなみに後述の自動取得と更新確認にはax CLIを使うため導入を強くおすすめします。以下の説明よりインストールしてください。
Skillを使ってフォームを作らせてみた
互いの結果を見せず、同じ仕様の申請フォームを別々に生成しました。1枚目はSkillを指定せず、2枚目は本Skillを指定しています。
画像中の番号は下表の同じ番号に対応します。
正直、見た目だけなら差はそれほど大きくありません。Skillなし版もラベルやエラー表示を備えており、一通り使えるフォームです。
ですが、Skill版は細かい見た目の違いやアラートの出し方によって入力時に迷いにくくなるように改善されています。
具体的にどんな改善がされているか、以下の表にまとめました。
| 利用者が感じる違い | Skillなし | 本Skillあり（今回の結果） | DADSの考え方と利用者への効果 |
|---|---|---|---|
| ① 入力条件の表示 | 入力例は欄の中（プレースホルダー）にあり、条件の一部はエラー後にわかる | 入力例や条件を欄の外に常に表示する | DADSは入力条件をあらかじめ示し、入力中に消える表示へ頼らない。入力中も条件を見直せるため、やり直しを減らしやすい |
| ② 入力欄の幅 | 多くの欄が同じように横長 | 氏名、メール、郵便番号、住所に合わせて幅を変える | DADSは入力内容に相応しい横幅にする。郵便番号など、どの程度の量を入れる欄か見当をつけやすい |
| ③ フォーカス表示 | 1色の枠で示す | 黒と黄色の二重の枠で示す | DADSは黄色と黒の二重表示で視認性を確保する。背景の色が変わっても、いま操作している場所を見失いにくい |
| ④ ボタン配置 | 2つのボタンを右側にまとめる | 「戻る」を左、「確認へ進む」を右に置く | DADSはブラウザなどで慣れた「左は戻る、右は進む」という方向感覚に合わせる。ボタンの意味を位置からも判断しやすい |
生成結果は実行のたびに変わるためあくまで一例ですが、Skillあり版ではDADSのルールによって細かいアクセシビリティ改善がみられました。
Skillは作って終わりではない
自作にせよそうでないにせよ、Agent Skillにおいて僕が最大の敵だと考えているのは、メンテナンス不足による陳腐化です。
- 適切な手法が変わったり、呼び出すツールが古くなった
- 外部のデータを参照する際に、参照する資料が古い
など、さまざまな理由でSkillが古くなってしまいます。
特に厄介なのは、Skillは普通に動いてしまうことです。エラーにならないのでそういった陳腐化に気づきにくいのです。
Skillの利用時、前回の公式確認から30日以上たっていれば更新を確認します。更新があれば利用者へ知らせ、同意後にDADSデータを更新します。
参照データの更新まで含めて設計した非公式Skillであり、DADSやWCAGへの適合は保証しません。