--- version: alpha name: Crimson Velvet Gold Hotel Cafe LP description: 深い赤のベルベット調の地に、金色のセリフ体見出しと明朝体の本文を重ねた季節限定ドリンクLP。ホテルのような上質さを演出しつつ、円形切り抜きの商品写真、星と五角形のバッジ、ドアハンガー型のカードで遊び心を加えている。 colors: background: '#7C0102' background-alt: '#6C0203' primary: '#D3A06D' cta: '#C9A164' on-cta: '#561101' text: '#DBBEA1' line: '#C9A063' accent-1: '#BA1A2C' dark-section: '#350201' accent-2: '#030C29' secondary: '#BB1B30' accent-1-accessible: '#E54356' typography: display: fontFamily: DM Serif Display fontSize: 48px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0.01em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Shippori Mincho fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 140px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px text-link-underline: textColor: '{colors.text}' typography: '{typography.body-md}' height: 28px badge-star-pentagon: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 160px heading-serif-en: textColor: '{colors.primary}' typography: '{typography.display}' height: 130px card-door-hanger: backgroundColor: '{colors.accent-1}' textColor: '{colors.dark-section}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 520px tag-outline-small: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px product-block: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 560px --- # DESIGN.md — 深紅ベルベット×金の高級カフェ季節LP（Crimson Velvet Gold Hotel Cafe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト - **キーワード**: 深紅・金・ベルベット・ホテル・季節限定・シズル - **地の質感**: 粒子ノイズのある深紅ベルベット地に、斜めに差す光の筋とビネットを重ねる - **形**: 円形の写真切り抜き、星をのせた五角形バッジ、ピル型ボタン、ドアハンガー型のカード - **温度感**: 暖色で重厚。夜のホテルラウンジのような温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#7C0102` | ページ全体の深紅ベルベット地 | 70% | 画素の実測 | | `background-alt` | `#6C0203` | 画面端・影側の暗い赤 | 10% | 画素の実測 | | `primary` | `#D3A06D` | 金色の見出し・ブランドを代表する色 | 3% | 画素の実測 | | `cta` | `#C9A164` | 商品詳細へのピル型ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#561101` | 金ボタン上の濃い赤茶の文字 | 0% | 画素の実測 | | `text` | `#DBBEA1` | 金色の本文・商品名テキスト | 2% | 画素の主要色に補正 | | `line` | `#C9A063` | アウトラインボタン・バッジの細い金線 | 0% | 推定 | | `accent-1` | `#BA1A2C` | ドアハンガー型カードの明るい赤 | 3% | 画素の実測 | | `dark-section` | `#350201` | ドアハンガーの円窓の黒褐色 | 1% | 画素の実測 | | `accent-2` | `#030C29` | ファーストビュー下部の濃紺大理石 | 2% | 画素の実測 | | `secondary` | `#BB1B30` | ドアハンガー内のローズ赤の英字見出し | 0% | 画素の実測 | | `accent-1-accessible` | `#E54356` | AA を満たす補正値（計算） | | 計算 | - 地は深紅のベルベット一色で通し、セクションごとに地色を変えない - 文字・線・ボタンは金系のみで統一し、白文字は使わない - 主ボタンは金の塗り、サブボタンは金の細線のアウトラインにする - 明るい赤の面は特別な案内カード 1 か所だけに限定する - 写真の白・緑・青は商品自身の色に任せ、装飾には加えない - ファーストビューのみ濃紺の大理石を入れ、赤へグラデーションでつなぐ - `card-door-hanger` は文字 `#350201` × 背景 `#BA1A2C` のコントラスト比が 2.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E54356`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション大見出し | 欧文セリフ | DM Serif Display | 700 | 48px | 1.05 | 0.01em | | `headline-lg` | 導入のキャッチ（日本語） | 明朝 | Shippori Mincho | 700 | 28px | 1.6 | 0.08em | | `headline-md` | 商品名 | 明朝 | Shippori Mincho | 600 | 19px | 1.5 | 0.04em | | `headline-sm` | 五角形バッジ内の素材名 | 明朝 | Shippori Mincho | 600 | 16px | 1.5 | 0.08em | | `body-md` | 導入文・商品説明 | 明朝 | Noto Serif JP | 500 | 14px | 1.9 | 0.05em | | `accent` | 価格・容量表記 | 欧文サンセリフ | Montserrat | 500 | 16px | 1.4 | 0.02em | | `note` | 注釈（※） | 明朝 | Noto Serif JP | 500 | 11px | 1.6 | 0.03em | | `label-button` | ボタンのラベル | 明朝 | Shippori Mincho | 700 | 15px | 1.2 | 0.05em | - 日本語は全て明朝体にし、ゴシック体は使わない - セクション見出しは大文字の英字セリフ体を 2〜3 行で中央に組む - 英字見出しの下に日本語のリード文を 2 行添える - 価格は欧文サンセリフ体にして明朝と対比させる - 導入文は中央揃えにし、短く改行して詩のように並べる - 商品説明は左揃えにし、写真と反対側に寄せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は写真と文字を左右交互に半分ずつずらして配置 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 140px、基本単位 8px、カード内 24px（375px 幅換算） - セクション間に大きな赤い余白を取り、ゆったり見せる - 商品ブロックは写真→リード→商品名→価格→ボタンの順に縦に積む - 写真は画面端にはみ出させ、左右交互に配置する - 各カテゴリの末尾に一覧へのアウトラインボタンを中央に置く - 素材説明のバッジは円形写真に半分重ねて配置する ## Elevation & Depth - 影はほぼ使わず、平面の上に切り抜き写真を置く - 円形写真の背後に一回り大きい暗赤の円を敷いて奥行きを出す - 背景に斜めの光の筋とビネットを入れて立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜き。シズルカットは円形にクロップし、背後に暗赤の円を敷く - **セクション境界**: 区切り線は使わず、余白と背景の光の変化で区切る - ボタンは全てピル型にする - 素材バッジは細い金線の五角形（下向き）に金の星をのせる - 特別な案内はドアハンガー型の赤いカードにする - カード画像は角丸 8px 程度にする ## Components - **金のピル型主ボタン**（`button-primary`）: 商品詳細へ誘導する金の塗りボタン。幅は約 7 割 - **金線アウトラインボタン**（`button-outline`）: 一覧ページへのサブ導線。透明の面に金の 1px 線と金文字 - **下線付きテキストリンク**（`text-link-underline`）: アレルゲン等の情報へのリンク。金文字に金の下線 - **星付き五角形バッジ**（`badge-star-pentagon`）: 金の細線の五角形に、上から金の星を重ねる。素材名を 2 行で入れ、3 つ並べることもある - **英字セリフ大見出し**（`heading-serif-en`）: 金色の大文字セリフ体を 2〜3 行で中央に組む - **ドアハンガー型案内カード**（`card-door-hanger`）: 赤いドアノブ掛けの形。円窓に英字見出しと建物アイコン、下に説明文と鍵モチーフのボタン - **小型アウトラインタグ**（`tag-outline-small`）: 価格横に置く属性ラベル。金線の角丸小枠 - **商品ブロック**（`product-block`）: 切り抜き写真、短いリード、商品名、価格、主ボタンを左右交互にずらして並べる ## Do's and Don'ts **Do** - 地は深紅のベルベット調で統一し、粒子ノイズと光の筋を加える - 文字・線・ボタンは金系の色に限定する - 日本語は明朝体、見出しは英字セリフ体にする - 商品写真は切り抜きにして左右交互に配置する - 主導線は金の塗り、副導線は金線のピル型ボタンにする - ホテルや鍵、星などの上質なモチーフを細線で添える **Don't** - 白背景や白い面のセクションを挟まない - ゴシック体や丸ゴシック体を使わない - 原色のポップな強調色や吹き出しを入れない - 写真に四角い枠や影の強いカードを使わない - 情報を詰め込みすぎて余白を潰さない - 金以外の色を線や装飾に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（主役ドリンクの世界観を一目で伝える）: カーテンと大理石カウンターの上に商品写真。下部に金のセリフ体ロゴと建物アイコン、注釈を置き、紺から赤へグラデーションでつなぐ 2. **導入メッセージ**（体験への招待と商品の概要を伝える）: 明朝体の大きなキャッチを 3 行で中央に、続けて短く改行した導入文を並べる 3. **素材・特長の紹介**（構成要素ごとの魅力を伝える）: 円形クロップのシズル写真に星付き五角形バッジと短い説明文を左右交互に重ねる。3 素材は横並びにする 4. **商品情報**（価格と詳細への導線を示す）: 切り抜き写真の下に商品名、価格、タグ、注釈、金の主ボタン、一覧へのアウトラインボタン、下線付きリンクを並べる 5. **特別案内**（ブランドの特設ページへ誘導する）: ドアハンガー型の赤いカードに円窓の英字見出しと鍵モチーフのボタンを置く 6. **スイーツ紹介**（合わせて買えるフードを紹介する）: 英字大見出しの後、切り抜き写真と文字を左右交互に配置した商品ブロックを並べる 7. **コーヒー豆紹介**（関連する物販を紹介する）: パッケージ写真を中央に置き、商品名、容量と価格、説明、主ボタンを左揃えで続ける 8. **季節グッズ紹介**（タンブラー等のグッズを紹介する）: 縦長の商品写真と文字を左右交互に組み、末尾に特集へのアウトラインボタンを置く 9. **ギフトカード紹介**（プリペイドカードやデジタルギフトへ誘導する）: 英字見出しと日本語リード、角丸のカード画像の下に主ボタンとアウトラインボタンを縦に並べる ## Imagery - 商品は背景を抜いた切り抜き写真にし、水滴や果肉のシズル感を強調する - ファーストビューは赤いカーテンと黒い大理石の上で、暗いバーのような照明で撮る - 素材のアップは円形にクロップし、背後に暗赤の円を敷く - 苺などの果物を添えて季節感を出す - 装飾は金の細線のアイコン（建物・鍵・星）だけにする - 背景には斜めの光の筋と粒子ノイズを薄く重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC も赤い地のまま中央寄せにし、コンテンツ幅は約 7 割にする - PC のファーストビューはロゴを左、商品写真を右に置く横構図にする - PC では商品写真と文字を左右 2 カラムで並べる - コーヒー豆は PC で 2 列、季節グッズは 3 列のグリッドにする - ギフトカードは PC でカード画像を左、ボタンを右に配置する - PC でも見出しは中央寄せにし、文字サイズは SP の 1.2 倍程度にする ## 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-8be69e6d`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/the-ichigo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。