--- version: alpha name: Refreshing Aqua Gradient Beer EC LP description: 濃い青からシアンへ流れるグラデーションを全面の地にした、爽快感重視の酒類EC LP。白の太いゴシック体と大きな欧文セリフのロゴ風見出し、泡・水滴の写真、SNS風の吹き出しコラージュで軽やかさと話題性を出す。CTAは水色グラデのピル型ボタン。 colors: primary: '#0062A9' secondary: '#0099DA' accent-1: '#00E4E9' background: '#DBF3FA' cta: '#14BBE2' on-cta: '#FEFDF5' on-dark: '#F7FEFE' text: '#048DC4' accent-2: '#DCC65F' surface: '#FEFEFE' line: '#5CCBE7' accent-3: '#62D9ED' text-accessible: '#0374A1' cta-accessible: '#0E7F99' typography: display: fontFamily: Cinzel fontSize: 56px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.12em headline-md: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.7 accent: fontFamily: Roboto fontSize: 26px fontWeight: 700 lineHeight: 1.2 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.04em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 34px button-outline: textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 28px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 28px numbered-feature: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 50px heading-shadow: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 70px staff-comment: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 200px price-block: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 50px contact-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 46px footer-links: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 35px --- # DESIGN.md — 青から水色へのグラデの爽快ビールEC LP（Refreshing Aqua Gradient Beer EC LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 清潔・爽やか、クール・先進的、ポップ・元気 - **キーワード**: 青グラデーション・白抜き文字・泡と水滴・吹き出しコラージュ・爽快・夏 - **地の質感**: なめらかな縦グラデーションに泡の粒やシズル写真を重ねた、透明感のある質感 - **形**: 角丸の吹き出し、ピル型ボタン、直線の区切り線。セクション境界は直線 - **温度感**: 寒色中心。ビールの黄金色が唯一の暖色アクセント ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0062A9` | ブランドの濃い青（グラデ起点・情報セクション地） | 18% | 画素の主要色に補正 | | `secondary` | `#0099DA` | 中間の青（グラデ中間・フッター地） | 20% | 画素の主要色に補正 | | `accent-1` | `#00E4E9` | 明るいシアン（グラデ終点） | 8% | 画素の実測 | | `background` | `#DBF3FA` | 写真背景の淡い水色 | 9% | 画素の主要色に補正 | | `cta` | `#14BBE2` | カートボタンの水色 | 1% | 画素の実測 | | `on-cta` | `#FEFDF5` | ボタン文字 | 0% | 画素の主要色に補正 | | `on-dark` | `#F7FEFE` | 青地の白文字 | 4% | 画素の実測 | | `text` | `#048DC4` | 淡色地の見出し青文字 | 2% | 画素の実測 | | `accent-2` | `#DCC65F` | ビールの黄金色 | 6% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 吹き出し・問い合わせボタンの白 | 4% | 画素の実測 | | `line` | `#5CCBE7` | フッターリンクの区切り線 | 0% | 画素の主要色に補正 | | `accent-3` | `#62D9ED` | ロゴ中段のミントグリーン | 0% | 画素の実測 | | `text-accessible` | `#0374A1` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#0E7F99` | AA を満たす補正値（計算） | | 計算 | - 地は濃い青→シアンの縦グラデーションを基本とし、セクションごとに起点の濃さを変える - 青地の文字はすべて白。淡い水色地のときだけ青文字を使う - 暖色は商品写真のビールの黄金色だけに任せ、UIには使わない - CTAは地より一段明るい水色グラデのピル型で白文字 - 吹き出しは白地に青文字、ところどころ青地に白文字を混ぜる - 注意書きや情報セクションは濃い青地に白文字で落ち着かせる - `page` は文字 `#048DC4` × 背景 `#DBF3FA` のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0374A1`、4.53:1）を使う。 - `button-primary` は文字 `#FEFDF5` × 背景 `#14BBE2` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#0E7F99`、4.56:1）を使う。 - `speech-bubble` は文字 `#048DC4` × 背景 `#FEFEFE` のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0374A1`、4.58:1）を使う。 - `contact-button` は文字 `#048DC4` × 背景 `#FEFEFE` のコントラスト比が 3.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-accessible`（`#0374A1`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ブランド名の大きな欧文ロゴ見出し | 欧文セリフ | Cinzel | 500 | 56px | 1.1 | 0.02em | | `headline-lg` | FVのコンセプト文・縦書きキャッチ | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.5 | 0.12em | | `headline-md` | セクション見出し（白抜き＋影文字） | ゴシック | Noto Sans JP | 900 | 26px | 1.35 | 0.02em | | `headline-sm` | 商品名・特長番号見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `body-md` | 説明文・購入時の注意 | ゴシック | Noto Sans JP | 700 | 11px | 1.7 | 0.0em | | `accent` | 価格の数字 | 欧文サンセリフ | Roboto | 700 | 26px | 1.2 | 0.0em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 9px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.0 | 0.04em | - 本文も含め太めのゴシックで、青地でも読みやすくする - コンセプト文は字間を広げ、白の大きい文字で4〜5行に組む - ブランド名だけ細めの欧文セリフで品よく見せる - 見出しには半透明の同じ文字をずらして重ね、残像のようにする - 淡色の写真の上は濃い青の縦書き大見出しにする - 価格は数字を大きく、単位と税込表記を小さくする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は写真に番号付きリストを重ねる - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の色面で、内側の文字は左右約9%の余白をとる - 商品購入ブロックは中央揃えで、商品画像→商品名→価格→ボタンの順 - 仕様や注意書きは左揃えで、ラベルと値を2列に並べる - 写真は全幅で区切りとして挟む - 画面右に追従するチャットボタンを置く ## Elevation & Depth - 基本はフラットで、影は使わない - 吹き出しにだけごく薄い影をつけて重なりを出す - 見出しは影文字（ずらした半透明の文字）で奥行きを出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は角丸なしで全幅に裁ち落とす。人物写真は小さな正方形 - **セクション境界**: 直線。色面またはグラデの切り替えで区切る - CTA・サブボタンはどちらもピル型 - 吹き出しは角丸の長方形に小さなしっぽをつける - フッターリンクは細い横線で区切る ## Components - **カート投入ボタン**（`button-primary`）: 水色グラデのピル型。左にカートアイコン、白文字 - **枠線サブボタン**（`button-outline`）: 白い細枠のピル型で透明地。トップへ戻るなどに使う - **口コミ吹き出し**（`speech-bubble`）: 白または青の角丸吹き出しに短い感想と絵文字を入れ、FVを埋め尽くすコラージュにする - **番号付き特長**（`numbered-feature`）: 斜線つきの01〜03の番号と2行の太字説明を、写真の上に縦に3つ並べる - **影文字見出し**（`heading-shadow`）: 白い太字見出しの後ろに半透明の同じ文字をずらして重ね、一部をカギ括弧で強調する - **担当者コメント**（`staff-comment`）: 小さな人物写真の横に白地マーカーのキャッチ、肩書き、その下に本文 - **価格表示**（`price-block`）: 大きな数字の価格に、小さな税込表記と枠で囲んだ送料込みバッジを添える - **問い合わせボタン**（`contact-button`）: 白地の大きなピル型。アイコン付きの見出しと小さな補足文を2行で入れる - **フッターリンクリスト**（`footer-links`）: 中央揃えの白文字リンクを細い横線で区切って縦に並べる ## Do's and Don'ts **Do** - 地は必ず青→シアンのグラデーションにして爽快感を保つ - 白い太字ゴシックで大きく言い切る - 泡・水滴・冷えた缶などシズル感のある写真を全幅で使う - 購入ブロックは商品画像・価格・ボタンを中央に縦に並べる - 飲酒の注意表記と年齢確認のマークをフッターに入れる **Don't** - 赤やオレンジなど暖色のUIを入れない - 細い明朝の本文にしない - 白地ベースの平らなページにしない - 角ばった四角ボタンを使わない - 装飾の影やベベルを重くしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴとマイページ・カートへの導線）: 白地の細い帯。左にロゴ、右にアイコン2つとハンバーガー 2. **ファーストビュー**（話題性と商品の印象づけ）: 青い背景を吹き出しで埋め尽くし、中央下から冷えた缶を大きく見せる 3. **コンセプトと購入**（商品の世界観を伝えすぐ購入へ）: 濃い青→シアンのグラデに欧文ロゴ、大きな白いコンセプト文、価格、カートボタン 4. **特長**（味の特徴を3つに絞って伝える）: 淡い水色地のビールグラス写真に、縦書き大見出しと01〜03の番号リストを重ねる 5. **開発者の声**（作り手の想いで共感を得る）: 泡の粒が散る青地に影文字見出し、人物写真付きのコメント 6. **商品購入・仕様**（購入と商品情報の明示）: 缶の画像、商品名、価格、ボタン、その下に仕様と注記を左揃えの2列で 7. **購入時の注意**（販売期間・送料・発送時期を伝える）: 下線付きの白い見出しと、小見出しごとの左揃えテキスト 8. **イメージ写真**（締めのシズル演出）: 黄金色の泡を背景に缶をアップで写した全幅写真 9. **ブランド締め**（運営ブランドの紹介とトップへの導線）: 短い2行コピー、大きなロゴ、枠線のピル型ボタン 10. **フッター**（問い合わせと規約類）: 問い合わせ先、白いピル型の問い合わせボタン、線で区切ったリンク、飲酒注意 ## Imagery - 冷えた缶に水滴をまとわせ、ローアングルで大きく写す - グラスのビールは泡があふれる瞬間を、淡い水色の背景で撮る - 背景にはビールの泡をマクロで撮った黄金色のボケを使う - 青地に白い気泡の粒を散らし、水中のような質感を出す - SNS風の短い感想を吹き出しにして大量に重ねる - 人物は笑顔の小さな顔写真で親しみを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも全幅の色面で、中身は中央寄せのまま横幅を広げる - PCのFVは吹き出しコラージュを左右に広げ、缶を中央に置く - PCのコンセプト文は1行の文字数を増やし、さらに大きくする - PCの特長は写真を中央、番号リストを左、縦書き見出しを右に配置する - PCの購入ブロックは左に商品画像、右に価格と仕様の2カラム - PCのフッターは問い合わせ先と問い合わせボタンを横に並べ、リンクを1行にする ## 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-493387c3`（元 LP の URL から採番） - **元 LP**: https://fantasy-lp.asahibeer.co.jp/aquary/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。