--- version: alpha name: Fresh Navy and Gold Non-Alcohol Beverage LP description: 白〜淡いグレーの紙っぽい地に、濃紺のセリフ英字見出しと金色の小見出しを組み合わせたブランドサイト型 LP。商品缶と水しぶき・泡の写真で清涼感を出す。ライム緑のバナー帯、柑橘オレンジと緑の吹き出しで変化をつけている。 colors: primary: '#014199' on-primary: '#FFFFFF' secondary: '#BF9C5E' cta: '#D6B04A' on-cta: '#FFFFFF' background: '#FFFFFF' background-alt: '#F9FAFB' accent-1: '#5DBE2E' accent-2: '#3C8E61' accent-3: '#D98656' tint-1: '#D69739' dark-section: '#141E5C' text: '#272321' surface: '#E9E7E8' cta-accessible: '#8F7120' tint-1-accessible: '#9F6C21' accent-2-accessible: '#317550' typography: display: fontFamily: Playfair Display fontSize: 26px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.03em accent: fontFamily: Zen Maru Gothic fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 18px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px button-gold-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px badge-zero: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 76px gradient-bar-heading: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' height: 30px voice-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.sm}' height: 110px faq-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 150px ingredient-circle: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 130px --- # DESIGN.md — 紺×金の爽やかノンアル飲料ブランド LP（Fresh Navy and Gold Non-Alcohol Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 清潔・爽やか、信頼・誠実、ポップ・元気 - **キーワード**: 清涼感・濃紺セリフ英字・金のアクセント・水しぶき・円形写真・吹き出しの声 - **地の質感**: 白地にごく薄いグレーのざらっとした紙のテクスチャ。写真は明るい高彩度で、水しぶきは切り抜き合成。 - **形**: 円形の写真と円形バッジ、ピル型ボタン、角丸が小さい吹き出しカード、金のグラデーション帯。 - **温度感**: やや寒色寄り。爽やかな青と白をベースに、金と柑橘色で温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#014199` | 英字見出し・主ボタンの濃紺 | 3% | 画素の実測 | | `on-primary` | `#FFFFFF` | 紺ボタン上の白文字 | 1% | 画素の主要色に補正 | | `secondary` | `#BF9C5E` | 日本語小見出し・容量表記の金色 | 1% | 画素の実測 | | `cta` | `#D6B04A` | 金グラデーションのCTA帯 | 2% | 推定 | | `on-cta` | `#FFFFFF` | 金帯上の文字 | 0% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページ地の白 | 36% | 画素の実測 | | `background-alt` | `#F9FAFB` | 紙風の薄グレー地 | 25% | 画素の実測 | | `accent-1` | `#5DBE2E` | ライム緑のバナー帯 | 5% | 推定 | | `accent-2` | `#3C8E61` | 緑の吹き出し文字 | 0% | 画素の実測 | | `accent-3` | `#D98656` | 柑橘オレンジの吹き出し文字・ラベル | 0% | 画素の実測 | | `tint-1` | `#D69739` | 金の円形ゼロバッジ | 1% | 画素の実測 | | `dark-section` | `#141E5C` | 紺→水色グラデ見出し帯の濃部 | 0% | 推定 | | `text` | `#272321` | 本文の黒 | 2% | 画素の実測 | | `surface` | `#E9E7E8` | カテゴリ見出しの薄グレー帯 | 1% | 画素の実測 | | `cta-accessible` | `#8F7120` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#9F6C21` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#317550` | AA を満たす補正値（計算） | | 計算 | - 地は白と紙風の薄グレーを交互に使う。 - 英字大見出しと主ボタンは濃紺で統一する。 - 日本語の小見出しは金色で英字の上に小さく置く。 - 金グラデーションは重要な CTA 帯だけに使う。 - 派生商品の紹介は緑や柑橘色の帯で区切り、本流と分ける。 - 吹き出しの文字は緑とオレンジを交互に使い、要点を太字にする。 - `button-gold-band` は文字 `#FFFFFF` × 背景 `#D6B04A` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8F7120`、4.61:1）を使う。 - `badge-zero` は文字 `#FFFFFF` × 背景 `#D69739` のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#9F6C21`、4.52:1）を使う。 - `voice-bubble` は文字 `#3C8E61` × 背景 `#E9E7E8` のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#317550`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 欧文セリフ | Playfair Display | 800 | 26px | 1.2 | 0.04em | | `headline-md` | 英字の上の日本語小見出し（金） | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.1em | | `headline-lg` | 特長の見出し（線つき） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.02em | | `headline-sm` | こだわり項目名・グラデ帯見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.0 | 0.03em | | `accent` | 吹き出しのお客様の声 | 丸ゴシック | Zen Maru Gothic | 500 | 14px | 1.9 | 0.06em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - セクション見出しは金の日本語小見出し＋紺セリフ英字の 2 段で中央揃えにする。 - 本文は行間 2.0 前後とゆったり組む。 - 吹き出しは丸ゴシックの細めのウエイトで、要点だけ太字にする。 - 商品名は紺の太字、容量は金色で角括弧に入れる。 - 注釈は 10px 前後のグレーで本文から離す。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特長は円形写真とテキストの 2 列、商品一覧は 2〜4 列のグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 90px、基本単位 8px、カード内 18px（375px 幅換算） - セクション見出しは中央、本文は左揃え。 - 円形の写真は左、説明文は右に置く。 - 吹き出しカードは左右に少しずらしてジグザグに積む。 - 動画サムネイルは横幅いっぱいの 16:9 で、下にキャプションを中央揃えで置く。 - 商品一覧はカテゴリごとに薄グレーの帯見出しで区切る。 ## Elevation & Depth - 吹き出しカードにはごく薄い影（0 2px 8px rgba(0,0,0,0.08)）をつける。 - バナー画像にも軽い影をつけて地から浮かせる。 - ボタンは影なしのフラットにする。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 素材写真は正円で切り抜き、商品は背景を抜いた切り抜き。動画サムネイルは角丸なしの長方形。 - **セクション境界**: 直線で区切る。地の色の切り替えか、全幅のカラー帯で区切る。 - ゼロ訴求は円形バッジを 2×2 で並べる。 - FAQ は細い紺線の円に「？」を重ねる。 - 吹き出しには三角のしっぽをつける。 - グラデ帯見出しは角丸なしの横長帯にする。 ## Components - **2段セクション見出し**（`section-heading`）: 金の小さな日本語の上に紺セリフの英字大見出しを中央に置く - **金グラデCTA帯**（`button-gold-band`）: 幅いっぱいの金グラデーション帯に白い太字 - **紺ピルボタン**（`button-primary`）: 商品詳細・FAQ への主ボタン - **紺枠ピルボタン**（`button-outline`）: 白地に紺の細枠と紺文字のサブボタン - **円形ゼロバッジ**（`badge-zero`）: 金の正円に白文字で「〇〇ゼロ」を 2 行で入れる - **紺→水色グラデ見出し帯**（`gradient-bar-heading`）: 左が濃紺、右が水色の横帯に白文字の中見出し - **声の吹き出しカード**（`voice-bubble`）: 白カードにしっぽと薄い影。緑かオレンジの文字で、要点を太字にする - **FAQ円カード**（`faq-circle`）: 紺の細線の円に大きな「？」と質問文。下にグラスのイラストを重ねる - **素材の円形写真**（`ingredient-circle`）: 正円の写真の右に太字見出しと 2 行の説明文 ## Do's and Don'ts **Do** - 見出しは必ず金の日本語＋紺セリフ英字の 2 段にする。 - 商品は切り抜きにし、水しぶきや泡と組み合わせて清涼感を出す。 - 数値の訴求は円形バッジで短く見せる。 - ボタンは紺の塗りと紺の枠の 2 種だけに絞る。 - セクション間の余白は大きめに取る。 **Don't** - 暗い背景を大きな面で使わない。 - 金を本文の文字色に使わない。 - 角の尖った四角ボタンは使わない。 - 写真をくすんだトーンにしない。 - 吹き出しに 3 色以上の文字色を混ぜない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と出演者で印象づける）: 全幅のキービジュアル。缶を並べた背景、青白ストライプ、太い紺のロゴ、笑顔の 3 人 2. **キャンペーン**（開催中のキャンペーンを知らせる）: 2 段見出しと、中央揃えの短い一文 3. **製品紹介**（主力商品とリニューアルを伝える）: ロゴと缶・泡のグラスの切り抜き、左揃えの本文、人物の切り抜き、金の CTA 帯 4. **素材のこだわり**（原料の品質を伝える）: 円形写真とテキストを 3 段に並べる 5. **ゼロ訴求**（機能的な価値を伝える）: 下線つき見出し、缶の写真、金の円形バッジ 2×2、補足文 6. **派生商品バナー**（新しいフレーバーへ誘導する）: ライム緑のグラデーション帯に斜体の白い太字、白い円バッジ、金のボタン 7. **新シリーズ紹介**（新シリーズの味を紹介する）: 缶と水しぶき、グラデ見出し帯、味ごとのピル型ラベル、円形の素材アイコン 8. **お客様の声**（共感と信頼をつくる）: 吹き出しカードを左右にずらして積み、最後にグラスの写真と調査の注釈 9. **広告ギャラリー**（CM で親しみを出す）: 16:9 の動画サムネイルに再生アイコン、下にキャプション 10. **よくある質問**（不安を解消する）: 線画の円カードを 2+1 で並べ、下に紺のピルボタン 11. **ラインナップ**（商品一覧から詳細へ誘導する）: 缶を並べたグリッドに紺の商品名と金の容量、塗りと枠のボタン、カテゴリ帯 12. **フッター**（関連リンクと注意事項）: アコーディオン、淡い水色地のバナーグリッド、SNS アイコン、飲酒の注意書き ## Imagery - 商品の缶・瓶は正面から撮って背景を抜き、白地に置く。 - 水しぶきや泡立つグラスを合成して冷たさを出す。 - 人物は自然光の屋外か白い室内で、ジョッキを持って笑う明るいトーン。 - 麦・ホップ・渓流などの素材写真は正円で切り抜く。 - 柑橘の皮やハーブは白い円に載せた小さな切り抜きにする。 - FAQ のグラスは小さなドット装飾と組み合わせる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文の幅を約 760px に絞って中央に寄せ、左右に余白を取る。 - PC では素材の円形写真を横 3 列に並べる。 - PC ではゼロ訴求を缶とテキストの左右 2 カラムにし、バッジは横 1 列にする。 - PC では吹き出しを 2 列に散らして配置する。 - PC ではギャラリーを 2×2、FAQ を 3 列に並べる。 - PC ではラインナップのカテゴリを枠で囲み、横に並べる。 ## 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-c8b3dc8a`（元 LP の URL から採番） - **元 LP**: https://www.suntory.co.jp/non-al/allfree/?fromid=001&_ga=2.53899112.1146867458.1753166244-1772456316.1753166244 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。