デザインシステム
姉妹サイト「松阪くらしの相談ナビ」の設計思想 ―― UD書体（BIZ UDPGothic）、温かい生成りの地色、 角丸カードと控えめな影、そして色だけに頼らず「形（アイコン）」でも区別する方針 ―― を継承し、藍（松阪もめん）を基調に再構成した実装トークンとコンポーネントの一覧です。 正本は project-documents/ux-design-system.md。
ロゴ（駅鈴マーク＋松阪ガイド）
サイトのロゴ一式。シンボルマークは松阪のシンボル「駅鈴（えきれい）」（律令時代の駅制の鈴。JR松阪駅前のモニュメント）。加えて、名前のロゴタイプ「松阪ガイド」がある。いずれもフラット・織部緑＋藍・背景透過で、ヘッダー／フッター／favicon／画像なしカードの銘板に使用する。
丸みのある胴＋頂部ドーム、デフォルメした赤い房、側面のスリット。緑釉は胴の下まで覆い、一番底の台座リムだけ生成り（無地）。正面パネルは駅の旧字体「驛」を、濃緑地の上に薄い緑（トーンオントーン）で置く。すべて塗り分けのフラット（グラデーションなし）で、背景は透過。明るい地／暗い地の両方で使える。
ロゴタイプ（文字ロゴ）：松阪ガイド
「松阪」＝漢字＋「ガイド」＝カタカナ。丸ゴシックの藍に、下線と、右端の小さな駅鈴ベル（上＝織部緑／下＝生成り）を文字あしらいとして添える。背景は透過で、明るい地になじむ。ヘッダーのロゴに使用中。暗い地（右）では藍文字のコントラストが不足するため、白抜き版は今後用意する。
カラートークン
テキストは背景に4.5:1、境界・アイコンは3:1以上（DADS/JIS）。カテゴリ色は単独で意味を運ばず、必ずラベル＋アイコンと併用します。
ブランド藍ランプ（松阪もめん）
ニュートラル（生成り基調）
セマンティック（状態色）
フィールド アクセント（6）
生活ガイド カテゴリ色（12→6ファミリー）
松阪もめん柄（ブランドモチーフ）
藍の縦縞（松阪もめん）をブランドの“らしさ”として要所に使います。ガイドライン: 柄は薄く/透過させず不透明で使う。柄の上に文字を乗せる場合は、白フレームやバッジにして可読性を確保する（柄の上に直接文字を置かない）。すべてCSSのみ＝画像ダウンロードなし。
.momen-fill 面塗り（画像なしカードのフォールバック・アナウンスバー地）
.momen-band 横帯（フッター上端）
--momen-vertical 縦縞（見出し左＝.section-heading）
柄の上に文字（白フレーム/バッジで可読性を確保）
※ロゴマークは松阪のシンボル「駅鈴」マークを銘板先頭に差し込み済み。
カテゴリアイコン（Magnific生成・背景透過）
フィールド・生活ガイドの識別アイコン。色だけでなく形で見分けられるよう、統一した画風・線幅で生成。小サイズでも形が読めること、同一ファミリー色どうしは形で区別することを重視します。
フィールド（6）
食べる
遊ぶ・学ぶ
買う
サービス・体験
松阪を知る
生活ガイド生活ガイド カテゴリ（12）
子育て・教育
介護・高齢者
障がい福祉
健康・医療
住民票・戸籍・各種届出
税金
年金・国保・保険
ごみ・水道・生活環境
防災・消防・救急
住まい
自動車
公共交通
市政タイポグラフィ
BIZ UDPGothic（400/700）。本文16px以上・14px未満は使わない・行高1.5以上（DADS）。文字サイズ切替（標準110%/大125%）はヘッダー右で試せます。
強調・ハイライト・インラインリンク
通常の本文の中で、太字（strong）で語句を強め、ハイライト（マーカー）で特に見てほしい箇所を目立たせます。 リンクは 色＋下線 のインラインリンクにして、 本文中でも押せる場所だと分かるようにします（DADS: 本文リンクは色と下線を併用）。
<strong> 太字<mark> / .highlight ハイライト.inline-link インラインリンク用語リンク・用語集
「その状況になって初めて出会う専門用語」（例: 妊娠→受診票・償還払い）に、やさしい説明を添えます。本文の該当語からは用語リンクで説明へジャンプできます。通常のインラインリンク（実線下線）と区別するため、破線下線にしています。著者が [[用語]] と明示した箇所だけリンク化します（全出現の自動リンクはしません）。
健診は受診票（用語の説明）を使って公費で受けられます。県外で受けたときは、あとから申請して払い戻す償還払い（用語の説明）になります。
ことばの意味
- 受診票
- 母子保健のしおりにつづられている、健診費用の公費助成を受けるための用紙。健診のときに医療機関へ出します。
- 償還払い（しょうかんばらい）
- いったん窓口で費用を支払い、あとから申請して助成分が口座に払い戻される方式。
.term-link 用語リンク（破線下線）.term-def ジャンプ先（:target でハイライト）Glossary.tsx 共通コンポーネント本文スタイル（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円〜 | カット込み |
スペーシング（8px基準）
角丸・影
角丸
影（elevation）
コンポーネント
ボタン（最小タップ48px）
チップ / フィールドバッジ
状態色の帯
エントリカード
一覧・トップで使う共通カード。メイン画像はカルーセル（自動再生・タップで送り・ドット）。画像内バッジは種別に加え、イベントは開催状況（開催前=日付／開催中／開催終了）、スポットは町名を表示します。開催中はアクセント配色＋軽いシェイクで目立たせます。タイトル・説明・「詳しく」から詳細ページへ移動します。
※「開催中」バッジは今日の日付で判定するため、表示は閲覧時点によって変わります。
コンパクトカード（compact・関連する情報など補助導線用）
エントリ詳細ページ最下部の「関連する情報」など、主役ではない補助的な導線向けの小型版。カルーセル・要約・CTAボタンなしで、横長サムネイル＋1行タイトルのみ。カード全体が1つのリンクです。
画像なしのフォールバック
メイン画像が無いエントリは、松阪もめん風の柄地に「まつさかガイド」の銘板を重ねたフォールバックを表示します。 （銘板の先頭アイコンは駅鈴ロゴに差し替え済み）
まつさかガイド（画像がないエントリの例）
よくある用事カード
トップの「よくある用事から探す」と /tasks で使う、状況・ライフイベントのカード（アイコン枠＋タイトル＋説明）。
検索
トップのヒーローと /search で共用する検索フォームと、検索結果の1行。索引・絞り込み・ページ送りはすべてサーバ側＋GETパラメータで完結し、クライアントJSを使いません（プレーンなformとリンク＝JSオフでも動作）。結果行は「なぜ当たったか」が読めるよう、一致語を本文抜粋の中でハイライトします。
検索フォーム
絞り込みチップ（リンク型）
見た目は上のダイナミックフィルタと同じですが、検索結果ではボタンではなくリンクで実装します（状態がURLに載る＝共有・戻るが効く）。
検索結果の1行
実際に「松阪牛」で検索した結果です。エントリはサムネイル、くらしのガイドはカテゴリアイコン、 よくある用事・案内ページはLucideアイコンを左に置き、種別バッジで何の情報かを示します。 フィールド入口（/eat 等）と規約系は索引に入れません（フィールドは絞り込み軸としてのみ使います）。
記事松阪市「本物の松阪牛」を知る ― 定義とトレーサビリティのしくみ
概要 「松阪牛」は、ブランド名としてよく知られていますが、実は登録・管理のしくみによって定義された牛です。この記事では、松阪牛の公式な定義と、一頭ずつ管理する「個体識別管理システム」のしくみを、はじめての方にもわかるように整理します。お店で…
#松阪を知る#松阪牛#特産品
スポット松阪市内サンプル【サンプル】松阪牛焼肉 やまと（架空店舗）
…dining（メイン画像3枚のカルーセル）の確認用。 概要 松阪牛を炭火で味わえるサンプルの焼肉店。霜降りの盛り合わせから希少部位まで、記念日にも使える想定です。 メニュー（サンプル・menu-gallery要素） メニュー 価格（税込・サ…
#食べる#焼肉#松阪牛
イベント松阪市内サンプル【サンプル】松阪ご当地グルメまつり2026（架空イベント）
…rd（日時・会場・申込が主役）の表示確認に使います。 概要 松阪牛、鶏焼き肉、松阪豚など、松阪のご当地グルメが一堂に集まるサンプルの食フェス。週末のお出かけ先を想定した架空イベントです。 開催概要（event-detail要素・主役） 項目…
#食べる#イベント#特集
詳細ページのUIエレメント
詳細ページはPC幅で本文（メイン）＋サイドバー（基本情報／アクセス）の2カラム。基本情報＝営業・連絡先系（電話／公式サイト／SNS）、アクセス＝場所にたどり着くための情報（住所／駐車場／行き方／地図）とMECEに分けています。ヒーロー画像の下に種別・エリアのバッジ帯は置きません。以下は各パーツの見本です。
サンプル/注記の帯
サイドバー：基本情報 / アクセス
タグはサイドバーの下から2枚目。事実の要約ではなく検索への入口なので、基本情報・アクセスより後に置きます。その下がシェアパネル（LINE／X／Threads／リンクをコピー。Web Share API 対応端末では「その他」＝OS共有シートも出ます）。 シェアは外部SDKを読み込まず各社のintent URLへの素のリンクなので、押すまで外部通信は発生しません。ブランドマークは lucide に無いためインラインSVGで持ちますが、色はブランド色を使わず藍（--color-primary）に統一し、器も .btn-outline と同じアウトラインにしています（借りるのはマークの形だけ）。コピー成功時のみ状態色の緑になります。
出典・確認日 ＋ 訂正・削除依頼（ページ最下部・フッター直上）
出典：サンプルデータ（架空） 取得日：2026-07-09 確認日：2026-07-09
掲載内容の訂正・削除を依頼する出典・確認日は frontmatter（source/source_date/verified_date/next_review_date/source_note）から自動表示し、本文Markdownには重複して書きません。訂正・削除依頼ボタンは /correction へのリンクで全エントリ共通です。ページの一番最後（「〈フィールド名〉の一覧へ」より下）に、出典テキストと横並びで置きます。
イベント開催状況バッジ（画像内）
前へ / ランダム / 次へ（タブレット・PC）
キーボードの ← → でも前後へ移動できます。
「〈フィールド名〉の一覧へ」ボタンのすぐ上に置きます。前へ・次へは同じフィールド内を巡回し、キーボードの ← → でも移動できます。 スマホ幅ではこの行を出さず、代わりに画面下から移動バー（前へ 4 : ランダム 2 : 次へ 4）が現れます。バーは400pxスクロールで現れ、そのページにいる間は引っ込みません。
印刷ボタン（シェア列に並べる）＋印刷面のQR
最新情報はこちら
（印刷面のQR見本）
印刷ボタン（アイコン＋「印刷」）はシェアパネルのSNSアイコン列に並べます（幅が足りなければ折り返す）。押すと印刷用の画像を読み込んでから印刷ダイアログを開きます（Cmd/Ctrl+P も同じ動き）。 印刷面（@media print・A4想定）はヘッダー/フッター/シェア/タグ/関連/回遊ボタンを落とし、ヘッダーにサイト名＋URL＋印刷日、続けてタイトル・画像3枚・本文・基本情報＋アクセス（横並び）＋QR（Googleマップ／このページ）・出典だけを残します。実際の見た目はブラウザの印刷プレビューで確認してください。QRはビルド時にSVGとして焼き込み（クライアントJSゼロ）。
関連情報の見出し
関連する情報
※「エントリ」は内部呼称。利用者向けには「スポット・お店／記事／イベント」「関連する情報」と表示します。
ページ共通パーツ
複数ページで共通して使うパーツ。共通ヘッダー・フッターは全ページに常設（このページ上下にも表示中）。
アナウンスメントバー（お知らせ帯・ヘッダー最上部）
ページ見出し（PageHeader・下層ページ共通）
ページタイトルの例
ページの説明文がここに入ります。
最終更新: 2026-07-09
準備中・注記の帯
ダイナミックフィルタ（ホットキーワード）
カルーセル／一覧の上に置く絞り込みチップ。ワードは各コレクションの実タグ頻度から自動生成（トップは3〜4個、フィールド/一覧は多め）。選択でその場で絞り込み、無限スクロールもフィルタ後の集合で継続します。
選択中: すべて
横カルーセル／無限スクロール
トップの横カルーセル（InfiniteRow）は右端で次バッチをAjax追記、フィールド一覧（InfiniteGrid）は下端で追記します。初期ページのみサーバから渡し、画像は遅延読込＝初回を軽く保ちます。実挙動はトップ（/）や各一覧で確認できます。
画像カルーセル
images.main が2枚以上のときドット付きカルーセル。ヒーローのみ自動再生（ホバー/操作で停止・reduced-motion尊重）。下は3枚のデモ（サンプル画像）。
ヒーロー内オーバーレイの例