デザインシステム

確認用・noindex

姉妹サイト「松阪くらしの相談ナビ」の設計思想 ―― 読みやすさを最優先する書体選び、温かい生成りの地色、 角丸カードと控えめな影、そして色だけに頼らず「形(アイコン)」でも区別する方針 ―― を継承し、藍(松阪もめん)を基調に再構成した実装トークンとコンポーネントの一覧です。 実際のトークン値は src/app/globals.css、実装コンポーネントは src/components/*.tsx が正本、 UX・ブランド・アクセシビリティの原則はエージェントリポジトリの project-documents/ux-design-system.md が正本です (一覧は Implementation References)。

専門ビュー:Design System Print(印刷・オフライン)

1. ブランド

サイトの視覚的なアイデンティティ。ロゴ・ブランドモチーフ(松阪もめん)・カテゴリアイコンなど、「松阪ガイドらしさ」を作る要素。

松阪もめん柄(ブランドモチーフ)

藍の縦縞(松阪もめん)をブランドの“らしさ”として要所に使います。ガイドライン: 柄は薄く/透過させず不透明で使う。柄の上に文字を乗せる場合は、白フレームやバッジにして可読性を確保する(柄の上に直接文字を置かない)。すべてCSSのみ=画像ダウンロードなし。

.momen-fill 面塗り(アナウンスバー地・募集ページのヒーロー枠)

.momen-band 横帯(フッター上端)

見出し左アクセント

--momen-vertical 縦縞(見出し左=.section-heading

柄の上に文字(白フレーム/バッジで可読性を確保)

松阪ガイド

※ロゴマークは松阪のシンボル「駅鈴」マークを銘板先頭に差し込み済み。

カテゴリアイコン(Magnific生成・背景透過)

フィールド・くらしガイドの識別アイコン。色だけでなく形で見分けられるよう、統一した画風・線幅で生成。小サイズでも形が読めること、同一ファミリー色どうしは形で区別することを重視します。

フィールド(6)

食べる食べる
遊ぶ・学ぶ遊ぶ・学ぶ
買う買う
サービス・体験サービス・体験
松阪を知る松阪を知る
くらしガイドくらしガイド

くらしガイド カテゴリ(12)

子育て・教育子育て・教育
介護・高齢者介護・高齢者
住まい住まい
防災・消防・救急防災・消防・救急
健康・医療健康・医療
障がい福祉障がい福祉
自動車自動車
ごみ・水道・生活環境ごみ・水道・生活環境
年金・国保・保険年金・国保・保険
税金税金
公共交通公共交通
住民票・戸籍・各種届出住民票・戸籍・各種届出
ペットペット
起業・創業起業・創業
市政市政

2. デザイン基盤

色・タイポグラフィ・余白・角丸/影など、実装の最小単位になる値そのもの。実体は src/app/globals.css。

カラートークン

テキストは背景に4.5:1、境界・アイコンは3:1以上(DADS/JIS)。カテゴリ色は単独で意味を運ばず、必ずラベル+アイコンと併用します。

ブランド藍ランプ(松阪もめん)

indigo-900
#14233F
Aa 文字
indigo-800
#1B2A4A
Aa 文字
indigo-700 (primary)
#24476E
Aa 文字
indigo-500
#3E7CB1
Aa 文字
indigo-300
#7FA9CE
Aa 文字
indigo-100
#DCE7F1
Aa 文字

ニュートラル(生成り基調)

bg 生成り地
#FBF7EE
Aa 文字
surface
#FFFDF8
Aa 文字
ink-900
#1A1A17
Aa 文字
ink-700
#3A3A34
Aa 文字
ink-500
#6B6B62
Aa 文字
border
#DDD6C6
Aa 文字

セマンティック(状態色)

primary
#24476E
Aa 文字
success
#1E7A46
Aa 文字
warning
#B26A00
Aa 文字
error
#C0362C
Aa 文字
info
#3E7CB1
Aa 文字
highlight
#FCE38A
Aa 文字

フィールド アクセント(6)

食べる
#C8553D
Aa 文字
遊ぶ・学ぶ
#2E8B7A
Aa 文字
買う
#8A4F86
Aa 文字
サービス・体験
#B9822F
Aa 文字
松阪を知る
#4A5CA8
Aa 文字
くらしガイド
#2F6E8F
Aa 文字

くらしガイド カテゴリ色(12→6ファミリー)

人・こども(珊瑚)
#C15C6E
Aa 文字
健康・介護(緑)
#3E8E63
Aa 文字
手続き・書類(藍)
#345E8C
Aa 文字
お金(黄土)
#9C7A22
Aa 文字
暮らし基盤(苔緑)
#5A7D5A
Aa 文字
緊急(赤)
#C0362C
Aa 文字
交通(青灰)
#46748C
Aa 文字

タイポグラフィ

Webフォントは配らず、OS同梱フォントで組む(Apple=ヒラギノ丸ゴ/Windows=BIZ UDPGothic/Android=Noto Sans JP。欧文と数字は各OSのUIフォント)。丸ゴが同梱されるのはApple環境(訪問者の約75%)だけなので、Windows・Androidは角ゴ系になる。丸ゴはW4の1ウェイトのみで、Apple環境の太字は合成ボールド。本文16px以上・14px未満は使わない・行高1.5以上(DADS)。文字サイズ切替(標準110%/大125%)はヘッダー右で試せます。

あア亜Aa 松阪text-3xl · 42pxヒーロー/Display
あア亜Aa 松阪text-2xl · 33pxH1 ページ見出し
あア亜Aa 松阪text-xl · 26pxH2 大見出し
あア亜Aa 松阪text-lg · 21pxH3 見出し
あア亜Aa 松阪text-base · 17.6px本文 / H4 小見出し(太字)
あア亜Aa 松阪text-sm · 15.8px補助本文
あア亜Aa 松阪text-xs · 14.1px注釈(14px下限)

強調・ハイライト・インラインリンク

通常の本文の中で、太字(strong)で語句を強め、ハイライト(マーカー)で特に見てほしい箇所を目立たせます。 リンクは 色+下線 のインラインリンクにして、 本文中でも押せる場所だと分かるようにします(DADS: 本文リンクは色と下線を併用)。 本文の流れを乱さないよう、同一サイト内リンクやページ内アンカーには記号を足しません。 外部サイトへ出るリンクだけ、末尾に小さな ↗(別サイト) を添えて、押す前に外部だと分かるようにします。

<strong> 太字<mark> / .highlight ハイライト.inline-link インラインリンク

スペーシング(8px基準)

space-3xs4px
space-2xs8px
space-xs12px
space-sm16px
space-md24px
space-lg32px
space-xl48px
space-2xl64px

角丸・影

角丸

sm · 8px
md · 12px
lg (カード) · 16px
xl · 24px

影(elevation)

elevation-1
elevation-2
elevation-3

3. UIプリミティブ

ボタン・チップ・フォーム・本文スタイルなど、単体または小さな組み合わせで多数のページ・機能から再利用する基礎部品。

コンポーネント

ボタン(最小タップ48px)

リンク+

チップ / フィールドバッジ

タグ松阪駅周辺サンプル松阪ガイド特典有食べる松阪を知るサービス・体験

素の .chip は「タグ・状態・ファセット」など行き先ではないバッジ専用。押すと移動するチップは次の NavChip を使う。
.chip-benefitlisting_benefit があるエントリーの一覧カードだけに付く「松阪ガイド特典」表示。 気づいてほしいので赤系(エラー色と同じ赤ランプを --color-benefit-fg/bg という別名で参照)だが、地は淡く、文字と細枠だけを赤にして派手さを抑える。

道案内チップ(NavChip・行き先を見分ける)

目次・関連ページなどの道案内リストで、リンクの「行き先の種類」を記号で見分けられるようにする。 先頭 #=このページ内の見出しへ/末尾 =サイト内の別ページへ/末尾 =外部サイトへ(別タブ)。 この3種の意味体系は、本文中のインライン外部リンクの末尾 とも揃える。

目次(ページ内アンカー・kind="anchor"
関連ページ(サイト内の別ページ・kind="page"
外部サイト(別タブ・kind="external"

状態色の帯

info: 案内・補足
success: 完了・成功
warning: 注意喚起
error: エラー・削除

フォーム部品

問い合わせ系フォーム(掲載・情報提供など)で使う入力部品。ラベルに必須/任意を文字とバッジで示し(色だけに頼らない)、ヘルプ・エラーは aria-describedby で関連付ける。入力は16px以上でiOSの自動ズームを避ける。実装は src/components/forms/*。

掲載したい名称必須
公式サイト任意分かる範囲で構いません。
メールアドレス必須メールアドレスの形式をご確認ください。

入力内容をご確認ください

  • 掲載したい名称を入力してください。
  • メールアドレスの形式をご確認ください。

送信しました。内容を確認のうえ、必要に応じてご連絡します。

この部品(FormField / TextareaField / SelectField / CheckboxField / FormStatus)は、問い合わせ系フォームすべてで共用します。field名・選択肢・form名の単一情報源は src/lib/forms/definitions.ts、送信は submitToNetlify(Netlify Forms)です。

  • 掲載・情報提供/for-listing/mg-listing): 上の部品+「安心材料ピル」「3入口カード」「ステップ」「FAQ(details)」「画像アップローダー(端末内で圧縮)」+確認画面。
  • 訂正・削除依頼/correction/mg-correction): 依頼内容+依頼者(非公開)の2セクション+確認画面。ルールは /correction/terms/ に分離。
  • お問い合わせ/contact/mg-general): 運営への連絡。確認画面なしのシンプルな1画面。
  • 協賛スポンサー申込み/sponsorship/mg-sponsorship): 申込者区分(個人/お店・個人事業主/法人・団体)でラジオカード+入力項目が変わる1画面。区分ごとに公開情報・ロゴの要否が変わる。受付後に支援プランとStripe決済リンクをメール案内。

本文スタイル(prose)

記事・ガイド本文はMarkdownをビルド時にHTML化し、この .prose スタイルで表示します。見出し・段落・箇条書き・引用・表・コード・リンク・ハイライトを一貫した余白と行間で整えます。

見出し H2(大見出し)

松阪のくらしに役立つ情報を、読みやすい行間でまとめます。文中のインラインリンクは色と下線で示し、ここは覚えておきたいという箇所はハイライトで強調できます。

見出し H3(小見出し)

  • 箇条書きの項目その1
  • 箇条書きの項目その2(太字も使えます)
引用・補足。出典や注意書きに使います。
項目内容
受付時間平日 8:30〜17:15
持ち物本人確認書類、印鑑

テーブル

本文内のテーブルは列数で自動的に表示を切り替えます。2列は「項目/内容」等の見出しが自明なので隠し、1列目を見出し(背景色・太字にはしない)にしてスマホ幅ではスタック表示。3列以上はヘッダー行を表示する従来レイアウトのままです。

2列(key-value・見出し行は隠す/スマホでスタック)

項目内容
所在地松阪市中町0-0-0
営業時間11:00〜21:00
定休日水曜
電話0598-00-0000

画面幅を狭めると各行がカード状のスタック表示に切り替わります。

3列以上(ヘッダー行を表示・従来レイアウト)

プラン料金内容
カット4,000円シャンプー・ブロー込み
カラー7,000円〜カット別
パーマ8,000円〜カット込み

4. サイト共通コンポーネント

特定の機能やページ用途に限定せず、サイト全体で共通して使う実装済み部品。SiteHeader・SiteFooter・TextSizeToggle(文字サイズ切替)はこのページ自体の上下・ヘッダー右で常時動作中で、個別のライブサンプルは今回追加しません。

アナウンスメントバー(お知らせ帯・ヘッダー最上部)

全ページ共通のヘッダー最上部に出るお知らせ帯。特定ページ専用ではなく、サイト共通コンポーネントとして扱う。

5. 機能コンポーネント

プリミティブ単体ではなく、検索・一覧・探索・表示切替など具体的な機能を成立させる複合コンポーネント。

エントリカード

一覧・トップで使う共通カード。メイン画像はカルーセル(自動再生・タップで送り・ドット)。画像内バッジは種別(イベント/スポット/記事/サービス)に加え、イベントは開催状況(開催前=日付/開催中/開催終了)、スポットは町名を表示します。開催中はアクセント配色+軽いシェイクで目立たせます。タイトル・説明・「詳しく」から詳細ページへ移動します。

鶏焼肉 トリユウ
スポット:上川町

鶏焼肉 トリユウ

濃厚な味噌ダレが好評の松阪の老舗の鶏焼肉店。

【サンプル】松阪ご当地グルメまつり2026(架空イベント)
イベント:7月8日

【サンプル】松阪ご当地グルメまつり2026(架空イベント)

松阪牛、鶏焼き肉、松阪豚など、松阪のご当地グルメが一堂に集まるサンプルの食フェス。週末のお出かけ先を想定した架空イベントです。

サンプル
詳しく
【サンプル】松阪もめん藍染フェス2026(架空イベント)
イベント:6月20日

【サンプル】松阪もめん藍染フェス2026(架空イベント)

藍染めの体験や松阪もめんの販売が集まるサンプルの週末フェス。伝統工芸にふれる催しを想定しています。

サンプル
詳しく
「本物の松阪牛」を知る ― 定義とトレーサビリティのしくみ
記事

「本物の松阪牛」を知る ― 定義とトレーサビリティのしくみ

「松阪牛」はブランド名として知られていますが、実は登録・管理のしくみによって定義された牛です。この記事では、松阪牛の公式な定義と、一頭ずつ管理する「個体識別管理システム」のしくみを、はじめての方にも読めるように整理します。

【サンプル】喫茶 あおい(架空店舗)
スポット:本町

【サンプル】喫茶 あおい(架空店舗)

自家焙煎コーヒーと手作りスイーツのサンプルカフェ。落ち着いた木の空間でゆっくり過ごせる想定です。

サンプル
詳しく

※「開催中」バッジは今日の日付で判定するため、表示は閲覧時点によって変わります。

コンパクトカード(compact・関連する情報など補助導線用)

エントリ詳細ページ最下部の「関連する情報」など、主役ではない補助的な導線向けの小型版。カルーセル・要約・CTAボタンなしで、横長サムネイル+1行タイトルのみ。カード全体が1つのリンクです。

画像なしのフォールバック

メイン画像が無いエントリは、藍の面に白でそのエントリの名称を出します(EntryImageFallback)。 以前の松阪もめん柄+「松阪ガイド」銘板は、画像なしのカードが並ぶとどれも同じ見た目になり区別できなかったため取りやめました。 名称はカード本文にも出るので、この面は aria-hidden にして読み上げの重複を避けています。 検索結果のサムネイルとcompactカードは枠が小さいので size="thumb" で文字を詰めます。

松阪もめん手織りセンター

一覧カード(16:9・既定の size="card"

検索結果サムネイル(size="thumb"

よくある用事カード

トップの「よくある用事から探す」と /tasks で使う、状況・ライフイベントのカード(アイコン枠+タイトル+説明)。

用語リンク・用語集

「その状況になって初めて出会う専門用語」(例: 妊娠→受診票・償還払い)に、やさしい説明を添えます。本文の該当語からは用語リンクで説明へジャンプできます。通常のインラインリンク(実線下線)と区別するため、破線下線にしています。著者が [[用語]] と明示した箇所だけリンク化します(全出現の自動リンクはしません)。

健診は受診票(用語の説明)を使って公費で受けられます。県外で受けたときは、あとから申請して払い戻す償還払い(用語の説明)になります。

ことばの意味

受診票
母子保健のしおりにつづられている、健診費用の公費助成を受けるための用紙。健診のときに医療機関へ出します。
償還払い(しょうかんばらい)
いったん窓口で費用を支払い、あとから申請して助成分が口座に払い戻される方式。
.term-link 用語リンク(破線下線).term-def ジャンプ先(:target でハイライト)Glossary.tsx 共通コンポーネント

絞り込み・無限スクロール

一覧・カルーセルの上に置く絞り込みチップと、続きを追記読み込みする横カルーセル/グリッド。

ダイナミックフィルタ(ホットキーワード)

カルーセル/一覧の上に置く絞り込みチップ。ワードは各コレクションの実タグ頻度から自動生成(トップは3〜4個、フィールド/一覧は多め)。選択でその場で絞り込み、無限スクロールもフィルタ後の集合で継続します。

選択中: すべて

横カルーセル/無限スクロール

トップの横カルーセル(InfiniteRow)は右端で次バッチをAjax追記、フィールド一覧(InfiniteGrid)は下端で追記します。初期ページのみサーバから渡し、画像は遅延読込=初回を軽く保ちます。実挙動はトップ(/)や各一覧で確認できます。

6. ページフレーム

本文の中身(コンテンツブロック)ではなく、ページ全体の骨格・固定要素。一般ページの骨格と、掲載先・記事・イベントの詳細ページ(/entry/[slug])専用の固定要素に分ける。

一般ページのフレーム

下層ページ共通の骨格・状態表示。

ページ見出し(PageHeader・下層ページ共通)

ページタイトルの例

ページの説明文がここに入ります。

最終更新: 2026-07-09

ページ見出し(アクセント枠つき/CategoryTitle・フィールド/くらしガイド/固定ページ共通)

ページタイトルの例

ページの説明文がここに入ります。

子育て・教育

このカテゴリでは family色(--color-fam-people)を左ラインに使う例。

フィールドトップ・くらしガイドの各カテゴリ/トピック・固定ページ(お問い合わせ、検索、利用ガイド等)の見出しは、 「card枠+6px左ライン+レスポンシブ文字サイズ(text-base/lg/xl)」に統一しています。 実装は共通コンポーネント CategoryTitlesrc/components/CategoryTitle.tsx)が担い、PageHeaderaccent propを渡すとこれを内部で呼び出します。 左ラインの色は、フィールドでは field.colorVar、くらしガイドの各カテゴリでは familyVar、 それ以外の固定ページは既定で var(--color-primary) です。 ホーム・掲載/協賛募集LP・エントリー詳細(写真ヒーロー)・このデザインシステム等のプロジェクト参照ページは対象外です。

コンテンツ幅(コンテナ幅トークン)

--container-hub: 1200px(=--container-page)
--container-topic: 1200px(=--container-page)
--container-article: 820px

下層ページの本文幅はCSS変数(src/app/globals.css)で管理しています。--container-hubはくらしガイドの各カテゴリトップ12ページ用、--container-topicはトピック詳細ページ(全カテゴリの/[topic]・共通コンポーネントTopicArticle)用で、 どちらもトップ等の一覧ページと同じ最大幅(--container-page=1200px)に統一しています(カテゴリトップ→トピックで幅が変わらない)。--container-article(820px)は お問い合わせ・検索・訂正・お知らせ・利用ガイド・運営者情報・プライバシーポリシー・利用規約等の固定ページ共通で、 読み物として行長を絞り可読性を優先しています。実装はMarkdownPagePlaceholderPageが内部で使うほか、 各ページのラッパーdivにstyle={{ maxWidth: "var(--container-article)" }}のように指定します。 ホーム・掲載/協賛募集LP・フィールド/くらしガイド/よくある用事等のトップ一覧(カードグリッドがページ全幅を使う)・ このデザインシステム等のプロジェクト参照ページは対象外です。

準備中・注記の帯(PlaceholderPage等)

準備中:正式な内容は今後追加します(プレースホルダーページで使用)。
各カテゴリページは順次作成中です(くらしガイド等で使用)。

エントリー詳細フレーム

詳細ページはPC幅で本文(メイン)+サイドバー(基本情報/アクセス)の2カラム。基本情報=営業・連絡先系(電話/公式サイト/SNS)、アクセス=場所にたどり着くための情報(住所/駐車場/行き方/地図)とMECEに分けています。ヒーロー画像の下に種別・エリアのバッジ帯は置きません。以下は各パーツの見本です。

サンプル/注記の帯

これはデザイン検証用のサンプル(架空)です。実在せず、掲載先としての推薦でもありません。

サイドバー:基本情報 / アクセス

基本情報

営業11:00〜21:00
休み水曜
電話0598-00-0000

アクセス

住所松阪市中町0-0-0
駐車場あり(5台・無料)
行き方松阪駅から徒歩8分
Googleマップで開く

シェア

タグはサイドバーの下から2枚目。事実の要約ではなく検索への入口なので、基本情報・アクセスより後に置きます。その下がシェアパネル(LINE/X/Threads/リンクをコピー。Web Share API 対応端末では「その他」=OS共有シートも出ます)。 シェアは外部SDKを読み込まず各社のintent URLへの素のリンクなので、押すまで外部通信は発生しません。ブランドマークは lucide に無いためインラインSVGで持ちますが、色はブランド色を使わず藍(--color-primary)に統一し、器も .btn-outline と同じアウトラインにしています(借りるのはマークの形だけ)。コピー成功時のみ状態色の緑になります。

出典・最終更新日 + 訂正・削除依頼(ページ最下部・フッター直上)

出典:サンプルデータ(架空)(取得日:2026-07-09)
最終更新日:2026-07-09 - ページ管理番号:MG-EN-260709-PL-0001

掲載内容の訂正・削除を依頼する

出典・最終更新日は frontmatter(source/verified_date/next_review_date/management_id/source_note)から自動表示し、本文Markdownには重複して書きません。出典(source)は「名称(取得日:YYYY-MM-DD)」の形式で1つのテキストとして書き、複数の出典があっても改行せず「、」区切りで1行にまとめます(取得日は各出典の最終取得日を表す自由記述で専用フィールドは持ちません)。ページ自体の更新日は verified_date(表示名は「最終更新日」)が担い、management_id(ページ管理番号)と同じ行に並べて表示します。source_dateは現在表示に使いません。訂正・削除依頼ボタンは /correction へのリンクで全エントリ共通です。ページの一番最後(「〈フィールド名〉の一覧へ」より下)に、出典テキストと横並びで置きます。

イベント開催状況バッジ(画像内)

イベント:7月26日イベント:開催中イベント:開催終了スポット:河井町サービス

前へ / ランダム / 次へ(タブレット・PC)

「〈フィールド名〉の一覧へ」ボタンのすぐ上に置きます。前へ・次へは同じフィールド内を巡回し、キーボードの ← → でも移動できます。 スマホ幅ではこの行を出さず、代わりに画面下から移動バー(前へ 4 : ランダム 2 : 次へ 4)が現れます。バーは400pxスクロールで現れ、そのページにいる間は引っ込みません。

印刷ボタン(シェア列に並べる)+印刷面のQR

印刷ボタン(アイコン+「印刷」)はシェアパネルのSNSアイコン列に並べます(幅が足りなければ折り返す)。押すと印刷用の画像を読み込んでから印刷ダイアログを開きます(Cmd/Ctrl+P も同じ動き)。 印刷面(@media print・A4想定)はヘッダー/フッター/シェア/タグ/関連/回遊ボタンを落とし、ヘッダーにサイト名+URL+印刷日、続けてタイトル・画像3枚・本文・基本情報+アクセス(横並び)+QR(Googleマップ/このページ)・出典だけを残します。実際の見た目はブラウザの印刷プレビューで確認してください。QRはビルド時にSVGとして焼き込み(クライアントJSゼロ)。

関連情報の見出し(セクション見出し/.section-heading)

関連する情報

このページで探せること

ページ本文中のh2(グループ内ではh3)は .section-heading クラスで統一し、左6pxの縦ラインを付けます。 既定色は var(--color-primary)(1枚目)。くらしガイドの各カテゴリ/トピックページのように、 ページ全体がひとつのテーマカラーを持つときは、祖先要素(ページ最上部のラッパー)に style={{ "--section-accent": familyVar } as React.CSSProperties} をセットすると、配下のすべての .section-heading がそのテーマカラーへ自動で揃います (2枚目は子育て・教育の例=--color-fam-people = #c15c6e)。 通知ボックス内の小見出し(注意喚起の枠の中にあるh2など)はこの対象外です。
※「エントリ」は内部呼称。利用者向けには「イベント/スポット/記事/サービス」「関連する情報」と表示します。バッジの語彙と判定は src/lib/entry-badge.ts が正本で、住所も座標も持たない place は「サービス」になります(決まった会場を持たない教室・出張サービス)。

7. コンテンツブロック

ページ本文の中身を構成する意味的な表示単位。適用先の本文ごとに、Content Blocks for EntryとContent Blocks for Pageという対等な兄弟系統に分ける。見た目や機能が重なってよいが、コンポーネントの所属・Registry・公開API・データ契約・適用範囲は分け、デザイントークンとUIプリミティブは共通のまま複製しない。

Content Blocks for Page(未設計・未実装)

くらしガイド、よくある用事のサブページ、カテゴリページ、固定ページ等、エントリー詳細以外の一般ページ本文で使う、Content Blocks for Entryと対等な兄弟系統。境界は「くらしガイドかどうか」ではなく「エントリー詳細本文か、それ以外の一般ページ本文か」で判断する。

Planned今回は未設計・未実装です。くらしガイドだけに限定した仕組みではなく、種類一覧やサンプルもまだ作っていません(未定義のものを定義済みとして見せない)。

既存の src/components/life-guide/Blocks.tsxTopicArticle.tsx 等は、将来Content Blocks for Pageを設計する際の監査対象です。今回はこれらを実装済みのPageブロックRegistryであるかのように扱わず、機械的な移動・統合も行いません。

エントリー向けコンテンツブロック

このエントリー向けセットの正式名称は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見本(実レンダラ)

当日の流れ(見本)

  1. 受付

    予約名をお伝えください(見本)。

  2. 糸選び

    好みの色の糸を選びます(見本)。

  3. 手織り

    スタッフと一緒にコースターを織ります(見本)。

チェックリスト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見本(実レンダラ)

沿革(見本)

  1. 2020年体験工房として開業(見本)
  2. 2023年設備をリニューアル(見本)織り機を増設しました(見本)
リンク集link-list
目的:
公式・予約・関連等の出口を整理する
使う場面:
複数の出口リンクを並べるとき
使わない場面:
本文中の1リンク(インライン記法で足りる)

UI見本(実レンダラ)

行動ボタンcta-group
目的:
次の行動を明確にする
使う場面:
主要な次の行動をボタンで示すとき
使わない場面:
高リスク領域で公式行動より掲載先誘導を強めること

UI見本(実レンダラ)

引用quote
目的:
本人・主催者等の言葉を示す
使う場面:
許諾済みの発言・コメントを示すとき
使わない場面:
出典・許諾が不明なとき

UI見本(実レンダラ)

糸の色を選ぶ時間がいちばん楽しい、という声をよくいただきます(見本の声)。
スタッフ(見本)
図版・写真media-caption
目的:
写真・図と説明を結び付ける
使う場面:
本文中に説明付きの画像を差し込むとき
使わない場面:
ヒーロー・ギャラリー(固定要素側)

UI見本(実レンダラ)

見本の写真(既存サンプルエントリの画像を流用)
見本キャプション画像: 見本
画像ギャラリーimage-gallery
目的:
複数の写真で雰囲気・世界観を伝える(個々の写真に意味づけをしない)
使う場面:
ファイル名やキャプションに特に意味がない写真が複数あり、店舗・サービス・イベント等の雰囲気を伝えたいとき
使わない場面:
画像ファイル名にメニュー名などキャプション相当の情報があるとき(media-captionを使う)

UI見本(実レンダラ)

雰囲気ギャラリー(見本)

画像: 見本

メニューmenu-list
目的:
飲食・体験・商品の「名称・説明・価格・補足」をメニューとして理解しやすく示す
使う場面:
品名が主役で、説明や価格を並べて選びやすくしたいとき。蔵元・種類ごとに分かれた品書きも、ブロックを割らずに区分欄でまとめる
使わない場面:
料金体系・条件が主役のとき(price-list)/任意の多列データ(data-table)/選択肢を基準で比較(comparison-table)

UI見本(実レンダラ)

メニュー(見本)

  • 日替わりおにぎり(見本)
    日替わりおにぎり(見本)200円

    その日の具材(見本)

  • みそ汁(見本)150円
  • 地酒(見本)○○酒造(見本)1合600円
  • だし巻きたまご(見本)350円
  • 季節の小鉢(見本)300円

    内容は日によって変わります(見本)

  • 唐揚げ(見本)
    唐揚げ(見本)480円
  • 焼き魚(見本)600円
  • 冷やっこ(見本)280円
  • 漬物盛り合わせ(見本)250円
  • きんぴらごぼう(見本)280円
他のメニューを見る (5品)閉じる
  • ほうれん草のおひたし(見本)280円
  • ごはん(見本)1杯200円
  • 香の物(見本)200円
  • おでん盛り合わせ(見本)550円
  • デザート(見本)300円

価格は税込・見本です。

メニュー(大枠つき)menu-groups
目的:
説明文の長いメニューを、大枠ごとの見出し+説明+小メニューで1つずつ読ませる
使う場面:
プログラム・コース・講座・「ここで受けられること」のように、1つあたり100字を超える説明が付き、数が少ない(目安2〜8)とき。大枠の中に短い小メニューがぶら下がるとき
使わない場面:
品名と価格を流し読みさせたいとき(menu-list)/料金体系が主役のとき(price-list)/名前だけが並ぶとき(menu-list)。大枠が1つしかないなら、ブロックにせず本文の見出しと段落で書く

UI見本(実レンダラ)

できること(見本)

3か月の個別プログラム(見本)

月2回のセッションで、やりたいことを言葉にしていきます(サンプル)。ノートを使った対話が中心で、初めての方でも手ぶらで参加できます(サンプル)。

  • 初回カウンセリング60分
  • 振り返りシート

月1回のオープンデー(見本)

予約なしで立ち寄れる日です(サンプル)。お茶を飲みながら話すだけでもかまいません(サンプル)。

  • おしゃべり図書室
  • 石けんの販売

内容は見本です。

料金price-list
目的:
サービス・プラン・利用料金の料金体系と条件を示す
使う場面:
項目ごとに料金と条件(〜円から・別途・要確認等)を示すとき
使わない場面:
飲食等の品書き(menu-list)/選択肢を複数基準で比較(comparison-table)/単なる多列データ(data-table)

UI見本(実レンダラ)

料金(見本)

  • カット(見本)4,000円〜

    指名は別途550円(見本)

  • カラー(見本)6,000円〜

    髪の長さにより変動(見本)

詳細営業時間detailed-hours
目的:
frontmatterのbusiness_hoursでは安全に表せない曜日別・部門別・受付別の時間を示す
使う場面:
曜日/部門/受付で時間が分かれ、単一文字列では表せないとき
使わない場面:
business_hoursで十分なとき(重複させない)

UI見本(実レンダラ)

詳細営業時間(見本)

詳細営業時間(見本)
区分時間備考
平日9:00–19:0012:00–13:00は中休み(見本)
土日9:00–18:00

最終受付は閉店30分前(見本)。

タイムテーブルevent-schedule
目的:
1イベント内の複数プログラム・受付・開始・休憩・終了を時系列で示す
使う場面:
同一イベント内の時刻付きプログラムが複数あるとき
使わない場面:
開催日そのもの(frontmatter event_start/end)/沿革など日付単位の変化(timeline)

UI見本(実レンダラ)

タイムテーブル(見本)

  1. 10:00受付開始(見本)会場: 正面ロビー
  2. 10:30オープニング(見本)会場: 大ホール
申込案内apply-guide
目的:
申込対象・方法・締切・定員・費用・確認先を一つの行動案内としてまとめる
使う場面:
申込が必要で、方法を軸に条件を1箇所へまとめたいとき
使わない場面:
申込不要のとき/単なる手順(step-list)・属性表(key-value-table)・ボタン群(cta-group)で足りるとき

UI見本(実レンダラ)

申込案内(見本)

申込方法
申込フォームから送信(見本)
対象
どなたでも(見本)
締切・期間
2026年7月31日(見本)
費用
無料(見本)

定員に達し次第締め切り(見本)。

ブロック一覧(Registry)

kind名前目的UIプリミティブ状態
summary-lede要点リード本文の最初に要点を短く伝えるBlockFrameCurrent
key-points重要ポイント特徴・重要点を拾いやすく並べるListPrimitiveCurrent
callout注記・確認補足・ヒント・注意・公式確認を目立たせるCalloutPrimitiveCurrent
step-list手順手続き・利用の流れを順序立てて示すListPrimitive(ol)Current
checklistチェックリスト持ち物・準備・確認項目を一覧するListPrimitiveCurrent
faqよくある質問補足的な疑問と回答を示すDisclosurePrimitiveCurrent
definition-list用語・条件用語・設備・条件を説明するdl/dt/ddCurrent
key-value-table属性表属性と値の対応を示すTablePrimitive(kv)Current
data-tableデータ表複数列の事実を並べて比較可能にするTablePrimitiveCurrent
comparison-table比較表選択肢の違いを判断できるようにするTablePrimitiveCurrent
timeline経過・予定沿革・予定・変化を時系列で示すListPrimitive(ol)Current
link-listリンク集公式・予約・関連等の出口を整理するLinkListPrimitiveCurrent
cta-group行動ボタン次の行動を明確にするLinkListPrimitive(button)Current
quote引用本人・主催者等の言葉を示すblockquoteCurrent
media-caption図版・写真写真・図と説明を結び付けるMediaFigurePrimitiveCurrent
image-gallery画像ギャラリー複数の写真で雰囲気・世界観を伝える(個々の写真に意味づけをしない)Masonry Grid + LightboxCurrent
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・必須値不足・閉じ忘れはビルド時に検出します。

8. プレゼンテーションパターン

コンテンツを「どのように伝えるか」を定義し、複数のUIコンポーネントを組み合わせる設計単位(Planned)。

Presentation Patterns(表現パターン)

コンテンツを「どのように伝えるか」を定義し、複数のUIコンポーネントを組み合わせる設計単位(UIコンポーネント集ではない)。FacilityやEventのデータ構造はContent Architectureが担当し、画面での伝え方だけをここが担当する(同じ定義を両方に複製しない)。

Planned各パターンの詳細本文は未定義です。全パターンは下の共通構造で今後定義します(未定義のものを定義済みとして扱わないこと)。

なぜ・どのContextでこの表現を選ぶかの考え方は CIPValue Framework(情報価値とContext / Presentationの関係)が担当し、Design System は Tokens / Components によるUI実現を担当します(同じ定義を両方に複製しません)。

各Patternの共通構造

  1. Purpose
  2. When to Use / When Not to Use
  3. Required Content / Data
  4. Component Composition
  5. Variants
  6. Accessibility Notes
  7. Source / Verification Requirements
  8. Example
  9. Anti-patterns
  10. Implementation Status

Procedure手続きPlanned

概要・対象者・必要なもの・手順・期限・注意点・公式リンク・問い合わせ先・関連情報を組み合わせる。

Facility Profile施設・店舗Planned

場所が主役の情報(基本情報・アクセス・営業・写真)。placeエントリーの伝え方。

EventイベントPlanned

日時が主役の情報(開催状況・会場・申込)。eventエントリーの伝え方。

Emergency Action緊急行動Planned

緊急時に取る行動。最上部固定・広告なし・迷わせない導線。

Comparison比較Planned

選択肢を並べて選ばせる(料金・プラン・窓口の違い等)。

FAQよくある質問Planned

疑問と答えの対。details要素等で折りたたむ。

9. チャネル・出力

同じブランド・トークンを、届けるチャネルごとにどう翻訳するか。チャネルごとに別のデザイン体系は作らない。

Channel Guidelines(チャネル別ガイド)

同じブランド・トークンを、届けるチャネルごとにどう翻訳するか。チャネルごとに別のデザイン体系は作らない。

Web Current

このページの全セクション。トークン実体は src/app/globals.css

Print / Offline Current

チラシ・名刺・QRコード付き紙面など。CMYK換算・紙面サイズ・入稿確認は専門ビュー Design System Print が正本(HEX・ブランド定義はWebと共通で、別管理しない)。 エントリー詳細の印刷面(@media print)は 詳細エレメント 参照。

OGP / Social Draft

metadataBase(src/lib/site.ts)とシェアボタン(詳細エレメント)は実装済み。OG画像の統一デザインは今後。

QR Code Current

ビルド時SVG焼き込み(src/lib/qrcode.tsPrintQr)。印刷面での最小サイズ・余白は Design System Print 参照。

実装リファレンス(参考)

このデザインシステムの実体がどこにあるか。見本(このページ)と正本を混同しない。

  • Design Tokenssrc/app/globals.css色・タイポ・余白・角丸・影のCSS変数の実体(正本)
  • Global CSSsrc/app/globals.css.btn / .chip / .card / .prose / .info-panel などの共通クラス
  • Component Sourcessrc/components/*.tsx実装済みコンポーネントのコード(正本)
  • Assetspublic/assets/(logo / icons / entry)ロゴ・カテゴリアイコン・見本画像
  • Related Specificationsagent project-documents/ux-design-system.mdUX・アクセシビリティ原則と設計判断の文書正本