# Amsterdam デザインシステム

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

文字を大きくする、コントラストを強める、プレビューのモーションを減らす設定を切り替え、既定値に戻します。

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

CSSとReact4.4.0の実装を調査し、独自のトークン／アセットとの境界を確認しました。プレビューのテーマ値はすべて独自に設定しています。

### オープンソースのコンポーネント仕様

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| CSS package | @amsterdam/design-system-css 4.4.0 | ネイティブ Switch のスタイルシートを変更せずに使用。 |
| Class anatomy | ams-switch; ams-switch__input; ams-switch__label | 入力要素を、対応するラベルの直前に配置します。 |
| Input semantics | type=checkbox; role=switch | ネイティブのチェック状態でオン／オフを表します。 |
| Native behavior | Immediate binary setting | Reactのソースには、フォーム送信は不要と記載されています。 |
| React props | InputHTMLAttributes<HTMLInputElement> | checked、defaultChecked、onChange、disabled、ARIA の各プロパティは入力要素に渡されます。 |
| Focus | Input focus styles the following label | 実際の入力要素を display:none で非表示にしないでください。 |
### オリジナルのニュートラルな Switch テーマ一式

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --ams-switch-inline-size | 50px | オリジナルの Switch トラック幅。 |
| --ams-switch-thumb-inline-size / block-size | 22px / 22px | オリジナルの円形サムの形状。 |
| --ams-switch-label-border-width | 3px | トラックの内側余白。オン時の移動量はこの値を使います。 |
| --ams-switch-background-color | #666 | オフ時のトラックの色。 |
| --ams-switch-checked-background-color | #286044 | オン時のトラックの色。Amsterdamのブランドトークンではありません。 |
| --ams-switch-thumb-background-color | #fff | オリジナルのサムの色。 |
| --ams-switch-disabled-background-color | #aaa | 無効時の外観。動作はネイティブの disabled プロパティで制御します。 |
| --ams-switch-outline-offset | 4px | フォーカスリングの分離。 |
| --ams-switch-cursor / disabled-cursor | pointer / not-allowed | 明示的なインタラクション設定。 |
| --ams-switch-thumb-hover-box-shadow | 0 0 0 2px #fff | オリジナルのホバー時のスタイル。 |
### アプリケーションのタイポグラフィとレイアウト

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Font / body | Arial / 18px with 1.5 leading | オリジナルのニュートラルな設定。Amsterdam Sans のアセットは使用していません。 |
| Heading | 36px; 30px below700px | 公式のAmsterdamスケールではなく、アプリケーション独自の選択です。 |
| Layout | 900px maximum; two columns with32px gap | アプリケーション独自の選択。700px未満では1列になります。 |
| Larger reading mode | 22px article text | ブラウザー全体のズームに置き換わるものではなく、ローカルな設定です。 |
| Reduced motion | OS preference plus local preview setting | CSSコンポーネントは、トランジションに prefers-reduced-motion をすでに尊重しています。 |
### 再利用と権利の境界

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| Component code | EUPL-1.2 or later | ライセンスと該当する通知を保持してください。 |
| Documentation | CC0-1.0 | 独自のアセットとは分けてください。 |
| Token package4.3.0 | Proprietary assets | 独自の LICENSE により、オープンソースライセンスの対象外です。 |
| Amsterdam Sans / icons / logo | Restricted institutional assets | この独立したサンプルには複製していません。 |
## Amsterdam デザインシステム完全ガイド

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

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

## Amsterdam デザインシステム：コンポーネントとテーマを分ける

### オープンソースのレイヤーを正確に扱う

> AmsterdamはコンポーネントCSSを別途公開しているため、そのクラス仕様はReactの外でも実装できます。スタイルシートはCSSのカスタムプロパティに依存しているため、テーマ一式なしで読み込むと、重要な寸法や色が未定義のままになります。そのため、このサンプルではネイティブ Switch のスタイルシートと、独自に用意したニュートラルな設定一式を組み合わせています。

リポジトリでは、オープンソースのパッケージと独自アセットを分けています。調査したトークンパッケージ4.3.0には独自のライセンス通知があり、オープンソースライセンスの対象外であることが明記されています。Amsterdam Sans、アイコン、市のロゴにもそれぞれ固有の制限があります。このガイドでは、それらの存在を背景情報として扱いますが、再配布はせず、公開 npm パッケージをダウンロードすればブランドを制限なく使用できるとも主張しません。

関連する仕様を確認する

## Amsterdam デザインシステム：不足のないニュートラルな設定

### コンポーネントに必要なプロパティをすべて指定する

リファレンステーブルには、選択した Switch のスタイルシートで使うすべての変数を記載しています。幅、サムの寸法、ボーダー幅、色、アウトラインのオフセット、カーソル、ホバー時のスタイルには、すべて明示的な値が設定されています。これらはこのサンプル用に独自に設定した値であり、Amsterdamのデザイントークンを複製したものではありません。この区別により、テーマに不足している要素を推測せずにサンプルを再現できます。

トラック幅は50px、サムは22px、ボーダー幅は3pxです。ネイティブのチェック状態では、サムの幅とボーダー幅から移動距離を計算します。そのため、トラック幅だけを変更するとサムの位置がずれることがあります。関連する寸法はまとめて変更し、オンとオフの両方の状態を確認してください。

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

コードリファレンス

関連する仕様を確認する

## Amsterdam デザインシステム：ネイティブ Switch の構造

### ラベルは入力要素の直後に置く

Reactの実装では、ラッパー、入力要素、テキストのない対応ラベルを出力します。CSSでは隣接兄弟セレクターを使い、入力要素のフォーカス、チェック、無効の各状態に応じてラベルをスタイル設定します。プレーンなHTML実装でもこの順序を維持してください。入力要素とラベルの間に説明文を挿入すると、これらのセレクターが機能しなくなります。

実際の入力要素は role="switch" を持つチェックボックスです。ネイティブのチェックプロパティとキーボード操作を維持します。表示されるラベルにテキストがないため、aria-label または aria-labelledby でアクセシブルな名前を指定してください。このサンプルでは、表示されている設定タイトルを参照し、説明文を aria-describedby で関連付けています。

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

コードリファレンス

関連する仕様を確認する

## Amsterdam デザインシステム：設定はすぐに反映

### Switch で現在の表示を切り替える

コンポーネントのソースでは、Switch は即時反映される二値設定として定義されています。プレビューもこの仕様に従い、文字を大きくすると記事の文字サイズが変わり、コントラストを強めると文字とアウトラインの見た目が変わり、モーションを減らすとバッジが表示されるときの短いエフェクトがなくなります。こうしたローカルな選択がアカウントサービスに送信されるかのように見せる「保存」ボタンはありません。

「既定値に戻す」を選ぶと、3つすべてのネイティブのチェック状態が解除され、記事に既定のクラスが適用されます。ステータスメッセージで有効な設定を伝えます。ページ移動や再読み込み後も設定は保持されません。本番の設定サービスで保持機能を追加する場合は、その設定がこのページ、端末、アカウントのどれに適用されるのかを明示してください。

1. 「文字を大きくする」をオンにして、隣の記事の段落の文字サイズを確認してください。

2. 「コントラストを強める」にフォーカスし、Space キーを押してキーボードで切り替えてください。

3. 既定値に戻し、3つのスイッチと記事が一緒に元の状態へ戻ることを確認してください。

関連する仕様を確認する

## Amsterdamデザインシステム：キーボード操作、フォーカス、モーション

### ネイティブの入力要素を残す

スタイルシートは入力要素の見た目上の幅を縮めますが、実際のコントロールは保持します。フォーカス用セレクターは、後続のラベルにアウトラインを表示します。入力要素を装飾用のdivに置き換えると、フォーム本来のセマンティクスが失われ、キーボード操作を別途実装する必要があります。入力要素にdisplay:noneを適用しないでください。

ネイティブのスタイルシートでは、トランジションをprefers-reduced-motion:no-preferenceの場合に限定しています。記事のエフェクトも、ローカルの切り替えとは独立して、OSの設定に従います。システムレベルでモーションを減らしたいユーザーが、例を落ち着いた動作にするために追加のスイッチを探さなくて済むようにしてください。

- 状態の正しい情報源としてcheckedプロパティを使用し、無関係な見た目のオン状態を独自に作らないでください。

- 各設定にわかりやすい名前を付け、説明を入力要素に関連付けてください。

- テーマの形状や色を変更した後は、オフ、オン、フォーカス、無効の各状態をテストしてください。

関連する仕様を確認する

## Amsterdamデザインシステム：読書プレビューの構成

### コントロールの横に変化を表示する

この例は2カラム構成で、各設定が記事に与える変化を確認できます。アプリ固有の700pxブレークポイント以下では、コントロールがプレビューの上に縦に並びます。最大幅900pxと間隔32pxは独自に決めたレイアウト値であり、市全体で使われるグリッドトークンの根拠ではありません。

中立的なフォントとしてArialを使用しています。本文は18px、行間は1.5で、文字を大きくするモードでは記事のみ22pxに変更します。これはアプリの設定例であり、ブラウザーのズーム機能の代わりでも、これらのサイズがAmsterdamで定められているという主張でもありません。長いラベルは折り返し、ネイティブのスイッチ幅は縮めません。

関連する仕様を確認する

## Amsterdamデザインシステム：CSSまたはReactとの統合

### 実装レイヤーを選ぶ

既存のReactアプリケーションでは、検証済みのSwitchが標準の入力属性を受け取り、refを入力要素に渡します。制御コンポーネントとして使う場合はcheckedとonChangeを指定し、非制御コンポーネントとして使う場合はdefaultCheckedを指定できます。このコンポーネントには、アプリケーションのストレージ機能やアカウント設定用のAPIは含まれていません。

この独立したHTMLの例には、オープンソースのSwitch CSSのみが必要です。セットアップと完全なコードで、不足しているテーマ設定とローカル状態の処理を補います。パッケージインストーラーは依存関係としてプロプライエタリなアセットを取得する場合がありますが、それらがディスク上にあるからといって、インポートや配布が許可されるわけではありません。同梱されたサンプルに含まれるのは、選択したCSSとそのオープンソースライセンスのみです。

関連する仕様を確認する

## Amsterdamデザインシステム：導入と制約

### 見た目が似ていることを公式との関係と混同しない

この市のシステムは、自治体の製品に一貫性とアクセシビリティをもたらすことを目的としています。再利用可能なコードはライセンスの範囲内で調査・応用できますが、ロゴ、プロプライエタリなフォント、アイコンアセットにはそれぞれ別の利用条件があります。プレビューには独自のブランド表現と中立的なコンテンツを使用し、Amsterdamのサービスと誤認されないようにしています。

検証済みの範囲は、完全なカスタムテーマと実用的なローカル動作を備えた、ネイティブコンポーネント1つです。市のテーマ全体を再実装するものではありません。より広範なCSSパッケージを実際の製品に導入する場合は、このSwitchの設定を無関係なコントロールに当てはめず、追加コンポーネントに必要なすべての変数を定義してテストしてください。

関連する仕様を確認する

## Amsterdamデザインシステム：コンポーネント例

### 中立的なSwitchテーマ一式

ネイティブのスタイルシートに必要なすべての変数を定義しています。値はすべて独自に設定したものです。

```
:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}
```

コードリファレンス

### アクセシブルなネイティブ構造

実際のチェックボックス入力要素、switchロール、隣接する視覚的ラベル。

```
<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>
```

コードリファレンス

### すぐに使える読書設定一式

ネイティブのSwitch CSS、カスタムテーマ、目に見えるローカルな効果。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>
```

コードリファレンス

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

### 実装の出発点

オープンソースのCSSのみを使用し、独自テーマと動作するHTMLを用意しています。プロプライエタリなトークンやアセットのバンドルは含まれていません。「ソース」にある完全な動作例のZIPには、プレビューに必要な依存関係とドキュメント一式も含まれています。展開したディレクトリでpython3 -m http.server 8080を実行し、http://localhost:8080/amsterdam.htmlを開いてください。モジュールを使用する例はfile://経由で開かないでください。

```
npm install @amsterdam/design-system-css@4.4.0
# Copy dist/switch/switch.css into your public assets.
# Load it before the complete original theme configuration below.
# Do not import the proprietary assets or tokens for this neutral example.
```

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

```
AmsterdamのオープンソースSwitch CSSを、独自テーマ一式とともに使用してください。ラッパー、入力要素、隣接するラベルからなる構造、role=switch、アクセシブルな名前を保持してください。2値設定はすぐに反映し、状態にはcheckedを使用します。視差効果を減らす設定に従い、ローカル設定と保存済みアカウント設定を区別してください。該当する権利がない場合は、プロプライエタリなトークン、フォント、ロゴ、アイコンをインポートしないでください。
```

## Amsterdamデザインシステム：ソースと範囲

独立したOpenDesignのサンプルです。Amsterdamのブランドトークン、Amsterdam Sans、公式アイコン、ロゴは含まれていません。

- リポジトリとライセンス オープンソースのパッケージと、プロプライエタリな要素の分離。

- CSSの仕様 クラス構成、CSSの使用方法、テーマの依存関係。

- Switchのドキュメント 2値設定をすぐに反映する仕様。

- アセットに関する注意 フォント、アイコン、ブランド表現、ロゴの利用制限。

- トークンパッケージの範囲 プロプライエタリなトークンレイヤーは別途提供。

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

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

### B.C. デザインシステム

実際のセマンティックトークン、ネイティブのReact Ariaコントロール、条件に応じて表示される連絡先項目、完全なバリデーション動作を備えた、B.C.風のリマインダー設定フォームを作成します。

### Canada.ca デザインシステム

GC Design System のタイポグラフィ、セマンティックトークン、ネイティブWebコンポーネントを、開閉表示と空の状態の動作を備えた、検索可能な準備ガイドでご覧ください。

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

CFPBの編集向けグリッド、現行のタイポグラフィ、ネイティブの展開パネルを、動作する読書ワークシート、検証済みのパッケージAPI、明確なブランド利用上の境界とともに実装します。


- [実装リファレンス](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [ソース](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [ソース](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [関連する仕様を確認する](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [コードリファレンス](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [関連する仕様を確認する](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [コードリファレンス](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [関連する仕様を確認する](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [リポジトリとライセンス オープンソースのパッケージと、プロプライエタリな要素の分離。](https://github.com/Amsterdam/design-system)
- [CSSの仕様 クラス構成、CSSの使用方法、テーマの依存関係。](https://github.com/Amsterdam/design-system/tree/develop/packages/css)
- [Switchのドキュメント 2値設定をすぐに反映する仕様。](https://designsystem.amsterdam/?path=/docs/components-forms-switch--docs)
- [アセットに関する注意 フォント、アイコン、ブランド表現、ロゴの利用制限。](https://github.com/Amsterdam/design-system/blob/develop/NOTICE.md)
- [トークンパッケージの範囲 プロプライエタリなトークンレイヤーは別途提供。](https://github.com/Amsterdam/design-system/tree/develop/packages-proprietary/tokens)