Amsterdam デザインシステム.

名前 / ルール	値 / 設定	用途
`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 デザインシステム完全ガイド

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

DESIGN-amsterdam.md

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

ガイドをダウンロード

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

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

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

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

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

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

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

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

CSS

: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 で関連付けています。

html

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

「文字を大きくする」をオンにして、隣の記事の段落の文字サイズを確認してください。
「コントラストを強める」にフォーカスし、Space キーを押してキーボードで切り替えてください。
既定値に戻し、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テーマ一式

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

CSS

: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ロール、隣接する視覚的ラベル。

html

<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、カスタムテーマ、目に見えるローカルな効果。

html

<!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>