sgds-pattern-page-templates

SGDS ページテンプレート

SGDS のコンポーネントとユーティリティを使用した、すぐに使えるページ全体のテンプレートです。shadcn Blocks のビジュアルパターンをもとにしています。各テンプレートは、レイアウトコードを一から書かずに美しいページを作成するための出発点となります。

前提条件

すべてのページにアプリケーションシェルを含める必要があります。 ページを生成する前に、sgds-pattern-block-templates → 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 をご覧ください。

---

すぐに使える選択ガイド

作成するもの	使用するテンプレート
内部ツール、管理ポータル、ダッシュボード	ダッシュボード
ログイン／サインインページ	ログイン
複数項目の設定フォームまたはデータ入力フォーム	フォームページ
検索、フィルター、ページネーションを備えたデータ一覧	一覧ページ
企業・機関のプロフィール、チーム紹介、実績	会社概要

---

→ reference/dashboard.md を読む

サイドバーのナビゲーション＋統計カードの行＋データテーブル。ダッシュボード、管理ポータル、内部ツールに使用します。

注記：ダッシュボードテンプレートでは sgds-sidebar（RC コンポーネント）を使用します。他の SGDS のインポートより前に CDN スクリプトを読み込んでください。CDN タグとフレームワークの設定については、sgds-components sidebar reference をご覧ください。

→ reference/login.md を読む

メールアドレスとパスワードのフォームを配置した、中央揃えのカードです。認証、サインイン、サインアップの各ページに使用します。

→ reference/form-page.md を読む

ラベル付きのフォームセクションを備えた、2列の設定レイアウトです。設定ページ、プロフィールページ、複数セクションから成るデータ入力に使用します。

→ reference/list-page.md を読む

検索＋フィルターバー＋テーブル＋ページネーションです。レコード一覧、検索結果、データ管理ページに使用します。

→ reference/about-us.md を読む

2列の見出し＋画像グリッド＋ロゴ一覧＋実績統計パネルです。機関のプロフィール、製品紹介ページ、チーム紹介に使用します。

---

視覚的な階層の原則（すべてのテンプレートに適用）

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-muted sgds:text-sm を、値に sgds:text-default sgds:text-2xl sgds:font-semibold を使用します。