エントリー向けコンテンツブロック
このエントリー向けセットの正式名称はContent Blocks for Entryです。詳細ページ本文(メイン)を構成する意味的な表示単位で、上の「詳細エレメント」(hero・基本情報・アクセス・タグ・シェア・出典など=固定コンポーネント)とは別に、こちらは本文の中身だけを担当します。エントリー詳細の本文専用で、くらしガイド等の固定ページ本文には使いません(固定ページ用は将来のContent Blocks for Pageとして別に用意する予定で、今回は未実装です)。ボタン・入力・Accordion等のUIコンポーネント/プリミティブが操作・実装の単位であるのに対し、コンテンツブロックはKey Points・FAQ・Price List等の情報を意味のある形で提示する、その上位の表示単位です。エントリ正本 content/entries/*.md に標準Markdownと混在してブロックdirective(:::kind … :::)で書き、ビルド時に型付きで描画します。意味的な受け皿は広く持ちますが、描画はUIプリミティブ(List/Table/Disclosure/Callout等)を共有します。
Current型・Registry・検証の正本は src/lib/entry-content/、描画は src/components/entry/blocks/、 トークン実体は src/app/globals.css。ブロック選択はAIがエントリ正本化・更新の工程で行い、本番表示は決定論的です(アクセスごとにAIは呼びません)。
全22kindを1つずつ、実レンダラ(EntryContentBlocks)でカード表示した一覧です。内容はすべて架空・一般的な見本です。 entry_typeや業種による上下・別分類はしていません。全kindを対等・並列に扱い、入力情報の形・利用者のContext・実現したいValue・必要な確認導線に応じて選びます(Registryの目的・使う場面・使わない場面が主な選択根拠)。 menu-list/price-list/detailed-hours/event-schedule/apply-guideも他のブロックと対等な「情報形状に応じて選ぶブロック」です(例: menu-listは飲食店に限らずイベント出店・体験コース・商品紹介にも、apply-guideはイベントに限らず施設利用・講座・掲載申込にも使えます)。 見出し名で役割を判定する厳格テーブル(未知見出し・空の必須セル・table外テキストはビルドエラー)を使うブロックの情報形状の網羅は、非公開の検証fixture(6形状: 情報少/多place・event・article・high-risk・mixed)とContent Mapping Ledgerで確認しています(公開エントリは増やしていません)。
summary-lede- 目的:
- 本文の最初に要点を短く伝える
- 使う場面:
- 本文冒頭で結論・全体像を先に示したいとき
- 使わない場面:
- frontmatterのsummaryで足りるとき(本文へ重複させない)
UI見本(実レンダラ)
松阪もめんの手織りを、道具の使い方から丁寧に教わりながら体験できます(見本)。
key-points- 目的:
- 特徴・重要点を拾いやすく並べる
- 使う場面:
- 短い要点を数個、視認性高く示したいとき
- 使わない場面:
- 手順(順序に意味がある)や比較のとき
UI見本(実レンダラ)
見どころ(見本)
- 自然の藍で染めた糸を使います(見本)
- 屋内なので雨の日でも安心です(見本)
- 小学生から参加できます(見本・保護者同伴)
callout- 目的:
- 補足・ヒント・注意・公式確認を目立たせる
- 使う場面:
- 本文の流れから少し外して注意や確認を促すとき
- 使わない場面:
- 緊急行動の最上部表示(固定要素側で扱う)
UI見本(実レンダラ)
このページは見本です。料金・受付時間は変わることがあります。参加前に公式ページや電話でご確認ください。
step-list- 目的:
- 手続き・利用の流れを順序立てて示す
- 使う場面:
- 順序が意味を持つ操作・手続き
- 使わない場面:
- 順序が関係ない箇条書き(key-points を使う)
UI見本(実レンダラ)
当日の流れ(見本)
受付
予約名をお伝えください(見本)。
糸選び
好みの色の糸を選びます(見本)。
手織り
スタッフと一緒にコースターを織ります(見本)。
checklist- 目的:
- 持ち物・準備・確認項目を一覧する
- 使う場面:
- 利用前に用意・確認するものを示すとき
- 使わない場面:
- 実際の入力・送信を伴うフォーム用途
UI見本(実レンダラ)
持ち物(見本)
- 動きやすい服装
- 持ち帰り用の袋(希望者)
- 参加費(現金・見本)
faq- 目的:
- 補足的な疑問と回答を示す
- 使う場面:
- 本筋ではない補足的な質問と回答
- 使わない場面:
- 重要条件・緊急情報(閉じた領域に隠さない)
UI見本(実レンダラ)
予約は必要ですか?(見本)
definition-list- 目的:
- 用語・設備・条件を説明する
- 使う場面:
- 語と説明の対がある情報
- 使わない場面:
- 属性と値の一覧(key-value-table)
UI見本(実レンダラ)
用語(見本)
- 松阪もめん
- 藍染めの木綿織物(見本の説明文)。
- 房(ふさ)
- 織物の端の糸を束ねた飾り(見本)。
key-value-table- 目的:
- 属性と値の対応を示す
- 使う場面:
- 項目と内容の対が複数あるとき
- 使わない場面:
- frontmatterで自動表示される住所・営業時間等(重複禁止)
UI見本(実レンダラ)
基本情報(見本)
| 対象 | 小学生以上(見本・未就学児は要相談) |
|---|---|
| 定員 | 1回あたり4名まで(見本) |
| 支払い | 現金のみ(見本) |
data-table- 目的:
- 複数列の事実を並べて比較可能にする
- 使う場面:
- 3列以上の事実データ
- 使わない場面:
- 選択肢の優劣を判断させる(comparison-table)
UI見本(実レンダラ)
アクセス比較(見本)
| 手段 | 所要時間 | 備考 |
|---|---|---|
| 徒歩 | 約10分 | 最寄り駅から(見本) |
| バス | 約5分 | 本数が少なめです(見本) |
所要時間は目安です(見本)。
comparison-table- 目的:
- 選択肢の違いを判断できるようにする
- 使う場面:
- プラン・種別など選択肢の比較
- 使わない場面:
- 単なる事実の一覧(data-table)
UI見本(実レンダラ)
コース(見本)
| コース | 所要時間 | 料金 |
|---|---|---|
| コースター | 90分 | 2,500円 |
| ミニマット | 120分 | 4,000円 |
価格は税込・見本です。
timeline- 目的:
- 沿革・予定・変化を時系列で示す
- 使う場面:
- 時期と内容の対が時系列で並ぶとき
- 使わない場面:
- 順序のない一覧
UI見本(実レンダラ)
沿革(見本)
- 2020年体験工房として開業(見本)
- 2023年設備をリニューアル(見本)織り機を増設しました(見本)
link-list- 目的:
- 公式・予約・関連等の出口を整理する
- 使う場面:
- 複数の出口リンクを並べるとき
- 使わない場面:
- 本文中の1リンク(インライン記法で足りる)
UI見本(実レンダラ)
関連リンク(見本)
quote- 目的:
- 本人・主催者等の言葉を示す
- 使う場面:
- 許諾済みの発言・コメントを示すとき
- 使わない場面:
- 出典・許諾が不明なとき
UI見本(実レンダラ)
糸の色を選ぶ時間がいちばん楽しい、という声をよくいただきます(見本の声)。
media-caption- 目的:
- 写真・図と説明を結び付ける
- 使う場面:
- 本文中に説明付きの画像を差し込むとき
- 使わない場面:
- ヒーロー・ギャラリー(固定要素側)
UI見本(実レンダラ)

image-gallery- 目的:
- 複数の写真で雰囲気・世界観を伝える(個々の写真に意味づけをしない)
- 使う場面:
- ファイル名やキャプションに特に意味がない写真が複数あり、店舗・サービス・イベント等の雰囲気を伝えたいとき
- 使わない場面:
- 画像ファイル名にメニュー名などキャプション相当の情報があるとき(media-captionを使う)
UI見本(実レンダラ)
雰囲気ギャラリー(見本)
画像: 見本
menu-list- 目的:
- 飲食・体験・商品の「名称・説明・価格・補足」をメニューとして理解しやすく示す
- 使う場面:
- 品名が主役で、説明や価格を並べて選びやすくしたいとき。蔵元・種類ごとに分かれた品書きも、ブロックを割らずに区分欄でまとめる
- 使わない場面:
- 料金体系・条件が主役のとき(price-list)/任意の多列データ(data-table)/選択肢を基準で比較(comparison-table)
UI見本(実レンダラ)
メニュー(見本)
他のメニューを見る (5品)閉じる
価格は税込・見本です。
menu-groups- 目的:
- 説明文の長いメニューを、大枠ごとの見出し+説明+小メニューで1つずつ読ませる
- 使う場面:
- プログラム・コース・講座・「ここで受けられること」のように、1つあたり100字を超える説明が付き、数が少ない(目安2〜8)とき。大枠の中に短い小メニューがぶら下がるとき
- 使わない場面:
- 品名と価格を流し読みさせたいとき(menu-list)/料金体系が主役のとき(price-list)/名前だけが並ぶとき(menu-list)。大枠が1つしかないなら、ブロックにせず本文の見出しと段落で書く
UI見本(実レンダラ)
できること(見本)
内容は見本です。
price-list- 目的:
- サービス・プラン・利用料金の料金体系と条件を示す
- 使う場面:
- 項目ごとに料金と条件(〜円から・別途・要確認等)を示すとき
- 使わない場面:
- 飲食等の品書き(menu-list)/選択肢を複数基準で比較(comparison-table)/単なる多列データ(data-table)
UI見本(実レンダラ)
料金(見本)
detailed-hours- 目的:
- frontmatterのbusiness_hoursでは安全に表せない曜日別・部門別・受付別の時間を示す
- 使う場面:
- 曜日/部門/受付で時間が分かれ、単一文字列では表せないとき
- 使わない場面:
- business_hoursで十分なとき(重複させない)
UI見本(実レンダラ)
詳細営業時間(見本)
| 区分 | 時間 | 備考 |
|---|---|---|
| 平日 | 9:00–19:00 | 12:00–13:00は中休み(見本) |
| 土日 | 9:00–18:00 |
最終受付は閉店30分前(見本)。
event-schedule- 目的:
- 1イベント内の複数プログラム・受付・開始・休憩・終了を時系列で示す
- 使う場面:
- 同一イベント内の時刻付きプログラムが複数あるとき
- 使わない場面:
- 開催日そのもの(frontmatter event_start/end)/沿革など日付単位の変化(timeline)
UI見本(実レンダラ)
タイムテーブル(見本)
- 10:00受付開始(見本)
- 10:30オープニング(見本)
apply-guide- 目的:
- 申込対象・方法・締切・定員・費用・確認先を一つの行動案内としてまとめる
- 使う場面:
- 申込が必要で、方法を軸に条件を1箇所へまとめたいとき
- 使わない場面:
- 申込不要のとき/単なる手順(step-list)・属性表(key-value-table)・ボタン群(cta-group)で足りるとき
UI見本(実レンダラ)
申込案内(見本)
- 申込方法
- 申込フォームから送信(見本)
- 対象
- どなたでも(見本)
- 締切・期間
- 2026年7月31日(見本)
- 費用
- 無料(見本)
定員に達し次第締め切り(見本)。
ブロック一覧(Registry)
| kind | 名前 | 目的 | UIプリミティブ | 状態 |
|---|---|---|---|---|
summary-lede | 要点リード | 本文の最初に要点を短く伝える | BlockFrame | Current |
key-points | 重要ポイント | 特徴・重要点を拾いやすく並べる | ListPrimitive | Current |
callout | 注記・確認 | 補足・ヒント・注意・公式確認を目立たせる | CalloutPrimitive | Current |
step-list | 手順 | 手続き・利用の流れを順序立てて示す | ListPrimitive(ol) | Current |
checklist | チェックリスト | 持ち物・準備・確認項目を一覧する | ListPrimitive | Current |
faq | よくある質問 | 補足的な疑問と回答を示す | DisclosurePrimitive | Current |
definition-list | 用語・条件 | 用語・設備・条件を説明する | dl/dt/dd | Current |
key-value-table | 属性表 | 属性と値の対応を示す | TablePrimitive(kv) | Current |
data-table | データ表 | 複数列の事実を並べて比較可能にする | TablePrimitive | Current |
comparison-table | 比較表 | 選択肢の違いを判断できるようにする | TablePrimitive | Current |
timeline | 経過・予定 | 沿革・予定・変化を時系列で示す | ListPrimitive(ol) | Current |
link-list | リンク集 | 公式・予約・関連等の出口を整理する | LinkListPrimitive | Current |
cta-group | 行動ボタン | 次の行動を明確にする | LinkListPrimitive(button) | Current |
quote | 引用 | 本人・主催者等の言葉を示す | blockquote | Current |
media-caption | 図版・写真 | 写真・図と説明を結び付ける | MediaFigurePrimitive | Current |
image-gallery | 画像ギャラリー | 複数の写真で雰囲気・世界観を伝える(個々の写真に意味づけをしない) | Masonry Grid + Lightbox | Current |
menu-list | メニュー | 飲食・体験・商品の「名称・説明・価格・補足」をメニューとして理解しやすく示す | MenuList(品名と「単位+価格」の2列grid+その下に説明文。説明文つきメニューが主対象。写真がある品だけ左端に正方形サムネイル)+ListFold(品数が多いとき後半を「他のメニューを見る(◯品)」で開く。先頭は必ず見えたまま) | Current |
menu-groups | メニュー(大枠つき) | 説明文の長いメニューを、大枠ごとの見出し+説明+小メニューで1つずつ読ませる | MenuGroups(大枠の名前をh3、説明を本文と同じ読み心地の段落、小メニューを点つきの一覧。大枠の間は破線で区切る) | Current |
price-list | 料金 | サービス・プラン・利用料金の料金体系と条件を示す | 役割テーブル→料金行(menu-listとCSSは共有) | Current |
detailed-hours | 詳細営業時間 | frontmatterのbusiness_hoursでは安全に表せない曜日別・部門別・受付別の時間を示す | TablePrimitive(caption+scope、スマホ折返し) | Current |
event-schedule | タイムテーブル | 1イベント内の複数プログラム・受付・開始・休憩・終了を時系列で示す | 順序リスト(ol)=時系列。timelineとCSSを一部共有 | Current |
apply-guide | 申込案内 | 申込対象・方法・締切・定員・費用・確認先を一つの行動案内としてまとめる | 定義リスト型カード(方法を主役に、確認先はInlineContent経由のリンク) | Current |
current=実装済み(本文で使える)。現在は全22kindがcurrentで、planned(未実装の将来候補)はありません。全kindは対等・並列で、上下のカテゴリ分けはありません。未知kind・必須値不足・閉じ忘れはビルド時に検出します。










