--- version: alpha name: Bold Black Type Amber Beverage LP description: 白い地に極太の黒ゴシックを大きく組み、泡立つ琥珀色の液体写真と赤い手描き風ラインで勢いを出す飲料プロモーション LP。モノクロの人物写真と缶の商品写真をコラージュし、広告ポスターのような力強さを持たせている。 colors: background: '#FFFFFF' primary: '#F8C02D' text: '#000000' accent-1: '#E20C0B' cta: '#E60012' on-cta: '#FEF8F8' dark-section: '#010101' accent-2: '#CD7033' background-alt: '#ECF4F7' surface: '#FEFEFE' line: '#0F0E0B' text-muted: '#595B50' secondary: '#41B6E6' typography: display: fontFamily: Dela Gothic One fontSize: 90px fontWeight: 900 lineHeight: 1.05 letterSpacing: -0.02em headline-lg: fontFamily: Anton fontSize: 56px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 32px fontWeight: 900 lineHeight: 1.3 headline-sm: fontFamily: Noto Sans JP fontSize: 27px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 900 lineHeight: 1.2 body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 900 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 rounded: sm: 0px md: 2px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' en-section-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 90px red-stroke-label: textColor: '{colors.text}' typography: '{typography.body-md}' height: 40px badge-tilted: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' height: 30px burst-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 110px nutrition-table: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' height: 200px video-card: textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px process-icons: backgroundColor: '{colors.background}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px footer-link-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 65px --- # DESIGN.md — 白地×極太黒文字×琥珀色の飲料 LP（Bold Black Type Amber Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、シンプル・ミニマル - **キーワード**: 極太ゴシック・琥珀の泡・白地・赤ライン・モノクロ人物・ポスター風 - **地の質感**: 白地はフラット。液体の泡や水滴の写真で質感を足す - **形**: 角のない四角が基本。写真は斜めの帯状や円形に切り抜く - **温度感**: 暖色の琥珀と赤が主役。黒と白で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地 | 57% | 画素の実測 | | `primary` | `#F8C02D` | 琥珀色の液体イメージ | 7% | 画素の主要色に補正 | | `text` | `#000000` | 極太見出しの文字 | 6% | 画素の実測 | | `accent-1` | `#E20C0B` | 赤い手描きラインと小見出し | 1% | 画素の実測 | | `cta` | `#E60012` | 強調ラベルの赤帯 | 0% | 推定 | | `on-cta` | `#FEF8F8` | 赤帯上の白文字 | 0% | 画素の実測 | | `dark-section` | `#010101` | 成分表の見出しセル | 1% | 画素の実測 | | `accent-2` | `#CD7033` | 液体の焼き色・グラデ端 | 3% | 画素の主要色に補正 | | `background-alt` | `#ECF4F7` | フッター地 | 7% | 画素の実測 | | `surface` | `#FEFEFE` | フッターのリンクカード | 3% | 画素の実測 | | `line` | `#0F0E0B` | 成分表の罫線・区切り線 | 0% | 画素の主要色に補正 | | `text-muted` | `#595B50` | 注釈・補足 | 0% | 画素の主要色に補正 | | `secondary` | `#41B6E6` | ヘッダーの企業ロゴ色 | 0% | 推定 | - 地は白にする。色の面は液体写真の帯だけで作る - 見出しは黒一色。強調したい語だけ文字サイズを上げる - 赤は手描きライン・小見出し・ラベル帯だけに使う - 琥珀色は写真やグラデで出し、ベタ塗りの面にはしない - フッターだけ淡い水色グレーの地に切り替える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦組み大コピー | ゴシック | Dela Gothic One | 900 | 90px | 1.05 | -0.02em | | `headline-lg` | 英字のセクション見出し | 欧文サンセリフ | Anton | 900 | 56px | 1.0 | 0.02em | | `headline-md` | 特長の大見出し | ゴシック | Noto Sans JP | 900 | 32px | 1.3 | 0.0em | | `headline-sm` | 特長の見出し | ゴシック | Noto Sans JP | 800 | 27px | 1.35 | 0.02em | | `accent` | 赤い和文の小見出し | ゴシック | Noto Sans JP | 900 | 18px | 1.2 | 0.0em | | `body-lg` | ステートメント文 | ゴシック | Noto Sans JP | 900 | 17px | 1.5 | 0.0em | | `body-md` | 説明・動画タイトル | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.0em | | `note` | 注釈・成分値 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | - 見出しは極太で詰め気味に組む - 強調したい語だけ大きくし、助詞は小さくする - 英字見出しはコンデンス系の極太体で横幅いっぱいに置く - 英字見出しの左上に赤い和文の小見出しを斜めの線で添える - 本文も太字にして、ポスターのような密度を保つ - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は缶写真を左、文字を右に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算） - FV は人物と缶と大コピーを重ねたコラージュにする - セクションの間は白い余白を大きくとる - 特長ブロックは商品写真を左端に寄せ、はみ出させる - 表は商品写真の右に置き、2 列で組む - フッターは全幅の淡い地にカードを 2 列で並べる ## Elevation & Depth - 影は基本使わずフラットにする - 商品缶の下に薄い落ち影を付けるのみ - ヘッダーの下にごく薄い影を付ける ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 原料写真は円形。液体写真は斜めの帯や全幅の帯で切り抜く - **セクション境界**: 直線。液体写真の帯がセクション間のつなぎになる - 角丸は使わない - 赤ラベルは少し傾けた長方形にする - アイコンは細い線の円の中に置く ## Components - **英字セクション見出し**（`en-section-title`）: 極太の英字見出しの左上に、赤い和文の小見出しと赤い斜線 2 本を添える - **赤線付き小見出し**（`red-stroke-label`）: 上下に赤い手描き風の斜線を入れた短い見出し - **傾いた赤ラベル**（`badge-tilted`）: 赤地に白い太字。少し傾けて見出しの下に重ねる - **爆発型バッジ**（`burst-badge`）: 白地に赤線のギザギザ吹き出し。中に赤い強調語を入れる - **成分表**（`nutrition-table`）: 左が黒地に白文字、右が白地に黒文字の 2 列表。行ごとに区切る - **動画カード**（`video-card`）: 16:9 のサムネイルの中央に白い円形の再生アイコン。下に太字のタイトル - **工程アイコン列**（`process-icons`）: 細い線の円にイラストを入れ、小さな三角でつなげて 3 つ並べる - **フッターリンクカード**（`footer-link-card`）: 淡い地の上に白い矩形カードを 2 列で並べ、中央にロゴ文字を置く ## Do's and Don'ts **Do** - 見出しは画面幅いっぱいに極太で大きく組む - 琥珀色の泡や水滴の写真で温度感を出す - 赤は線とラベルに絞って使う - 人物はモノクロにして商品のカラーを目立たせる - 白い余白を大きくとり、要素の密度を緩急で見せる **Don't** - 角丸のボタンやパステル色を使わない - 細い明朝体で見出しを組まない - 琥珀色をベタ塗りの背景に広く使わない - 赤を本文に使わない - ドロップシャドウで立体感を出さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（企業ロゴとメニュー）: 白地に左ロゴ、右ハンバーガー。薄い影を付ける 2. **ファーストビュー**（商品とコピーで一瞬で惹きつける）: 縦組みの極太コピー、手持ちの缶、モノクロ人物、琥珀の斜め帯、爆発バッジを重ねる 3. **ステートメント**（商品の思想を語る）: 琥珀の帯の上に太字の短文を 10 行ほど並べ、締めのコピーと缶を添える 4. **ブランド訴求**（技術の裏付けを示す）: 全幅の泡写真の帯から白地へ切り替え、強調語だけ大きい極太見出し 5. **特長**（味の根拠を 2 点示す）: 左に缶、右に赤線付き小見出しと大見出し。円形の原料写真や工程アイコンを添える 6. **製品情報**（容量と成分を示す）: 英字見出しの下に缶写真と黒白 2 列の成分表 7. **動画**（CM を見せる）: 16:9 動画カードを縦に 2 本並べる 8. **ギャラリー**（広告ビジュアルを並べる）: 横スクロールの広告画像帯を 2 段にする 9. **新着情報**（お知らせ）: 英字見出しに傾いた赤ラベルを重ねる 10. **フッター**（企業サイトへの導線と注意表記）: アコーディオンメニュー、淡い地にリンクカード、SNS アイコン、飲酒の注意書き ## Imagery - 人物は高コントラストのモノクロ写真にし、大げさな表情で切り抜く - 液体は泡や水滴のあるマクロ写真。斜めの帯状に切り抜く - 商品缶は正面から撮り、白背景で切り抜く - 原料は円形に切り抜いた自然光の写真にする - アイコンは細い線と黄土色の差し色のイラストにする - 手描き風の赤い斜線を装飾に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにグローバルナビを横並びで出す - PC の FV は横長のコラージュにし、コピーは左寄せの縦組み - PC のステートメントは縦書きにする - PC の成分表は 2×2 の横並びにする - PC の動画は 2 本を横に並べる - PC のフッターは 4 列のリンク一覧とカード 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-515cf6f7`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/non-al/thebezers/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。