# NSW デザインシステム ## NSW デザインシステム インターフェースのプレビュー マウスまたはキーボードでタブを切り替えても、ローカルの読書リストは保持されます。 ## NSW デザインシステム デザインリファレンス 実際のnsw-design-system 3.27.0 CSSのエクスポートとTabsの実装を使用し、ローカルのPublic Sansフォントを読み込みます。 ### ブランドロールとニュートラルロール | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --nsw-brand-dark | #002664 | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-brand-light | #cbedfd | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-brand-supplementary | #146cfd | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-brand-accent | #d7153a | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-brand-accent-light | #ffe6ea | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-grey-01 | #22272b | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-grey-02 | #495054 | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-grey-03 | #cdd3d6 | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-grey-04 | #ebebeb | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-off-white | #f2f2f2 | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-text-dark | #22272b | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | | --nsw-text-light | #fff | 実際の3.27.0デフォルトテーマです。text-lightは、暗い背景に使う明るい色のテキストを意味し、白地に使う強調度の低いテキストを指すものではありません。 | ### ステータスの組み合わせ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --nsw-status-success | #008a07 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-success-bg | #e5f6e6 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-info | #2e5299 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-info-bg | #eaedf4 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-warning | #c95000 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-warning-bg | #fbeee5 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-error | #b81237 | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | | --nsw-status-error-bg | #f7e7eb | 意味のあるステータスカラーを背景ロールと組み合わせ、読みやすいテキストで説明します。 | ### タイポグラフィと角丸 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --nsw-font-family | "Public Sans",sans-serif | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size | 16px | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-normal | 400 | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-bold | 700 | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-md-mobile | 1.125rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-md-desktop | 1.25rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-lg-mobile | 1.375rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-lg-desktop | 1.5rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-xl-mobile | 1.75rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-xl-desktop | 2rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-xxl-mobile | 2.25rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-font-size-xxl-desktop | 3rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | | --nsw-border-radius | 0.25rem | 公開されているレスポンシブなタイポグラフィのリファレンスと、共通の角丸ロールです。モバイル用とデスクトップ用のタイポグラフィの組み合わせは、別々のフォントファミリーを意味するものではありません。 | ## NSW デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## NSW デザインシステム 固定バージョンのランタイムとテーマ ### ネイティブのタブ実装を使用する > このサンプルはnsw-design-system 3.27.0を使用します。パッケージのCSSとTabsクラスをインポートし、マークアップを作成した後に単一のタブグループを初期化します。このように対象を絞って初期化することで、存在しない無関係なコンポーネントの登録を避けられます。現在のドキュメントではより新しいリリースが説明されている場合がありますが、ダウンロード可能なコードとトークン値は、ここでは検証済みのパッケージに基づいています。 ### コンポーネントとアプリケーションの状態を分離する ネイティブのTabsクラスが、タブの選択、パネルの表示、キーボード操作を担います。アプリケーション側では、保存したプロンプトをSetで管理します。そのため、ステージを移動しても読書リストは変わりません。この役割分担はソース上で明確です。隠れたグローバルストアも、バックエンドへのリクエストも、政府アカウントを装う機能もありません。 ## NSW デザインシステム ブランドロールと読みやすい背景レイヤー ### 暗色ロールと明色ロールを組み合わせて使う デフォルトの暗色ブランドカラーは#002664、明色の背景レイヤーは#CBEDFDです。プロンプトパネルには明色ロール、アクションには暗色を使います。選択中のタブには、パッケージのアクセントスタイルが適用されます。これらは、公共機関のサイトを連想させるために任意で選んだ青系の配色ではなく、実際のテーマロールです。この例では、政府の公式ロゴは使用していません。 ### トークン名を正しく解釈する text-lightトークンは白です。暗い背景に使うものであり、控えめなテキストの汎用的な言い換えとして使うべきではありません。補足的なステージテキストには、より暗いニュートラルロールを使います。このリファレンスにはステータスの前景色と背景色の組み合わせが含まれていますが、使用可能な色をすべて見せるためだけに、ワークショップでエラーや成功のアラートを作り出すことはしません。 ## NSW デザインシステム Public Sansとレスポンシブなスケール ### レイアウトを確認する前にフォントを読み込む この例では、Public Sansの400と700のウェイトをローカルで読み込みます。パッケージではモバイルとデスクトップのサイズが個別に定義されています。中サイズのテキストは1.125remから1.25remに、最大サイズの見出しは2.25remから3remに拡大します。利用可能な幅が変わっても、これらの組み合わせによって読み取りの階層を保てます。 ### コンテンツの階層を簡潔に保つ 短いステージラベルの後に、説明的な見出し、導入文、補足の段落、保存済みプロンプトを1つ配置します。すべての文をカードにすることはありません。画面が狭い場合、読書リストはステージパネルの後に続きます。3つの短いラベルからなるタブ列は、テキストを複数行に押し込まずに使える状態を保ちます。 ## NSW デザインシステム タブのマークアップとキーボード操作 ### 実際のリンクをコンポーネントで拡張する 最初のタブリストには、それぞれ異なるコンテンツIDへのリンクを用意します。初期化すると、コンポーネントがtablist、tab、tabpanelのセマンティクスを追加し、選択状態を管理して、タブをフォーカス可能にします。コンポーネントが対応するパネルを見つけるには、hrefのリンク先が正しく設定されている必要があります。ページにタブグループを複数配置する場合は、IDを重複させないでください。 - 各タブリンクを1つのパネルIDに対応させます。 - マークアップを挿入した後にグループを初期化します。 - 選択状態とキーボードフォーカスは、ネイティブコンポーネントに管理させます。 ### クリック操作だけでなく、キーボードによる選択も確認します。 ネイティブ実装は矢印キーでの移動に対応しています。ブラウザテストでは「準備」にフォーカスを置いて ArrowRight を押し、「話し合い」が選択状態になることを確認します。この動作は、最後にクリックしたラベルにスタイルを適用するだけの実装とは異なります。これらは同じ階層のステージで、読者が相互に移動できるため、タブグループが適しています。順番に入力する必要があるフォーム項目を隠すためには使いません。 ## NSW デザインシステム 保存したプロンプトと誠実なフィードバック ### 保存状態を表示中のタブから独立させる 各ステージのアクションは、そのプロンプトを Set 内で切り替え、aria-pressed を更新し、ラベルを「保存」から「削除」に変更します。リーディングリストの件数と項目は、この Set から導出します。保存済みのステージに戻ると、選択状態が正しく表示されます。「リーディングリストをクリア」を選ぶとすべての選択が解除され、クリアする項目がない場合はボタンが無効になります。 ### データの保存範囲を明示する リーディングリストはページ内のローカル状態で、再読み込みすると消えます。インターフェースでもその点を明示しています。実際にデータを永続化するには、明示的な保存モデルと復元動作が必要ですが、ここではどちらも想定していません。このコンテンツは独自に作成したデザインディスカッション用の例であり、サービスの利用資格を案内するものでも、NSW の公式な手順を再現したと主張するものでもありません。 ## NSW デザインシステム 完全な実装とレビュー ### 依存関係を含めてソースを再現する Vite の vanilla プロジェクトを作成し、nsw-design-system 3.27.0 と Public Sans をインストールして、提供されたエントリーファイルと nsw.css を保存します。ルートのマウント要素を用意してください。3 つのステージの全コンテンツ、独自のプロンプト、ネイティブ Tabs の初期化、リーディングリストのイベント処理が含まれています。保存やリセットの処理を疑似コードで代用していません。 1. バージョンを固定した NSW パッケージと Public Sans のフォントファイルをインストールします。 2. ルートのマウント要素を用意し、エントリーファイル全体と nsw.css を保存します。 3. 異なる 2 つのタブでプロンプトを保存し、状態が保持されることを確認します。 4. ArrowRight を使って移動し、リストをクリアして空の状態を確認します。 ### タブの移動と保存済みコンテンツを別々に管理する リンク先とパネルが揃ってから、ネイティブの Tabs クラスを初期化します。対応するフラグメント ID が拡張機能の前提です。タブラベルが正しく見えていても、パネルの ID を変更して href を更新しなければ関連付けが壊れます。複数のグループを同じページに配置する場合は、それぞれに異なる ID を付けてください。 リーディングリストは、タブインスタンスの外にあるアプリケーション状態として管理します。パネルを切り替えてもプロンプトの保存状態を維持し、パネルに戻ったときに aria-pressed がその状態を示す必要があります。読者が再訪できる同階層のコンテンツにはタブを使います。順番に完了する必要があるフォームには、別のナビゲーション方式が必要です。また、永続化するには、ページ内だけの例から暗黙に変更するのではなく、明示的な保存と復元の方針が必要です。 ## NSW デザインシステムのコンポーネント例 ### main.js — ネイティブのタブとリーディングリストの完全な例 独自のステージコンテンツ全体、タブの初期化、保存・削除・リセットの完全な処理が含まれています。 ``` import Tabs from 'nsw-design-system/src/components/tabs/tabs.js'; import 'nsw-design-system/css'; import '@fontsource/public-sans/latin-400.css'; import '@fontsource/public-sans/latin-700.css'; import './nsw.css'; const sessions=[['Prepare','Choose one question to explore','Start with a clear outcome rather than a long list of activities.','Write a one-sentence purpose. Identify the people who can answer the question and the evidence you already have.'],['Discuss','Make room for different views','Use a short, structured discussion to compare observations.','Ask participants to describe what they noticed before proposing solutions. Keep a separate record of assumptions that need evidence.'],['Review','Turn observations into a next step','End with an action that has an owner and a clear reason.','Choose one improvement to investigate. Record what would count as success and when the group will review the result.']]; document.getElementById('root').innerHTML=`

NSW DESIGN SYSTEM / ORIGINAL WORKSHOP STUDY

Plan a focused discussion

Move between three stages and save useful prompts to a local reading list.

    ${sessions.map(([name],i)=>`
  • ${name}
    • `).join('')}
${sessions.map(([name,title,lead,body],i)=>`

STAGE ${i+1} / 3

${title}

${lead}

${body}

Prompt to keep

${['What do we need to understand before choosing a solution?','Which observations are shared, and where do they differ?','What is the smallest next step that would reduce uncertainty?'][i]}
`).join('')}
`; new Tabs(document.querySelector('.js-tabs')).init();const saved=new Set();const $=id=>document.getElementById(id);function render(){$('count').textContent=saved.size+' prompt'+(saved.size===1?'':'s')+' saved';$('saved').replaceChildren(...[...saved].sort().map(i=>{const li=document.createElement('li');li.textContent=sessions[i][0]+': '+sessions[i][1];return li}));$('empty').hidden=saved.size>0;$('clear').disabled=!saved.size;document.querySelectorAll('.save').forEach(b=>{const yes=saved.has(Number(b.dataset.index));b.setAttribute('aria-pressed',String(yes));b.textContent=yes?'Remove saved prompt':'Save this prompt'})}document.querySelectorAll('.save').forEach(b=>b.addEventListener('click',()=>{const i=Number(b.dataset.index);saved.has(i)?saved.delete(i):saved.add(i);render()}));$('clear').addEventListener('click',()=>{saved.clear();render()}); ``` コードリファレンス - タブは NSW クラスが管理し、独自のリーディングリストは Set が管理します。 ### nsw.css — 独自のレスポンシブレイアウト 公開されているセマンティックテーマのロールを使ったレイアウトとプロンプトの背景。 ``` body{margin:0}main{max-width:1240px;padding:32px;margin:auto}.eyebrow,.step{font-size:14px;letter-spacing:.05em;font-weight:700}.eyebrow{color:var(--nsw-brand-dark)}h1{max-width:24ch}.layout{display:grid;grid-template-columns:1.8fr 1fr;gap:32px;margin-top:40px}.nsw-tabs__content{min-height:0}.prompt{margin-top:32px;padding:24px;background:var(--nsw-brand-light)}.prompt h3{margin-top:0}.prompt blockquote{margin:16px 0 24px;padding:0;border:0;font-size:20px;line-height:1.5}.step{margin-top:0;color:var(--nsw-grey-02)}aside{padding:24px;border-top:4px solid var(--nsw-brand-dark);background:var(--nsw-off-white);align-self:start}aside h2{font-size:24px;margin-top:0}aside li{margin:16px 0}aside ul{padding-left:24px}.note{font-size:14px;margin-top:24px}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr}h1{font-size:36px}.prompt{padding:20px}} ``` コードリファレンス - 補助的なステージラベルにはダークニュートラルを使用し、--nsw-text-light は白です。 ## NSW デザインシステム エージェントのセットアップ ### 実装の出発点 ネイティブのタブクリックと矢印キー操作、保存状態の維持、リストのクリア、レスポンシブレイアウトをローカルでテストしました。 ``` npm create vite@latest nsw-workshop -- --template vanilla cd nsw-workshop npm install npm install nsw-design-system@3.27.0 @fontsource/public-sans # Replace src/main.js and add src/nsw.css. Keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` 3.27.0 のネイティブ Tabs、Public Sans、実際のセマンティックロールを使って NSW ワークショップガイドを構築します。パネル ID の一意性、キーボードでの選択、保存済みプロンプトの独立した状態、有用な空のリーディングリストを維持してください。保存がローカルに限られることを明確にし、公式サービスに関する主張は避けてください。 ``` ## NSW デザインシステム 出典と対象範囲 NSW Design System 3.27.0 を使用した、OpenDesign 作成のワークショップ用の例です。ネイティブのタブ動作は実際のものですが、コンテンツとプロンプトの保存フローは独自のローカルアプリケーションロジックです。 - タブ 同階層コンテンツのナビゲーションとネイティブの動作。 - 開発者向け統合 パッケージ、スタイルシート、JavaScript のセットアップ。 - タイポグラフィ Public Sans とタイポグラフィの階層。 - バージョンに基づく実装 テーマのエクスポートと Tabs のソース。 ## NSW デザインシステム 関連リソース ### ONS デザインシステム 回答に矛盾が生じないアンケートを作成します。ONSのネイティブチェックボックス、相互排他的な回答、正確なタイポグラフィと色の参照、ローカルで完結する確認フローを使用します。 ### Ontario デザインシステム 実際のタイポグラフィ、公開されている余白と色の値、ネイティブのアコーディオン動作、バージョンを一致させたソース一式を使って、オンタリオ州のスタイルに沿った長文ガイドを作成します。 ### Poncho 動作するアクティビティディレクトリを使って、Poncho の Bootstrap 3 グリッド、セマンティックなアクションカラー、クリック可能なサービスパネルを確認できます。 - [実装リファレンス](https://designsystem.nsw.gov.au/components/tabs/index.html) - [ソース](https://github.com/digitalnsw/nsw-design-system) - [コードリファレンス](https://designsystem.nsw.gov.au/components/tabs/index.html) - [コードリファレンス](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [タブ 同階層コンテンツのナビゲーションとネイティブの動作。](https://designsystem.nsw.gov.au/components/tabs/index.html) - [開発者向け統合 パッケージ、スタイルシート、JavaScript のセットアップ。](https://designsystem.nsw.gov.au/get-started/for-developers.html) - [タイポグラフィ Public Sans とタイポグラフィの階層。](https://designsystem.nsw.gov.au/core/typography/index.html) - [バージョンに基づく実装 テーマのエクスポートと Tabs のソース。](https://github.com/digitalnsw/nsw-design-system)