sgds-templates について
SGDSのコンポーネントとユーティリティで構成したページテンプレート集です。シンガポール政府デザインシステムを使う開発者向けに、ダッシュボードやフォームなどのレイアウトと共通の視覚設計指針を提供します。
主な機能
- 01業務アプリのシェルレイアウト
- 02管理画面とダッシュボードのレイアウト
- 03検索・フィルター付きカタログ
- 04ログインと複数項目フォームのページ
- 05紹介、ランディング、ブログのテンプレート
- 06SGDSの余白と視覚階層の指針
活用シーン
- 01社内管理ポータルの作成
- 02検索可能な公開カタログの構築
- 03ログインまたは設定ページの作成
- 04組織紹介や記事のレイアウト
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/sgds-templatesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
reference/about-us.mdapplication-management.mdblog.mdcatalogue.mddashboard.mdform.mdlanding.mdlogin.mdoperational.md詳細
SGDS ページテンプレート
SGDS のコンポーネントとユーティリティを使用した、すぐに使えるフルページテンプレートです。shadcn Blocks のビジュアルパターンを参考にしています。各テンプレートを出発点として使えば、レイアウトコードを一から書かずに美しいページを作成できます。
前提条件
すべてのページに Application Shell を含める必要があります。 ページを生成する前に、sgds-blocks → reference/application-shell.md をお読みください。シェルはすべてのページに必須の
<sgds-masthead>、<sgds-mainnav>、<sgds-footer>を提供するほか、コンテナクラスの選択（.sgds-containerと.sgds-container-sidebar）やスティッキーヘッダーの規則も定めています。これら3つのシェルコンポーネントをすべて含めずに、ページテンプレートを生成しないでください。
import "@govtechsg/sgds-web-component/themes/day.css";
import "@govtechsg/sgds-web-component/css/sgds.css";
import "@govtechsg/sgds-web-component/css/utility.css";
インストールの詳細については、sgds-getting-started と sgds-components をご覧ください。
これらのテンプレートで使用するコンテナ幅と最大幅のユーティリティについては、sgds-utilities をご覧ください。
クイック選択ガイド
| 作成するもの | 使用するテンプレート |
|---|---|
| 運用アプリのシェル（appnav + オーバーレイサイドバー） | 運用 |
| フィルターとデータテーブルを備えた管理ダッシュボード | アプリケーション管理 |
| 検索とフィルタリング機能を備えた公開カタログ | カタログ／検索とフィルター |
| 内部ツール、管理ポータル、分析ダッシュボード | ダッシュボード |
| ログイン／サインインページ | ログイン |
| 複数項目の設定フォームまたはデータ入力フォーム | フォームページ |
| 企業／機関のプロフィール、チーム紹介、実績 | 会社概要 |
| 製品またはサービスのランディングページ | ランディングページ |
| ブログ記事、ニュース記事、事例紹介 | ブログ／コンテンツページ |
→ reference/operational.md を読む
<sgds-appnav> とオーバーレイサイドバーを備えた運用アプリのシェルです。<sgds-masthead> を必要としない内部ツール、管理ポータル、運用ダッシュボードに使用します。
→ reference/application-management.md を読む
サイドバーフィルター + 検索 + データテーブル + ページネーションを備えています。管理ダッシュボード、アプリケーションレジストリ、管理ポータルに使用します。
→ reference/catalogue.md を読む
検索 + 複数グループのサイドバーフィルター + 並べ替えドロップダウン + 結果グリッド + 空の状態を備えています。製品カタログ、イベント一覧、コンテンツの閲覧に使用します。
→ reference/dashboard.md を読む
サイドバーナビゲーション + 統計カードの行 + データテーブルを備えています。ダッシュボード、管理ポータル、指標を扱う内部ツールに使用します。
注：ダッシュボードテンプレートでは
sgds-sidebar（RC コンポーネント）を使用します。他の SGDS インポートより前に CDN スクリプトを読み込んでください。CDN タグとフレームワークの設定については、sgds-components sidebar reference をご覧ください。
→ reference/login.md を読む
メールアドレスとパスワードのフォームを備えた中央配置のカードです。認証、サインイン、サインアップのページに使用します。
→ reference/form.md を読む
ラベル付きのフォームセクションを備えた2カラムの設定レイアウトです。設定ページ、プロフィールページ、複数セクションから成るデータ入力に使用します。
→ reference/about-us.md を読む
2カラムの見出し + 画像グリッド + ロゴストリップ + 実績の統計パネルを備えています。機関のプロフィール、製品紹介ページ、チーム紹介に使用します。
→ reference/landing.md を読む
ヒーローセクション + 特徴カード + CTA セクションを備えています。製品のローンチ、サービスの紹介、キャンペーンページに使用します。
→ reference/blog.md を読む
注目画像 + 記事ヘッダー + 本文コンテンツ + 著者カードを備えています。ブログ記事、ニュース記事、事例紹介、お客様の声に使用します。
Raw Content Links — コピー＆ペーストですぐに使えます
すべてのページテンプレートの実装は、stories/templates/ ディレクトリにあります。次の GitHub の raw リンクを使って、ソース全体を取得してください。
各リファレンスページ（例：reference/dashboard.md）には、該当するテンプレートの raw コンテンツへのリンクが記載されています。
Raw GitHub リンクから HTML を抽出する方法
すべてのテンプレートの Story 実装は、stories/templates/ ディレクトリにあります。HTML テンプレートを抽出する手順は次のとおりです。
手順 1：raw ファイルを取得する
上の表から GitHub の raw URL をコピーして取得します。
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/{FOLDER}/{FILE}.js
例：
curl https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
手順 2：テンプレートリテラルから HTML を抽出する
Story ファイルは、html テンプレートリテラルを返す Template 関数をエクスポートします。次のようなセクションを探します。
const Template = () => html`
<sgds-masthead></sgds-masthead>
...
<sgds-footer></sgds-footer>
`;
手順 3：HTML を整理する
- **
html\`` のラッパーを削除する** — 先頭のhtml`` と末尾のバッククォートを削除します - Lit 固有の構文を削除する —
${variable}の補間を削除し、必要に応じてプレースホルダーテキストに置き換えます <style>ブロックを削除する — 特筆すべき CSS は、リファレンスファイルの「カスタマイズに関する注意事項」セクションに移します- すべての SGDS コンポーネントとユーティリティクラスを維持する — すべての
sgds-*要素とsgds:クラスをそのまま保持します - HTML を整形する — 一貫したインデント（各階層につき 2 スペース）を使用します
手順 4：リファレンスファイルを構成する
sgds-blocks のパターンに従います。
# [Template Name] Page Template
[1-2 sentence description of what this template is for]
## When to use
- Use case 1
- Use case 2
- Use case 3
## Block anatomy
\`\`\`
[ASCII diagram of the layout structure]
\`\`\`
---
## Complete template
\`\`\`html
[CLEANED HTML FROM STEP 3]
\`\`\`
## Customisation notes
- Update [element] to [purpose]
- Modify [component] by [how]
- [More notes...]
---
## Raw Content Link
| File | GitHub Raw URL |
|------|---|
| [Template Name] | [raw GitHub URL] |
例：私たちについてのテンプレート
次の raw ファイル：
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/master/stories/templates/AboutUs/basic.stories.js
には、次の内容が含まれています。
const Template = () => html`
<style>...</style>
<sgds-masthead></sgds-masthead>
...
`;
抽出 → html\`` とバッククォートを削除 → ` を整理 → reference/about-us.md にある HTML が完成します。
視覚的階層の原則（すべてのテンプレートに適用）
SGDS の UI を洗練された印象にするルールです。shadcn／Mantine でも同じ原則が使われています。
1. 背景を重ねて奥行きを作る
- ページの背景：
sgds:bg-surface-default（ベースとなるキャンバス） - カード／パネル：
sgds:bg-surface-raised（コンテンツをページから浮き上がらせます） - 入れ子になったコンテンツ領域：必要な箇所に限り
sgds:bg-surface-overlayを使います
2. 固定値ではなく、意味を持つスペーシングを使う
sgds:p-4 よりも sgds:p-layout-md、sgds:gap-layout-md、sgds:p-component-md を優先してください。意味を持つトークンはレスポンシブに対応し、意図を表します。セクションや要素の間には必ず余白を設け、余白のないブロックは決して表示しないでください。 既定値の一覧は sgds-utilities-spacing を参照してください。
3. 一貫性のあるカードの基本構成
すべてのカードで、内側のパディング（sgds:p-component-lg）、カードの行間（sgds:gap-layout-md）、角丸（sgds:rounded-lg）、控えめなシャドウ（sgds:shadow-card）を設定します。
4. フォームにおけるアクションの優先順位
主要なアクション → <sgds-button variant="primary">。副次的なアクション／キャンセル → <sgds-button variant="outline">。破壊的なアクション → <sgds-button variant="ghost" tone="danger">。
5. ラベルは控えめに、値は目立たせる
統計カードや説明リストでは、ラベルに sgds:text-body-subtle sgds:text-sm を、値に sgds:text-default sgds:text-2xl sgds:font-semibold を使います。