--- version: alpha name: Classic Oriental Ivory and Brown Restaurant LP description: 和紙のような生成りの地と深い焦げ茶のセクションを交互に置き、金色の雲文と朱赤の縦書き札で中華の老舗らしさを出した飲食店 LP。明朝体の縦書き見出しと欧文セリフの英字見出しを組み合わせ、料理写真を大きく見せる。 colors: primary: '#331E09' background: '#F1EEEA' background-alt: '#ECE0D3' surface: '#DDC699' secondary: '#E2C48D' cta: '#640404' on-cta: '#F6F3EE' accent-1: '#850202' accent-2: '#152043' on-dark: '#F3CE8A' text: '#050404' text-muted: '#8E7E58' line: '#C7C2AC' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.15em headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.2em headline-md: fontFamily: Cinzel fontSize: 32px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-reserve: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px button-gold: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 38px button-navy: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px dish-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 180px framed-photo: height: 440px vertical-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 200px arrow-underline-link: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 170px info-table: textColor: '{colors.text}' typography: '{typography.body-md}' height: 560px --- # DESIGN.md — 生成り×焦げ茶と金の老舗中華料理店 LP（Classic Oriental Ivory and Brown Restaurant LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、和風、ラグジュアリー・ダーク、信頼・誠実 - **キーワード**: 老舗中華・生成り和紙・焦げ茶・金の雲文・縦書き明朝・料理写真主役 - **地の質感**: 生成り地に和紙・唐草の薄い地紋。濃色面はフラットな焦げ茶 - **形**: 角丸なしの矩形が基本。写真枠に中華格子の角飾り、境界に雲文の波形 - **温度感**: 暖色寄り。生成りと焦げ茶、金で落ち着いた温かみ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#331E09` | 名物料理・フッターの焦げ茶地 | 22% | 画素の実測 | | `background` | `#F1EEEA` | 和紙調の生成り地 | 25% | 画素の主要色に補正 | | `background-alt` | `#ECE0D3` | 店舗情報のベージュ地 | 16% | 画素の実測 | | `surface` | `#DDC699` | お取り寄せの金茶ボックス地 | 5% | 画素の実測 | | `secondary` | `#E2C48D` | 金茶のサブボタン・雲文 | 1% | 画素の実測 | | `cta` | `#640404` | 予約ボタンの臙脂 | 1% | 画素の実測 | | `on-cta` | `#F6F3EE` | 予約ボタン文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#850202` | 料理名縦書き札の朱赤 | 1% | 画素の実測 | | `accent-2` | `#152043` | 濃紺のサブボタン | 0% | 画素の実測 | | `on-dark` | `#F3CE8A` | 濃色地の金文字 | 0% | 画素の主要色に補正 | | `text` | `#050404` | 見出し・本文の黒 | 2% | 画素の実測 | | `text-muted` | `#8E7E58` | 地名の小見出しの茶 | 0% | 画素の主要色に補正 | | `line` | `#C7C2AC` | 情報表の区切り線 | 0% | 画素の主要色に補正 | - 生成り地と焦げ茶地をセクション単位で交互に切り替える - 焦げ茶地の文字は金色、生成り地の文字は黒に近い墨色 - 予約の主 CTA だけに臙脂を使う - 朱赤は料理名の縦書き札に限定する - 金茶は雲文・サブボタン・お取り寄せ枠に使う - 濃紺は店内案内などの補助ボタンに限定する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV直下の縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 30px | 1.6 | 0.15em | | `headline-lg` | 名物料理などの縦書きセクション見出し | 明朝 | Shippori Mincho | 500 | 36px | 1.3 | 0.2em | | `headline-md` | 英字見出し（LUNCH など） | 欧文セリフ | Cinzel | 400 | 32px | 1.3 | 0.05em | | `headline-sm` | 店舗情報・お知らせ等の見出し | 明朝 | Noto Serif JP | 500 | 24px | 1.5 | 0.08em | | `body-md` | 紹介文・情報表の本文 | 明朝 | Noto Serif JP | 500 | 12px | 2.0 | 0.05em | | `accent` | 料理名札の縦書き・小さな英字ラベル | 明朝 | Shippori Mincho | 700 | 20px | 1.3 | 0.1em | | `note` | 注釈・日付 | 明朝 | Noto Serif JP | 400 | 10px | 1.7 | 0.05em | | `label-button` | ボタン文字 | 明朝 | Noto Serif JP | 600 | 11px | 1.4 | 0.1em | - 全文を明朝体で統一し、ゴシックは使わない - 主要見出しは縦書きにし、横に小さな英字を縦組みで添える - 英字見出しはローマン大文字のセリフ体 - 本文は小さめで行間 2.0 前後とゆったり組む - 電話番号は大きめのセリフ数字で見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、写真は全幅または左右 18px 余白 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は左右どちらかに寄せてずらして配置し、余白にリズムをつける - 縦書き見出しは中央付近にまとめる - 情報表は左に項目名、下に内容、細線で区切る - ボタンは中央寄せで幅 45% ほど - セクションごとの地色変更で区切る ## Elevation & Depth - 影はほぼ使わずフラット - 写真枠は細い二重線と角の格子飾りで立体感を出す - 注意書きボックスは淡い面に細線枠と角飾り ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。料理は寄りで大きく切り取る - **セクション境界**: FV下や店舗情報の上は雲文・瑞獣の波形の境界、他は直線で地色を切り替え - ボタンは角丸なしの長方形に右端の小さな三角矢印 - 英字見出しやリンクの下に右端矢印付きの細線 - 料理写真に中華格子の角飾り付きの細線枠 - 朱赤の縦長札を写真右上にかぶせる ## Components - **予約ボタン**（`button-reserve`）: 臙脂の矩形に白文字、左にカレンダーアイコン、右に三角 - **金茶サブボタン**（`button-gold`）: 焦げ茶地上の金茶ボタン、墨文字に三角矢印 - **濃紺サブボタン**（`button-navy`）: 生成り地上の濃紺ボタン、白文字 - **料理名縦書き札**（`dish-label`）: 朱赤の縦長札に金色の縦書き料理名、写真右上に重ねる - **格子角飾り写真枠**（`framed-photo`）: 細い二重線と四隅の中華格子モチーフで写真を囲む - **縦書き見出し**（`vertical-heading`）: 明朝の縦書き大見出しに英字の小ラベルを縦に添える - **矢印付き下線見出し**（`arrow-underline-link`）: 英字見出しやリンクの下に右端矢印付き細線 - **注意書きボックス**（`notice-box`）: 淡い地に細線枠と角飾り、中央揃えの説明文 - **店舗情報表**（`info-table`）: 項目名太字、内容を下に、細線区切り ## Do's and Don'ts **Do** - 見出しは明朝の縦書きで余白を広く取る - 焦げ茶と生成りの交互配置で重厚感を保つ - 料理写真は湯気・照りがわかる寄りで大きく - 雲文や格子などの東洋装飾を金茶で控えめに添える - 予約導線は臙脂ボタンと電話番号をセットで出す **Don't** - ゴシック体やポップな丸ゴシックを使わない - ボタンを角丸やピル型にしない - 鮮やかな原色を広い面に使わない - 強い影やグラデーションボタンを入れない - 朱赤を見出し以外に多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の象徴的な外観で印象づける）: ネオン看板の全幅写真、上部にロゴ、下端を雲文の波形で生成り地へ 2. **コンセプト**（歴史と味のこだわりを伝える）: 生成り地に縦書きキャッチ、金茶の雲文、写真を左右にずらして配置し本文 3. **料理写真帯**（メニューの幅を見せる）: 料理写真を横に並べた帯 4. **名物料理**（看板料理を訴求する）: 焦げ茶地に大きな料理写真、金色の縦書き見出し、格子枠写真に朱赤の料理名札、金茶ボタン 5. **ランチ＆ディナー**（利用シーンとコースを紹介）: 左帯に唐草地紋、欧文セリフ英字見出し、写真と矢印付き下線 6. **店内空間**（宴会・個室の対応力を示す）: 全幅の店内写真に白文字見出し、フロア写真2枚並び、横書き見出しと濃紺ボタン 7. **お取り寄せ**（通販へ誘導）: 金茶の枠付きボックスに写真、見出し、本文、英字の矢印リンク 8. **お知らせ**（最新情報を伝える）: 英字ラベル付きサムネイルカード、日付と題名、一覧リンク 9. **店舗情報・予約**（予約と来店情報を提供）: 瑞獣の波形境界、ロゴ、電話番号、臙脂予約ボタン、注意書き箱、情報表 10. **アクセス**（道順を示す）: 入口写真にキャプション、路線一覧、地図埋め込み 11. **フッター**（再度の予約導線）: 焦げ茶地に金色ロゴ、電話、臙脂予約ボタン、営業情報、SNSシェア ## Imagery - 料理は照り・湯気が見える寄りの暖色ライティング - 暗い背景で料理を浮かび上がらせる撮影を名物で使う - 夜のネオンや提灯など街の情緒を伝える写真 - 店内は明るく整った宴会場・個室の広角 - 金茶の雲文・瑞獣・唐草の線画装飾 - 和紙のような繊維テクスチャの背景 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにグローバルナビ・電話・右上の臙脂予約ボタン - PC のコンセプトは写真・縦書き見出し・本文を3列に配置 - PC の名物料理は見出し本文と大写真を左右に、料理札写真を2列 - PC の店舗情報はロゴ・予約を左、情報表を右の2カラム - SP は全て1カラム縦積み、下部に固定メニューバー ## Agent Prompt Guide ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-a8860f9a`（元 LP の URL から採番） - **元 LP**: https://www.cantonhanten.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。