01NL デザインシステム インターフェースのプレビュー
元のテーマを切り替え、記録の場所を編集し、記録を変更せずに保存またはキャンセルできます。
Utrecht CSS 9.0.15のネイティブなボタン／データリストコンポーネント、オリジナルのテーマトークン、アプリケーション側のインタラクション。·
実装リファレンス 具体的なコントリビューターの構成: @utrecht/component-library-css 9.0.15。公開トークン名とクラスは、ライブラリのAPIを調査したものです。「example」と記された数値や色は、元のアプリケーション設定であり、汎用的なNL Design Systemの仕様ではありません。
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
Component implementation | Utrecht CSS 9.0.15 | 選択したコントリビューターであり、唯一のNL Design System実装ではありません。 |
Theme boundary | Wrapper-scoped CSS custom properties | 同じセマンティックなマークアップで、複数のアイデンティティを表現できます。 |
Source design tokens | Design Tokens JSON standard | 組織は、それぞれのハウススタイルを再利用できる形で公開しています。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
--utrecht-button-min-block-size | 48px in example; 44px library fallback | 明示的なターゲットサイズ。 |
--utrecht-button-border-radius | 4px / 8px in example themes | アプリケーション側で定義する形状。 |
--utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | 独自のアクションカラー。文字色は白。 |
--utrecht-button-font-size | 1rem in example | コンポーネントのテキストロール。 |
--utrecht-focus-outline-width | 3px in example | 公開されているフォーカスリングの設定。 |
| 名前 / ルール | 値 / 設定 | 用途 |
|---|
.utrecht-data-list + .utrecht-data-list--rows | dl root | 意味のある名前付きの値。 |
.utrecht-data-list__item | Key/value wrapper | レスポンシブなグリッド行。 |
--utrecht-data-list-rows-column-min-inline-size | 12ch in example | レシートの項目名に合わせて選んだ最小列幅。 |
--utrecht-data-list-rows-column-inline-size | 45% in example | スペースに余裕があれば2列にする。 |
--utrecht-data-list-rows-gap | 24px in example | 項目名と値の間隔。 |
03NL デザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
DESIGN-nl-design-system.md詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
ガイドをダウンロードNL デザインシステムの構成を選ぶ
単一のテーマではなく、エコシステム
NL Design Systemは、複数の組織からのコントリビューションを組み合わせ、各組織のハウススタイルをデザイントークンで表現することを明示的にサポートしています。そのため、実際に採用する単位は、選択したコンポーネント実装と選択したテーマの組み合わせです。このページでは、UtrechtのCSSコントリビューター実装と、独自のデモ用テーマを選んでいます。
この選択は、UtrechtがすべてのNL Design Systemコンポーネントの標準実装だと主張するものではありません。国を代表するフォントや青色、スペーシングスケールを捏造することなく、再現可能な手順を示すものです。実際に使用するネイティブCSSパッケージは、@utrecht/component-library-css 9.0.15です。
関連する仕様を確認する
NL デザインシステムの公開コンポーネントトークン
アプリケーション独自の値は、ライブラリのCSSの外で管理する
このテーマでは、ラッパーに公開されている--utrecht-*カスタムプロパティを設定します。ボタンはそれらの値を使用し、クラスによってコンポーネントの構造が決まります。--_utrecht-で始まる変数は、調査したCSS内部の計算に使われています。これらを直接変更すると、アプリケーションが実装の詳細に依存してしまいます。
例で使っているティールの#005a5bと紫の#57328cは、アプリケーション独自の色です。特定の自治体のアイデンティティを流用せずに、差し替え可能なブランディングを示しています。どちらもアクションの文字色は白で、ホバー時の色は別に定義しています。いずれの色も、公式のNL Design Systemトークン値とは説明していません。
CSS
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}コードリファレンス
関連する仕様を確認する
NL デザインシステムのタイポグラフィと寸法
テーマに必要な設定を補う
このデモでは、文書を読みやすくするため、Arial, sans-serif、18px、行の高さ1.6を指定しています。最初のテーマは見出しを32px、ボタンの角丸を4pxに設定し、2つ目のテーマは本文の読みやすいサイズはそのままに、角丸を8px、見出しをセリフ体にしています。テーマを切り替えると、こうした違いがはっきり現れます。
ネイティブボタンは、トークンが設定されていない場合、最小のblock-sizeとして44pxを使用します。このテーマでは48pxを指定し、block方向とinline方向のパディングも明示しています。これは実際に存在するCSSAPIにアプリケーション独自の値を設定したものであり、エコシステム全体に共通する寸法を推測したものではありません。レイアウトには、この例で指定した最大幅56remと間隔24pxを使用しています。
関連する仕様を確認する
NL デザインシステムデータリストの構造
名前付きの値を定義するリスト
レシートには、dl要素と.utrecht-data-list、および.utrecht-data-list--rowsモディファイアを使用しています。各.utrecht-data-list__itemで、dtの項目名とddの値をまとめています。rowsモディファイアによって、レスポンシブなグリッド、行間、境界線が有効になります。これがなければ、基本のデータリストでこのレイアウトは有効になりません。テーマを読み込む前でも、HTMLは意味を成します。
レシートには、受け取り場所、照会番号、選択した品目を表示します。これは繰り返しのレコードを並べる表ではありません。各項目名は、同じ申請の異なる属性を示しています。画面幅が狭い場合、項目名と値は縦に並びます。長い場所名が切り取られないよう、行のトークンはアプリケーション側で設定しています。
- dtには属性名を、ddには現在の値を指定します。
- 各項目名と値の組み合わせを、ドキュメントに記載されたラッパーで囲みます。
- ページ幅が広がらないよう、識別子や長い場所名は折り返します。
関連する仕様を確認する
NL デザインシステムのアクションの意味
ボタンのクラスだけではワークフローは実装されない
.utrecht-buttonは基本コンポーネントを提供し、.utrecht-button--primary-actionはプライマリアピアランスのトークングループを選択します。周囲のフォームを送信せずローカルなアクションを実行する場合でも、ネイティブ要素にはtype=buttonが必要です。アプリケーションが編集パネルを開くまでは、データリストは読み取り専用です。
このデモでは、「受け取り場所を変更」ボタンを押すと、ネイティブのラジオボタンを含むフィールドセットが表示されます。保存すると、定義リストの値が更新され、新しい場所がpoliteステータス領域で通知されます。キャンセルすると、保存済みの値を変更せずにパネルが閉じます。これらはアプリケーション側のコードによる動作です。CSSのバンドルをインストールしただけでは実装されません。
関連する仕様を確認する
NL デザインシステムのテーマを安全に切り替える
ラッパーを切り替えて、レコードは維持する
テーマセレクターは、最外部のラッパーにあるdata-themeを切り替えます。コンポーネントのクラス、レコードの値、選択中のラジオボタンはそのまま維持されます。これは、ホワイトラベルの分離を具体的に示すものです。同じレシートと操作に、それぞれ異なるビジュアルアイデンティティを適用できます。
ここでのテーマ切り替えは開発用のデモであり、公共サービスに必須の設定ではありません。実際の複数組織向けサービスでは、信頼できるアプリケーション設定からテーマを選んでください。テーマの値によって、利用資格、バリデーション、ステータスの意味が変わらないようにします。
- バージョンを指定したコンポーネントのCSSを一度だけ読み込みます。
- 関連するテーマトークンを、包含する要素に適用します。
- 同じセマンティックなコンポーネントのマークアップを、その要素内にレンダリングします。
- 対応する各テーマで、フォーカス、折り返し、状態色を確認します。
関連する仕様を確認する
NL デザインシステムのアクセシビリティと成熟度
選択したコントリビューションを評価する
NL Design Systemのリレーモデルでは、共有標準に向けたコントリビューションの進展が示されています。コミュニティリポジトリにコンポーネントが存在するだけでは、あらゆる構成が本番利用に適しているとは限りません。選択した実装、対応する状態、現在の成熟度を、コンポーネントのドキュメントで確認してください。
プレビューでは場所の選択肢を示す凡例を表示し続け、保存結果を通知します。編集後は操作を開始したボタンにフォーカスを戻します。テーマを切り替えてもフォーカスは失われません。ネイティブのラジオボタンのキーボード操作とアプリ独自のフォーカス枠を使って、画面を操作できます。これらの確認は、コントリビューターのコンポーネントのテストを補完するものであり、置き換えるものではありません。
関連する仕様を確認する
NL デザインシステムをインストールしてテーマを管理する
CSSのみを使った統合
検証済みのCSSパッケージをインストールし、CSS対応バンドラーを使ってdist/index.cssをインポートしてから、テーマのスタイルシートを読み込みます。ここで使用するCSSのみのデータリストとボタンには、ReactのプロバイダーもJavaScriptのコンポーネント初期化処理も必要ありません。編集、保存、キャンセル、テーマの切り替えは、元のアプリケーションスクリプトが管理します。
バンドルされたコンポーネントのソースコードはEUPL-1.2ライセンスです。配布する際は、ソースコードとライセンスの表記を保持してください。また、コードのライセンスによって自治体のロゴを再利用する許可が得られると解釈しないでください。この例では独自のテーマを使用し、自治体のロゴやマークは使用していません。
関連する仕様を確認する
NL デザインシステムのコンポーネント例
ネイティブボタンで使うテーマトークン
選択状態のボタンテーマ一式。値は独自に設定し、APIの名前はユトレヒトに由来します。
CSS
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}コードリファレンス
名前付きの値と編集操作
コントリビューターのコンポーネントクラスを使った、セマンティックなdl/dt/dd。
html
<dl class="utrecht-data-list utrecht-data-list--rows">
<div class="utrecht-data-list__item">
<dt class="utrecht-data-list__item-key">Collection location</dt>
<dd class="utrecht-data-list__item-value">North library desk</dd>
</div>
<div class="utrecht-data-list__item">
<dt class="utrecht-data-list__item-key">Reference</dt>
<dd class="utrecht-data-list__item-value">DEMO-2048</dd>
</div>
</dl>
<button type="button" class="utrecht-button utrecht-button--primary-action">
Change collection location
</button>コードリファレンス
単体で動作するサンプル一式
レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>コードリファレンス
- 完全なサンプルは「ソース」からダウンロードできます。READMEに正確なローカル起動コマンドが記載されています。
- ベンダーのパスはこのドキュメントからの相対パスのままにしてください。アーカイブには、このプレビューで使用するアセット一式が含まれています。
実装の出発点
スタンドアロンのプレビューでは、同じバージョンのネイティブCSSをローカルで読み込みます。CSSのみのボタンとデータリストのコンポーネントに、Reactのプロバイダーは必要ありません。ライブラリには独自のテーマ値を組み合わせてください。「ソース」にある動作確認用ZIPには、プレビューに必要な依存関係一式と完全なドキュメントも含まれています。展開したディレクトリでpython3 -m http.server 8080を実行し、http://localhost:8080/nl-design-system.htmlを開いてください。モジュールを使う例をfile://経由で開かないでください。
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
あなたのプロジェクト向けプロンプト
AI エージェント用プロンプト
領収書の定義リストとプライマリボタンには、@utrecht/component-library-css 9.0.15を使用します。公開されている--utrecht-*トークンを使って、独自のテーマをラッパーのスコープ内に設定し、内部の--_utrecht-*変数には手を加えないでください。ラベル付きのラジオボタンによる場所の選択肢、保存／キャンセル操作、控えめな更新通知、フォーカスの復帰を用意します。コンポーネントのマークアップやデータを変えずに、2つ目の独自テーマも示します。数値を含むテーマ値はすべて、アプリケーション側で選択した値であることを明記してください。
NL Design Systemは特定のブランドに依存しないエコシステムです。この学習用の例では、コントリビューターによる実装を1つと、独自のテーマを2つ使用しています。国全体に共通するビジュアルスタイルを示すものではなく、自治体のブランドも使用していません。
