# Queensland Government デザインシステム ## Queensland Government デザインシステム インターフェースのプレビュー イラスト付きリソースを選択し、ネイティブモーダルで名前を確認して、ローカルのリストを編集します。 ## Queensland Government デザインシステム デザインリファレンス 実際の @qld-gov-au/qgds-bootstrap5 2.4.1 の CSS エクスポートと Bootstrap モーダル動作を使用し、Noto Sans をローカルから読み込みます。 ### デフォルトのライトパレット | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --qld-color-default-color-light-action-primary | #005eb8 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-action-primary-hover | #003e96 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-background-default | #ffffff | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-background-alt | #e3e7ea | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-focus-default | #002e85 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-link-default | #005eb8 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-link-visited | #551a8b | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-text-default | #353535 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | | --qld-color-default-color-light-text-heading | #000053 | QGDS Bootstrap 2.4.1 の実際のライトロール。対応するライトサーフェスと組み合わせて使用します。 | ### デフォルトのダークパレット | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --qld-color-default-color-dark-action-primary | #84d3ff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-action-primary-hover | #a6f7ff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-background-default | #005eb8 | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-background-alt | #001d74 | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-focus-default | #c6ffff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-link-default | #ffffff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-link-visited | #f2cdff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-text-default | #ffffff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | | --qld-color-default-color-dark-text-heading | #ffffff | 実際に対になっているダークロールです。意図された組み合わせを確認せずに、ライト用の前景色をダークサーフェスで再利用しないでください。 | ### 本文、角の丸み、モーダルの寸法 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --qld-body-font-family | var(--qld-font-sans-serif) | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-body-font-size | 1rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-body-line-height | 1.5 | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius | .25rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius-sm | .25rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius-lg | .25rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius-xl | 1rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius-xxl | 2rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-border-radius-pill | 50rem | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-modal-border-radius | var(--qld-border-radius-lg) | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | | --qld-modal-title-line-height | 1.5 | エクスポートされた実装値です。元のリソースイラストの色と8pxのカード角丸はサンプル用の設定であり、公式のテーマトークンではありません。 | ## Queensland Government デザインシステム 完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Queensland Government デザインシステム Queensland向けの実装を選ぶ ### ランタイムを正確に示す > Queenslandでは複数の実装方法が公開されています。この検証では、公開されている @qld-gov-au/qgds-bootstrap5 パッケージの2.4.1と、その Bootstrap モーダル動作を使用します。新しいLitウェブコンポーネントの系列を実行しているわけではありません。実装名とバージョンを明示することで、読者が似た名前のコンポーネントを、互換性のない初期化ルールと取り違えるのを防ぎます。 ### 安定したサンプルと開発中の系列を分ける 公式ウェブコンポーネントのリポジトリでは、現在の系列にアルファ版と明記されています。一方、旧来のVanillaパスは別のリファレンス実装です。ここで実行可能なサンプルは、テスト済みの Bootstrap ベースのパスに統一しています。今後移行する際は、スタイルシートのURLを置き換えるだけでなく、マークアップ、トークン名、コンポーネントの仕様を再確認してください。 ## Queensland Government デザインシステム テーマロールとリソースのイラスト ### ライトとダークのロールをあわせて確認する パラメータ表には、実際のパッケージに含まれるライトとダークの対になるロールが記載されています。プライマリアクション、リンクの色、フォーカス、テキストのロールは、背景のコンテキストに応じて変わります。現在のリソースパックはライトの構成を使用しています。ダークの値は参考値であり、ページにテーマ切り替え機能があることを示すものではありません。 ### ブランドトークンを新たに定義せずにイラストを使う 各カードには、番号付きのオリジナル文書イラストが含まれています。彩度を抑えた4種類のイラスト背景は、独自に作成したリソースの種類を見分けるためのものです。これらの色と8pxのカード外周の角丸はアプリケーション側のスタイルであり、公開されているロール表とは別に示しています。インターフェースの基盤となる実際のボタン、チェックボックスのスタイル、モーダルのスタイルはライブラリが提供します。 ## Queensland Government デザインシステム 文字のスケールとカードの内容 ### 公開されている本文用フォントを読み込む パッケージの本文ロールでは、サンセリフのフォントファミリーに1remのサイズと1.5の行高を使用します。プレビューではNoto Sansのローカルフォントを読み込むため、Google Fontsへのリモートリクエストに依存しません。カードが1列に並ぶレイアウトになっても、見出し、説明、選択数のステータスを読みやすく保てます。 ### 各リソースに役立つ説明を付ける 各カードには、種類、目安の所要時間、具体的なタイトル、短い目的が記載されています。所要時間はワークショップ用に設定した目安であり、利用状況の分析データではありません。選択ラベルにもリソース名を含めることで、支援技術で個別に読み上げられた場合にも、操作の内容が伝わります。カード全体を曖昧なクリック対象にはしていません。 ## Queensland Government デザインシステム チェックボックスの選択と連動するフィードバック ### 選択がない場合は確認操作を利用できないようにする 独立したチェックボックスで、4つのリソースから任意の組み合わせを選択できます。選択したインデックスはSetに保持し、選択数と確認リストはその状態から導出します。Setが空の場合、選択内容の確認は無効になります。これにより、役立つ内容のないダイアログが開くのを防ぎながら、表示される選択数の0によって理由を示せます。 - 複数リソースのリストには、独立したチェックボックスを使います。 - 選択数は、ダイアログと同じデータから導出します。 - 各チェックボックスのラベルにリソース名を含めます。 ### 変更があったら古い確認結果を消す ローカルで確認した後に別のリソースを選択または削除すると、以前の結果を非表示にします。編集後のリストを反映しているかのように、要約が表示され続けることはありません。リストを空にするとSetと実際のチェックボックス入力の両方がリセットされ、最初の選択肢にフォーカスが戻ります。このプレビューでファイルが生成または送信されることはありません。 ## Queensland Government デザインシステム 確認ダイアログとフォーカスの復帰 ### 確認の区切りにはネイティブモーダルを使う Bootstrap Modalのインスタンスを開くと、見出しをラベルとするダイアログが表示されます。本文には現在選択されているリソース名が並び、操作ボタンから編集の続行またはローカルでの確定を選べます。Escapeキーまたは閉じるコントロールでダイアログを閉じられます。ネイティブの非表示イベントが発生すると、アプリケーションは「選択内容を確認」にフォーカスを戻します。 ### 不要なトランジションの競合を避ける このサンプルでは、任意のfadeクラスを使用していません。そのため、表示トランジション中に確定やEscapeキーを操作しても無視されず、ダイアログをすぐに閉じられます。モーダルのフォーカス管理と背景の動作は引き続き利用できます。確認操作が反映されたかどうかを理解するために、動きの表現を必要としない設計にします。 ## Queensland Government デザインシステム リソースパックの実装一式 ### ローカルの検証環境を正確に再構築する ViteのVanilla JSプロジェクトを作成し、BootstrapとNoto Sansを使って、バージョンを固定したQGDS Bootstrapパッケージをインストールします。推測したdeep distのインポートパスではなく、パッケージが公開するqld.bootstrap.cssのパスを使います。ルートのマウント要素を含む完全なエントリファイルとqueensland.cssを保存します。ソースには、すべてのリソース情報、オリジナルのSVGイラスト、選択ロジック、モーダルの遷移が含まれています。 1. バージョンを固定したQGDS Bootstrapパッケージと公開フォントをインストールします。 2. 公開されているスタイルシートのパスを使い、完全なエントリファイルとCSSを用意します。 3. リソースを2つ選び、Escapeキーとフォーカスの復帰をテストします。 4. ローカルで動作を確認し、選択を変更して以前の結果がクリアされることを検証します。 ### モーダルの遷移とフォーカスのルールを明確に定める QGDS BootstrapではBootstrap Modalを使うため、閉じる際は標準のモーダルライフサイクルに従います。任意の遅延時間を推測するのではなく、hidden.bs.modalの後にフォーカスを「選択内容を確認」に戻します。後からフェードを追加する場合は、遷移中の動作も考慮してください。開く途中でただちに非表示を要求しても、無視されることがあります。 モーダルを開くときに、現在の選択内容から確認リストを生成します。チェックボックスが変更されたら、以前のローカル確認結果を無効にします。Escapeキーで確認画面を閉じても、選択内容は変更しません。チェックボックスをカードのイラストから分離することで、カード全体のクリック動作との競合を避け、各リソースに正確でアクセシブルな選択ラベルを付けられます。 ## Queensland Government デザインシステムのコンポーネント例 ### main.js — リソースの選択とモーダルでの確認の完全な実装 オリジナルのデータ、イラスト、チェックボックスの状態管理、標準モーダルとの連携を含みます。 ``` import Modal from 'bootstrap/js/dist/modal'; import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css'; import '@fontsource/noto-sans/latin-400.css'; import '@fontsource/noto-sans/latin-700.css'; import './queensland.css'; const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`

QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY

Build a workshop resource pack

Choose useful sample resources, then review your local selection. No files are requested or sent.

0 resources selected

${resources.map(([title,desc,type,time],i)=>`

${type} · ${time}

${title}

${desc}

`).join('')}
`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()}); ``` コードリファレンス - パッケージのスタイルシートには、公開されたエントリポイントを使います。ローカルでの確認は、ファイルのダウンロードやサービスへの送信ではありません。 ### queensland.css — オリジナルのカード構成 標準コンポーネントのスタイルをベースに、レスポンシブなカードと装飾的な書類のイラストを配置します。 ``` body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}} ``` コードリファレンス - イラストの色とカード外枠の形状は、アプリケーション独自の選択です。 ## Queensland Government デザインシステム AIエージェントのセットアップ ### 実装の出発点 プレビューには公開フォントのアセットが埋め込まれ、標準のモーダル動作が実行されます。サーバー側への送信処理は実装されていません。 ``` npm create vite@latest qld-resource-pack -- --template vanilla cd qld-resource-pack npm install npm install @qld-gov-au/qgds-bootstrap5@2.4.1 bootstrap@5.3.8 @fontsource/noto-sans # Replace src/main.js and add src/queensland.css. Keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` QGDS Bootstrap 2.4.1を使って、クイーンズランド州のリソースパックの検証環境を構築します。実際のパレットの役割と標準のModalを使い、チェックボックスのラベル、選択内容から算出した件数、選択が空の場合の確認ボタンの無効化、Escapeキー、フォーカスの復帰、以前の結果のクリアを維持します。オリジナルのイラストは公式テーマトークンと明確に区別し、実際にリソースが提供されるかのような表現は避けてください。 ``` ## Queensland Government デザインシステム 情報源と対象範囲 QGDS Bootstrap 2.4.1を使った、OpenDesign独自のリソースパック検証環境です。これはBootstrapの実装であり、アルファ版のWebコンポーネント系列ではありません。選択内容はローカルに保存され、リソースは送信されません。 - 実装方法 Vanilla JS、Bootstrap、開発中のWebコンポーネントの選択肢。 - バージョンを固定したBootstrapのソース 公開されているCSS、アセット、実装。 - カードのガイダンス コンテンツの階層構造とカードの使い方。 - Webコンポーネントの状況 アルファ版であることと、個別の連携仕様を明示。 ## Queensland Government デザインシステム 関連リソース ### Ripple ワークショップのタイムライン全体を通して、段階的な情報開示、進捗状況、次のステップへのキーボードフォーカスを確認しながら、Rippleの実際のカラーの役割、14段階のスペーシングスケール、レスポンシブなタイポグラフィの参考例を見ていきます。 ### Scottish Government デザインシステム スコットランド政府のレスポンシブな文字組み、余白、色の役割を、上限超過後も入力内容を保持して修正を支援するネイティブな文字数入力フィールドに適用します。 ### Singapore Government デザインシステム 現行のSGDS Web Componentsを使い、実際のレスポンシブトークン、昼夜のテーマ、ローカルのプランと同期する標準の範囲指定数量を実装します。 - [実装リファレンス](https://github.com/qld-gov-au/qgds-bootstrap5) - [ソース](https://github.com/qld-gov-au/qgds-bootstrap5) - [コードリファレンス](https://github.com/qld-gov-au/qgds-bootstrap5) - [コードリファレンス](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [実装方法 Vanilla JS、Bootstrap、開発中のWebコンポーネントの選択肢。](https://www.designsystem.qld.gov.au/get-started/developing) - [バージョンを固定したBootstrapのソース 公開されているCSS、アセット、実装。](https://github.com/qld-gov-au/qgds-bootstrap5) - [カードのガイダンス コンテンツの階層構造とカードの使い方。](https://www.designsystem.qld.gov.au/components/card/tabs/design) - [Webコンポーネントの状況 アルファ版であることと、個別の連携仕様を明示。](https://github.com/qld-gov-au/qgds-web-components)