--- version: alpha name: Metallic Silver Blue-Red Beverage Guide LP description: 青空と缶のキービジュアルから入る飲料の使い方ガイド LP。ヘアライン調の銀背景に白パネルを重ね、見出し帯は青、注意と強調は赤で示す。番号付きの手順写真と図解で、正しい開け方と注意点を順に伝える。 colors: primary: '#077CC2' secondary: '#D4010D' cta: '#D6010E' on-cta: '#FFF3F4' background: '#DCDCDC' surface: '#FDFEFD' background-alt: '#F2F2F2' tint-1: '#EDF4FC' text: '#000000' accent-1: '#017CC3' dark-section: '#064293' on-dark: '#FFFFFF' marker: '#D3020C' primary-accessible: '#077AC0' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.5 accent: fontFamily: Roboto fontSize: 40px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.04em rounded: sm: 0px md: 2px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-header-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 46px outline-title: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 44px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 42px spec-table: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' height: 64px step-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 380px warning-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px red-marker: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 24px illust-diagram: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 260px --- # DESIGN.md — 銀ヘアライン×青赤の飲料使い方ガイド LP（Metallic Silver Blue-Red Beverage Guide LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 力強い・インパクト、清潔・爽やか、情報量多め・訴求型、信頼・誠実 - **キーワード**: ヘアライン銀・青空・赤の斜め帯・注意喚起・手順図解・冷たさ - **地の質感**: 金属のヘアライン調グレー背景。白パネルはフラットに重ねる - **形**: ほぼ角丸なしの四角パネルと帯。斜めに傾けた赤ラベルでキービジュアルに動きを出す - **温度感**: 冷たく爽快。赤のアクセントで熱量を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#077CC2` | 見出し帯・枠線・主ボタン | 12% | 画素の実測 | | `secondary` | `#D4010D` | ブランド赤の帯・注意見出し | 3% | 画素の実測 | | `cta` | `#D6010E` | 問い合わせボタン | 1% | 画素の実測 | | `on-cta` | `#FFF3F4` | ボタン上の文字 | 0% | 画素の実測 | | `background` | `#DCDCDC` | ヘアライン銀の地 | 40% | 画素の実測 | | `surface` | `#FDFEFD` | 内容パネル | 24% | 画素の実測 | | `background-alt` | `#F2F2F2` | 手順カードの地 | 5% | 画素の実測 | | `tint-1` | `#EDF4FC` | SNS枠の薄青 | 7% | 画素の実測 | | `text` | `#000000` | 見出し・本文の黒 | 3% | 画素の実測 | | `accent-1` | `#017CC3` | キービジュアルの空色 | 8% | 画素の主要色に補正 | | `dark-section` | `#064293` | フッター帯 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い地の文字 | 0% | 画素の主要色に補正 | | `marker` | `#D3020C` | 赤い帯マーカーで強調する本文 | 0% | 画素の実測 | | `primary-accessible` | `#077AC0` | AA を満たす補正値（計算） | | 計算 | - 地はヘアライン銀で統一し、内容は白パネルに載せる - セクション見出しの帯と主ボタンは青 primary で統一 - 注意文と重要語は赤文字、または赤地に白文字で示す - 購入・問い合わせ導線のボタンは赤 cta - キービジュアルだけ青空を使い、爽快感を担わせる - フッターは濃紺の帯で締める - `section-header-bar` は文字 `#FFFFFF` × 背景 `#077CC2` のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077AC0`、4.61:1）を使う。 - `outline-title` は文字 `#077CC2` × 背景 `#FDFEFD` のコントラスト比が 4.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077AC0`、4.56:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#077CC2` のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077AC0`、4.61:1）を使う。 - `warning-banner` は文字 `#FFFFFF` × 背景 `#077CC2` のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#077AC0`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キービジュアルの斜体キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 48px | 1.1 | 0.0em | | `headline-lg` | 注意喚起の特大見出し | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.02em | | `headline-md` | 青帯・枠見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.08em | | `headline-sm` | 図解の小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.02em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.5 | 0.0em | | `accent` | 電話番号・スペック数値 | 欧文サンセリフ | Roboto | 700 | 40px | 1.1 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.3 | 0.04em | - 全体を太いゴシックで統一し、明朝は使わない - キャッチは斜体の極太にし、白文字に影をつける - 特大見出しは上下に黒い太罫線で挟む - 強調語は赤文字にするか、赤地に白文字のマーカーにする - 数値は大きな欧文で示し、ラベルは青帯に小さく載せる - 見出しは中央揃え、注釈は左揃え - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。スペック表と製品一覧は 3 列 - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 白パネルは左右 12px ほど余白を空けて置く - セクションは青帯の見出しから始める - 手順カードは灰色の地に写真と説明を縦に積む - 問い合わせボックスは黒い細線の枠で囲む - アコーディオンの右端に－記号を置く ## Elevation & Depth - 影はほぼ使わない。面の色差と枠線で区切る - キービジュアルの文字だけに強い影をつける - フッターのピル型ボタンに薄い影をつける ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 999px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は四角で裁ち落とす。商品は切り抜いて配置する - **セクション境界**: 直線。セクション間はヘアライン地の余白で区切る - 主なボタンは角丸なしの長方形 - 斜め帯のラベルを傾けて勢いを出す - 番号は黒い四角に白抜き数字 - フッター内のボタンだけピル型にする ## Components - **青帯見出し**（`section-header-bar`）: 全幅の青帯に白い太字を中央に置き、右端に－記号を置く - **青枠見出し**（`outline-title`）: 白地を青の2px線で囲み、青文字の見出しを載せる - **赤の問い合わせボタン**（`button-cta`）: 赤地に白い太字。右端に外部リンクのアイコン - **青の詳細ボタン**（`button-primary`）: 青地に白文字。右端に矢印 - **3項目スペック表**（`spec-table`）: 青帯のラベルの下に白セルで大きな数値を示す - **番号付き手順カード**（`step-card`）: 灰色の地に正方形の写真を置く。左上に黒四角の番号、下に説明と赤の強調語 - **注意帯**（`warning-banner`）: 青地に✕アイコンと白い太字の警告文 - **赤マーカー強調**（`red-marker`）: 重要な文を赤地に白文字にし、行ごとに帯をつける - **○✕図解**（`illust-diagram`）: 白黒の線画に赤い○と✕、黒丸の番号を添える ## Do's and Don'ts **Do** - 地にヘアラインの銀を敷き、内容は白パネルで区切る - 見出しは青帯か青枠で統一する - 注意点は赤で示し、✕と○で直感的に伝える - 手順は番号付きの写真で 1 ステップずつ見せる - 数値や電話番号は大きく太く載せる **Don't** - パステルや淡いくすみ色を持ち込まない - ボタンを大きく丸めない - 赤を本文全体に使いすぎない - 細い明朝や手書き書体を使わない - 未成年の飲酒防止表記を省かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の魅力を一瞬で伝える）: 青空を背景に、斜めの極太キャッチと赤帯ラベルを置く。缶とジョッキの写真を大きく見せる 2. **お知らせ帯**（販売状況と注意を告知する）: 赤帯と青帯に白い小さな文字を載せる 3. **飲み方の注意**（最も大事な前提を伝える）: 青枠の見出しを置き、黒罫線で挟んだ特大コピーを続ける。丸窓の写真を添える 4. **スペック表**（容量・温度・時間を示す）: 3列の表を置き、下に※注釈を並べる 5. **問い合わせ**（トラブル時の連絡先を示す）: 青い警告帯の下に、赤ボタンと電話番号をそれぞれ枠で囲んで置く 6. **手順解説**（正しい使い方を教える）: 青帯の見出しを置き、番号付きの写真カードを 2 枚並べる 7. **NG例図解**（誤った使い方を防ぐ）: 線画を○✕で比較し、黒丸番号の小見出しをつける 8. **取り扱い注意**（持ち運び時の注意）: 青帯の見出しの下に、赤マーカーで強調した文を置く 9. **誘導バナー**（関連ページへ誘導する）: 切り抜きの缶写真に太字の見出しを添え、下に赤帯のリンクをつける 10. **技術訴求**（安全性の強みを示す）: 青い枠の中に白線で挟んだ見出しを置き、写真と丸い拡大図を組み合わせる 11. **製品情報**（ラインナップと詳細への導線）: 製品写真を 3 点並べ、青ボタンと注意表記を続ける 12. **フッター**（サイト内リンク・SNS・法定表示）: リンク一覧と薄青の SNS 枠を置き、最後に濃紺の帯で締める ## Imagery - 結露した缶とあふれる泡を、青空と白い雲を背景に高コントラストで撮る - 手順写真は木目の机の上で、手元をクローズアップした正方形にする - 図解は黒い線画に赤の○✕と赤い点をアクセントにする - 商品は背景を切り抜き、斜めに傾けて配置する - 円形の窓で部分を拡大して見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅の固定カラムに置き、左右はヘアライン地を見せる - PC のキービジュアルは横長にし、キャッチを左、商品を右に置く - PC の手順カードと図解は 2 列で横に並べる - PC の問い合わせボックスは 2 列にする - PC のフッターはリンクと SNS 枠を横並びにする ## 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-5b0cfeec`（元 LP の URL から採番） - **元 LP**: https://www.asahibeer.co.jp/dryzero/2026new/awazyokkikan/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。