sgds-pattern-block-templates

SGDS ブロックテンプレート

どのページレイアウトにも組み込める再利用可能な UI ブロックです。各ブロックは独立したセクションです。sgds-pattern-page-templates のページテンプレートに配置すれば、レイアウトコードを一から書かずにページを組み立てられます。

ブロックとは？

ブロックとは、次のような UI のまとまりです。

• 単一の明確な役割（コンテンツのフィルタリング、統計値の表示、フォームセクションの表示など）を担います
• 任意のコンテナー内で単独で動作します
• ページ上に複数回配置したり、ほかのブロックと並べて配置したりできます

Application Shell は、すべての SGDS ページに必須の特別なブロックです。ページの外枠（<sgds-masthead>、<sgds-mainnav>、<sgds-footer>）を構成します。それ以外のブロックは、シェル内に配置するコンテンツブロックです。

ブロックは材料、ページテンプレートはレシピです。

前提条件

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-components を参照してください。

---

クイック選択ガイド

必要なもの	使用するブロック
SGDS ページに必須のページ外枠（masthead、mainnav、footer、container）	Application Shell
パンくずリスト、アイコン＋タイトル、説明、主要 CTA を含むページレベルのヘッダー	Page Header
キーと値のフィールド、編集アクションを含む読み取り専用のエンティティ概要カード	Basic Details Card
チェックボックスでカテゴリ別にコンテンツを絞り込むサイドバーパネル	Filter Sidebar — Checkbox
単一イベントセッションの詳細ビュー（時刻、タイトル、登壇者、バッジ、説明、プロフィール）	Session Detail
リストページや管理ページ向けの、検索入力＋フィルターボタン＋結果件数＋データテーブル	Table Filter

---

→ reference/application-shell.md を読む

すべてのページで必須です。 アプリケーションシェルは、必須のシンガポール政府の外枠（<sgds-masthead>、<sgds-mainnav>、<sgds-footer>）でページコンテンツ全体を囲みます。レイアウトは、Simple App（.sgds-container、一般公開向け）と Sidebar App（.sgds-container-sidebar、ダッシュボードや内部ツール向け）の 2 種類を用意しており、ブレークポイントの表とスティッキーヘッダーのパターンも掲載しています。

---

→ reference/page-header.md を読む

パンくずリスト＋アイコンで色付けされたコンテナー＋h1 見出し＋説明＋主要 CTA ボタンで構成されます。ユーザーにページの内容を伝え、主要なアクションを提示するため、コンテンツページの先頭で使用します。

---

→ reference/basic-details.md を読む

サブタイトル見出し、縦に並ぶキーと値のフィールドペア、任意の編集ボタンを備えた枠線付きカードです。詳細ページやプロフィールページで、エンティティのメタデータ（ID、名前、説明、連絡先情報など）を読み取り専用で表示する際に使用します。

---

→ reference/filter-sidebar-checkbox.md を読む

sgds-checkbox-group セクションをグループ化した縦型のフィルターパネルで、「すべてクリア」リンクを備えています。コンテンツ（カード、テーブル行、イベント一覧など）を 1 つ以上のカテゴリ別の条件で絞り込む場合に使用します。

---

→ reference/session-detail.md を読む

イベントやカンファレンスのウェブサイト向けの、セッション詳細ブロックです。時間枠、展開／折りたたみ可能なセッションタイトル、登壇者情報、アウトライン付きの分類バッジ、説明、名前と役割を添えた円形の登壇者写真、区切り線を表示します。プログラム一覧では、セッションごとに繰り返し使用します。

---

→ reference/table-filter.md を読む

ページヘッダー＋検索入力＋アウトライン付きフィルターボタン＋結果件数＋データテーブルで構成されます。ユーザーが表形式のレコードを検索または絞り込むリストページや管理ページで使用します。テーブルセルでは sgds-link、sgds-badge、sgds-button を使って、内容を豊かに表示できます。

---

ページテンプレートでブロックを組み合わせる

ブロックはページテンプレートのコンテンツ領域に配置します。一般的なパターンは次のとおりです。

<sgds-masthead></sgds-masthead>
<sgds-mainnav>...</sgds-mainnav>

<div class="sgds:bg-surface-default sgds:min-h-screen">
  <div class="sgds:w-container sgds:mx-auto sgds:py-layout-md">

    
    <div class="sgds:flex sgds:gap-layout-md sgds:items-start">

      
      <aside class="sgds:shrink-0 sgds:w-64">
        
      </aside>

      
      <div class="sgds:flex-1">
        
      </div>

    </div>
  </div>
</div>

<sgds-footer></sgds-footer>

---

カスタムブロックの構築

ユーザーは、レイアウト、構成、視覚的な階層など、創造性を存分に発揮して自由にブロックを設計できます。唯一の制約は、すべてのブロックが SGDS システムのルールに従うことです。

要件	方法
UI コンポーネント	<sgds-*> Web コンポーネントを使用します。SGDS コンポーネントがある場合は、通常の HTML で代用しないでください（例：独自に作成した <span> チップではなく、<sgds-badge> を使用します）。
スタイル設定	色、余白、タイポグラフィ、レイアウトには sgds: Tailwind ユーティリティのみを使用します。デザイントークンシステムで表現できる値と重複する任意の CSS 値は記述しないでください。
タイポグラフィ	セマンティックなロールトークン（sgds:text-heading-md、sgds:text-body-md、sgds:text-overline-md など）を、対応するウェイト、行の高さ、字間のトークンと組み合わせて使用します。公開 API に含まれない生のスケールトークン（sgds:text-base、sgds:text-sm）は使用しないでください。
アイコン	<sgds-icon name="..."> のみを使用します。生の SVG やサードパーティ製のアイコンライブラリを埋め込まないでください。
外部のインスピレーション	レイアウトのアイデアを得るために、shadcnblocks.com、Tailwind UI、その他のデザインギャラリーを参考にしてもかまいません。ただし、必ず SGDS コンポーネントとトークンを使って再実装し、参照元サイトの CSS やコンポーネントライブラリは使用しないでください。

→ トークンの全リファレンス、アンチパターン、注釈付きの例については、reference/custom-block-rules.md をお読みください。

---

AI エージェント向け

1. すべてのページに Application Shell が必要です — <sgds-masthead>、<sgds-mainnav>、<sgds-footer> は、すべての SGDS ページで必須です。レイアウトパターンとコンテナクラスについては、reference/application-shell.md をお読みください。
2. ユーザーからフィルター付きリストページを求められた場合は、Filter Sidebar ブロックと sgds-pattern-page-templates の List Page テンプレートを組み合わせます。
3. カテゴリーラベル、値、件数はユーザーの実際のデータ領域に合わせて調整してください。カンファレンスの例をそのままコピーしないでください。
4. ユーザーが「カスタムブロックを作成したい」と言った場合や、外部デザイン（shadcnblocks、Figma、スクリーンショット）を参照した場合は、出力を生成する前に reference/custom-block-rules.md をお読みください。