# ONS デザインシステム

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

いくつかの移動手段、相反する回答、未入力時の検証、ローカルでの確認、編集内容の保持を試してください。

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

ONS Design System 73.13.1をコンパイルし、CSS、JavaScript、Sass変数を公開サービスマニュアルと照合しました。サンプルではネイティブのCheckboxとMutually Exclusiveの動作を使用しています。単独で動作する例ではOpenSansの代わりにArialを使用していますが、本番用のコピー手順にはパッケージ化されたフォントが含まれています。旅行に関する質問とローカルの回答確認画面は、独自に作成したデモ用コンテンツです。

### 文字サイズ一覧

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Primary family | OpenSans, Helvetica Neue, Arial, sans-serif | 公式のフォントガイダンスではOpen Sansのスタイルセット1を指定しています。このデモでは意図的にArialを使用しています。 |
| ons-u-fs-3xl | 32/44px → 48/56px | 中ブレークポイントで小から大へ。ウェイト700。 |
| ons-u-fs-2xl | 28/40px → 36/48px | ウェイト700。見出し相当の階層。 |
| ons-u-fs-xl / ons-u-fs-l | 26/36 → 30/40px; 24/32 → 26/36px | 固定のレスポンシブサイズと行送りを使用。可変のclampは使用しません。 |
| ons-u-fs-m | 20/28px → 22/32px | ウェイト700。 |
| ons-u-fs-r / ons-u-fs-s | 18/28px / 14/20px | レギュラー400。--bのバリエーションは700を使用。 |
### セマンティックカラーの役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --ons-color-text | #222 | --ons-color-blackに対応。 |
| --ons-color-text-link | #206095 | オーシャンブルー。ホバー／アクティブ時はナイトブルー #003c57。 |
| --ons-color-focus | #fbc900 | フォーカス表示にはサンイエローを使用。 |
| --ons-color-button | #0f8243 | リーフグリーン。リンクカラーとは別の色。 |
| --ons-color-errors | #d0021b | ルビーレッドでエラーを示し、説明文も併記します。 |
| --ons-color-info-tint | #e9eff4 | 情報パネルの背景色。選択済みチェックボックスの代わりには使用しません。 |
### 実際のスペーシングユーティリティ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| ons-u-mb-xs / s / m | 12px /16px /20px | ルートサイズ16pxでの下マージン用ユーティリティの値。ドキュメントに記載された8pxグリッドの基準から外れる間隔も含みます。 |
| ons-u-mb-l / xl | 24px /32px | 公開リリースのユーティリティを使用してください。すべての値が基準値に沿っていると推測しないでください。 |
### レイアウトとレスポンシブの仕組み

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Grid | 12 percentage-width columns | ons-grid > ons-grid__colとレスポンシブ列クラスを使用します。 |
| Medium column | ons-col-8@m | 740px以上では8列。未満では全幅。 |
| Breakpoints | 300,400,500,740,980,1300,1600px | 2xs、xs、s、m、l、xl、2xl。 |
| Baseline | Multiples of8px | グリッドのドキュメントで示される間隔の基準です。すべてのボーダーやフォントがこの基準に沿うとは限りません。 |
| Documented gutters | 16px below600;24px at600+ | グリッドクラスを上書きする場合は、リリースCSSを確認してください。 |
| Default container | 64.6256rem maximum;1rem horizontal padding | 73.13.1 CSSで確認済み。ルートサイズ16pxの場合、約1034pxです。 |
### 相互排他用フック

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Group root | ons-js-mutually-exclusive | ネイティブスクリプトは、DOMの準備完了時にこのコンテナを検出します。 |
| Regular options | ons-js-exclusive-group-item | 組み合わせて選択できます。一方の排他オプションを選択すると、反対側の選択肢は解除されます。 |
| Opposing choice | ons-js-exclusive-option | 選択すると、通常のグループ内の値が解除されます。 |
| Explanation | data-deselect-message | 反対の選択肢に対する警告文。 |
| Announcement | ons-js-exclusive-alert | data-group-adjectiveとdata-option-adjectiveを使うライブリージョン。 |
| State updates | click for checkbox/radio;input for text | コントローラーはhasValueをキャッシュします。アプリケーションからリセットする場合は、ネイティブイベントを使用してください。 |
## ONS デザインシステム 完全ガイド

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

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

## ONS デザインシステム アンケートに特化したデザイン

### 回答の意味を守る

> ONSは、情報発信だけでなく統計調査も担っています。アンケートでは、相互排他的な回答の設計がデータ品質に関わります。利用者が移動手段と「移動していない」という回答を同時に送信できないようにする必要があります。ネイティブのMutually Exclusiveコンポーネントは選択肢を関連付け、選択解除の動作を支援技術にも説明します。

このサンプルでは、図書館への移動について独自に作成した質問を提示し、ローカルで回答を確認できます。ONSのアイデンティティを示すグラフィックは意図的に避けており、回答が収集されるとも主張していません。本番のアンケートには、独自の同意取得、データ保持、ルーティング、サーバー側の検証が必要です。

関連する仕様を確認する

## ONS デザインシステム 読みやすい質問の階層

### 凡例をページの見出しにする

基本の書体はOpen Sansで、特徴的な字形を持つスタイルセット1を選択しています。ネイティブのSass文字サイズ一覧は、独自の連続的なスケールを設定せず、小と大の固定値を使用します。本文は18px、行送りは28pxです。大サイズのメインクラスは、中ブレークポイントで32/44から48/56に切り替わります。

質問が1つのページでは、fieldsetのlegend内にh1を置くことで、グループのアクセシブルな名前と画面上のタイトルを一致させられます。その上に別の無関係なh1を追加しないでください。この例では、サービスの説明を小さめの段落として残し、選択方法の案内はlegendの下に置いています。

単独で動作するデモでは、フォントの読み込みエラーを避けるため、明示的にArialを使用しています。インストール手順ではフォントをCSSと一緒にコピーします。フォールバックではなく、公開されているOpenSansの書体を使用する場合に必要です。

関連する仕様を確認する

## ONS デザインシステム アンケート画面での役割

### フォーカスとステータスは別の役割

ONSでは、プリミティブカラーにセマンティック変数を割り当てています。テキストはブラック、通常のリンクはオーシャンブルー、主要ボタンはリーフグリーンです。サンイエローはフォーカスカラーです。ルビーレッドはエラーを示しますが、エラーメッセージでは必要な操作も説明してください。緑色の「続行」ボタンは、回答の検証が完了したことを意味するものではありません。

このアンケート例では、ネイティブのチェックボックスのボーダーと選択時の表示を使用しています。すべての回答を別々のマーケティングカードのように装飾してはいません。独立したサンプルと質問の間には短いニュートラルな上罫線を置き、ONSのマストヘッドは再現していません。

- チェックボックス入力とアクションボタンの両方で、ネイティブの可視フォーカス表示を維持してください。

- 通常の選択肢の前に「該当するものをすべて選択してください」という案内を表示します。

- 反対の回答の前に「または」を置き、操作する前から違いがわかるようにします。

関連する仕様を確認する

## ONS デザインシステム 列と回答欄の幅

### アンケートに適した幅を使用する

12列グリッドでは、ons-col-8@mなどのクラスで幅を指定します。740px以上ではこのクラスが8列分を占め、それ未満では同じ要素が利用可能なコンテンツ幅いっぱいに広がります。この例ではネイティブの列を使用し、質問文がデスクトップ全体に広がらず、読みやすい幅で折り返されるようにしています。

確認したリリースでは、標準コンテナの最大幅は64.6256remで、左右のパディングは1remです。また、公開されているグリッドガイドでは、600pxのスペーシング境界の前後に8pxを基準とする間隔と16/24pxのガターを設けています。これらの概念は740pxの中列ブレークポイントとは分けて考えてください。すべてに共通する単一のモバイル切り替え幅ではありません。

回答確認画面では、同じ列内で質問を置き換えます。「回答を変更」を選ぶと、既存の入力欄に戻ります。ルートの変更やネットワークリクエストは発生せず、値はメモリ内に保持されます。

実際のスペーシングユーティリティは、8pxを基準とするという説明よりも細かな値を持ちます。ルートサイズ16pxの場合、xs、s、m、l、xlの下マージンはそれぞれ12、16、20、24、32pxです。そのため、リファレンスでは実際のユーティリティ値とグリッドのガイダンスを分けて記載しています。

関連する仕様を確認する

## ONS デザインシステム 回答グループを作成する

### ネイティブチェックボックスの構造

チェックボックスでは、ons-checkbox内にons-checkbox__inputと関連付けられたons-checkbox__labelを配置します。ネイティブのフォームセマンティクスを維持できるよう、inputには通常のname属性とvalue属性を設定します。より大きなons-checkboxes__item構造によって、スタイルシートで想定されている間隔とクリック領域が確保されます。

通常の選択肢には ons-js-exclusive-group-item を指定します。最後の選択肢には代わりに ons-js-exclusive-option を指定し、data-deselect-message でその効果を説明します。ライブリージョンの span は、両方の形容詞属性とともに必ず含めてください。装飾的な追加マークアップではありません。これを削除すると、標準コントローラーが想定する動作を満たせなくなります。

この実装例は、通常の選択肢3つと、それに反する回答1つを含む完全なものです。実際の質問に合わせて名詞や値を変更してください。無関係な入力欄の名前を「排他的」に変えるだけでは不十分です。

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

コードリファレンス

関連する仕様を確認する

## ONS デザインシステム 検証と変更時の動作

### ライブラリの状態とアプリケーションの状態

どの反対選択肢を解除するかは、ライブラリが管理します。この例の簡単なアプリケーションハンドラーは、ローカルの回答確認を表示する前に、回答が少なくとも1つあるかを確認するだけです。未選択の場合は、説明付きのエラーを表示し、関連付けられたメッセージにフォーカスを移します。エラーリンクは最初の選択肢に直接移動するため、ユーザーはその場で操作できます。

コントローラーは、DOM のチェックボックス値に加えて、キャッシュされた hasValue 状態も追跡します。checked=false だけでリセットすると、そのキャッシュが古いまま残る可能性があります。そのためリセット処理では、チェック済みの入力欄を1つずつクリックして、標準イベントリスナーにモデルを更新させてから、質問にフォーカスを戻します。これはスタイルシートを見るだけでは確認できない、具体的な統合上の注意点です。

回答確認には、選択されたラベルのリストを使用します。「回答を変更」では、コントロールと選択状態を維持します。このサンプルにはサーバーがないため、アンケート回答を受け付けたと示す成功パネルは表示しません。

関連する仕様を確認する

## ONS デザインシステム アセットとテンプレートの導入

### サポートされる2つの方法

npm パッケージには、コンパイル済みアセット、Sass ソース、Nunjucks マクロ、ベースページテンプレートが含まれています。このプレビューでは、コンパイル済みの HTML を使用します。公式の CSS と main.js をコピーし、ドキュメントに記載されたマークアップを再現してから、body のコンテンツの後にスクリプトを読み込みます。スクリプトは DOM の準備ができると、該当するコンポーネントフックを初期化します。

サーバー側でレンダリングするプロジェクトでは、components にある Nunjucks マクロファイルを使用することもできます。Checkbox マクロには、チェックボックスの配列、ラベル、説明、エラー設定、mutuallyExclusive 設定を渡せます。dontWrap を設定すると、外側の質問コンポーネントが fieldset を担います。アクセシブルなグループ名を省略するための設定ではありません。

Sass ファイルを個別に選ぶ場合は、まずシステム変数、ヘルパー、ユーティリティ、ベース、オブジェクトをインポートし、その後にコンポーネントのルールと依存関係をインポートします。この小規模な単独サンプルでは、コンパイル済みの CSS を使えば依存関係を選定する必要はありません。

1. パッケージのバージョンを固定し、css、scripts、fonts を1つの安定したローカルアセットディレクトリから配信してください。

2. 静的ページではコンパイル済みの HTML を使用し、サーバー側でレンダリングするアプリケーションでは Nunjucks マクロのパスを設定してください。

3. CSS、JavaScript、マークアップは同じリリースのものを使用し、アップグレード後には相互排他の動作を再確認してください。

関連する仕様を確認する

## ONS デザインシステム 矛盾する回答を試す

### データの意味を確認する

「徒歩」と「バス」を選択してから、「訪問していません」を選択します。先に選んだ2つの選択肢が解除されることを確認してください。次に「自転車」を選択します。反対の回答が解除され、「自転車」は選択されたままになるはずです。フォーカスされた入力欄で Space キーを使って同じ操作を繰り返し、見た目のチェックだけですべての動作が確認できたと思い込まず、アナウンス領域も確認してください。

選択なしで続行してエラーを確認し、有効な回答を確認した後、「回答を変更」で戻ります。最後に、矛盾する回答を選んだ後にリセットして、別の選択を行ってください。これにより、標準コントローラーの状態が古いまま残る問題を検出できます。幅390pxでも、ページを横スクロールせずに質問とすべてのラベルを読み取れる必要があります。

これらのテストで確認するのはローカルでの操作だけであり、本番アンケートのデータ送信、アクセシビリティ認証、質問の統計的な品質ではありません。実際のサービスでは、矛盾する値をサーバー側で検証し、回答カテゴリに漏れがないか調査する必要があります。

関連する仕様を確認する

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

### 相互排他の質問を完全な形で実装する

通常の回答選択肢と、標準のライブリージョンフックを備えた反対の回答。

```
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
```

コードリファレンス

### 同じリリースのアセットを配信する

プロジェクト全体で使用する相対パスのフォントアセットを含む、コンパイル済みアセットを使う方法。

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
```

コードリファレンス

### 単体で動作するサンプル一式

レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
```

コードリファレンス

- 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。

- ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。

## ONS デザインシステム エージェントの設定

### 実装の出発点

ローカルのサンプルでは、Native 73.13.1 のコンパイル済み CSS と JavaScript を使用します。Arial はローカル環境向けの明示的なフォールバックです。本番環境へのコピー手順には、パッケージに含まれる OpenSans フォントを使用する方法が記載されています。「Sources」にある完全な実装例の ZIP には、プレビューに必要な依存関係と完全なドキュメントも含まれています。展開したディレクトリで python3 -m http.server 8080 を実行し、http://localhost:8080/ons.html を開いてください。モジュールベースの例を file:// 経由で開かないでください。

```
npm install --save-exact @ons/design-system@73.13.1
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/

<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
```

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

```
ネイティブの Checkbox と Mutually Exclusive フック、関連付けられた fieldset/legend、通常の回答グループ、反対の回答1つを使った、独立した ONS73.13.1 のアンケートサンプルを作成してください。必須のライブリージョンと選択解除属性も含めてください。一致するネイティブの CSS と main.js を配信し、独自の相互排他コントローラーで置き換えないでください。入力なしのローカル検証と、編集内容を保持する回答確認を追加し、サーバーで受け付けたと示さないでください。ネイティブイベントを使ってリセットし、キャッシュされた状態との整合性を保ってください。公式のアイデンティティマークを使わず、ons-col-8@m と確認済みのタイポグラフィ／セマンティックカラーのルールを使用してください。
```

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

独自のアンケート文言を使った、独立した実装サンプルです。ネイティブコードは MIT ライセンスです。ONS のアイデンティティとコンテンツのライセンスは別途定められています。回答は送信、保存されず、公式統計として提示されることもありません。

- 種類 フォントとレスポンシブなタイポグラフィの階層。

- カラー セマンティックカラーのガイダンス。

- グリッド グリッドクラス、スペーシング、ブレークポイント。

- チェックボックス チェックボックスの構造とマクロのオプション。

- 相互排他 反対の回答と選択解除の動作。

- アセット アセットのパスと Sass の依存関係。

- npm パッケージの内容とインストール。

- テンプレート サーバー側テンプレートへの導入。

- エラー エラー箇所と修正方法のガイダンス。

- 動作サンプル一式をダウンロード 完全なHTML、ローカルのCSS／JavaScript依存関係、付属ライセンス、正確な起動手順を含むZIPです。ビルド手順は不要です。

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

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

実際のタイポグラフィ、公開されている余白と色の値、ネイティブのアコーディオン動作、バージョンを一致させたソース一式を使って、オンタリオ州のスタイルに沿った長文ガイドを作成します。

### Poncho

動作するアクティビティディレクトリを使って、Poncho の Bootstrap 3 グリッド、セマンティックなアクションカラー、クリック可能なサービスパネルを確認できます。

### Queensland Government デザインシステム

実際のテーマロール、ネイティブのチェックボックススタイル、アクセシブルな回答確認ダイアログを備えた、図解付きの完全なリソース選択ツールを通じて、クイーンズランド州の Bootstrap 実装をご覧ください。


- [実装リファレンス](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [ソース](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_typography.scss)
- [ソース](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/scss/vars/_colors.scss)
- [ソース](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/css/main.css)
- [ソース](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [ソース](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [コードリファレンス](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [関連する仕様を確認する](https://cdn.jsdelivr.net/npm/@ons/design-system@73.13.1/components/mutually-exclusive/mutually-exclusive.js)
- [関連する仕様を確認する](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [コードリファレンス](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [コードリファレンス](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [種類 フォントとレスポンシブなタイポグラフィの階層。](https://service-manual.ons.gov.uk/design-system/foundations/typography)
- [カラー セマンティックカラーのガイダンス。](https://service-manual.ons.gov.uk/design-system/foundations/colours)
- [グリッド グリッドクラス、スペーシング、ブレークポイント。](https://service-manual.ons.gov.uk/design-system/foundations/grid)
- [チェックボックス チェックボックスの構造とマクロのオプション。](https://service-manual.ons.gov.uk/design-system/components/checkboxes)
- [相互排他 反対の回答と選択解除の動作。](https://service-manual.ons.gov.uk/design-system/components/mutually-exclusive)
- [アセット アセットのパスと Sass の依存関係。](https://service-manual.ons.gov.uk/design-system/guidance/using-the-css-js-and-assets)
- [npm パッケージの内容とインストール。](https://service-manual.ons.gov.uk/design-system/guidance/install-with-npm)
- [テンプレート サーバー側テンプレートへの導入。](https://service-manual.ons.gov.uk/design-system/guidance/templating-in-nunjucks)
- [エラー エラー箇所と修正方法のガイダンス。](https://service-manual.ons.gov.uk/design-system/components/error-summary)