# Singapore Government デザインシステム
## Singapore Government デザインシステムインターフェースプレビュー
数量を増やし、無効な値を入力して検証し、リセットします。値を保持したまま、ネイティブの昼・夜トークンを切り替えられます。
## Singapore Government デザインシステムデザインリファレンス
Singapore SGDS Webコンポーネント3.29.0、公開済みのテーマファイル、レスポンシブトークン、custom-elements manifest。プレビューでは、オリジナルのindex.umd.min.jsバンドルをローカルのテーマインポートとともに実行します。Arialを明示的なフォールバックとして使用し、Tailwindユーティリティのコンパイルや公式マストヘッドは使用していません。v3パッケージは、v2のBootstrapを基盤とするSGDSとは別のものです。
### 実際のレスポンシブ文字サイズトークン
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --sgds-font-size-heading-xl | 32→36→40px | ベース、1024px、1440pxの各範囲。対応するline-height-xlは40→44→48px。 |
| --sgds-font-size-heading-md | 24→26→28px | 対応するline-height-mdは28→32→32px。 |
| --sgds-font-size-heading-sm | 20→22→24px | コンパクトなセクションタイトルの役割。 |
| --sgds-font-size-body-md | 16px in all three ranges | body-lgは18→20→20px、body-smは14px。 |
| --sgds-font-family-brand | Inter,system-ui,sans-serif | フォントファイルは個別に読み込まれます。プレビューではArialで上書きしています。 |
| --sgds-font-weight-* | 300,400,600,700 | ライト、レギュラー、セミボールド、ボールド。 |
| --sgds-letter-spacing-tight | -0.4px | root.cssの見出し字間。 |
### プリミティブとセマンティックなテーマの役割
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --sgds-color-default | Day#1a1a1a;night#f3f3f3 | gray1000→gray100にマッピング。本文の色をハードコードしていません。 |
| --sgds-bg-default | Day#ffffff;night#0e0e0e | sgds-night-themeに応じてルートのサーフェスが変化します。 |
| --sgds-color-subtle | Day#525252;night#a5a5a5 | 補助テキスト。対応するサーフェス上で十分なコントラストを保ちます。 |
| --sgds-primary-surface-default | #6b4feb | 現在の両テーマファイルでproduct-primary600を使用。 |
| --sgds-primary-color-default | Day#6b4feb;night#a999f3 | テキストの役割は、塗りつぶしサーフェスの役割とは異なります。 |
| --sgds-border-color-default | Day#868686 | 夜間テーマのすべてのボーダーで、同じプリミティブを再利用しないでください。 |
### スペーシング、ボーダー、レスポンシブな変化
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | ルートを16pxとしてremで表した値。これらはプリミティブです。 |
| --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | 固定されたセマンティックな間隔。 |
| --sgds-layout-gap-md | 16→24→32px | 実際のパッケージでは1024/1440pxでレスポンシブに変化します。512/768のグリッドブレークポイントとは異なります。 |
| --sgds-text-gap-md | 12→16→16px | テキストの間隔には、独自のレスポンシブな役割があります。 |
| --sgds-form-border-radius-md | 8px | border-radius-mdのエイリアス。 |
| --sgds-form-border-width-default | 1px | border-width-1のエイリアス。 |
### 標準グリッドの参照値
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| xs / sm | 320–511 /512–767px | 4/8カラム、ガター16px、固定マージン20/24px。 |
| md | 768–1023px | 8カラム、ガター24px、固定マージン28px。 |
| lg | 1024–1279px | 12カラム、コンテナ幅888px、ガター24px。 |
| xl | 1280–1439px | 12カラム、コンテナ幅1168px、ガター32px。 |
| 2xl | 1440px+ | 12カラム、コンテナ幅1312px、ガター32px。 |
| Preview composition | 888px maximum;two columns→one below768px | 意図的に小さく構成したプランナーであり、標準グリッドのすべてのプリセットを実装したものではありません。 |
### QuantityToggleの公開API
| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| value / step | Number;defaults0 /1 | ネイティブイベントの後に要素の値を読み取る。 |
| min / max | Number constraints | hintTextで設定したサービス上限の理由を説明する。 |
| label / hintText | String properties/attributes | アクセシブルなフィールド名と、範囲を示すヘルプを表示する。 |
| hasFeedback | style \| text \| both | 文字列値をとるフィードバックモード。Boolean属性だけで指定するものではありません。 |
| invalidFeedback / invalid | Message /Boolean state | 無関係な赤いボーダーではなく、コンポーネントのフィードバックを使用する。 |
| Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | 入力とボタンによる編集の両方を概要に反映するため、input/changeの両方を監視する。 |
| Validation methods | checkValidity();reportValidity() | 制約の結果をBooleanで返す。reportValidityでフィードバックを表示する。 |
| readonly versus disabled | Visible fixed value versus unavailable control | disabledは送信対象から除外されますが、readonlyは値を保持します。 |
## Singapore Government デザインシステム完全ガイド
実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。
詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。
## Singapore Government デザインシステム現在のSGDSファミリーを選ぶ
### Webコンポーネントと旧Bootstrapページ
> SGDS v 3では@ govtechsg/sgds-web-componentを使用します。カスタム要素、テーマトークン、現在のユーティリティ連携は、旧@ govtechsg/sgds Bootstrapスタイルシートとは異なる実装方法です。v 2のJavaScriptの手順とv 3のタグを混在させても、新しいコントロールが初期化されるとは限りません。
このサンプルでは、実際の3.29.0ブラウザーバンドルを使って数量切り替えとボタンを登録します。シンガポール政府のマストヘッドや政府との関係を示す主張は含めず、コミュニティワークショップのプランナーを独自に作成しました。コントロールが変更するのはローカルの値だけで、予約や決済のフローはありません。
関連する仕様を確認する
## Singapore Government デザインシステムテーマトークンは階層化されている
### プリミティブカラーとセマンティックな用途
ルートファイルでは、プリミティブのグレー、製品のプライマリーパープル、その他のパレットファミリーを定義します。昼・夜のテーマファイルでは、これらのプリミティブをデフォルトのテキスト、補助テキスト、塗りつぶしサーフェス、ボーダーなどの役割に割り当てます。夜間モードでは、プライマリーテキストの役割に使うプリミティブが変わる一方、プライマリーの塗りつぶしサーフェスは同じプリミティブのままになることがあります。
プレビューでは、ドキュメントの背景、テキスト、ボーダー、控えめなパネルにセマンティックプロパティを使用しています。そのため、ルートでsgds-night-themeを切り替えると、カスタム要素とその周囲の構成の両方が更新されます。コントロールが正しく切り替わる場合でも、段落の色を黒でハードコードすると、この連動が損なわれます。
紫のパレットは公開されている製品のデフォルトであり、政府機関になりすます理由にはなりません。機関のアイデンティティや承認済みマストヘッドの使用には、それぞれ別途承認が必要です。
関連する仕様を確認する
## Singapore Government デザインシステム 実際の値で見るレスポンシブな文字サイズ
### 略式の比率ではなく、提供されているトークンを確認します
現在のresponsive.cssでは、heading-xlは3つの範囲でそれぞれ32、36、40pxに設定され、行の高さは40、44、48pxです。値は1024pxと1440pxで切り替わります。グリッドのより小さいレイアウト境界である512pxと768pxとは独立しています。Body-mdは16pxのままです。
公開されているタイポグラフィの概要では、一般的な比率や組み合わせの原則を説明しています。一方、提供されているトークンシートには、各役割に対応する正確なピクセル値のエイリアスがあります。このリファレンスでは、実装値を示す際に実際に使用できるエイリアスを使います。HTMLでは見出しの意味的な階層を保ち、適切な視覚トークンを適用してください。小さなセクションタイトルのために、見出しレベルを不自然に下げる必要はありません。
ブランド書体としてInterを使用し、セットアップでは300、400、600、700のウェイトを記載しています。ローカルの見本では明示的にArialに置き換えており、リモートフォントは読み込みません。導入するサービスでは、CSSのファミリー名だけに頼らず、選択したフォントを読み込んでテストしてください。
関連する仕様を確認する
## Singapore Government デザインシステム 役割ごとに異なる間隔
### すべての間隔を1つのスケールにまとめない
基本スペーサーのスケールには、4、8、12、16px以上の値だけでなく、2pxも含まれます。固定の間隔エイリアスと、レスポンシブなレイアウト・コンポーネント・テキストの間隔は、これらの基本値をもとに定義されています。たとえば、layout-gap-mdは16→24→32pxに変化しますが、text-gap-mdは12→16→16pxです。したがって、どちらも「medium」と呼ばれていても、用途によって値は異なります。
このプランナーでは、控えめな幅のコンテンツ領域2つ（数量コントロールと現在のプラン）を並べて配置できるよう、最大幅を888pxにしています。768px未満では縦に並べます。これはアプリケーション内のレイアウト構成であり、SGDS標準グリッド全体が常に888pxで止まるという意味ではありません。より広範な標準コンテナのルールは、別途リファレンスに記載しています。
関連する仕様を確認する
## Singapore Government デザインシステム 上限のある数量コントロール
### 識別子ではなく、件数には数量を使います
数量トグルは、1単位ずつ調整できる少量の数量に適しています。この見本では、参加者を1～5人、共有キットを0～3個に設定しています。これらはデモ用の制約です。実際のサービスでは、実際の在庫状況やポリシーに基づいて制約を設定し、ヒントに明記する必要があります。郵便番号、識別子、正確な通貨額には、別の入力方法を使用してください。
ネイティブコンポーネントでは、数値入力欄の前後に減少・増加アイコンボタンを配置します。min、max、stepには数値を指定し、valueには現在の数量を設定します。labelとhintTextで入力内容を説明します。上限または下限に達すると、該当するボタンは使用できなくなります。直接入力に対する制約の検証も必要です。
hasFeedbackには、文字列のstyle、text、またはその両方を指定します。この例では両方に加えて、invalidFeedbackに具体的なメッセージを指定しています。別のコンポーネントのAPIからhasFeedbackをBooleanとしてコピーすると、この設定が正確に反映されません。
```
```
コードリファレンス
関連する仕様を確認する
## Singapore Government デザインシステム 概要の表示を同期する
### 2つのイベント経路と1つのデータソース
概要は、各ホスト要素のvalueを読み取ります。入力による編集とボタンによる確定変更では、同じイベント経路が使われるとは限らないため、sgds-inputとsgds-changeの両方を監視します。最初のローカル見本では、入力だけをテストしたため、増加ボタンによる更新を検出できませんでした。最終例では両方に対応しています。
「プランを確認」では、両方のネイティブ要素に対してreportValidityを呼び出し、ローカルのステータスメッセージを表示します。不正な数値をもっともらしい合計に変換することはありません。「リセット」では、ホスト要素に初期値を設定し、setInvalid(false)でアプリケーションから確認できる無効状態を解除してから、updateCompleteの後に概要を更新します。
disabledフィールドとreadonlyフィールドは同じではありません。前者はフォーム送信の対象になりませんが、後者は値を保持します。実際のサービスで確認済みの数量をレビュー用に固定する場合は、灰色に見せる目的だけで無効化せず、適切な状態を使用してください。
- 概要で入力と増加ボタンの両方に対応するには、sgds-inputとsgds-changeを使います。
- Shadow DOMの内部に触れず、カスタム要素のホストからvalueを読み取ります。
- ローカルの入力検証フィードバックと、予約や送信の成功表示を区別します。
関連する仕様を確認する
## Singapore Government デザインシステム 要素の登録前にスタイルを読み込む
### テーマの依存関係を読み込む
バンドルするアプリケーションでは、day.css、night.css、css/sgds.cssの順にインポートし、その後でコンポーネントライブラリを一度だけインポートします。day.cssとnight.cssはroot.cssをインポートし、root.cssはresponsive.cssをインポートします。基盤ファイルはreboot.cssとgrid.cssをインポートします。静的ファイルとして配布する場合も、最初の3ファイルだけでなく、これらの相対パスの依存関係を維持してください。
公式のutility.cssは、Tailwind CSS v 4の設定エントリです。設定済みのTailwindビルドを通す必要があります。通常のブラウザ用スタイルシートとして追加しても、すべてのsgds:ユーティリティクラスは生成されません。この見本では一般的なレイアウトCSSと意味的なカスタムプロパティを使っているため、ユーティリティのビルドは必要ありません。
単独で動作するブラウザーの例では、公開されているファイルはindex.umd.min.jsです。パッケージのメタデータにはindex.umd.jsの記載が残っていますが、確認した配布物にはそのファイルがありません。ローカルプレビューでは実際に存在する圧縮済みバンドルを使い、npmのセットアップではバンドラー向けにドキュメントで案内されているパッケージインポートを使います。
1. バージョンを3.29.0に固定し、基盤ルールより先にテーマトークンをインポートします。
2. Interを用意するか、十分にテストした代替フォントを意図的に選択してください。
3. カスタム要素は一度だけ登録します。必要に応じて定義を待ってから、アプリケーションのイベントリスナーを追加してください。
関連する仕様を確認する
## Singapore Government デザインシステム 上限・下限とテーマを併せてテストする
### 境界値のテストで連携ミスを見つける
「参加者」を2回増やし、コントロールと概要の両方が3と表示されることを確認します。9を直接入力して「プランを確認」を実行してください。コンポーネントに範囲外のフィードバックが表示され、ステータスに修正を促すメッセージが表示される必要があります。値を5に修正し、値が有効なまま増加ボタンが無効になることを確認してください。
数量を入力した後に夜間テーマへ切り替え、値が保持されること、概要が読みやすいこと、境界値が正しく機能することを確認します。リセットして、今度はキーボードで操作します。Tabキーで入力欄とボタンに適切な順序で移動でき、フォーカス中のボタンをEnterキーまたはSpaceキーで実行できることを確認してください。
ローカルテストでは、1440、768、390pxでのコンポーネントの動作を検証し、テーマの依存関係がローカルから配信されることを確認します。将来の行政サービスにおけるブラウザー対応やアクセシビリティ認証を保証するものではありません。実際のサービスでは、全体のフロー、文言、テーマのカスタマイズ、データの取り扱いをテストする必要があります。
関連する仕様を確認する
## Singapore Government デザインシステムのコンポーネント例
### 上限・下限のある数量と2種類のイベント経路
ネイティブコントロールと連動する出力を備えた完全な例。
```
```
コードリファレンス
### v3のバンドル設定
正しいテーマの読み込み順、ライブラリの登録、明示的なTailwindユーティリティの境界。
```
npm install --save-exact @govtechsg/sgds-web-component@3.29.0
/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */
// main.js — register custom elements once
import '@govtechsg/sgds-web-component';
// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');
```
コードリファレンス
### 単体で動作するサンプル一式
レイアウト、操作要素、初期化処理を含むドキュメント全体です。リンク先のサンプルアーカイブを展開すると、このプレビューで使用する正確な相対パスのベンダーアセットが得られます。その後、HTTP経由で配信してください。
```
SGDS quantity specimenIndependent specimen · Community workshop planning
Plan a small workshop group
Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.
Current plan
- Participants
- 1
- Material kits
- 0
These are demonstration limits. A real service should explain its own availability and eligibility rules.
Check planReset