# Canada.ca デザインシステム ## Canada.ca デザインシステムのインターフェースプレビュー 作成済みの6つのトピックを絞り込み、標準の詳細表示を展開し、検索結果がない場合も復帰できます。 ## Canada.ca デザインシステムデザインリファレンス 公開済みの @gcds-core/components 1.6.0 CSS のエクスポートとコンポーネントの仕様を使用。ローカルプレビューには @gcds-core/fonts 1.1.1 を埋め込んでいます。 ### セマンティックカラーとインタラクションの役割 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --gcds-text-primary | #333 | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-text-secondary | #595959 | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-bg-primary | #26374a | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-bg-light | #f2f2f2 | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-link-default | #1f497a | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-link-hover | #1354ec | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-link-visited | #4b248f | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-focus-background | #1354ec | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-focus-text | #fff | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-danger-text | #b3192e | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-disabled-background | #d9d9d9 | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | | --gcds-border-default | #8c8c8c | テキスト、界面表面、インタラクション状態には、それぞれのセマンティックロールを使用します。フォーカスカラーは装飾用のアクセントではありません。 | ### タイポグラフィと読みやすい幅 | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --gcds-font-h1 | 700 2.5625rem/117% "Lato",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-font-h2 | 700 2.4375rem/123% "Lato",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-font-h3 | 700 1.8125rem/137% "Lato",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-font-h4 | 700 1.6875rem/133% "Lato",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-font-text | 400 1.25rem/160% "Noto Sans",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-font-text-small | 400 1.125rem/155% "Noto Sans",sans-serif | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | | --gcds-text-character-limit | 65ch | 公開済みの CSS タイポグラフィのエクスポートです。行の長さや折り返しを確認する前に、LatoとNoto Sansを読み込んでください。 | ### 余白とコンテナ | 名前 / ルール | 値 / 設定 | 用途 | | --- | --- | --- | | --gcds-spacing-100 | 0.5rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-spacing-150 | 0.75rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-spacing-200 | 1rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-spacing-300 | 1.5rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-spacing-400 | 2rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-spacing-600 | 3rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-container-sm | 30rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-container-md | 48rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-container-lg | 62rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | | --gcds-container-xl | 71.25rem | トークンの接尾辞をピクセル数とみなさず、エクスポートされたrem値を使用してください。 | ## Canada.ca デザインシステム完全ガイド 実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。 詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。 ## Canada.ca デザインシステムの現行コンポーネントとパッケージの範囲 ### 現行の名前空間を使用する > GC Design Systemは、このCanada.caリソースで使用されているコンポーネントシステムです。このサンプルでは @gcds-core/components 1.6.0を固定し、単独で使用できるinput、details、buttonのカスタム要素を登録します。古いサンプルでは @cdssnc 名前空間が使われている場合があります。異なるリリースの登録コードを混在させず、実際にインストールされているパッケージのバージョンに従ってください。 ### コンテンツの例をサービスと混同しない この例では、作成済みの準備に関するトピックを6つ表示します。Government of Canadaのシグネチャ、予約システムとの連携、必須書類に関する主張はありません。実際に検索できる開閉パターンを示すことを目的としています。コンポーネントを再利用しても、そのアプリケーションが公式サービスであることや、Canada.caのすべての要件をコンテンツが満たしていることにはなりません。 ## Canada.ca デザインシステムのタイポグラフィと読み進めるリズム ### 両方のフォントファミリーを読み込む 見出しにはLato、通常のテキストにはNoto Sansを使用します。公開されているデスクトップ用本文ロールは1.25rem、行の高さは160%です。読みやすい幅の基準としてエクスポートされている値は65chです。これらの値により、コンパクトなダッシュボードよりもゆったりとした読み進めるリズムになります。外部フォントの読み込みに失敗しても表示が意図せず変わらないよう、ローカルプレビューには公開済みのフォントファイルを埋め込んでいます。 ### フォントの一括指定をそのまま使う トークン表には、名目上のピクセルサイズだけでなく、実際の CSS フォントの一括指定が含まれています。ウェイト、行の高さ、フォントファミリーを組み合わせて指定することが重要です。メインタイトルには、Canada.caを参考に独自にデザインした要素として、短い赤い下線を付けています。その幅は72pxですが、GCの一般的なスペーシングトークンとして示しているものではありません。画面幅が狭い場合は、本文の読みやすさを保ちながら1列のレイアウトに切り替わります。 ## Canada.ca デザインシステムのセマンティックカラーとフォーカスの動作 ### 意味のある状態には公開済みのロールを使う 主テキストには#333、副テキストには#595959、ミュートされた青の界面表面には#26374aを使用します。リンク、フォーカス、危険状態には、エクスポートされた CSS 内でそれぞれ異なるロールがあります。リンクは色の変更だけで識別させません。標準のdetails開閉要素には、操作できることを示す手がかりと、アクセシブルな展開状態も備わっています。 ### 視認できるフォーカス表示を削除しない 標準のinputとボタンには、コンポーネント独自のフォーカス動作があります。アプリケーションの CSS は、シャドウルート内に入ってアウトラインを消すことなく、周囲のレイアウトを処理します。リセットすると検索フィールドにフォーカスが戻るため、キーボード利用者はすぐに検索条件を調整できます。Shadow DOMでは、カスタムスタイルや表示ルールの適用方法が変わります。通常の要素セレクターですべての状態を網羅できると想定せず、描画されたコンポーネントを確認してください。 ## Canada.ca デザインシステムの詳細コンテンツと情報の優先順位 ### 補足説明には開閉式の詳細表示を使う 各標準のgcds-details要素には、details-titleと補足テキストをデフォルトスロットに指定します。必須の案内は、常に見えるサイドバーに表示します。実際の予約日時、住所、要件をパネルを開いた後にしか確認できないようにしてはいけません。6つのサンプルトピックは情報提供のみを目的としています。個人情報を収集したり、予約完了を装ったりするものではありません。 - 重要なサービス情報は、展開しなくても見えるようにする。 - 詳細タイトルは短く具体的にする。 - コンテンツを見つけにくくする、入れ子の開閉表示は避ける。 ### 絞り込み後も詳細表示の状態を維持する アプリケーションでは、各details要素を一度だけ作成します。フィルタリングではコンポーネントを破棄して作り直すのではなく、プレーンなラッパーを非表示にします。これにより、展開済みのトピックが一時的に表示されなくなった後、再び表示されたときにも展開状態が保たれます。また、ラッパーを非表示にすることで、カスタム要素のホストが内部で設定したdisplayスタイルによって外部のhiddenルールが無視されることを避けられます。 ## Canada.ca デザインシステムの検索状態と検索結果がない場合の復帰 ### ドキュメントに記載されたカスタムイベントを監視する gcds-inputにはlabel、input-id、nameが必要です。gcdsInputイベントは、新しい値をevent.detailで提供します。アプリケーションは、前後の空白を取り除いて小文字にした検索語を、トピックのタイトルと本文に照合します。ライブステータスで表示件数を通知し、一致する項目がない場合は、理由の分からない空白領域の代わりに、検索をやり直すためのメッセージを表示します。 ### リセットで完全に初期状態へ戻す 2つ目の標準ボタンを押すと、コンポーネントの値が消去され、6件すべてが再表示され、内部の入力欄にフォーカスが移ります。以前に開いた項目はリセットされません。このように検索状態と閲覧状態を分けることで、動作を予測しやすくしています。リモートのデータセットを検索する本番環境では、読み込み中やリクエスト失敗、結果の並び順に関するルールも必要になりますが、この6件のローカルフィルターでは不要です。 ## Canada.ca デザインシステム 完全なJavaScript連携 ### 動作するサンプルを再現する Viteのvanillaプロジェクトを作成し、バージョンを固定したコンポーネントパッケージをインストールして、エントリーファイルを以下のJavaScript全体に置き換えます。canada.cssを同じ場所に保存し、ルートのマウント要素を用意してください。カスタム要素のエントリーポイントは必要な依存関係を登録します。パッケージのCSSはトークンレイヤーを提供します。ソースにはデータセット全体、登録処理、フィルタリング、リセット動作が含まれています。 1. Viteのvanillaプロジェクトに、バージョンを固定したパッケージをインストールします。 2. エントリーファイル全体とcanada.cssを保存し、ルートのマウント要素を用意します。 3. 該当なしとなる語句を検索し、再試行を促すメッセージが表示されることを確認します。 4. リセットしてから項目を開き、再度フィルタリングして、閲覧状態が維持されることを確認します。 ### 項目の状態を保持したまま、結果のラッパーを非表示にする 各gcds-detailsを通常のラッパー内に配置し、フィルタリング時はラッパーのhidden状態を切り替えます。カスタム要素独自のdisplayルールによって、汎用的なCSSセレクターの想定どおりに動作しない場合があります。インスタンスはDOMに残しておき、検索語を消したときに展開済みの項目が同じ状態で再表示されるようにします。 検索と項目の開閉は別々の操作です。gcdsInputのevent.detailから検索語を取得し、結果件数を通知して、展開状態の管理は標準のdetails要素に任せます。リセット時には検索モデルだけでなくコンポーネントの値も更新し、入力欄にフォーカスを戻します。結果領域全体を作り直すと、読んでいた位置が失われます。 ## Canada.ca デザインシステムのコンポーネント例 ### main.js — 標準コンポーネントを使った完全なトピックフィルター コンポーネント登録、作成したトピック、フィルタリング、開閉状態の保持、リセットを含むエントリーファイル全体。 ``` import {defineCustomElement as input} from '@gcds-core/components/dist/components/gcds-input.js'; import {defineCustomElement as details} from '@gcds-core/components/dist/components/gcds-details.js'; import {defineCustomElement as button} from '@gcds-core/components/dist/components/gcds-button.js'; import '@gcds-core/components/dist/gcds/gcds.css'; import './canada.css'; input();details();button(); document.getElementById('root').innerHTML=`

GC DESIGN SYSTEM / ORIGINAL CONTENT STUDY

Prepare for an appointment

Find a preparation topic in this fictional service guide. These are sample explanations, not government requirements.

Reset filter

Preparation topics

`; const topics=[['Confirm the time','Check the time and time zone shown in a real booking confirmation. This sample does not contain a live appointment.'],['Review the location','A real service should provide an address or joining instructions. A location belongs in visible booking details, not only inside a collapsed panel.'],['Plan access needs','Ask the service about accessibility arrangements through its official contact route. This sample demonstrates disclosure behavior and does not promise a particular accommodation.'],['Check documents','Follow the actual service’s published document requirements. This authored example intentionally does not invent a list of mandatory identity documents.'],['Keep a reference','If the service provides a booking reference, keep it with your confirmation. Do not paste personal reference numbers into this public specimen.'],['Prepare questions','Write down what you want to understand. In a real service, clear preparation content can reduce the need to remember questions during the appointment.']];const $=id=>document.getElementById(id);const entries=topics.map(([title,text])=>{const el=document.createElement('gcds-details');el.setAttribute('details-title',title);const p=document.createElement('p');p.textContent=text;el.append(p);const wrapper=document.createElement('div');wrapper.append(el);$('topics').append(wrapper);return{el,wrapper,title,text}});function render(q=''){let count=0;for(const item of entries){item.wrapper.hidden=!(item.title+' '+item.text).toLowerCase().includes(q.trim().toLowerCase());if(!item.wrapper.hidden)count++}$('count').textContent=count+' of '+topics.length+' sample topics';$('empty').hidden=count>0}$('filter').addEventListener('gcdsInput',e=>render(e.detail));$('reset').addEventListener('click',()=>{$('filter').value='';render();$('filter').shadowRoot.querySelector('input')?.focus()});render(); ``` コードリファレンス - ルートのマウント要素を用意し、src/main.jsとして保存します。公開パッケージのCSSはデフォルトのフォントURLを読み込みます。このローカルプレビューでは、同じ公開フォントを埋め込んでいます。 ### canada.css — レスポンシブなコンテンツ構成 標準コンポーネントのスタイルを取り入れた、独自のページレイアウト。 ``` *{box-sizing:border-box}body{margin:0;background:white;color:var(--gcds-text-primary);font:var(--gcds-font-text)}main{padding:32px}h1{font:var(--gcds-font-h1);margin:16px 0 24px;max-width:24ch}h1:after{content:'';display:block;width:72px;height:6px;background:#a62a1e;margin-top:16px}h2{font:var(--gcds-font-h3);margin:0 0 24px}h3{font:var(--gcds-font-h4)}p{margin:0 0 24px;max-width:65ch}.eyebrow,.small{font:var(--gcds-font-text-small)}.lead{max-width:65ch}.search-row{display:flex;align-items:end;gap:24px;margin:32px 0;border-top:1px solid #ccc;padding-top:24px}.search-row gcds-input{flex:1;max-width:650px}.search-row gcds-button{margin-bottom:var(--gcds-input-margin)}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:48px}aside{background:var(--gcds-color-grayscale-50);border-left:4px solid var(--gcds-color-blue-muted);padding:24px;align-self:start}aside h2{font:var(--gcds-font-h4)}aside ol{padding-left:24px}aside li{padding-left:8px;margin:16px 0}#count{font:var(--gcds-font-text-small)}#empty{padding:24px;background:var(--gcds-color-grayscale-50)}gcds-details{display:block}gcds-details p{padding-top:8px}[hidden]{display:none!important}@media(max-width:767px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}.search-row{display:block}.search-row gcds-button{display:block;margin-top:16px}h1{font-size:2rem}aside{padding:20px}} ``` コードリファレンス - レイアウトのブレークポイントとタイトル下線の形状は、このサンプル独自の設定であり、公式のトークンを追加するものではありません。 ## Canada.ca デザインシステムエージェントの設定 ### 実装の出発点 ローカルプレビューではバージョンを固定したカスタム要素を実行します。外部サービスや認証情報は不要です。 ``` npm create vite@latest gc-topics -- --template vanilla cd gc-topics npm install npm install @gcds-core/components@1.6.0 # Replace src/main.js and add src/canada.css; keep
. npm run dev ``` ### あなたのプロジェクト向けプロンプト ``` GC Design System 1.6.0を使って、6つのトピックからなる準備ガイドを作成します。正規のタイポグラフィとトークンCSSを読み込み、標準の入力欄、details、ボタンの各コンポーネントを使用します。フィルター後も項目の開閉状態を保持し、結果件数を通知して、確実にリセットできるようにします。重要なコンテンツは常に表示し、サンプルの説明と公式サービスの要件を明確に区別してください。 ``` ## Canada.ca デザインシステム出典と対象範囲 GC Design System 1.6.0を使用した、OpenDesign作成のCanada.caアプリケーション調査です。サンプルのトピックは架空のガイダンスであり、政府の要件でも公式の予約サービスでもありません。 - 入力API 必須の識別子、ラベル、カスタムイベント。 - DetailsAPI 補足コンテンツの開閉とタイトルに関する仕様。 - タイポグラフィ フォントファミリーと本文の文字サイズ。 - スペーシング 公開されているスペーシングシステム。 - 用語とパッケージの対象範囲 現在のパッケージ名前空間と利用状況。 ## Canada.ca デザインシステム関連リソース ### CFPB デザインシステム CFPBの編集向けグリッド、現行のタイポグラフィ、ネイティブの展開パネルを、動作する読書ワークシート、検証済みのパッケージAPI、明確なブランド利用上の境界とともに実装します。 ### CMS デザインシステム バージョン管理されたテーマ変数、実際のReviewコンポーネントAPI、そしてユーザーの回答とフォーカスを保持する編集・レビューの一連のフローを備えたCMS Coreを実装します。 ### Det Fælles Designsystem DKFDSのデンマーク向けテーマ、実際のSassスケール、アクセシブルなテーブルのパターンを、数値による並べ替え、検索の送信、該当なしの場合の再試行案内を含むリソース比較で確認できます。 - [実装リファレンス](https://design-system.canada.ca/en/components/input/code/) - [ソース](https://design-system.canada.ca/en/styles/colour/) - [ソース](https://design-system.canada.ca/en/styles/typography/) - [ソース](https://design-system.canada.ca/en/styles/spacing/) - [コードリファレンス](https://design-system.canada.ca/en/components/input/code/) - [コードリファレンス](https://design-system.canada.ca/en/styles/typography/) - [入力API 必須の識別子、ラベル、カスタムイベント。](https://design-system.canada.ca/en/components/input/code/) - [DetailsAPI 補足コンテンツの開閉とタイトルに関する仕様。](https://design-system.canada.ca/en/components/details/code/) - [タイポグラフィ フォントファミリーと本文の文字サイズ。](https://design-system.canada.ca/en/styles/typography/) - [スペーシング 公開されているスペーシングシステム。](https://design-system.canada.ca/en/styles/spacing/) - [用語とパッケージの対象範囲 現在のパッケージ名前空間と利用状況。](https://design-system.canada.ca/en/terms-of-use/)