--- title: "デジタル庁デザインシステムのStorybookとGitHub｜React 19版・Figma v2.18.2の入手と取り込み手順" url: "https://www.issoh.co.jp/tech/details/2356/" published: 2024-06-07 updated: 2026-10-25 categories: ["React"] publisher: "株式会社一創" --- # デジタル庁デザインシステムのStorybookとGitHub｜React 19版・Figma v2.18.2の入手と取り込み手順 デジタル庁デザインシステム（DADS）のコンポーネントは、公式サイトで公開されているStorybookをブラウザで開けば、クローンしなくても動きと実装を確認できます。コードの置き場所はGitHubのHTML版・React版の2リポジトリです。React版は2026年10月20日にReact 19前提へ切り替わり、2日後の10月22日にはTailwind CSSプラグインがv2.0.0になりました。古い解説を参照して最新版のコードやプラグインを取り込む場合は、Reactの型とTailwindの設定に互換性対応が必要になることがあります。この記事では、2026年10月25日時点の公式サイト・GitHub・npmの記載をもとに、入手先から取り込み、更新の追い方までを説明します。 ## まとめ | 見たいもの | 入手先 | 現行の版 | | ----------------- | ---------------------------------------------------------------------------------------- | ------------ | | Storybook（HTML版） | [design.digital.go.jp/dads/html/](https://design.digital.go.jp/dads/html/) | 2026-10-21更新 | | Storybook（React版） | [design.digital.go.jp/dads/react/](https://design.digital.go.jp/dads/react/) | 2026-10-21更新 | | コード（HTML版） | [GitHub -html](https://github.com/digital-go-jp/design-system-example-components-html) | タグ v20261021 | | コード（React版） | [GitHub -react](https://github.com/digital-go-jp/design-system-example-components-react) | タグ v20261021 | | Figmaデザインデータ | Figma Community | v2.18.2 | | ドキュメント（Markdown） | 公式リソースページのzip | 2026年10月21日版 | | Tailwindプラグイン | npm | 2.0.0 | - コンポーネントはnpmで配るライブラリではありません。必要なコードを自分のリポジトリにコピーして使います。npmで配られているのはデザイントークンとTailwindプラグインだけです。 - React版はReact 19・Tailwind CSS v3・TypeScriptが前提です。React 18で使うには `forwardRef` で包む修正が要ります。 - プラグインを版指定なしで入れると2.0.0が入ります。2.0.0では `desktop` ブレークポイントが削除されたため、React版の一部コンポーネントはデスクトップ幅のレイアウトが効かなくなります。`@^1` に固定するか、`screens` を自分で定義してください。 - デザイン仕様は49種ありますが、コードがあるのはHTML版・React版とも41種です。メガメニューやコンボボックスなど9種はコードが用意されていません。 ## 公式Storybookの公開先とコンポーネントの確認事項 ### ブラウザで開けるHTML版・React版のStorybook 公式の[リソースページ](https://design.digital.go.jp/dads/resources/)には、GitHubリポジトリと並んで「コードスニペット（HTML版）Storybook」「コードスニペット（React版）Storybook」へのリンクがあります。どちらもデジタル庁のドメインで公開されているビルド済みのStorybookで、Node.jsを入れなくてもブラウザで開けます。コンポーネントの見た目、バリアントごとの差、キーボード操作、Docsタブに書かれた実装上の注意を確認するだけなら、ここで足ります。 公開版の中身は、Storybookが出力する `index.json` で数えられます。2026年10月25日時点で、React版はストーリー207件・ドキュメント67ページ、HTML版はストーリー196件・ドキュメント48ページです。どちらにも「はじめに」「導入方法」「開発方針」のドキュメントと、カラー・タイポグラフィ・エレベーションの基本デザインのページが入っています。React版の開発方針には、各コンポーネントがJIS X 8341-3:2016とWCAG 2.2のレベルA・AAの達成基準をすべて満たすことを目標とし、axe-coreによる自動テストと専門家レビューを行うと書かれています。Storybookでは見た目より先に、フォーカスの移り方とスクリーンリーダー向けの属性を見てください。Storybookそのものの使い方は[Storybookとは？使い方・Next.js連携・テスト・費用まで実装手順で解説](/tech/details/2995/)で扱っています。 ### コードが用意されていないコンポーネント デザインシステム本体のコンポーネントは49種あり、Markdown一式にも49種の仕様ファイルが入っています。一方、公開Storybookに並ぶコンポーネントはHTML版・React版とも41種です。突き合わせると、次の9種はどちらの版にもコードがありません。 - ボトムナビゲーション、ヘッダーコンテナ、メガメニュー、モバイルメニュー - コンボボックス、チップタグ、テーブルコントロール - イメージスライダー、注釈ブロック 版によって有無が違うものもあります。目次はHTML版だけにあり、カレンダーはReact版では日付ピッカーと別のコンポーネントになっています。スクロールトップボタンはReact版のStorybookで「Deprecated」の下に置かれています。ヘッダー周りとコンボボックスは画面設計で早い段階に必要になる部品なので、Figmaの仕様だけを見て「コードもあるはず」と見積もると、自作の工数が抜け落ちます。設計に入る前にStorybookの一覧で有無を確かめてください。 ## GitHubリポジトリの取得とStorybookのローカル起動手順 ### React版の起動手順 手元のコードを書き換えながら確かめたいときは、リポジトリをクローンしてStorybookを起動します。React版の `package.json` は `engines` で Node.js 22以上を指定しています。Storybookは10.6系、ビルドはVite 8です。 ``` git clone https://github.com/digital-go-jp/design-system-example-components-react.git cd design-system-example-components-react npm install npm run storybook ``` 起動すると `http://localhost:6006` でカタログが開きます。静的ファイルを書き出すときは `npm run storybook:build` です。 ### HTML版の起動とスクリプト名の違い HTML版も `npm install` と `npm run storybook` で同じポートに立ち上がります。違うのはビルド用スクリプトの名前で、HTML版は `build-storybook`、React版は `storybook:build` と語順が逆です。CIの設定を片方からもう片方へコピーすると「Missing script」で止まります。HTML版には `test:vrt`（Playwrightによる画面比較テスト）もあり、各コンポーネントのディレクトリには `.css`・`.html`・必要な場合だけ `.js` が入っています。React版と違い、フレームワークにもTailwindにも依存しません。 ### リポジトリ名の経緯と取り込む版の固定 React版のリポジトリは2024年3月に `design-system-example-components` の名前で作られ、2025年7月8日にHTML版が新設されたあと、現在の `-react` 付きの名前に変わりました。旧URLはGitHubの転送でReact版に着くので、古い記事のリンクからはHTML版の存在に気づけません。 2026年10月15日からは、リリースのたびに `v20261021` のような日付形式のタグとGitHub Releasesが自動で作られるようになりました。コピーしたコードの出どころを残すには、取り込んだタグ名をコミットメッセージかREADMEに書いておくのが確実です。あとで公式の差分を追うとき、`git diff v20260909 v20261021 -- src/components/Accordion` のようにコンポーネント単位で比べられます。なお、どちらのリポジトリもREADMEに「Pull Requestは現時点では受け付けておりません」と書かれており、不具合の報告はIssueで行います。 ## 既存プロジェクトへの取り込み条件と互換性対応 ### React版：React 19前提への移行とReact 18で使う場合 React版は2026年10月20日のコミットでReactをv19に上げ、`forwardRef` を使わず `ref` をpropsとして受け取る書き方に置き換えました。公式のお知らせでは10月21日付で「React 19に対応」と告知されています。`package.json` の依存は `react ^19.3.0`、`tailwindcss ^3.4.19` です。React 19の `ref` の扱いは[React 19でforwardRefが不要に｜refをpropsで渡す新方式と移行手順](/tech/details/4382/)で詳しく説明しています。 React 18のプロジェクトに取り込む場合の修正は、リポジトリの[React v18 で使用する場合](https://github.com/digital-go-jp/design-system-example-components-react/blob/main/docs/using-with-react-v18.md)にまとまっています。要点は3つです。 - `ref` を受け取るコンポーネントを `forwardRef` で包む。包まなくても型エラーは出ませんが、実行時に `ref` が渡らず、ダイアログの開閉やフォーカス移動が動きません。 - `useModalDialog`・`useTab`・`useTabAria` が返す型 `RefObject` を `RefObject` に直す。 - ランゲージセレクターのPopover APIのサンプルでは、`popoverTarget` を小文字の `popovertarget` に書き換える。React 18の型定義にはこれらのPopover属性がないため、属性名の変更に加えて型エラーへの対処も必要です。 最初の項目は型チェックを通ってしまうので、見落としても気づきにくい点に注意してください。React 18のまま使う場合は、モーダルダイアログとタブを実際に操作して確かめるのが一番早い確認方法です。 ### Tailwindプラグインv2.0.0で消えたdesktopブレークポイント React版の[導入方法](https://github.com/digital-go-jp/design-system-example-components-react/blob/main/src/docs/getting-started.mdx)は、ステップ1で版指定なしの `npm install @digital-go-jp/tailwind-theme-plugin` を案内しています。2026年10月22日以降、このコマンドで入るのは2.0.0です。一方、リポジトリ自身の `package.json` は `^1.0.1` のままです。 2.0.0の[移行ガイド](https://github.com/digital-go-jp/tailwind-theme-plugin/blob/main/MIGRATION.md)は、Tailwind CSS v3向けの `desktop`（48em）と `desktop-admin`（62em）のブレークポイント削除を挙げています。npmで配布されている1.0.1と2.0.0のビルド済みファイルを比べると、1.0.1にある `desktop:"48em"` の定義が2.0.0にはありません。React版のソースを検索すると、アコーディオン、緊急時バナー、ランゲージセレクター、ノティフィケーションバナーの4コンポーネントが `desktop:` 付きのクラスを使っています。Tailwind v3は定義の無いバリアントをエラーにせず無視するため、ビルドは通ります。デスクトップ幅のときだけレイアウトが崩れる形で表面化します。 対処は2通りです。リポジトリと同じ1系に固定するか、2.0.0を使って `screens` を自分で定義します。 ``` # 方法1：リポジトリと同じ1系に固定する npm install @digital-go-jp/tailwind-theme-plugin@^1 ``` 2.0.0を使う場合は、インストール後に `tailwind.config.js` で `desktop` を定義し直します。 ``` # 方法2：2.0.0を入れる npm install @digital-go-jp/tailwind-theme-plugin@2.0.0 ``` ``` // tailwind.config.js module.exports = { content: ['./src/**/*.{ts,tsx}'], theme: { extend: { screens: { desktop: '48em', 'desktop-admin': '62em', }, }, }, plugins: [require('@digital-go-jp/tailwind-theme-plugin')], }; ``` 2.0.0ではほかに、`leading-1-5` 形式の行の高さ（`leading-150` へ置き換え）、`list-lower-latin` などのリスト記号、v3向けの `aspect-16/9` などの縦横比のクラスも削除されています。コピー済みのコードや自作の画面でこれらを使っていないかは、プラグインを上げる前に `grep -rE "leading-1-|desktop(-admin)?:|list-(lower-latin|circle|square)|aspect-(1/1|3/2|16/9)" src` で洗い出せます。Tailwind CSS v4で使う場合は、CSSファイルで `@import '@digital-go-jp/tailwind-theme-plugin/v4';` を読み込みます。ただしReact版のクラスの書き方はv3前提です。 ### HTML版の取り込み手順と共通CSSの導入 HTML版は、まず公式の `global.css` 冒頭にある共通のCSSカスタムプロパティをプロジェクトに追加し、そのうえで必要なコンポーネントのHTML・CSS・JavaScriptを取り込みます。同じ値をnpmで管理したい場合は、`@digital-go-jp/design-tokens` の `tokens.css`（色・フォント・エレベーションだけなら `tokens-simple.css`）も使えます。Reactを使っていても、Tailwindを入れない方針ならHTML版のCSSを自前のコンポーネントに移す方法が候補になります。イベント処理や状態管理をReactに組み込む工数は別途見積もってください。 ### トークン・プラグインとFigmaの版の対応 デザインデータとnpmパッケージは版番号が別々に進みます。各READMEの対応表では次のようになっています。 | パッケージ | 最新版 | npm公開日 | 対応するFigmaの版 | | --------------------- | ----- | ---------- | ------------ | | tailwind-theme-plugin | 2.0.0 | 2026-10-22 | 2.3.0〜2.18.2 | | design-tokens | 2.1.0 | 2026-10-20 | 2.0.4〜2.18.1 | プラグインのpeerDependenciesは `tailwindcss` の `^3.4.17 || ^4.0.0` です。どちらもMITライセンスです。 ## Figmaデザインデータの入手先とコードとの版の違い Figmaのデザインデータは、リソースページからリンクされたFigma Communityで配布されています。取得にはFigmaの無料の会員登録が必要です。[デザインデータのお知らせ](https://design.digital.go.jp/dads/updates-design/)によると、最新は2026年10月21日公開のv2.18.2で、日付ピッカーへの「今日を表す日付ボタン」の追加や、ページナビゲーションのActiveステートの追加が入りました。7月8日のv2.16.0のあと、10月21日までに5つの版が出ており、月1〜2回のペースで更新されています。v1系はエラー修正のみの更新と告知されているので、新規案件ではv2系を使います。 デザインデータの版とコードの更新は同じ日に出るとは限りません。たとえばメガメニューはv2.18.0（9月9日）でFigmaに初めて入りましたが、10月25日時点でコードはありません。デザイナーがFigmaの最新版で画面を組む場合は、使う部品ごとにStorybookでコードの有無を見てから実装の見積もりを出してください。入札による調達で、仕様書を書いた時点の版が必要な場合は、デジタル庁の「ご意見・ご要望」フォームから特定の版を依頼する手続きもリソースページに書かれています。 ## Markdown配布版の入手先とAI向けの参照設定 2026年7月8日から、サイト全体のドキュメントとアクセシビリティガイドラインをMarkdownにしたzipが配布されています。[その他のお知らせ](https://design.digital.go.jp/dads/updates-misc/)を見ると、サイトの更新に合わせて再配布されており、2026年10月25日時点では10月21日版が提供されています。10月21日版のzipを展開すると `.md` ファイルが145本あり、コンポーネントは49種がそれぞれのディレクトリに入っています。 同梱のREADMEは、このzipを「主にAI参照用途としてMarkdown形式へ変換したもの」と説明しています。README.mdとMANIFEST.mdを除く本文ファイルの冒頭には `title`・`category`・`slug`・`document_type`・`source_url`・`language` のYAML Front Matterがあり、全ファイルの目次は `MANIFEST.md` です。コーディング支援AIに読ませるなら、リポジトリ内に置いてエージェント向けの指示ファイルから参照させる使い方が合っています。 ``` unzip dads-markdown-20261021.zip -d docs/dads # AGENTS.md や CLAUDE.md に追記する例 UIを実装するときは docs/dads/MANIFEST.md から該当コンポーネントの index.md を開き、 その仕様（サイズ・状態・アクセシビリティ要件）に従うこと。 ``` READMEには「本ウェブサイトそのものの完全体ではありません」とも書かれています。図版の読み取りや細かな条件で迷う箇所は、各ファイルの `source_url` から公式ページを確認してください。zipは月に何度も更新されるので、ファイル名の日付を見て古い版を使い続けないことも大切です。 ## 更新を追う運用と破壊的変更の実例 コードスニペットの更新は、2026年7月以降だけでも7月15日、8月5日、8月19日、9月9日、10月21日の5回ありました。[コードスニペットのお知らせ](https://design.digital.go.jp/dads/updates-code-snippet/)には新規追加と並んで、コピー済みのコードに影響する変更も載っています。 - 2026年10月21日：React版をReact 19に対応（React 18のプロジェクトでは上記の修正が必要） - 2026年9月9日：React版からv1コンポーネントを削除 - 2026年8月19日：両版で「パンくずリスト」を「パンくずナビゲーション」に改称し、マークアップを `
    ` から `

    ` に変更 - 2026年7月15日：React版のインプットテキスト・テキストエリア・日付ピッカーで `placeholder` を `never` 型に変更 - 2026年6月24日：両版のチップラベルで `outline` を `outlined`、`filled` を `filled-2` などに改称 コピーして使う以上、こうした変更は自動では届きません。更新を知る手段は、サイトのRSSフィード（`/dads/feed.xml`）、GitHubリポジトリのReleasesのWatch、npmの2パッケージの3つです。担当者を1人決め、お知らせが出た日に取り込み済みのコンポーネントが対象かだけを確認すれば、負担は小さく済みます。見た目の差分をまとめて検知したい場合は、Storybookのストーリーがそのまま使えるビジュアルテストと組み合わせます。方法は[Chromaticとは？Storybook連携のビジュアルテスト自動化と料金・TurboSnapを解説](/tech/details/6969/)で説明しています。 ## 採用判断｜コピー運用で使う場面と見送る場面 デジタル庁が2026年8月6日の事業者向け勉強会で配った[資料](https://www.digital.go.jp/assets/contents/node/basic%5Fpage/field%5Fref%5Fresources/79b783f4-5265-4044-a374-f8f6ccd6e5da/5b510767/20260806%5Fmeeting%5FOverview-and-Features-of-DADS%5Foutline%5F03.pdf)には、DADSについて「中央省庁の調達事業では、原則として採用することになっています」と書かれています。中央省庁の調達案件では、この原則と調達仕様書を確認して採用する版や取り込み方を決めます。自治体の案件では、発注者の方針や調達仕様書に基づいて採否を判断してください。日付ピッカーやファイルアップロードをアクセシブルに自作する手間は大きいため、必要な部品のコードが提供されていて、自社で改修と動作検証を続けられる案件では、公開された実装を出発点にしてください。行政システムの要件定義から実装までをまとめて任せたい場合は、一創の[公共システム開発](https://www.issoh.co.jp/service/business%5Fsystem/public/)でご相談を受けています。 見送るべきなのは、取り込んだあとに公式のお知らせを追う担当を置けないときです。React版の導入方法には、コピーしたコードは「プロジェクト固有の資産として扱われ、継続的なバージョンアップは想定されていません」と書かれています。取り込み後は、不具合やアクセシビリティ修正の影響を確認し、必要な変更を自社のコードへ反映する担当が必要です。その担当を置けない体制なら、コンポーネントは参考実装として読むだけにとどめ、デザイントークンとTailwindプラグインだけを入れるほうが保守は楽です。民間サイトで使うときの出典表示やロゴの扱い、ライセンスの範囲は[デジタル庁デザインシステムとは：民間サイトでの利用可否とライセンス三層・準拠範囲](/column/details/16618/)にまとめています。業務システム全般での部品の選び方は[業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](/tech/details/15325/)、デザインシステムという考え方そのものは[デザインシステムとは？構成要素と作り方、ガイドライン・スタイルガイドとの違い](/column/details/1372/)を参照してください。 ## よくある質問 ### デジタル庁デザインシステムのStorybookはどこで見られますか？ HTML版は design.digital.go.jp/dads/html/、React版は design.digital.go.jp/dads/react/ で公開されています。公式リソースページからもリンクされています。インストールは不要で、ブラウザで開けばストーリーとドキュメントを確認できます。コードを書き換えて試したい場合だけ、GitHubからクローンしてローカルで `npm run storybook` を実行します。 ### GitHubリポジトリはどこにありますか？ digital-go-jp の organization の下にある design-system-example-components-html と design-system-example-components-react の2つです。デザイントークンは design-tokens、Tailwindプラグインは tailwind-theme-plugin のリポジトリで別に管理されています。旧名の design-system-example-components のURLはReact版に転送されます。 ### Figmaのデザインデータの最新バージョンはいくつですか？ 2026年10月25日時点で、10月21日公開のv2.18.2です。サイトの表記も「デジタル庁デザインシステムβ版 v2.18.2」で、正式版ではなくβ版の扱いが続いています。Figmaの版とコードスニペットの更新日は一致しないため、両方のお知らせを確認してください。 ### React 18のプロジェクトでも使えますか？ 使えますが、修正が必要です。React版は2026年10月からReact 19前提で、React 18では `ref` を受け取るコンポーネントを `forwardRef` で包み、一部のhooksの戻り値の型を変えます。`forwardRef` で包まない問題は型チェックだけでは検出できず、実行時に `ref` が渡らないため、ダイアログやタブを実際に操作して確かめてください。 ### コンポーネントをnpmでインストールできますか？ できません。npmで配布されているのは `@digital-go-jp/design-tokens` と `@digital-go-jp/tailwind-theme-plugin` だけです。コンポーネントはGitHubのソースから必要なファイルをコピーして使います。依存するサブコンポーネント（`parts/` ディレクトリや `Slot` など）もimport文をたどって一緒にコピーします。 ### Markdown配布版はどこからダウンロードできますか？ 公式リソースページの「ドキュメント・アクセシビリティガイドライン（Markdown）」から、日付付きのzipを取得できます。2026年10月25日時点の最新は10月21日版で、サイトが更新されるたびに作り直されています。 ## 関連記事 - [Storybookとは？使い方・Next.js連携・テスト・費用まで実装手順で解説](/tech/details/2995/) - [React 19でforwardRefが不要に｜refをpropsで渡す新方式と移行手順](/tech/details/4382/) - [デジタル庁デザインシステムとは：民間サイトでの利用可否とライセンス三層・準拠範囲](/column/details/16618/) - [Chromaticとは？Storybook連携のビジュアルテスト自動化と料金・TurboSnapを解説](/tech/details/6969/) - [業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定](/tech/details/15325/) --- 出典: [デジタル庁デザインシステムのStorybookとGitHub｜React 19版・Figma v2.18.2の入手と取り込み手順]()（株式会社一創）