# UNDP デザインシステム

## UNDP デザインシステム インターフェースプレビュー

矢印キーで移動し、セクションを確認して、ローカルの読了数をリセットします。

## UNDP デザインシステムデザインリファレンス

公開されている @undp/design-system-assets 2.0.2 の配布パッケージに含まれる、具体的な値と動作を示しています。ページの構成と進捗動作は独自に作成したものであり、別途明記しています。

### カラーパレットと意味を持つ背景レイヤー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --undpds-color-blue-600 | #006eb5 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-blue-700 | #1f5a95 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-gray-200 | #f7f7f7 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-gray-300 | #edeff0 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-gray-700 | #232e3d | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-yellow-600 | #fbc412 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-dark-red | #d12800 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-background-default | #fff | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
| --undpds-color-border-default | #000 | 公開パッケージに実際に含まれる値を示しています。この例では、編集用の導入部分に青、補助的な読書カードに黄色を使用しています。これらのコンテンツへの割り当ては独自のものです。 |
### 現行のスペーシングスケール

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --undpds-spacing-002 | 2px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-004 | 4px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-008 | 8px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-012 | 12px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-016 | 16px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-024 | 24px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-032 | 32px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-040 | 40px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-048 | 48px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-064 | 64px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-080 | 80px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-096 | 96px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
| --undpds-spacing-160 | 160px | エクスポートされた名前をそのまま使用してください。コンポーネントのCSSには、旧式の数値エイリアスも含まれます。エイリアスの末尾から値を推測しないでください。 |
### 書体と境界線のリファレンス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --undpds-font-family-proximanova | ProximaNova,sans-serif | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-family-sohnebreit | SohneBreit,ProximaNova,sans-serif | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-14 | 0.875rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-16 | 1rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-20 | 1.25rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-24 | 1.5rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-32 | 2rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-size-40 | 2.5rem | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-weight-regular | 400 | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-font-weight-bold | 700 | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
| --undpds-border-default | 2px | 公開されている宣言を示したもので、このプレビューでブランドフォントを読み込んでいるという意味ではありません。プレビューでは意図的に Arial にフォールバックしています。 |
### ネイティブタブの構造と動作

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| data-undpds-component | tabs | tabs() が走査するルートを指定します。 |
| Tab collection | .tabs-title[role="tab"] | この例では、一致するパネルを持つフォーカス可能なリスト項目を使用します。ネイティブ初期化処理によって ID と aria-controls が設定されます。 |
| Panels | .tabs-content > .tabs-panel | 各タブに1つずつ対応するパネルを同じ順序で配置し、それぞれに固定の一意な ID を指定します。 |
| Deep links | data-deep-link="false" | セクションの切り替え時に、埋め込みの学習コンテンツが URL のハッシュを変更しないようにします。 |
| Keyboard | Arrow keys, Home, End, Enter, Space | ネイティブスクリプトがフォーカスを移動し、対応するパネルをアクティブにします。 |
| State | aria-selected, tabindex, hidden, aria-hidden | 初期化と選択に応じて、セマンティクスと実際のパネル表示の両方が更新されます。 |
## UNDP デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## UNDP デザインシステム UNDPの実行環境とアセットの境界

### 静的ページにはアセットパッケージを選ぶ

> 提供されている例では、@undp/design-system-assets の 2.0.2 をインストールします。このパッケージには、ベースのCSS、コンポーネントのCSS、ブラウザー用スクリプトが含まれています。Storybook の開発リポジトリ全体を起動する場合とは異なります。この構成に必要なのは、ベースのスタイルシート、タブのスタイルシート、タブのスクリプトのみです。all.min.js やすべてのコンポーネント用スタイルシートを読み込んでも、読書用ワークスペースの機能は向上せず、無関係な動作が追加されます。

- base-minimal.min.css は、基礎スタイルとタイポグラフィの宣言を提供します。

- components/tab.min.css は、ネイティブタブの表示スタイルを提供します。

- js/tabs.min.js は、tabs() 初期化関数をエクスポートします。

### 組織のアイデンティティとサンプルコンテンツを区別する

概要は、ローカルワークショップの計画を題材にした独自のOpenDesign練習用コンテンツです。UNDPのプログラム、政策声明、報告ポータルではありません。プレビューにはエンブレムや組織のナビゲーションは含まれていません。ネイティブのスタイルと動作は正確に示し、概要、チェックボックスによる進捗、リセット操作は独自のアプリケーションコードとして明確に説明しています。

## UNDP デザインシステム UNDPのカラーの役割と編集上の階層

### 実際の青のスケールを基準にする

提供されている --undpds-color-blue-600 は #006eb5、blue-700 は #1f5a95 です。この例では、前者を導入ブロックの背景に、後者をリセット操作に使用しています。gray-200 は控えめな補助カード、gray-300 はタブ間の区切り、yellow-600 は境界線のアクセントに使用しています。現在のタブには、ライブラリの濃い赤色の下線が表示されます。これらの役割は、スクリーンショットから推測したものではなく、提供されているCSSで確認できます。

### SDGカラーに独自のステータスの意味を割り当てない

ベースパッケージには、一般的なカラーのデザイントークンに加えて、SDG専用のカラーパレットも含まれています。開発をテーマにしたページで、それらの値が利用できるからといって、任意の成功・エラー状態に割り当てるべきではありません。この構成では、チェック済みのコントロールと読みやすい件数で完了状態を表現しており、色だけで確認状況を伝えることはありません。

## UNDP デザインシステム UNDPのタイポグラフィ、余白、フォントの適用範囲

### フォントの宣言と読み込みを区別する

パッケージでは ProximaNova と SohneBreit のファミリーが宣言され、フォントファイルも含まれていますが、このプレビューでは意図的に Arial にフォールバックしています。この置き換えは、サンプルの注記とCSSで確認できます。リファレンステーブルには実際のフォントファミリー宣言を記載しており、元のシステムを把握できます。ブランドフォントを採用するプロジェクトでは、フォントファミリー名を指定するだけでフォントが利用可能になると考えず、適切なアセットと利用権を確認してください。

### 実際の余白の名前を使用する

現在のピクセルスケールは spacing-002 から spacing-160 までで、12、24、48ピクセルなどが含まれます。タブのスタイルシートでは、spacing-03（8px）や spacing-09（48px）などの旧式エイリアスも使用しており、このバージョンにはどちらも含まれています。デモでは、ライブラリのルールを維持したうえで、720px 未満では1列になる2列の編集レイアウトを追加しています。このレイアウトのブレークポイントは独自の構成上の判断であり、コンポーネントのスタイルシートにある 48em のブレークポイントとは別のものです。

## UNDP デザインシステム UNDPのネイティブタブ構造と初期化

### タブとパネルの数を一致させる

ルート要素には data-undpds-component="tabs" があり、role="tablist" のリスト、role="tab" を持つ3つの .tabs-title 要素、そして .tabs-content 内に3つの .tabs-panel セクションがあります。スクリプトはこの2つのコレクションを順番に対応付けます。パネルが欠けていたり、数が一致していなかったりすると、正常に初期化できません。そのため、各パネルには安定したIDを付与し、tabs() の実行前に内容をすべて用意しておきます。標準の初期化処理では aria-controls と aria-labelledby の関連付けが作成され、選択中の項目には is-active が付与されます。

### ハッシュの動作を意図的に選ぶ

パッケージでは、ディープリンクがデフォルトで有効です。この埋め込みワークスペースでは、タブリストに data-deep-link="false" を指定して、セクションを切り替えてもURLのハッシュが書き換わらないようにします。セクションの共有が便利な独立した公開ページでは、ディープリンクを有効にできます。その場合は、初期表示時のハッシュによる選択と、履歴の変更を必ずテストしてください。埋め込みプレビューにハッシュの規則をそのまま適用する前に、そのナビゲーションをどのページが担うのかを決めてください。

## UNDP デザインシステム UNDPのキーボード操作と表示状態

### パネルが実際に表示されることを確認する

ネイティブ実装では、矢印キーとHomeまたはEndキーでアクティブなタブを切り替え、フォーカスを移動できます。EnterキーとSpaceキーでもタブを選択できます。スクリプトはtabindex、aria-selected、hidden、aria-hiddenを連動して更新します。アクティブなCSSクラスだけをテストしても、複数のパネルが表示されたままになる不具合や、非表示のパネルにフォーカスできてしまう不具合は見つかりません。ブラウザーでのテストでは、選択中の項目と実際に表示されるコンテンツの両方を確認します。

### 確認用の操作項目を各セクション内に置く

各パネルには、「このセクションを確認済みにする」というラベルの標準チェックボックスがあります。パネルを非表示にしてもノードは作り直されないため、状態は保持されます。進捗数は丁寧に通知するステータスメッセージであり、このローカルプレビューの状態だけを示します。学習証明でも、サーバー側に記録される完了記録でもありません。ユーザーはセクションに戻り、選択を直接解除できます。

## UNDP デザインシステム UNDPのローカル進捗とリセット

### リセットの対象範囲を明確にする

「読書の進捗をリセット」を実行すると、3つのチェックボックスがクリアされ、件数が再計算されます。アクティブなタブやコンテンツは変更されません。イベントハンドラーではチェックボックス変更時と同じ進捗更新関数を使うため、完了状態の説明が二重に定義されることはありません。このサンプルでは現在のドキュメント外に何も保存しないため、ページを完全に再読み込みすると新しい閲覧セッションが始まります。

### 任意の閲覧を必須のように見せない

件数は進捗の把握に役立ちますが、後のセクションへのアクセスを妨げる条件ではありません。確認済みのセクションが0件でも3つのタブはすべて利用でき、順番も自由です。本番環境のワークフローで確認を必須にする場合は、このローカル進捗モデルを流用するのではなく、独自の要件、エラー処理、永続化を実装する必要があります。

## UNDP デザインシステム UNDPのレスポンシブな読書レイアウト

### コンテンツを縮小せずに折り返す

青い導入部分と各パネルは、広い画面では2列で表示されます。幅が720pxになると1列に積み重なり、外側のパディングは16pxに縮小され、大きなタイトルのサイズも小さくなります。必要に応じてタブリストは折り返され、すべてのラベルが表示されます。高さ固定のパネルで長い翻訳や段落が切れることはなく、補足の注記も装飾画像ではなく実際のテキストで表示されます。

### 埋め込み幅でテストする

詳細ページのコンテンツ列は、ブラウザーのビューポートよりも狭くなります。この例は、デスクトップ、タブレット、スマートフォンの各幅に加え、独立したドキュメントとして280px幅までテスト済みです。スマートフォンの画面全体に収まるコンポーネントでも、詳細ページの内側に配置するとあふれることがあります。共通のページチェックでは、両方の幅を測定します。

## UNDP デザインシステム UNDPの静的ファイル一式の統合

### 提供されたファイルを同じ場所に置く

提供された index.html、undp.css、undp-app.js を同じディレクトリに保存し、固定バージョンのアセットパッケージをインストールして、そのディレクトリを配信します。HTML では、パッケージの基本となる CSS、タブの CSS、タブ用ブラウザースクリプトを読み込んでから、小さなアプリケーションスクリプトを読み込みます。この例にバンドラー、jQuery、GSAP は不要です。ローカルに埋め込んだプレビューでは、未使用の font-face 宣言を除きながら、同じコンポーネントアセットをインライン化しています。

1. 提供された3つのファイルをすべて同じディレクトリに保存します。

2. @undp/design-system-assets@2.0.2 をインストールします。

3. フォルダーを配信し、ポインターとキーボードでタブの選択をテストします。

4. すべてのセクションを確認し、別のタブに切り替えてから、ローカルの件数をリセットします。

### コンポーネントの動作とアプリケーションの動作を分ける

タブ用スクリプトがパネルの選択とキーボード操作を担当します。小さなアプリケーションスクリプトが担当するのは、確認用チェックボックス、件数、リセットだけです。この境界を設けると、アップグレード時に変更点を確認しやすくなります。まず標準のタブ動作とデザイントークンの変更を比較し、その後、ローカル状態が引き続き機能するかを検証します。アプリケーションのフレームワーク全体をコピーすると、どの動作がデザインシステムに由来するのか分かりにくくなります。

## UNDP デザインシステムのコンポーネント例

### undp-index.html — ソース全体

これを index.html として保存します。3つのコンテンツパネルとアセットの読み込みがすべて含まれています。

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop reading brief</title><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/base-minimal.min.css"><link rel="stylesheet" href="./node_modules/@undp/design-system-assets/css/components/tab.min.css"><link rel="stylesheet" href="./undp.css"></head><body><main><header class="intro"><div><p class="eyebrow">Learning brief / original sample</p><h1>Plan a local resilience workshop</h1></div><p>A small reading workspace for exploring how a development brief can separate context, participation and follow-through.</p></header><p class="study-note">Native UNDP 2.0.2 tab styles and keyboard behavior. Original OpenDesign sample content, not a UNDP programme or official policy. This preview uses Arial fallback rather than the distributed brand fonts.</p><div class="tabs" data-undpds-component="tabs"><ul role="tablist" aria-label="Workshop reading sections" data-deep-link="false"><li role="tab" class="tabs-title is-active" tabindex="0">Understand</li><li role="tab" class="tabs-title" tabindex="-1">Include</li><li role="tab" class="tabs-title" tabindex="-1">Follow through</li></ul><div class="tabs-content"><section id="understand" class="tabs-panel is-active"><div class="panel-grid"><div><h2>Start with the local context</h2><p>A useful workshop begins with a question people can answer from experience. Ask which everyday service is hardest to rely on during a disruption. Avoid assuming that a technical solution is already agreed.</p><h3>Prepare the conversation</h3><ol><li>Write one plain-language question.</li><li>Invite examples of what already works.</li><li>Record uncertainty separately from an agreed need.</li></ol></div><aside class="reading-card"><h3>What would change the decision?</h3><p>Collect contrasting experiences, not just the first answer. A disagreement can reveal who is missing from the conversation.</p><label><input type="checkbox" data-read="understand">Mark this section as reviewed</label></aside></div></section><section id="include" class="tabs-panel"><div class="panel-grid"><div><h2>Make participation practical</h2><p>Participation depends on when, where and how a session takes place. Offer more than one way to contribute and explain how notes will be used before the discussion begins.</p><h3>Remove avoidable barriers</h3><ol><li>Offer spoken and written contributions.</li><li>Ask participants about access needs privately.</li><li>Explain how to decline recording or attribution.</li></ol></div><aside class="reading-card"><h3>Who has not been heard?</h3><p>A count of attendees does not prove representative participation. Check whether the invitation, language or format prevented people from joining.</p><label><input type="checkbox" data-read="include">Mark this section as reviewed</label></aside></div></section><section id="follow" class="tabs-panel"><div class="panel-grid"><div><h2>Close the loop with participants</h2><p>End with a short record of decisions, open questions and named next steps. Send a readable summary back through a channel that participants can actually access.</p><h3>Turn discussion into a next step</h3><ol><li>Separate decisions from suggestions.</li><li>Attach an owner and review point to the next action.</li><li>Invite corrections before treating the notes as agreed.</li></ol></div><aside class="reading-card"><h3>What happens after the session?</h3><p>A clear follow-up commitment is more useful than a polished report with no owner. Keep unresolved issues visible in the next conversation.</p><label><input type="checkbox" data-read="follow">Mark this section as reviewed</label></aside></div></section></div></div><div class="bottom"><p id="progress" role="status">0 of 3 sections reviewed in this preview</p><button id="reset" type="button">Reset reading progress</button></div></main><script src="./node_modules/@undp/design-system-assets/js/tabs.min.js"></script><script src="./undp-app.js"></script></body></html>
```

コードリファレンス

- ファイル名と相対パッケージパスを一緒に保ちます。

### undp.css — ソース全体

元のレスポンシブレイアウトと、明示的な Arial フォールバック。

```
*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}h1,h2,h3,p,button{font-family:inherit}main{max-width:1100px;margin:auto;padding:40px}.intro{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:32px;background:var(--undpds-color-blue-600);color:white}.intro h1{font-size:40px;line-height:1.1;margin:16px 0}.intro p{font-size:16px;line-height:1.6}.eyebrow{font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.study-note{font-size:13px;line-height:1.6;margin:24px 0}.tabs>ul{display:flex;flex-wrap:wrap;padding-left:0;gap:16px;margin-top:32px}.tabs>ul li{margin-right:0;padding:12px 0;font-size:16px}.tabs-title:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}.tabs-panel{padding-top:24px!important}.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}h2{font-size:28px;line-height:1.2;margin:0 0 24px}h3{font-size:20px;line-height:1.3}p,li{font-size:16px;line-height:1.6}li{margin-bottom:12px}.reading-card{background:var(--undpds-color-gray-200);padding:24px;border-left:4px solid var(--undpds-color-yellow-600)}.reading-card p:last-child{margin-bottom:0}label{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:16px;line-height:1.5}input{width:20px;height:20px;accent-color:var(--undpds-color-blue-600);flex-shrink:0}#progress{border-top:2px solid var(--undpds-color-gray-300);padding-top:24px;font-size:14px}button{background:transparent;border:2px solid var(--undpds-color-blue-600);color:var(--undpds-color-blue-700);padding:12px 16px;font-weight:700;cursor:pointer;min-height:44px}.bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:32px}button:focus-visible,input:focus-visible{outline:3px solid var(--undpds-color-blue-600);outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){main{padding:16px}.intro,.panel-grid{grid-template-columns:1fr;gap:16px}.intro{padding:24px}.intro h1{font-size:32px}.bottom{flex-wrap:wrap}}
```

コードリファレンス

- ファイル名と相対パッケージパスを一緒に保ちます。

### undp-app.js — ソース全体

標準のタブ初期化と、元のローカル進捗・リセット動作。

```
tabs();const boxes=[...document.querySelectorAll('[data-read]')];function progress(){document.querySelector('#progress').textContent=boxes.filter(x=>x.checked).length+' of 3 sections reviewed in this preview';}boxes.forEach(x=>x.addEventListener('change',progress));document.querySelector('#reset').addEventListener('click',()=>{boxes.forEach(x=>x.checked=false);progress();});
```

コードリファレンス

- ファイル名と相対パッケージパスを一緒に保ちます。

## UNDP デザインシステムエージェントのセットアップ

### 実装の出発点

http://localhost:8000/ を開きます。HTML では実際のパッケージアセットを読み込みます。Storybook プロジェクト一式は不要です。

```
npm init -y
npm install @undp/design-system-assets@2.0.2
# Save the supplied HTML as index.html alongside undp.css and undp-app.js.
python3 -m http.server 8000
```

### あなたのプロジェクト向けプロンプト

```
提供されたすべての HTML、CSS、JavaScriptを使用して、指定の UNDP 2.0.2 標準タブ対応の読書ワークスペースを実装してください。実際のトークン名、タブとパネルの数の一致、矢印キー・Home・End の動作、明示的な Arial フォールバック、ローカルのみの確認進捗、アクセスを妨げないナビゲーションを維持してください。元のワークショップ用テキストと組織の方針を明確に区別してください。
```

## UNDP デザインシステム出典と対象範囲

UNDP 2.0.2 の標準タブアセットとオリジナルコンテンツを使用した OpenDesign アプリケーションガイドです。Arial フォールバックを明示しています。UNDP のプログラムや公式方針を表すものではありません。

- 公式デザインシステム コンポーネントのドキュメントと最新のデザインガイダンス。

- 公式リポジトリ 配布方法と開発の背景。

- バージョンを固定した基盤 CSS このバージョンで使用している実際のトークンとタイポグラフィの宣言。

- バージョンを固定したタブ実装 選択、フォーカス、ディープリンク、パネルの表示状態。

## UNDP デザインシステム 関連リソース

### USWDS

USWDSのスペーシングトークン、テーマの役割、セマンティックな表、ネイティブのアコーディオンをつなぎ、検索可能な機会比較を作成します。

### VA デザインシステム

VAのセマンティックトークンとネイティブのProcess Listを活用して、わかりやすいサービス利用フローを構築しましょう。各ステップの説明を見やすくし、意味の伝わるステータスラベルを付け、補足情報を整理してメインの流れを読みやすく保ちます。

### W3C デザインシステム

可変フォント、セマンティックなカラーの役割、折りたたみ可能なネイティブコンテンツを活用して、JavaScriptがなくても読みやすさを保つ、堅牢な閲覧インターフェースを構築します。


- [実装リファレンス](https://github.com/undp/design-system)
- [ソース](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [ソース](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)
- [コードリファレンス](https://github.com/undp/design-system)
- [公式デザインシステム コンポーネントのドキュメントと最新のデザインガイダンス。](https://design.undp.org/)
- [公式リポジトリ 配布方法と開発の背景。](https://github.com/undp/design-system)
- [バージョンを固定した基盤 CSS このバージョンで使用している実際のトークンとタイポグラフィの宣言。](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/css/base-minimal.min.css)
- [バージョンを固定したタブ実装 選択、フォーカス、ディープリンク、パネルの表示状態。](https://cdn.jsdelivr.net/npm/@undp/design-system-assets@2.0.2/js/tabs.min.js)
