--- version: alpha name: Vivid Blue Yellow Pop Beverage Campaign LP description: 原色に近いブルーとレモンイエローを大きな面で交互に使う、元気でにぎやかなノンアル飲料のタイアップLP。極太ゴシックの立体見出し、放射線の集中背景、切り抜き写真のコラージュ、白い角丸カードで情報を整理している。 colors: primary: '#016BFF' secondary: '#FCFF00' background: '#FFFFFF' background-alt: '#FFFFFF' cta: '#026BFE' on-cta: '#F3FEFF' dark-section: '#0B0B44' accent-1: '#F0D96F' text: '#075FE7' on-dark: '#FAFDFE' accent-2: '#FEEA03' tint-1: '#4B8DCA' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-brand-link: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 72px heading-3d: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 80px panel-feature: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 260px card-article: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 360px card-topic: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 170px step-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 100px slider-arrow: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 56px spec-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 170px --- # DESIGN.md — 青×黄レモン色のポップな飲料キャンペーンLP（Vivid Blue Yellow Pop Beverage Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型 - **キーワード**: 原色ブルー×イエロー・放射線背景・切り抜きコラージュ・極太立体見出し・角丸カード・マンガ的演出 - **地の質感**: フラットな原色面に放射状の光線と雲・波の和柄、薄い英字ループ文字を重ねたにぎやかな質感 - **形**: 大きめ角丸の白カード、片側だけ角を落とした青パネル、ピル型ボタンと円形矢印 - **温度感**: 高温・陽気。夏っぽく明るい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#016BFF` | ブランドブルー。セクション地・パネル・見出し文字 | 30% | 画素の実測 | | `secondary` | `#FCFF00` | レモンイエロー。セクション地・カード地 | 25% | 画素の実測 | | `background` | `#FFFFFF` | 白カード・トピック帯の地 | 20% | 画素の実測 | | `background-alt` | `#FFFFFF` | フッター周辺の薄グレー地 | 3% | 画素の実測 | | `cta` | `#026BFE` | 外部サイト誘導の青ピルボタン | 2% | 画素の実測 | | `on-cta` | `#F3FEFF` | ボタン上の白文字 | 0% | 画素の実測 | | `dark-section` | `#0B0B44` | 商品スペック表示の濃紺パネル | 2% | 画素の実測 | | `accent-1` | `#F0D96F` | スペック表示の黄色文字 | 0% | 画素の主要色に補正 | | `text` | `#075FE7` | 黄地・白地の青見出し・本文 | 3% | 画素の実測 | | `on-dark` | `#FAFDFE` | 青地の白文字 | 2% | 画素の実測 | | `accent-2` | `#FEEA03` | 放射線の明るい黄 | 4% | 画素の実測 | | `tint-1` | `#4B8DCA` | 青地に敷く薄い英字ループ文字 | 3% | 画素の主要色に補正 | - 青と黄をセクションごとに交互に全面で敷き、境界をはっきり切り替える - 黄地には青文字、青地には白文字のみを使う - 情報量の多い所は白の角丸カードに載せて読みやすくする - 見出しは白文字に青の太縁取り＋影、または青文字に白縁取りで立体感を出す - 濃紺は商品スペックパネルにだけ限定して使う - 黒は使わず、テキストも青系で統一する ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインコピーの立体見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | セクション見出し（縁取り付き） | ゴシック | Dela Gothic One | 900 | 28px | 1.3 | 0.02em | | `headline-md` | 青パネル見出し・イベント見出し | ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.4 | 0.04em | | `headline-sm` | カードタイトル（白帯・斜め） | ゴシック | M PLUS Rounded 1c | 800 | 17px | 1.4 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.8 | 0.04em | | `accent` | 英字ラベル・日付 | 欧文サンセリフ | Montserrat | 700 | 13px | 1.4 | 0.04em | | `label-button` | ボタン文字 | ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.3 | 0.04em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.02em | - 全体を太字（700以上）で統一し、細い書体は使わない - 大見出しは白文字＋青の太い縁取り＋ずらし影で立体化 - 本文も中央寄せ・太字で短い行に区切る - カードタイトルは白帯にのせて少し傾ける - 英字はボールドの幾何学サンセリフで小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、カードはスライダーまたは縦積み - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白の大カードを画面幅いっぱい近くに置き、その中に青パネルを縦に積む - 青パネルは左寄せで右端に切り抜き写真をはみ出させる - 手順は大きな顔写真3つに番号丸を添えて三角配置 - トピック・イベントは左右矢印付き横スライダー - セクション間は地色の切り替えで区切る ## Elevation & Depth - 影はほぼ使わずフラット - 見出し文字だけに青のずらし影を付ける - 切り抜き写真に軽いドロップシャドウ - 白カードは影なしで地色とのコントラストで浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 人物・料理・商品は背景を抜いた切り抜き、記事サムネは角丸矩形 - **セクション境界**: 直線で地色を切り替える。雲・波の和柄を境界に添える - カード右下に円弧状の矢印タブを付ける - スライダー矢印は白縁の円形ボタン - 青パネルは右側だけ大きく角丸 - 吹き出しは白地に青太線の雲形 ## Components - **商品画像付きピルボタン**（`button-brand-link`）: 左に缶画像をはみ出させた青ピル。上に白い小ラベル、右端に白丸の外部リンクアイコン - **立体縁取り見出し**（`heading-3d`）: 白文字に青の太縁と影、放射線背景の上に置く - **特長ブルーパネル**（`panel-feature`）: 白文字の見出しと本文、右上に切り抜き写真がはみ出す - **記事カード**（`card-article`）: 黄地にサムネ、傾いた白帯タイトル、著者ラベル、日付、右下の白い円弧矢印 - **トピックカード**（`card-topic`）: 白地＋青太枠、左上に黄色の斜めカテゴリラベル - **番号丸**（`step-number`）: 青の小円に白数字、下に青太字の説明 - **雲形吹き出し**（`speech-bubble`）: 白地に青太線の吹き出しで見出しを囲む - **スライダー矢印**（`slider-arrow`）: 青地に白縁の円形ボタン - **商品スペックパネル**（`spec-panel`）: 濃紺の角丸に黄の手書き風商品名と成分数値 ## Do's and Don'ts **Do** - 青と黄の原色面を大胆に切り替える - 人物・料理・レモンを切り抜きで画面端からはみ出させる - 見出しには縁取りと影で立体感を出す - 放射線や効果線でマンガ的な勢いを足す - 情報は白の角丸カードに整理する **Don't** - くすんだ中間色や黒文字を使わない - 細字・明朝体を使わない - 写真を四角いまま平置きにしない - 余白を広く取りすぎて静かな印象にしない - 青・黄以外の主張色を増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画テーマと商品を一目で伝える）: 放射線の黄背景に人物と料理・商品のコラージュ、中央に立体見出し、外周に青帯の英字ループ 2. **トピックス**（最新記事への導線）: 白地に青枠カードの横スライダー、ドット送りと円形矢印 3. **コンセプト説明**（企画用語の意味を伝える）: 黄地に大きな立体見出しと中央寄せの青太字本文、周囲に料理の切り抜き 4. **楽しみ方（手順）**（3ステップで体験を示す）: 放射線背景に大きな顔の切り抜き3つと番号丸 5. **商品の特長**（商品の魅力を3点で訴求）: 白い大カード内に青パネルを縦積み、写真がはみ出す 6. **専門家の推薦**（第三者の信頼付け）: 丸枠の人物写真、青の肩書きラベル、青文字のコメント 7. **ブランドサイト誘導CTA**（公式サイトへ送客）: 缶画像付き青ピルボタン 8. **スペシャルコンテンツ**（記事群で回遊させる）: 雲形吹き出し見出し、青地に薄い英字ループ、黄の記事カードを縦積み 9. **イベント情報**（体験イベントの開催施設を案内）: 青地に白文字見出し、黄枠の施設カードスライダーと詳細ピルボタン 10. **商品紹介**（商品スペックの提示）: 黄地に缶とジョッキの写真、濃紺のスペックパネル、再度CTA 11. **投稿キャンペーン**（参加型施策へ誘導）: 青地の白カードに青太字、区切り線、キーワードを青ベタ白抜き 12. **フッター**（運営ロゴとSNS）: 白地に青ロゴとSNSアイコン、小さなコピーライト ## Imagery - 人物は明るい表情の正面写真を背景ごと切り抜き、顔だけの大きな切り抜きも多用 - 料理・レモン・小物（アヒル、手桶など）を切り抜きで散らす - 手前のレモンはぼかして奥行きを出す - 背景に放射状の光線・きらめき・和柄の雲と波 - マンガのコマや効果音文字をアクセントに使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約1000pxに収め、地色は全幅で敷く - 特長パネルは PC で3カラム横並び - 記事カードは PC で3枚横並びスライダー - イベントは PC で左に見出し・右に施設カードの2カラム - ファーストビューは 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-45a525be`（元 LP の URL から採番） - **元 LP**: https://sauna-ikitai.com/special/mikaku/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。