--- version: alpha name: Dark Silk Premium Spirits LP description: 黒を基調に、商品ごとに紫・黒・金茶・赤銅・紺のシルク布の背景で切り替える高級スピリッツのブランドLP。中央にボトルを置き、香り・味わい・余韻を細い枠のカードで左右に散らす。白い明朝の本文と細身の欧文見出しで静かな高級感を出す。 colors: background: '#020204' primary: '#1C1C1C' accent-1: '#1A0C24' accent-2: '#4E3A20' accent-3: '#7A2414' secondary: '#032443' cta: '#E3D6BB' on-cta: '#151413' on-dark: '#FFF6FF' line: '#92867A' background-alt: '#F0F0F0' dark-section: '#074193' text: '#010101' typography: display: fontFamily: UnifrakturCook fontSize: 44px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Oswald fontSize: 28px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.1em headline-sm: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 72px 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}' height: 32px flavor-card: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 150px nav-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 140px section-label-box: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 100px recipe-row: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 120px product-title: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 48px shop-logos: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' height: 80px --- # DESIGN.md — 黒と色付きシルク地の高級蒸留酒 LP（Dark Silk Premium Spirits LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ラグジュアリー・ダーク、上品・高級、クール・先進的 - **キーワード**: 漆黒・シルクのドレープ・商品色で背景を切り替え・細い枠線・明朝体・ボトルを主役に - **地の質感**: 光沢のあるサテン布のしわと、暗いスタジオのグラデーション。木樽の写真で温かみを足す - **形**: 角丸なしの四角。半透明の細い枠のカードと細い区切り線 - **温度感**: 暗くて冷たい黒を地に、各セクションで暖色や寒色の布を使い温度を変える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#020204` | ページの基調となる黒 | 35% | 画素の実測 | | `primary` | `#1C1C1C` | ブランドの黒灰（ヘッダー・ナビゲーション） | 5% | 画素の実測 | | `accent-1` | `#1A0C24` | 紫シルクのセクション地 | 8% | 画素の実測 | | `accent-2` | `#4E3A20` | 金茶シルクのセクション地 | 8% | 画素の主要色に補正 | | `accent-3` | `#7A2414` | 赤銅シルクのセクション地 | 8% | 推定 | | `secondary` | `#032443` | 紺シルクのセクション地 | 9% | 画素の実測 | | `cta` | `#E3D6BB` | 商品情報ボタンのベージュ | 0% | 画素の実測 | | `on-cta` | `#151413` | ボタン上の文字色 | 0% | 画素の主要色に補正 | | `on-dark` | `#FFF6FF` | 暗い地の上の白い見出し・本文 | 2% | 画素の実測 | | `line` | `#92867A` | フレーバーカードの細い枠と区切り線 | 0% | 画素の主要色に補正 | | `background-alt` | `#F0F0F0` | オンラインショップ欄の明るいグレー | 7% | 画素の実測 | | `dark-section` | `#074193` | 企業フッター帯の紺 | 2% | 画素の実測 | | `text` | `#010101` | 明るい地の上の文字色 | 0% | 画素の実測 | - 地は黒を基本にし、商品セクションだけをその商品のイメージ色のシルク布の写真にする - 文字は暗い地の上ではすべて白か薄いグレーにする - 強調色はボタンのベージュ一色だけにする - 枠線や区切り線は白の30〜50%の半透明にする - ページ末尾のショップ欄とフッターだけを明るいグレーと白にして、ブランド面と分ける ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し | 欧文セリフ | UnifrakturCook | 700 | 44px | 1.1 | 0.0em | | `headline-lg` | 商品名の見出し（細身・縦長の欧文） | 欧文サンセリフ | Oswald | 500 | 28px | 1.2 | 0.02em | | `headline-md` | ブランドの導入コピー | 明朝 | Shippori Mincho | 500 | 18px | 1.7 | 0.1em | | `headline-sm` | フレーバーカードの欧文ラベル | 欧文セリフ | Cormorant Garamond | 500 | 20px | 1.2 | 0.05em | | `body-md` | 説明文 | 明朝 | Noto Serif JP | 400 | 13px | 2.0 | 0.08em | | `note` | レシピの分量・容量の表記 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.05em | | `label-button` | ボタンとナビゲーションの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.1em | - 和文は明朝で統一し、字間を広めにとる - 商品名は大文字の細身の欧文で中央にそろえる - フレーバーカードは欧文ラベルの下に小さな和文の訳を添える - 本文は中央揃えで短く改行する - 太字は使わず、文字の大きさの差で階層を作る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央にボトルを置き、左右にカードを散らす 3 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 1 商品につき 1 セクションとし、背景を全幅で切り替える - ボトル写真を中心軸に置き、香り・味わい・余韻の 3 枚のカードを互い違いに並べる - おすすめの飲み方は細い横線で区切った下の段に、グラスの写真とレシピを横に並べる - 見出しの下に 2〜3 行の中央揃えの説明文を置く ## Elevation & Depth - 影はほぼ使わず、ボトルの下に映り込み（反射）を置いて奥行きを出す - カードは半透明の暗い面と細い枠だけで、浮かせない - ナビゲーションのボックスは黒い面だけで表す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: ボトルは背景を抜いた切り抜き。シーンの写真は角丸なしの四角 - **セクション境界**: 直線で背景の写真を切り替える - すべて角丸なしの直角にする - カードは正方形に近い細い枠にする - フッターのボタンだけは角丸を許す ## Components - **商品情報ボタン**（`button-primary`）: ベージュの横長の四角いボタン。商品のスペック表記の下に置く - **フレーバーカード**（`flavor-card`）: 細い枠の正方形の中に、欧文ラベル・和訳・短い説明を中央揃えで入れる - **黒いナビゲーションボックス**（`nav-box`）: 左上に固定した黒い四角に、ロゴと縦に並べたメニュー - **セクションラベルの四角**（`section-label-box`）: 黒い正方形に英字のセクション名を白で入れる - **おすすめの飲み方の行**（`recipe-row`）: グラスの写真と、カクテル名・分量表・作り方を横に並べる - **商品名の見出し**（`product-title`）: シルク地の上に、細身の大文字の欧文を中央に置く - **通販サイトへの導線**（`shop-logos`）: 明るいグレーの地に、ショップのロゴを横に並べる ## Do's and Don'ts **Do** - 商品ごとにその色に合ったシルク布の背景を使う - ボトルは中央に大きく置き、下に映り込みを付ける - 文字は白の明朝体で、余白を広くとる - カードの枠は細い半透明の線にする - 強調色はベージュのボタンだけにする **Don't** - 角丸やピル型のボタンを使わない - 鮮やかな原色のバッジや吹き出しを入れない - 太いゴシックで大きな訴求コピーを置かない - 白地のセクションをブランド面の途中に挟まない - ボトルに強いドロップシャドウを付けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と商品のラインナップを一目で見せる）: 暗いスタジオの上にロゴ風の大見出しと英字コピー、その右に並べたボトルの写真 2. **ブランドの紹介**（商品の格と特徴を伝える）: 黒地に、左はモノクロの乾杯写真、右は明朝の見出しと本文 3. **ラインナップ**（全商品を一覧で見せる）: 黒いラベルの四角、短い説明、木の台に並んだボトルの写真 4. **商品の詳細（くり返し）**（商品ごとの香り・味わい・余韻を伝える）: その商品の色のシルク地に、商品名、説明、中央のボトル、3 枚のフレーバーカード、スペック、ボタン 5. **おすすめの飲み方**（飲み方を提案して、購入後の場面を想像させる）: 区切り線の下に、グラスの写真とレシピの分量表を並べる 6. **ストーリー**（名前・ボトル・紋章の由来で歴史と信頼を伝える）: 木樽の写真から黒へ落ちていく背景に、イラストや写真と本文を左右交互に置く 7. **オンラインショップ**（購入へ誘導する）: 明るいグレーの地に、細身の英字見出しとショップのロゴを横並び 8. **フッター**（企業情報・SNS・注意の表記）: 白地にリンク一覧とSNSの枠、下端に紺の帯 ## Imagery - ボトルは暗い背景で、側面から光を当てたスタジオ写真にし、切り抜いて反射を付ける - 背景は大きくドレープを寄せたサテン布を、低い彩度と暗い色調で撮る - グラスのドリンクは白抜き、または黒地のシンプルな物撮りにする - 人物はモノクロで、乾杯の手元などを部分的に写す - 歴史を語る写真は木樽や遺跡にして、暗く温かい色にする - 紋章やボトルの線画は白い細線で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではボトルを中央に置き、フレーバーカードはその下に 2 列か 1 列で並べる - SP の商品名は 28px 前後にし、説明文は改行を減らす - ナビゲーションは SP ではハンバーガーメニューにする - PC の左右に配置した写真と本文は、SP では縦に積む - レシピの行は 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-df52023f`（元 LP の URL から採番） - **元 LP**: https://www.asahibeer.co.jp/1800tequila/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/13 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。