デザインシステム（印刷用）
チラシ・掲載先募集物・名刺など紙ものを作るときの色・書体・素材の早見表。主に Canva 想定（案件により Photoshop / Illustrator）。Webと紙で同じ「まつさかガイドらしさ」を保つためのもの。
最終更新: 2026-07-14
配色・書体・ロゴの正本は「デザインシステム」（Web）。ここはそれを紙に翻訳しただけで、独自にブランドを決めない。色の値がズレたら常に正本の HEX が勝つ。
Canva で作るときは各色の HEX をそのまま入力（これが正）。CMYK は本格オフセット印刷向けの換算目安で、刷り上がりは印刷所のプロファイル次第。本番は HEX を渡し色校正（proof）を信じる。
カラー
藍が基調、松阪らしさ（差し色）は少し。色だけで意味を運ばせない（必ずラベル・アイコンと併用）。医療・介護・士業・おくやみ・防災など高リスク領域は彩度を抑える。
ブランド藍ランプ（松阪もめん）主役は 藍 #24476E
地色・文字色（生成り基調）紙全面を生成りにすると一気に“らしく”
状態・強調色error(赤) は装飾目的で多用しない
フィールド アクセント要ラベル＋アイコン
生活ガイド カテゴリ色（6ファミリー）
書体
基本書体は BIZ UDPGothic（Webと同一・UD書体で高齢者にも読みやすい）。Canvaにも入っているので選ぶだけで揃う。無い環境の代替は Noto Sans JP → ヒラギノ角ゴ。
- ウェイトは Regular(400) と Bold(700) の2段だけ
- チラシ本文は 9〜11pt 推奨・最小 8pt（注釈でも 6pt 以上）
- 本文は必ずゴシック・十分なコントラスト
- 見出しは 藍(#24476E)＋太字、または藍ベタに白抜き
- 明朝は見出し限定（本文は必ずゴシック）
- 和文の斜体（イタリック）＝字が壊れる
- 薄いグレーの本文・極小文字・低コントラスト
- 中太・極細ウェイトの多用
- 細い明朝の小さな白抜き文字
らしさの型
Webの見た目をそのまま再現しなくてよい。下の道具を1〜2個効かせれば「まつさかガイドのチラシ」に見える、という道具箱。
▲ 松阪もめん柄（Web の .momen-fill と同一・濃い藍主体＋生成りの細縞・縞幅は不揃い）。紙面の縁・帯・小面積に効かせる。柄は薄く/透過させず、上に文字を乗せるときは白フレームで可読性を確保。
- 松阪もめんの藍縦縞 … フッター帯・サイド罫・見出し脇
- ロゴ … 紙・名刺は大きく出せる（→ 素材）
- 黄マーカー(#FCE38A) … キャッチの一語に
- 軽い角丸・8pt発想の余白 … 詰め込みすぎない
- QRは大きめ＋周囲余白＋URLと必ずペア
- 藍以外を主役にする（差し色は少しだけ）
- 薄いグレー本文・極小文字・低コントラスト
- 色だけで情報を分ける（要 ラベル・アイコン）
- 高リスク領域の紙で error(赤) を装飾に使う
ロゴ・素材
ロゴは駅鈴（えきれい）あしらい。ヘッダーで使うロゴタイプと、単体のマークがある。素材はサイトの public/assets/logo/ から取る（毎回作らない）。
⚠ ロゴは今後クリーンなSVG化・微調整の可能性あり。大量印刷の前に最新版か確認を。カテゴリ／フィールドのアイコンは Web と同じ画風（Lucide＋Magnific生成・線幅と彩度を合わせる）で。松阪もめん柄は Web が CSS 実装のため画像ファイルは無く、紙用はカラーの藍ランプで縞を作る。
入稿チェック
書き出し前に確認する。用途で2系統。
- 書体は BIZ UDPGothic（無ければ Noto Sans JP）
- 主役は藍 #24476E、地色は生成り #FBF7EE を検討したか
- 本文9pt以上・ゴシック・十分なコントラスト
- ロゴは透過PNG＋クリアスペース、濃色ベタに直乗せしていない
- QR＋URLはペア・大きめ・周囲余白あり
- 色だけで情報を分けていない（ラベル/アイコン併用）
- 書き出し：印刷用PDF、または高解像度PNG（300dpi相当）
- 色は HEX を正として渡し、CMYKは印刷所プロファイルで変換
- 色校正（proof）を取る
- 塗り足し(bleed)3mm・トンボ・安全マージン
- 濃い藍ベタはリッチブラック／インキ総量を印刷所指定に
- 画像は実寸300〜350dpi
- フォントはアウトライン化 or 埋め込み
- 入稿形式は印刷所指定（PDF/X-1a 等）
文章の正本は project-documents/design-system-print.md（松阪もめん柄・CMYK運用・入稿手順の詳細）。配色・書体・ロゴが変わったら正本の ux-design-system.md に追随させる。内部確認用（一般公開時は AdminNav とこのページを外す）。