# DESIGN.md — 純喫茶の憂愁 / kissa-melancholy > **使い方**: このファイルをプロジェクトに置き、AIに > 「DESIGN.md に従って◯◯のサイトを作って」と指示してください。 > ライセンス: 商用利用可・改変可・クレジット不要（AIっぽくないデザイン見本帳 / サードパーティートラスト） ## 1. コンセプト 昭和の純喫茶が持つ、夜の帳のような落ち着き。飴色の照明、ビロードの椅子、 古いメニュー帳のノスタルジーを「暗い高級感」として組む。焦茶の地に、ビロード緑の面、 飴色は罫線と見出しの点使いだけ。派手さでなく、五十年変わらないことの重みで魅せる。 **キーワード**: 憂愁 / 純喫茶 / ビロード / メニュー帳 / 静夜 **この見た目が向く場面**: 喫茶店・バー・小料理屋・老舗旅館・古書店など、 夜と時間の積み重ねを物語る業種。昼の明るさや効率を訴求する業種には不向き ## 2. タイポグラフィ - 和文見出し: Shippori Mincho B1 / ウェイト 700（オールド明朝の濃い見出し） - 和文本文: Shippori Mincho / ウェイト 400 - 欧文・数字: Spectral（従属欧文。見出しには使わない。価格・年号・電話番号など 数字が主役の箇所にのみ充てる。EB Garamond は使わない — 姉妹テイスト letterpress-sincerity と欧文書体を分けて識別性を保つ） - 見出しスケール: h1（ヒーロー店名）58px / h2（節見出し）30px / h3（メニュー小見出し）19px （比率は級数の跳躍で決める。厳密な等比数列にしない。モバイルは h1 42px） - 特記: 価格の数字は `font-variant-numeric: oldstyle-nums` でオールドスタイル数字にし、 本文の明朝と喧嘩しない柔らかい字形にする。本文の字間は 0.05em、見出しは 0.08〜0.14em で ゆったり組む。「〜を、もっと。」型の空虚コピーを書かない。すべて具体語（豆の種類・ 火入れの時刻・席数・年号）で書く ## 3. カラー（dark-luxury） | 役割 | 値 | 使用比率の目安 | |---|---|---| | 背景（ベース） | #2b211a（深い焦茶） | 55% | | 背景（節替え） | #332821（やや明るい焦茶） | — | | 面（ビロード緑パネル） | #3e4a3a | 10%程度（引用・パネルに限定） | | テキスト（主） | #efe3cd（クリーム） | 30% | | テキスト（弱） | #c9b99a（薄クリーム） | — | | アクセント（飴色） | #b98d4f | 5%以下・点と罫線のみ | | 罫線（汎用） | rgba(185,141,79,0.32) | — | - 配色ルール: 飴色は**罫線・見出しの点使い・アイコン線画・価格文字・年号**にのみ使う。 「面（背景の塗り）で多用しない」。飴色を大面積の塗りにしない（バッジ・ボタン背景も不可）。 ビロード緑は面として使ってよいが、パネル1〜2箇所（本文中の引用ボックス等）に限定し、 ページ全体を緑で覆わない。紫〜青のグラデーション・発光（box-shadowでの光彩）は禁止 - **実測コントラスト（両方向・WCAG AA 4.5:1以上を確認）**: - クリーム #efe3cd on 焦茶 #2b211a → **12.39:1** - クリーム #efe3cd on 節替え焦茶 #332821 → **11.28:1** - クリーム #efe3cd on ビロード緑 #3e4a3a → **7.37:1** - 薄クリーム #c9b99a on 焦茶 #2b211a → **8.16:1** - 薄クリーム #c9b99a on ビロード緑 #3e4a3a → **4.85:1** - 飴色 #b98d4f on 焦茶 #2b211a（罫線ラベル・価格文字として） → **5.23:1** - 飴色 #b98d4f on ビロード緑 #3e4a3a → **3.11:1**（AA通常文字4.5:1未達。 → **飴色の文字はビロード緑パネルの上では使わない**。ビロード緑パネル上の文字は 必ずクリーム/薄クリームを使う。飴色はビロード緑パネル上では罫線・枠線としてのみ使用可） - クリーム #efe3cd on 飴色 #b98d4f → **2.37:1**（不合格）→ **飴色を面として使う場合、 その上の文字は必ず焦茶 #2b211a を使う**（焦茶 on 飴色は5.23:1で合格）。 クリーム文字を飴色の面に乗せることは禁止 ## 4. レイアウト・余白 - コンテンツ最大幅: 880px（一般セクション）／ 640px（品書き・帳面状のセクション。 実物のメニュー帳のような狭い版面にすることで密度を高く見せる） - **single-column: 一本道の縦積み。** 入店（ヒーロー）→ 品書き → 店内のこと → 店の歴史 → 営業案内、の順で一直線に読ませる。横スクロールや複数カラムの並列構成を作らない - セクション間余白: 96px 基準（モバイルは64px）/ 要素間は 8px の倍数 - 節の頭は**英字eyebrowを使わず**、飴色の菱形フラリッシュ（罫線＋菱形の区切り記号）＋ 和文見出し＋短いリード文、の3点で組む（§9にコード例） - ヒーローの構成: **マッチ箱のラベルとして組む。** 中央に飴色の二重罫の枠（外枠と内枠の 間に隙間を空けた「二重罫」。CSSの `border-style: double` は使わない）、四隅に写真コーナー風の 飾り折れマーク。枠の中に、王冠の線画エンブレム・「純喫茶」の肩書き・店名・創業年を 縦に積む。枠の外に本日の営業時間を一行、さらにその下に電話番号と品書きへの誘導を テキストリンクとして横に並べる。**ボタンは使わない。** 中央寄せだが「特大見出し＋ サブコピー＋ボタン2つ」の定型ヒーローにしない（§9にコード例） ## 5. コンポーネントの質感 - ヘッダー・ナビゲーション: 焦茶地・クリーム文字・下線なし。ナビリンクはホバーで 飴色に変わり、下線が飴色で出る（0.2s）。本文リンクと同じ挙動（下線ホバーのみ）で統一する - 角丸: 0px（全要素直角。矩形の罫線と枠だけで構成する）/ 影: 使わない（box-shadowで 発光・立体を作らない）/ 境界線: 1px。罫線は基本 `rgba(185,141,79,0.32)` の薄い飴色、 ヒーローと品書きの枠だけは彩度そのままの飴色 `#b98d4f` を使う - ボタン: **本テイストでは主要導線にボタンを使わない。** 誘導はすべて下線付きテキスト リンク（ホバーで飴色の下線）。やむを得ずボタンが必要な場合も、塗りボタンではなく 1px罫線＋クリーム文字の枠ボタンに限定し、ホバーで罫線が飴色に変わる程度に留める - カード的要素: 角丸カード＋影のグリッドを作らない。区切りは**罫線**（品書きの点線 リーダー、店の歴史の横罫）または**ビロード緑の面パネル**（引用・見どころの強調1箇所） のいずれかで表現する - **品書き（メニュー帳）の点線リーダー組み**: 品名と価格の間を点線で結ぶ、メニュー帳の 定型。全体を1px飴色の二重罫（外枠＋内枠）で囲み、帳面のページのように見せる （§9にコード例必須） - フォーム要素: 本デモには使用しないが、追加する場合は input/textarea は焦茶地・ 1px薄飴色罫線・角丸0・フォーカス時に罫線が彩度そのままの飴色 `#b98d4f` に変わる。 背景を白にしない - 画像の扱い: 写真は使わない方針（§7）。図版を使う場合は角丸なし・影なし・ 彩度を落とした単色トーン。装飾フィルタ（セピア一括がけ等）をかけない - アクセント色（飴色）の適用範囲: 許される用法は ①罫線・枠線 ②節見出しのフラリッシュ・王冠エンブレムの線画 ③価格の数字・年号 ④ホバー時の下線・文字色 の4つに限定。**面（塗り背景）としての多用・信号色的な バッジ塗りには使わない** ## 6. モーション - 量: **static（一切動かさない）**。letterpress-sincerity 等で使われる IntersectionObserver によるフェードインを**使わない**。`scroll-behavior: smooth` も 使わない（アンカークリック時の慣性スクロールも動きとみなし、`auto` にする） - 許される最小の動き: リンク・ナビのホバー時の下線色/文字色の変化のみ（0.2s ease）。 それ以外のtransitionを追加しない - 使わない動き: スクロール連動フェード、パララックス、カウントアップ、カルーセル、 タイプライター、ホバーでのtranslateY（カードが持ち上がる動き）。**「静けさ」は モーションの不在そのもので表現する** ## 7. 写真・イラスト・図版 - 写真は使わない。図版はすべて自作インラインSVGの線画（1〜2.5px罫、飴色 or クリーム） で統一する。**絵文字は一切使わない** - 使用する自作SVG: ①王冠の線画エンブレム（店名「王冠」と直接結びつく固有のマーク。 ヘッダー・ヒーロー・フッターで再利用） ②写真コーナー風の「角の飾り折れ」 （ヒーローの二重罫枠、四隅のみ） ③節見出しの菱形フラリッシュ（罫線＋菱形） - 網点（halftone dot）は使わない。**showa-retro-pop との排他事項**（本テイストは 「静かな夜」、showaは「朱藍の賑やかな大衆文化」であり網点はshowa固有の意匠のため） ## 8. 禁止事項（must not） - Inter / Roboto / Arial / system-ui を使わない（Shippori Mincho B1 / Shippori Mincho / Spectral で組む） - 紫〜青の装飾グラデーションを一切使わない（背景・文字・ボタンすべて）。 box-shadowによる発光（glow）を使わない - 網点（halftoneパターン）を使わない。網点は showa-retro-pop 固有の意匠であり、 本テイスト（静かな夜のビロード緑）と混同してはならない - 墨黒×真鍮の線画アイコンセットのような「モダンな工房」の意匠にしない （dark-atelier固有の言語）。本テイストは古紙とメニュー帳の郷愁であり、 ノイズ質感は letterpress よりも粗く暗めに、飴色は罫線に偏らせて区別する - 飴色 #b98d4f を面（大きな塗り背景・ボタン塗り・バッジ塗り）として多用しない。 罫線・点・数字に限定する - IntersectionObserverによるスクロールフェードイン、smooth scrollを使わない （motion: static を厳守。letterpress-sincerity の`.fade`パターンを流用しない） - 「レトロ喫茶＝セピアフィルタ＋手書きフォント」に逃げない。書体は明朝の規律を守り、 質感はSVGノイズと罫線の設計で作る。手書き風フォントを使わない - 中央寄せの定型ヒーロー（特大見出し＋サブコピー＋ボタン2つ）を作らない。 ヒーローは必ずマッチ箱ラベルの二重罫枠として組む - 絵文字・既製アイコンセットをアイコンに使わない（自作インラインSVG線画のみ） - クリーム文字を飴色の面（塗り背景）に乗せない（実測2.37:1で不合格。§3参照） ## 9. 実装ノート ```css /* tokens.css — この変数セットをそのまま使うこと */ :root { --color-bg: #2b211a; --color-bg-alt: #332821; --color-velvet: #3e4a3a; --color-text: #efe3cd; --color-text-weak: #c9b99a; --color-accent: #b98d4f; --color-rule: rgba(185, 141, 79, 0.32); /* 変数には総称ファミリ(serif)を含めないこと */ --font-heading: "Shippori Mincho B1"; --font-body: "Shippori Mincho"; --font-latin: "Spectral"; --space-unit: 8px; --radius: 0; --max-width: 880px; --max-width-narrow: 640px; } ``` - フォント読み込み: `https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Shippori+Mincho+B1:wght@600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap` ### 品書き（メニュー帳）の点線リーダー組み — 必須パターン ```html ``` ```css .menu-item { display: flex; flex-wrap: wrap; /* descを強制改行させるために必須 */ align-items: baseline; gap: 8px; padding: 9px 0; } .menu-item .leader { flex: 1; /* 品名と価格の間を伸縮する点線が埋める */ border-bottom: 1px dotted var(--color-accent); height: 0.9em; margin: 0 2px; } .menu-item .price { font-family: var(--font-latin), serif; font-variant-numeric: oldstyle-nums; white-space: nowrap; text-align: right; } .menu-item .desc { flex-basis: 100%; /* flex-wrapと組み合わせて必ず次の行に落とす */ font-size: 12.5px; color: var(--color-text-weak); } ``` ### ヒーロー: マッチ箱ラベルの二重罫枠 — 必須パターン ```html

純喫茶

王冠

創業 昭和四十二年 — EST. 1967
``` ```css .matchbox-outer { border: 1px solid var(--color-accent); padding: 8px; position: relative; } .matchbox-inner { border: 1px solid var(--color-accent); padding: 48px 32px 40px; } /* 外枠と内枠の間に padding の隙間を作ることが「二重罫」の要。 border-style: double（1要素で2本線）は使わない */ .corner { position: absolute; width: 22px; height: 22px; color: var(--color-accent); } .corner--tl { top: -1px; left: -1px; } .corner--tr { top: -1px; right: -1px; transform: rotate(90deg); } .corner--br { bottom: -1px; right: -1px; transform: rotate(180deg); } .corner--bl { bottom: -1px; left: -1px; transform: rotate(270deg); } ``` ```html ``` ### 節見出しの菱形フラリッシュ（英字eyebrowの代わり） ```html

品書き

``` ```css /* symbol定義: 罫線—菱形—罫線。英語の機械翻訳ラベルを使わず、 和文タイポグラフィの中だけで階層と間を作る */ ``` - 動きは一切JSを必要としない（IntersectionObserver等のスクリプトを書かない）。 `html { scroll-behavior: auto; }` を明示し、アンカーリンクの慣性スクロールも避ける