--- version: alpha name: Strawberry Red Seasonal Dessert Menu LP description: ページ全体を深い苺レッドの地で塗り、切り抜いたデザート写真を 1 品ずつ縦に並べる季節メニュー LP。白の明朝体で商品名と価格を中央に置き、白いピル型ボタンで詳細へ誘導する。品名の英字を筆記体で写真に重ね、球体・苺・抹茶パウダーを浮かべて華やかさを出す。 colors: primary: '#CE4552' dark-section: '#C63542' background: '#FFFFFF' background-alt: '#FBEBEB' on-dark: '#FEF7F6' cta: '#FEFEFE' on-cta: '#C9424E' secondary: '#A18749' line: '#E8C58C' accent-1: '#EE4758' tint-1: '#FED5D6' accent-2: '#A4BB5B' text-muted: '#E07A86' accent-1-accessible: '#E3152A' on-cta-accessible: '#B4333F' secondary-accessible: '#8A743F' text-muted-accessible: '#CA2F41' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 21px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.6 letterSpacing: 0.1em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.12em accent: fontFamily: Great Vibes fontSize: 40px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.08em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px button-wide: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px category-tab: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 72px badge-circle: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px heading-slash: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 40px heading-rule: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 120px bubble-note: backgroundColor: '{colors.background}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 140px store-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-muted}' typography: '{typography.body-md}' height: 200px --- # DESIGN.md — 苺色×白抜き明朝の季節デザートメニュー LP（Strawberry Red Seasonal Dessert Menu LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: かわいい、上品・高級、やさしい・柔らかい - **キーワード**: 苺レッド一色・切り抜き商品写真・白抜き明朝・筆記体の英字・浮遊する球体・季節限定 - **地の質感**: 赤の地にぼかした光の粒・キラキラと淡いグラデーションを重ね、つやのある表情にする - **形**: 白いピル型ボタン、円形バッジ、細い金線の円、つや消しの球体 - **温度感**: 暖かく甘い。赤を主にし、抹茶グリーンを補色として添える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#CE4552` | ページの地の苺レッド | 55% | 画素の実測 | | `dark-section` | `#C63542` | 商品ブロック下部の濃い赤帯・フッター | 12% | 画素の実測 | | `background` | `#FFFFFF` | 導入部の白地 | 6% | 画素の実測 | | `background-alt` | `#FBEBEB` | 店舗リスト枠の淡いピンク | 2% | 画素の実測 | | `on-dark` | `#FEF7F6` | 赤地に乗る白文字 | 2% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | 白いピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#C9424E` | ボタン上の赤文字 | 0% | 画素の主要色に補正 | | `secondary` | `#A18749` | 導入見出し・本文の金茶色 | 0% | 画素の実測 | | `line` | `#E8C58C` | 導入部の金の細い罫線 | 0% | 画素の主要色に補正 | | `accent-1` | `#EE4758` | 左タブの鮮やかな赤 | 1% | 画素の実測 | | `tint-1` | `#FED5D6` | 右タブ・円バッジの淡いピンク | 2% | 画素の実測 | | `accent-2` | `#A4BB5B` | 抹茶グリーンの装飾 | 2% | 画素の実測 | | `text-muted` | `#E07A86` | 英字筆記体の透かし文字 | 0% | 推定 | | `accent-1-accessible` | `#E3152A` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#B4333F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#8A743F` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#CA2F41` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全部を苺レッドにし、白地は導入部だけにする - 商品ブロックごとに上部を明るい赤、下部を濃い赤で塗り分けて区切る - 赤地の文字はすべて白。ボタンは白地に赤文字にする - 金茶色は白地の導入見出しと罫線だけに使う - 抹茶グリーンは球体やパウダーなど装飾で少しだけ入れる - 2 種類のカテゴリは濃赤と淡ピンクのタブで区別する - `category-tab` は文字 `#FEF7F6` × 背景 `#EE4758` のコントラスト比が 3.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E3152A`、4.5:1）を使う。 - `badge-circle` は文字 `#C9424E` × 背景 `#FED5D6` のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#B4333F`、4.5:1）を使う。 - `heading-rule` は文字 `#A18749` × 背景 `#FFFFFF` のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#8A743F`、4.52:1）を使う。 - `store-list` は文字 `#E07A86` × 背景 `#FBEBEB` のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#CA2F41`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書き品種名 | 明朝 | Shippori Mincho | 500 | 48px | 1.2 | 0.05em | | `headline-lg` | 商品名 | 明朝 | Shippori Mincho | 600 | 21px | 1.5 | 0.08em | | `headline-md` | 導入見出し・限定告知 | 明朝 | Shippori Mincho | 600 | 24px | 1.6 | 0.1em | | `headline-sm` | 価格表示 | 明朝 | Noto Serif JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | キャッチ・説明文 | 明朝 | Noto Serif JP | 600 | 12px | 1.9 | 0.12em | | `accent` | 写真に重ねる英字と more ボタン | 欧文スクリプト | Great Vibes | 400 | 40px | 1.0 | 0.0em | | `note` | 注釈 | 明朝 | Noto Serif JP | 500 | 11px | 1.7 | 0.08em | | `label-button` | ボタン文字 | 明朝 | Noto Serif JP | 500 | 13px | 1.0 | 0.15em | - 和文はすべて明朝体にし、ゴシックは使わない - 商品テキストは中央揃えで、キャッチ 2 行・商品名・価格の順に並べる - 価格は税抜を大きく、税込を括弧で小さく添える - 英字の筆記体は写真の下端に斜めに重ね、半透明にする - 字間は広め（0.08em 以上）にして上品に見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム中央揃え。PC は写真とテキストを左右交互に配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 商品は 1 品ずつ縦長ブロックにする - 写真は幅 70% ほどで中央に置き、上下に余白を大きく取る - ブロックの境目は濃淡の赤帯の切り替えで示す - ボタンは幅 47% で中央に置く ## Elevation & Depth - ボタン・タブにはごく弱いドロップシャドウを付ける - 写真は切り抜きにして、下に淡い影を落とす - 浮遊する球体は立体感のある陰影付きで描く ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き。店内写真は全幅の矩形 - **セクション境界**: 直線。明るい赤から濃い赤への面の切り替え - ボタンは完全なピル型 - 数量・限定のバッジは円形 - カテゴリタブは上だけ角丸の大きいカード型 ## Components - **白ピル詳細ボタン**（`button-more`）: 赤地に白い楕円ボタンを置き、赤の筆記体で短い英語を入れる - **横長サブボタン**（`button-wide`）: 幅いっぱいの白ピル。左に苺アイコン、中央に明朝の文字 - **カテゴリ切替タブ**（`category-tab`）: 2 枚並び。上に果物イラスト、小さい英字ラベルと和文の 2 段 - **円形バッジ**（`badge-circle`）: 白か淡ピンクの円に、限定店舗数や個数を明朝で入れる - **斜線挟み見出し**（`heading-slash`）: 白い明朝の見出しを左右の二重スラッシュで挟む - **金罫線見出し**（`heading-rule`）: 白地で、小ラベルを挟んだ金の横線の下に金茶の明朝見出しを置き、下にも罫線を引く - **用語解説の吹き出し**（`bubble-note`）: 白い円形の吹き出しに、小さな英字と用語・説明文を入れる - **限定店舗リスト**（`store-list`）: 淡ピンクの箱に店名を中央揃えで並べ、上に円バッジを重ねる ## Do's and Don'ts **Do** - 1 品につき切り抜き写真 1 枚とテキスト 1 組にする - 写真のまわりに球体・苺・葉・金の細い円を散らす - 品名の英字を筆記体で写真に重ねる - 白地は導入部だけにして、あとは赤で通す - 価格は必ず税込を併記する **Don't** - ゴシック体を見出しに使わない - 赤地に赤や黒の文字を置かない - 写真を四角い枠に入れない - ボタンを角張った形や赤塗りにしない - 青など寒色を加えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2 種の限定デザートと発売日を告知する）: 上下 2 段で、商品写真に縦書きの品種名を重ねる。円バッジと発売日の手書き英字、中央に英字の筆記体ロゴを置く 2. **導入**（企画の概要を伝える）: 白地。金罫線見出しの下に金茶の明朝の説明文を置く 3. **カテゴリタブ**（2 種類のメニューへ移動する）: 濃赤と淡ピンクのタブを 2 枚並べ、上に果物イラストを乗せる 4. **素材紹介**（果物の魅力と名前の由来を語る）: 赤地に白い明朝の縦書き文章を置き、苺写真を散らす 5. **限定告知と店舗リンク**（販売店舗の確認へ誘導する）: 斜線挟みの見出し、横長の白ピルボタン、注釈 6. **商品紹介**（各メニューを 1 品ずつ見せる）: 切り抜き写真、筆記体の英字、キャッチ 2 行、商品名、価格、more ボタンの順。これを繰り返す 7. **限定店舗**（一部店舗限定メニューを案内する）: 円バッジ付きの淡ピンクのリストとバナー画像、白ピルボタン 8. **カテゴリタブ再掲**（もう一方のメニューへ回遊させる）: 冒頭と同じタブを 2 枚並べる 9. **SNS とフッター**（SNS と店舗検索へ誘導する）: 濃赤地に白い SNS アイコンを並べ、店内写真の上に店舗検索の黄色ボックスを置く ## Imagery - デザートはやや俯瞰で撮り、背景を抜いた切り抜きにして明るく瑞々しく見せる - 苺の実を被写界深度でぼかし、画面の端に浮かべる - 抹茶パウダーの飛沫と葉をアクセントに入れる - マット質感の赤やグリーンの球体と、金の細い円弧を重ねる - 背景にはボケた光の粒と星形のきらめきを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左右 2 分割にし、2 商品を並べる - PC の商品ブロックは写真とテキストを左右交互に配置する - PC でも赤地とブロックの帯の構成は同じにする - PC の導入文は横書き 1 段に広げ、タブは中央幅に収める - 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-6eac7c41`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/menu/strawberry2/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。