# gov.cz デザインシステム
## gov.cz デザインシステム インターフェースのプレビュー
2ページにわたるオリジナルのリソース6件を閲覧し、詳細を開いてから、その操作に戻ります。
## gov.cz デザインシステム デザインリファレンス
@gov-design-system-ce/styles 4.7.1のtokens.cssに含まれるカラーのプリミティブとセマンティックエイリアスを使用しています。プレビューでは公開済みのスタイルとRobotoパッケージを使用しています。
### プライマリーとニュートラルのプリミティブ
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --color-primary-50 | rgb(242, 246, 252) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-primary-100 | rgb(226, 238, 248) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-primary-600 | rgb(0, 70, 155) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-primary-700 | rgb(14, 53, 120) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-primary-800 | rgb(16, 38, 87) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-secondary-600 | rgb(250, 180, 19) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-neutral-0 | rgb(255, 255, 255) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-neutral-50 | rgb(246, 246, 246) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
| --color-neutral-950 | rgb(38, 38, 38) | 公開済みの4.7.1プリミティブ値です。通常、アプリケーションでは対応するセマンティックロールを使用します。 |
### 読書とフィードバックのロール
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --text-primary | var(--color-neutral-950) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --text-secondary | var(--color-neutral-700) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --text-primary-color | var(--color-primary-600) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --text-white | var(--color-neutral-0) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --text-status-error | var(--color-error-700) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --text-status-success | var(--color-success-700) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --status-focus | var(--color-focus-600) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --status-warning | var(--color-warning-400) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
| --status-error | var(--color-error-600) | ロールが分かるよう、セマンティックエイリアスを維持してください。すべてのエイリアスを、無関係なローカルの16進カラー値に置き換えないでください。 |
### プライマリーボタンの状態
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --button-solid-primary | var(--color-primary-600) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-solid-primary-hover | var(--color-primary-700) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-solid-primary-active | var(--color-primary-800) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-solid-disabled | var(--color-neutral-200) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-outlined-primary | var(--color-primary-50) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-outlined-primary-hover | var(--color-primary-100) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
| --button-outlined-primary-active | var(--color-primary-200) | 公開済みのボタンスタイルで使用される実際の状態トークンです。無効、ホバー、アクティブの各状態を区別してください。 |
## gov.cz デザインシステム 完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
## gov.cz デザインシステム Gov CEの基盤とアセットの読み込み順序
### パッケージのバージョンを揃える
> この例では、コンポーネント、スタイル、アイコン、フォントのバージョンを4.7.1に固定しています。基盤となる5つのスタイルシートは、公開されている順序で読み込みます。それぞれの役割は異なります。変数だけではカードにスタイルは適用されず、カスタム要素を登録しただけでは、グローバルなコンポーネントCSSは読み込まれません。完全なエントリーポイントでは、5つすべてを読み込んだ後に、小規模な独自の構成レイヤーを追加しています。
### コンポーネントを登録する前に設定を初期化する
コンポーネントのエントリーモジュールを動的にインポートする前に、アイコンのパスを設定します。ページネーションは依存関係の一部として矢印アイコンを描画するため、この順序が重要です。サブディレクトリを維持したまま、アイコンのディレクトリ全体を設定済みの公開パスにコピーしてください。JavaScriptのインポートが成功しても、個別のアイコン読み込みリクエストが成功したとは限りません。
## gov.cz デザインシステム セマンティックカラーと状態の参照
### 色をロールに結び付ける
このリファレンスでは、青のプライマリープリミティブと、テキスト、フォーカス、ボタンの状態を表すエイリアスを区別しています。見た目が同じ青をどこでも使うと、それぞれの役割に関する契約が失われます。このツールキットでは公式のソリッドプライマリーボタンを使い、アクティブ、ホバー、無効時の見た目はコンポーネントのスタイルシートに任せています。周囲のコレクションレイアウトのみ、CSSによるオリジナルです。
### タイポグラフィとコンテンツの文脈を分かりやすく保つ
Robotoは対応するフォントパッケージから読み込みます。カードには、短く具体的な見出し、メタデータの行、閲覧アクションの前に概要を配置します。6件のリソース文は、OpenDesignによるオリジナルの練習用コンテンツであり、チェコ政府の公式案内を翻訳したものではありません。情報の階層と、政府サービスを装わない完全なローカル操作を示すことを目的としています。
## gov.cz デザインシステム カードスロットと閲覧アクション
### 見出しをサポート対象のスロットに配置する
各gov-cardのheadlineスロットに見出しを設定します。メタデータ、説明、ボタンはコンテンツとして配置します。アクションのaria-labelにはリソース名を含め、支援技術が同じ「リソースを読む」ボタンを区別できるようにします。コンポーネントはARIA属性を内部の操作要素に引き継ぎます。独自のaccessible-label属性を作っても、そのようには機能しません。
### レイアウトはコンポーネントの契約の外に置く
3列のCSSグリッドは、画面幅が狭い場合に1列になります。グリッドとブレークポイントはこの例のために作成したもので、公式カードの追加プロパティではありません。また、非常に幅の狭い埋め込みコンテナ内では、プレビューのbodyに設定された全体共通の最小幅320pxを解除しています。この限定的なレイアウト調整により、コンポーネントのスタイルを保ちながら、親ページの横方向へのはみ出しを防ぎます。
## gov.cz デザインシステム ネイティブのページネーションとアプリケーションの状態
### ネイティブのイベントペイロードを読み取る
gov-paginationにはtotal=6、page-size=3を設定します。gov-pageイベントのdetail.pagination.currentPageで、該当する3件のレコードを選択します。現在のページを操作するコントロールはページネーションコンポーネントが管理し、データセットと表示する項目範囲はアプリケーションが管理します。この英語の検証用ページでは、チェコ語のデフォルトのナビゲーションラベルをすべて英語に明示的に置き換えています。
- totalはページ数ではなく、レコード数です。
- page-sizeは、表示する項目範囲の長さを指定します。
- gov-pageではdetail.pagination.currentPageを取得できます。
- ナビゲーションラベルは、インターフェースの言語に合わせる必要があります。
### ページ変更後に古い詳細情報を残さない
ページを変更したら、現在開いている項目を閉じます。これにより、詳細情報が別のカードセットに属しているように見えるのを防ぎます。件数表示は「全6件中1～3件」または「全6件中4～6件」となります。既知の少数データセットを対象としたローカルなページネーションのため、実際には発生しない読み込みスピナーを表示したり、サーバーからデータを取得したように見せたりしません。サーバーと連携する実装では、処理中・エラー・結果について別途仕様を定める必要があります。
## gov.cz デザインシステム 読み上げ時のフォーカスと戻る動作
### 開いた項目にフォーカスを移動する
「読む」操作でローカルの詳細領域に内容を表示し、その見出しにフォーカスを移します。コレクションの下に内容が追加される操作の後、キーボード利用者が移動先を明確に把握できます。フォーカス可能な見出しにはtabindex=-1を設定し、通常のTab移動位置を増やすことなく、アプリケーションからフォーカスできるようにします。開いた内容は通常の読み取り可能なテキストです。
### 開いた操作元に戻る
「リソースに戻る」を選ぶと詳細を非表示にし、元の内部ボタンにフォーカスを戻します。これはモーダルではありません。フォーカスを閉じ込めたり、ダイアログのセマンティクスを付与したり、ページを暗くしたりしません。元のコレクションは引き続き利用できます。項目を繰り返し開閉し、ページを移動することで、アプリケーションの状態とフォーカスが同じ項目に追従することを確認できます。
## gov.cz デザインシステム ローカル統合の全体像
### 提供されたファイルを組み合わせて使う
エントリには、6件すべてのレコード、カードの作成、ページネーションの処理、詳細情報へのフォーカス移動を含む、完全なアプリケーションコードを記載しています。スタイルシートにはオリジナルのレイアウトだけを含めています。固定バージョンの4つのパッケージをインストールし、アイコンをコピーして、両方のファイルを素のViteプロジェクトに保存してください。ブラウザーのプレビューは、これらのコンポーネントエントリとローカルフォントアセットのみをバンドルします。
1. Gov CEの4つのパッケージをすべて4.7.1でインストールします。
2. サブディレクトリ構成を保ったまま、アイコンをpublic/assets/gov-cz-iconsにコピーします。
3. 完全なJavaScriptとレイアウトCSSをsrcに保存します。
4. アプリを実行し、ページ移動、フォーカスの復帰、アイコンのリクエストを確認します。
### 操作とアセットの読み込みを確認する
最初の項目を開き、元のボタンに戻ってから2ページ目に進み、別の項目を読みます。先頭では最初／前へのコントロールが無効になり、末尾では次／最後へのコントロールが無効になることを確認します。デスクトップとスマートフォンの画面幅に加え、さらに狭い埋め込み幅でも同じ操作を確認してください。ネットワークパネルでアイコンの欠落とJavaScriptエラーの両方を確認します。
## gov.cz デザインシステムのコンポーネント例
### main.js — ページネーション対応ツールキットの全コード
全データ、ネイティブコンポーネントの登録、ページ単位のデータ切り出し、読み上げ時のフォーカスを含みます。
```
import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
{title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
{title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
{title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
{title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
{title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
{title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`
OPENDESIGN · ORIGINAL SERVICE TOOLKIT
Small steps toward a clearer service
Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.
Back to resources`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`