はじめに
デジタル庁デザインシステムは、行政サービス向けに作られており、非常にアクセシビリティに優れています。
また、デジタル庁はデザインシステムを一般公開しています。
https://design.digital.go.jp/dads/resources/
色・文字サイズ・余白のルールが全部決まっているので、デザインがわからなくとも、それっぽい資料を出力可能。
以前書いた記事では、デジ庁デザインデータ（.fig）を Claude Design に読ませ、スライドを作成しました。
今回は GitHub で公開されている HTML 版のコードスニペットを読ませて、スライド＆HTML資料を作ってみたいと思います。
1. デジ庁デザインシステムをClaudeDesignに登録
GitHubのURLをClaude Designに登録します。
↓↓ コードスニペット（HTML版）GitHubリポジトリ URL
https://github.com/digital-go-jp/design-system-example-components-html
URL登録が終わったら「Continue to generation」を押下。5分ほど待つと取込が完了し、デザインシステムが完成します。
2. スライド作成
Claude Designのホーム画面で以下を選択します。
- Design system：先ほど作成した「デジ庁HTML Design System」を選択
- Template：「Slides」
以前書いた記事について、スライドを作ってもらおうと思います。
Claude Design ホーム画面
記事URLを貼って送信。
生成には数分かかります。
出来上がったスライド
濃い青の背景に白抜きの見出し、、
デジ庁のデザインシステムに沿ったスライドが出来ました！
3. デザインシステムをSkillsに登録
何気なく「デジ庁HTML Design System」をダウンロードしてみました。
ファイル構成をよく見ると、SKILL.mdが作成されているではありませんか！
これは是非Claudeチャットからも使えるようにしたい。
スキルをアップロードする
というわけで、Claudeホーム画面→設定→スキル より、スキルをアップロードします。
(ZIPファイル毎アップロードしてOK)
スキル登録完了
登録できました！
4. HTMLページ作成
今度は、ClaudeチャットからHTMLページを作成してみましょう。
先ほどアップロードしたスキルを呼び出し、「ClaudeDesign」についての解説をお願いしてみます。
出力結果
デジタル庁HPのようなデザインで、ClaudeDesignの解説ページを作ってくれました。
読みやすい！
まとめ
- GitHub の URL を貼るだけで、デザインシステムを取り込める
- わかりやすい資料が作れる
- スキルとして登録し、チャットでいつでも呼び出せる
出典
- デジタル庁デザインシステム
https://design.digital.go.jp/dads/