--- version: alpha name: Seasonal Sweet Potato Cafe Menu LP description: 芋ペーストの質感写真を全面に敷き、黄・紫・えんじで季節の味をはっきり分けたカフェの期間限定メニューLP。商品写真が主役で、四角い漢字バッジとクレヨン調の太い丸ゴシックの見出し、円形に切り抜いた写真と短い説明文の組み合わせが続く。 colors: primary: '#920784' on-primary: '#FEFDFE' background: '#E6BA19' background-alt: '#FFF100' accent-1: '#FEF10D' dark-section: '#A21F25' on-dark: '#FFF0EE' text: '#2A2A2A' tint-1: '#F2E3C0' accent-2: '#912018' surface: '#FFFFFE' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.0 accent: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.75 letterSpacing: 0.08em label-button: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 0px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' kanji-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.display}' height: 64px date-pill: backgroundColor: '{colors.on-primary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px period-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 80px menu-headline: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px desc-band: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px anchor-thumb: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' rounded: '{rounded.sm}' height: 140px --- # DESIGN.md — 芋ペースト黄×紫の季節限定カフェメニューLP（Seasonal Sweet Potato Cafe Menu LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 季節限定・シズル写真・食材テクスチャ背景・漢字一文字バッジ・黄×紫の補色 - **地の質感**: 芋ペーストや果物断面の写真を背景に全面で敷く。テキスト帯だけはフラットな単色にする - **形**: 四角いバッジ、ピル型の日付ラベル、円形に切り抜いた商品写真 - **温度感**: 暖色寄り。秋の味覚らしい黄金色に、紫とえんじで引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#920784` | ブランドアクセントの紫（日付帯・見出し文字） | 6% | 画素の実測 | | `on-primary` | `#FEFDFE` | 紫帯の上に置くピル型ラベルの地 | 1% | 画素の実測 | | `background` | `#E6BA19` | 芋ペースト写真の基調となる黄金色 | 35% | 画素の主要色に補正 | | `background-alt` | `#FFF100` | 説明文帯のレモンイエロー | 7% | 画素の実測 | | `accent-1` | `#FEF10D` | 漢字バッジの黄色い地 | 1% | 画素の主要色に補正 | | `dark-section` | `#A21F25` | 梨メニューの説明帯・漢字バッジのえんじ | 8% | 画素の実測 | | `on-dark` | `#FFF0EE` | えんじ帯の上の本文 | 1% | 画素の実測 | | `text` | `#2A2A2A` | 黄色帯の上の本文 | 1% | 推定 | | `tint-1` | `#F2E3C0` | 梨断面写真の淡いクリーム色 | 12% | 画素の主要色に補正 | | `accent-2` | `#912018` | 梨セクションの見出し文字のえんじ | 0% | 画素の実測 | | `surface` | `#FFFFFE` | 円形写真の白い台座 | 2% | 画素の実測 | - メニューごとに地の色を決める。芋系は黄・紫、梨系はクリーム・えんじ - 写真背景のセクションと単色の説明帯を交互に置く - 紫は日付帯と芋系の見出し文字だけに使う - 漢字バッジは芋系なら黄地に紫文字、梨系ならえんじ地に黄文字 - 暗い地には白文字、明るい黄地には濃いグレーの文字 - グラデーションは使わない。色の変化は写真に任せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 漢字一文字のバッジ（大字） | 装飾・ディスプレイ | Dela Gothic One | 900 | 64px | 1.0 | 0.0em | | `accent` | バッジ横の縦組み小見出し | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.1 | 0.0em | | `headline-lg` | 商品名の見出し（欧文＋和文） | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.02em | | `headline-sm` | 写真上の小さな商品名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 16px | 1.3 | 0.05em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.75 | 0.08em | | `label-button` | 日付ラベル・リンクラベル | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.02em | - 見出しは極太で、手描き風の丸みがある書体にする - 本文も太字にして、写真背景の上でも読めるようにする - 写真の上の本文には白い縁取りか淡い影を付ける - 本文は 2〜5 行の短い段落にし、左寄せにする - 日付は数字を大きく、曜日は小さな欧文にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。説明帯は写真と文字の左右 2 分割 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 0px、基本単位 8px、カード内 24px（375px 幅換算） - セクションは隙間を空けず、背景を全幅で切り替えて区切る - メニューのセクションは「見出し→大きな商品写真→説明帯」の順に組む - 説明帯は円形写真を左端からはみ出させ、文字を右側に置く - サブメニューは写真と見出しを左右交互にずらして配置する ## Elevation & Depth - 商品の切り抜き写真には下方向に淡い影を付けて、背景から浮かせる - カードやボタンには影を付けない ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景ごと切り抜くか、白い円の中に収める - **セクション境界**: 直線で区切って単色帯に切り替える - 漢字バッジは角丸なしの正方形 - 日付ラベルは白いピル型 - 円形写真は画面端で切れるように置く ## Components - **漢字一文字バッジ**（`kanji-badge`）: 正方形の中に大きな漢字一文字と縦組みの小見出しを入れ、味のテーマを示す - **期間限定の日付ピル**（`date-pill`）: 紫の全幅帯の中央に白いピルを置き、ラベル・矢印・開始日を並べる - **日付帯**（`period-band`）: FV の直下に置く高さ約 80px の紫の帯 - **商品名見出し**（`menu-headline`）: バッジの右に、極太の丸ゴシックで商品名を 2 行で置く - **円形写真の説明帯**（`desc-band`）: 単色の帯に白い円形の写真と短い説明文を並べる - **別メニューへのサムネイルリンク**（`anchor-thumb`）: FV の隅に置く白枠付きの小さな写真。バッジと「click」ラベル付き ## Do's and Don'ts **Do** - 食材そのもののテクスチャ写真をセクション背景に使う - メニューごとにテーマ色を変え、バッジの色もそれに合わせる - 商品写真は大きく、画面幅の 7 割以上の大きさで見せる - 説明文は短く、食材名と食感を具体的に書く **Don't** - 寒色や無彩色の背景を広く使わない - 細い明朝体や細字の本文を使わない - 角丸カードを並べるような汎用 UI にしない - 写真の上に長文を載せない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節限定メニュー全体を一目で見せる）: ペーストの背景に商品を集合配置する。右上に漢字バッジ、左下に別メニューへのサムネイルを置く 2. **期間告知**（販売開始日を伝える）: 紫の全幅帯に白いピル型の日付ラベルを置く 3. **主力商品紹介**（看板のパンを訴求する）: ペーストの背景に、バッジ＋紫の見出しと大きな商品写真を置く 4. **主力商品の説明**（食材とおいしさを説明する）: レモンイエローの帯に、円形写真（左）と本文（右）を並べる 5. **サブ商品紹介**（ドリンクとパフェを紹介する）: 写真と小見出し・本文を左右交互に配置し、焼き芋の写真で余白を埋める 6. **別テーマ商品紹介**（梨のドリンクを訴求する）: 梨の断面写真を背景に、えんじのバッジと見出し、大きなグラスの写真を置く 7. **別テーマ商品の説明**（味わいを説明して締める）: えんじの帯に、円形写真と白い本文を並べる ## Imagery - 食材のペーストや果物の断面を真上から撮ったテクスチャ写真を、全面背景に敷く - 商品はやや俯瞰で切り抜き、ツヤとトッピングがはっきり見えるようにする - 焼き芋・桃などの素材写真を画面端に見切れさせて添える - 照明は明るく、暖色寄りで彩度を高めにする - イラストは使わず、写真と文字だけで構成する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 1 カラムを幅広に使い、FV は商品を横に並べる - PC の見出しは左、商品写真は右に置く 2 分割にする - 説明帯は PC でも円形写真（左）と本文（右）の構成を保つ - 日付帯は PC で高さを抑え、ピルを小さくする ## 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-d4e1a216`（元 LP の URL から採番） - **元 LP**: https://www.saint-marc-hd.jp/lp/cafe/product/oimo2026/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。