--- version: alpha name: Dark Cask Premium Liqueur LP description: 樽が並ぶ暗い貯蔵庫写真を全面背景に固定し、その上にボルドー・赤銅・金色の角丸パネルを縦に積む高級酒LP。明朝体の中央揃えと金グラデーションのボタンで、熟成感と格調を出す。 colors: primary: '#5A2123' background: '#010101' dark-section: '#1C0902' secondary: '#7B2E12' accent-1: '#220C0F' accent-2: '#B3A47D' cta: '#C3A16C' on-cta: '#FFFFFF' on-dark: '#FFFFFF' marker: '#DC0213' line: '#D9C2B0' accent-3: '#D4AE78' background-alt: '#ECF4F7' text: '#0E0E0E' cta-accessible: '#92713C' typography: display: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Noto Serif JP fontSize: 26px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.02em accent: fontFamily: Cormorant Garamond fontSize: 28px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 10px full: 999px spacing: unit: 8px card: 24px section: 45px 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.sm}' height: 44px panel-wine: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 600px panel-product: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 900px badge-release: backgroundColor: '{colors.marker}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px heading-divider: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 1px product-link-card: backgroundColor: '{colors.primary}' textColor: '{colors.accent-3}' typography: '{typography.headline-sm}' height: 115px video-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 700px spec-list: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 80px --- # DESIGN.md — 樽暗色×ボルドーの熟成梅酒 LP（Dark Cask Premium Liqueur LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、和風 - **キーワード**: 樽貯蔵・熟成・ボルドー・金箔・明朝体・暗い背景 - **地の質感**: 暗い樽写真の背景に、ほぼ単色のワイン色パネルを重ねる。ボタンだけ金のメタリックグラデーション - **形**: 角丸が小さめの縦長パネル。中に細い金の罫線や枠線を入れる - **温度感**: 暖色・低明度。琥珀色の酒が光るような温かい暗さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5A2123` | メインパネルのボルドー | 30% | 画素の実測 | | `background` | `#010101` | ページ地の黒（樽写真の下地） | 30% | 画素の実測 | | `dark-section` | `#1C0902` | 樽写真の暗い茶黒 | 12% | 画素の実測 | | `secondary` | `#7B2E12` | 商品パネルの赤銅色 | 9% | 画素の実測 | | `accent-1` | `#220C0F` | 深い黒紫の商品パネル | 7% | 画素の実測 | | `accent-2` | `#B3A47D` | 限定品パネルのシャンパンゴールド | 6% | 画素の実測 | | `cta` | `#C3A16C` | 金グラデーションボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | パネル上の本文白 | 3% | 画素の主要色に補正 | | `marker` | `#DC0213` | 発売日バッジの赤 | 0% | 画素の実測 | | `line` | `#D9C2B0` | パネル内の細い区切り線 | 0% | 推定 | | `accent-3` | `#D4AE78` | 見出しの金文字 | 0% | 推定 | | `background-alt` | `#ECF4F7` | フッターの淡い青灰 | 4% | 画素の実測 | | `text` | `#0E0E0E` | フッター文字 | 0% | 画素の実測 | | `cta-accessible` | `#92713C` | AA を満たす補正値（計算） | | 計算 | - 地は常に黒＋暗い樽写真。白地のセクションは作らない（フッター除く） - パネル色は内容で使い分け：一般説明はボルドー、商品ごとに赤銅・黒紫・シャンパンゴールドを割り当てる - 購入ボタンだけ金のグラデーションにして目立たせる - 赤は発売日・数量限定バッジだけに使う - パネル上の文字は白。見出しを金色にするのは誘導パネルだけ - 区切り線と枠線は淡い金色・ベージュの細線 - `button-primary` は文字 `#FFFFFF` × 背景 `#C3A16C` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#92713C`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 36px | 1.1 | 0.05em | | `headline-lg` | パネルの見出し（2行） | 明朝 | Noto Serif JP | 400 | 26px | 1.4 | 0.12em | | `headline-md` | 商品名 | 明朝 | Noto Serif JP | 700 | 20px | 1.5 | 0.03em | | `headline-sm` | 商品のリード文（2行） | 明朝 | Noto Serif JP | 700 | 16px | 1.6 | 0.03em | | `body-md` | 説明本文 | 明朝 | Noto Serif JP | 700 | 14px | 1.9 | 0.03em | | `note` | 容量・価格・注記 | 明朝 | Noto Serif JP | 700 | 12px | 1.8 | 0.02em | | `accent` | 英字の見出し | 欧文セリフ | Cormorant Garamond | 400 | 28px | 1.2 | 0.04em | | `label-button` | ボタン（和文＋英字2段） | 明朝 | Noto Serif JP | 500 | 15px | 1.2 | 0.08em | - 全体を明朝体で統一し、ゴシックはフッターだけ - 見出しは中央揃えで字間を広く取る - 本文は左揃えで太め明朝、行間は広め - 商品名は副題を〈〉で囲み、3段に分けて中央に積む - ボタンは和文の下に小さな英字を添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。パネルは中央に置き、左右から背景の樽が見える - **本文ブロックの幅**: 画面幅の約 80% - **余白**: セクション間 45px、基本単位 8px、カード内 24px（375px 幅換算） - パネルとパネルの間から背景写真をのぞかせる - 見出しの下に細い線を引いてから本文を置く - 商品パネルは商品名→ボトル写真→リード→本文→スペック→ボタンの順 - ボトル写真は切り抜きでグラスと並べる - パネル幅は全セクションで揃える ## Elevation & Depth - 影はほぼ使わず、色の濃淡だけで重なりを出す - パネルは暗い背景の上に平らに置く - ボタンは金グラデーションで少し立体的に見せる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は白抜きの切り抜き。風景写真は角丸なしの長方形 - **セクション境界**: 区切りは直線。パネル同士の隙間で区切る - パネルの角丸は8px程度に控える - ボタンは角丸小さめの長方形 - 発売バッジは円か、角丸の大きいピル - 内枠は細い線で長方形に囲む ## Components - **金グラデーション購入ボタン**（`button-primary`）: 金のメタリックグラデーション。和文と英字の2段で中央揃え - **ボルドーパネル**（`panel-wine`）: 説明用の角丸パネル。見出し・区切り線・本文・写真を入れる - **商品別カラーパネル**（`panel-product`）: 商品ごとに赤銅・黒紫・金色を割り当てたパネル - **発売日バッジ**（`badge-release`）: 赤い円かピル型に白い明朝で日付・限定を書く - **見出し下の区切り線**（`heading-divider`）: 中央揃えの見出しの下に、パネル幅いっぱいの細い線を引く - **枠線付き商品リンク**（`product-link-card`）: 上下の細い線で囲み、左に商品名、右にボトル写真 - **動画＋説明カード**（`video-card`）: 上に動画を埋め込み、下にボルドーの説明エリアをつなげる - **スペック表記**（`spec-list`）: 容量・度数・価格を小さな太字で行ごとに並べ、注記を添える ## Do's and Don'ts **Do** - 背景は暗い樽の貯蔵庫写真で固定する - 文字は明朝で統一し、見出しは中央揃えにする - 商品ごとにパネル色を変えて区別する - 購入導線は金ボタンだけにまとめる - ボトルは切り抜き写真でグラスと並べる **Don't** - 白や明るい色の地のセクションを作らない - 原色やポップな色をバッジ以外に使わない - 丸ゴシックや手書き体を使わない - 大きな角丸・ピル型のパネルにしない - 強い影や光るエフェクトを付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（原酒・樽の世界観を見せる）: 暗い樽の前でグラスを持つ写真。右に縦書き明朝の大見出し、中央に小さなコピーと商品名 2. **オンラインショップ誘導**（早めに購入先を示す）: ボルドーパネルに英字見出し・短文・金ボタン 3. **ブランドムービー**（動画で製法を伝える）: 動画の下にボルドーの説明エリアをつなげ、区切り線の下に本文 4. **商品ナビ**（各商品へ移動させる）: 細い枠線のカードを縦に2つ。商品名とボトル写真 5. **製法の特長**（樽貯蔵のこだわりを説明する）: 字間の広い2行見出し、区切り線、本文、蒸溜所の写真 6. **飲み方提案**（ロックやソーダ割りを提案する）: 見出し・本文の下にグラス2つの切り抜き写真 7. **商品詳細1**（定番商品を紹介する）: 赤銅パネルにボトル・赤い円バッジ・リード・スペック・金ボタン 8. **商品詳細2**（上位商品を紹介する）: 黒紫パネルに同じ構成 9. **限定商品**（数量限定品を紹介する）: シャンパンゴールドのパネルに赤いピルバッジとボトル・箱の写真 10. **ラインナップ誘導**（ほかの商品へ案内する）: 金の内枠付きボルドーパネルに金の見出しと商品の集合写真 11. **フッター**（サイト内リンクと飲酒の注意）: 白・淡い青灰の地にアコーディオンとバナーを並べる ## Imagery - 背景は樽が並ぶ暗い貯蔵庫。照明は暖色で低め、周辺を暗くする - FVは手に持ったロックグラスを逆光で写し、琥珀色を光らせる - 商品ボトルとグラスは白抜きの切り抜きで、少し斜めから - グラスは氷入りで、酒の琥珀色が透けて見えるように - 風景写真は緑の自然と建物を自然な色で - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでもパネルは幅を絞って中央に置き、背景の樽を左右に見せる - PCの商品パネルは左にボトル写真、右にテキストの横並び - PCの誘導パネルは横長にして、テキストとボタンを左右に分ける - PCの商品ナビカードは2つ横並び - FVの縦書き見出しはPCでも右上に置く - フッターはPCで4カラムのリンク一覧にする ## 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-ef7f226c`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/new/umeshu/?fromid=001&_ga=2.268839729.1146867458.1753166244-1772456316.1753166244 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。