--- version: alpha name: Crimson Strawberry Seasonal Dessert Menu LP description: 深い赤のグラデーション地に、玉ボケの光、金の円、白抜きの切り抜き苺写真を散らした季節限定の苺デザートフェア LP。商品ごとに暗い赤の帯を左右交互に置き、明朝体の商品名と白いピル型の more ボタンで上品なメニューカタログに仕上げている。 colors: primary: '#AD101E' dark-section: '#8B0714' background-alt: '#950C16' background: '#FEFEFE' secondary: '#FE828D' accent-1: '#D3B472' cta: '#FEFCFE' on-cta: '#B61420' on-dark: '#FBF6F3' text: '#5A2A2A' accent-2: '#FED000' surface: '#F5E6EA' typography: display: fontFamily: Great Vibes fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Pinyon Script fontSize: 22px fontWeight: 400 lineHeight: 1.0 label-button: fontFamily: Playfair Display fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px product-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 150px badge-count: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 48px tab-variety: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px store-pill: backgroundColor: '{colors.cta}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 32px heading-slash: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 30px notice-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 300px fv-split: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 480px --- # DESIGN.md — 深紅×金箔の苺スイーツフェア LP（Crimson Strawberry Seasonal Dessert Menu LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、かわいい、力強い・インパクト - **キーワード**: 深紅・金の円・玉ボケ・切り抜き写真・明朝・季節限定 - **地の質感**: 赤の放射グラデーションに白い玉ボケと十字のきらめきを重ねた、光沢のある華やかな質感 - **形**: 横長の帯、正円の金箔丸、白いピル型ボタン、円形バッジ - **温度感**: 暖色で、甘く濃厚な印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AD101E` | メイン地の深紅 | 35% | 画素の実測 | | `dark-section` | `#8B0714` | 商品帯の暗い赤 | 20% | 画素の主要色に補正 | | `background-alt` | `#950C16` | ページ下部の最も暗い赤 | 10% | 画素の実測 | | `background` | `#FEFEFE` | 導入部の生成り白地 | 6% | 画素の実測 | | `secondary` | `#FE828D` | もう一方の品種を示すピンク | 3% | 画素の実測 | | `accent-1` | `#D3B472` | 金の円・ロゴ文字の金 | 3% | 画素の実測 | | `cta` | `#FEFCFE` | 白いピル型の more ボタン | 1% | 画素の実測 | | `on-cta` | `#B61420` | ボタン文字の赤 | 0% | 画素の主要色に補正 | | `on-dark` | `#FBF6F3` | 赤地上の白文字 | 1% | 画素の主要色に補正 | | `text` | `#5A2A2A` | 白地の見出し文字 | 0% | 推定 | | `accent-2` | `#FED000` | 店舗検索帯の黄 | 1% | 画素の実測 | | `surface` | `#F5E6EA` | 告知ボックスの淡いピンク帯 | 0% | 画素の実測 | - 地は深紅の縦グラデーションで統一し、下に行くほど暗くする - 商品情報はさらに暗い赤の帯に載せ、地と区別する - 装飾には金の円を使い、量は1商品に1〜2個に抑える - ボタンは白地に赤文字で、赤地の上で目立たせる - 2品種の切り替えは赤とピンクのタブで色分けする - 白地は導入部の説明だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の欧文筆記体ロゴ | 欧文スクリプト | Great Vibes | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | FV の縦書き品種名 | 明朝 | Shippori Mincho | 600 | 36px | 1.2 | 0.1em | | `headline-md` | セクション見出し | 明朝 | Shippori Mincho | 600 | 20px | 1.4 | 0.08em | | `headline-sm` | 商品名 | 明朝 | Noto Serif JP | 500 | 17px | 1.5 | 0.05em | | `body-md` | 商品の短いリード文と縦書きの説明文 | 明朝 | Noto Serif JP | 400 | 12px | 1.8 | 0.05em | | `note` | 価格・注釈 | 明朝 | Noto Serif JP | 400 | 11px | 1.6 | 0.03em | | `accent` | 写真に重ねる半透明の欧文筆記体 | 欧文スクリプト | Pinyon Script | 400 | 22px | 1.0 | 0.0em | | `label-button` | more ボタンの文字 | 欧文セリフ | Playfair Display | 700 | 12px | 1.0 | 0.05em | - 和文はすべて明朝で統一し、上品に見せる - 商品写真の背後には欧文筆記体の料理名を薄く重ねる - リード文は2行程度に収め、商品名の上に小さく置く - 価格は税抜を大きく、税込を括弧で小さく書く - コンセプト文は縦書きで組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央に寄せ、商品の写真と帯を左右交互に配置する - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 商品1つにつき写真＋暗い赤の帯の1ブロックとする - 写真は帯からはみ出させて立体的に重ねる - 写真と帯を左右交互に並べる - 苺の写真と玉ボケは余白にランダムに散らす - ページ末尾は2品種のタブとSNSアイコンで閉じる ## Elevation & Depth - 影はほぼ使わず、写真の切り抜きと重なりで奥行きを出す - 手前に置いた苺はぼかして被写界深度を表現する - 玉ボケと十字のきらめきで光の層を作る ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 料理は背景を抜いた切り抜き。店内などの風景は角丸なしの矩形 - **セクション境界**: 直線で区切り、地のグラデーションでなめらかにつなぐ - バッジは正円にする - タブは上側だけ角丸にした矩形 - 金の円は単色の正円で、少し質感を付ける ## Components - **more ボタン**（`button-more`）: 白いピル型で、赤い筆記体風の文字を入れる。商品帯の下側に置く - **商品帯**（`product-band`）: 暗い赤の横長帯にリード文・商品名・価格・ボタンを縦に並べ、写真を重ねる - **苺の個数バッジ**（`badge-count`）: 白い正円の中に、使っている苺の個数を赤い明朝で書く - **品種切替タブ**（`tab-variety`）: 赤とピンクの2つのタブを横に並べる。上に小さな苺アイコンと欧文ラベルを付ける - **販売店舗ボタン**（`store-pill`）: 白いピル型の幅広ボタンで、先頭に苺アイコンを付ける。見出しの下に置く - **斜線付き見出し**（`heading-slash`）: 白い明朝の見出しを、左右の斜線で挟む - **店舗限定告知ボックス**（`notice-box`）: 暗い赤の箱。上部に金の円バッジ、淡いピンクの帯に店舗名を入れ、バナー画像を載せる - **左右分割FV**（`fv-split`）: 左を赤、右をピンクにした2品種対比のFV。縦書きの品種名と、中央の光る円形コピーを置く ## Do's and Don'ts **Do** - 地は赤のグラデーションと玉ボケで華やかにする - 料理は切り抜き写真にして帯からはみ出させる - 和文は明朝、装飾には欧文筆記体を使う - 商品は写真と帯を左右交互に配置してリズムを出す - 金の円と散らした苺で余白を飾る **Don't** - ゴシック体の太字を見出しに使わない - 青や緑など寒色の面を入れない - ボタンを角張った赤ベタにしない - 金の装飾を過剰に増やさない - 商品説明を長文にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2品種の苺フェアの開始を伝える）: 赤とピンクで左右に分割し、パフェ写真、金の筆記体ロゴ、縦書きの品種名、開始日を置く 2. **導入・品種タブ**（フェアの概要と品種の選択）: 白地に罫線で挟んだ明朝見出しと短文。下に赤とピンクのタブを置く 3. **品種コンセプト**（苺の魅力を情緒的に伝える）: 赤地に白い縦書きの明朝文。苺写真を散らす 4. **販売店舗案内**（限定店舗数と店舗検索への誘導）: 斜線付きの見出しの下に白いピル型ボタンと注釈を置く 5. **商品メニュー一覧**（各デザートの紹介）: 切り抜き写真と暗い赤の帯を左右交互に並べ、名前・価格・moreボタンを載せる 6. **店舗限定告知**（特定店舗だけの限定メニューの訴求）: 暗い赤の箱に金のバッジとバナー画像、詳細ボタンを置く 7. **品種タブ再掲・SNS**（回遊とシェアの促進）: 赤とピンクのタブ、白いSNSアイコンを並べる 8. **産地紹介バナー**（ブランドストーリーへの誘導）: 農園写真のコラージュに赤い半透明を重ね、白文字とmoreボタンを置く 9. **店舗検索**（来店への誘導）: 黄色の面に、黒い枠線のピル型ボタンを置き、横に店内写真を並べる ## Imagery - パフェやパンケーキはやや俯瞰で明るく撮り、背景を白抜きにして切り抜く - 単体の苺写真を大小さまざまに散らし、一部はぼかす - 背景には白い玉ボケと十字のきらめきを重ねる - 金箔の質感をもつ正円を装飾に使う - 風景写真には赤い半透明を重ねて色をそろえる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では FV の左右分割を上下分割にするか、片方ずつ縦に並べる - SP の商品ブロックは写真を上、帯を下にした縦積みにし、交互配置はやめる - SP の縦書きコンセプト文は高さを抑え、2〜3列に収める - 品種タブは SP でも横2つ並びを保つ - SP では散らす苺の数を減らし、文字に重ならないようにする ## 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-e10ac831`（元 LP の URL から採番） - **元 LP**: https://www.dennys.jp/menu/strawberry/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。