--- version: alpha name: Blue Wave Supplement Campaign LP with Mascot Pop description: 明るい青と黄色のポップなキャンペーン帯と、深い紺〜水色の波模様で信頼感を出す権威パートが交互に並ぶ、サプリメント通販 LP。後半は価格比較カードと長い入力フォームで完結する一体型。 colors: primary: '#2C96E1' dark-section: '#01335B' secondary: '#13B0D9' accent-1: '#FEE201' background: '#FEFEFE' background-alt: '#FFFBDE' tint-1: '#E5FAFF' accent-2: '#E4504C' marker: '#FFE14A' cta: '#3196D6' on-cta: '#F4FEFE' accent-3: '#22B43A' text: '#14286E' text-body: '#3A3A3A' cta-accessible: '#237AB1' accent-3-accessible: '#19872B' accent-2-accessible: '#C3221D' secondary-accessible: '#0E7F9C' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 24px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 body-lg: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 600 lineHeight: 1.7 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' rounded: '{rounded.full}' height: 52px button-submit: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-cta}' rounded: '{rounded.sm}' height: 60px badge-speech: backgroundColor: '{colors.marker}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 280px price-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 560px testimonial-text: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.body-lg}' height: 180px form-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 44px form-section-header: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 64px --- # DESIGN.md — 青と黄のキャラコラボ健康食品通販 LP（Blue Wave Supplement Campaign LP with Mascot Pop） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 信頼・誠実、ポップ・元気、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 青のグラデーション・キャラクターコラボ・明朝の権威訴求・黄色の特典帯・価格カード・一体型フォーム - **地の質感**: 前半は光の粒や波線のある深い青の写真調背景。キャンペーン部は無地のベタ塗りでフラット。 - **形**: V 字の切り込みでセクションをつなぐ。特典カードは大きな角丸の白カード。ボタンはピル型で立体的な影付き。 - **温度感**: クールな青が基調。黄色と赤の価格表示で温かみと緊急感を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2C96E1` | キャンペーン帯の青 | | 画素の実測 | | `dark-section` | `#01335B` | 権威訴求の紺背景 | | 画素の実測 | | `secondary` | `#13B0D9` | お客様の声の水色背景 | | 画素の主要色に補正 | | `accent-1` | `#FEE201` | 特典セクションの黄背景 | | 画素の実測 | | `background` | `#FEFEFE` | 基本の白地 | | 画素の実測 | | `background-alt` | `#FFFBDE` | 単品購入の淡黄地 | | 画素の実測 | | `tint-1` | `#E5FAFF` | フォーム項目見出しの淡水色 | | 画素の実測 | | `accent-2` | `#E4504C` | 価格・割引の赤 | | 画素の実測 | | `marker` | `#FFE14A` | 見出しの黄マーカー | | 推定 | | `cta` | `#3196D6` | 購入ボタンの青 | | 画素の主要色に補正 | | `on-cta` | `#F4FEFE` | ボタン上の白文字 | | 画素の実測 | | `accent-3` | `#22B43A` | フォーム送信ボタンの緑 | | 推定 | | `text` | `#14286E` | 見出しの濃紺文字 | | 推定 | | `text-body` | `#3A3A3A` | 本文の濃グレー | | 画素の実測 | | `cta-accessible` | `#237AB1` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#19872B` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#C3221D` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#0E7F9C` | AA を満たす補正値（計算） | | 計算 | - キャンペーン・特典は青ベタと黄ベタのフラットな面で目立たせる - ブランド信頼・研究パートは紺〜水色のグラデや写真背景に白明朝を載せる - 価格と割引率は赤、旧価格はグレー＋赤の取り消し線 - 見出しの強調語には黄のマーカー下線か金色文字を使う - 購入ボタンは青、フォーム送信は緑と役割で色を分ける - 必須バッジは濃いピンク赤で統一 - `button-primary` は文字 `#F4FEFE` × 背景 `#3196D6` のコントラスト比が 3.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#237AB1`、4.56:1）を使う。 - `button-submit` は文字 `#F4FEFE` × 背景 `#22B43A` のコントラスト比が 2.67:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#19872B`、4.5:1）を使う。 - `badge-speech` は文字 `#E4504C` × 背景 `#FFE14A` のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C3221D`、4.52:1）を使う。 - `benefit-card` は文字 `#E4504C` × 背景 `#FEFEFE` のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C3221D`、4.53:1）を使う。 - `price-box` は文字 `#E4504C` × 背景 `#FEFEFE` のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C3221D`、4.53:1）を使う。 - `testimonial-text` は文字 `#F4FEFE` × 背景 `#13B0D9` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0E7F9C`、4.51:1）を使う。 - `form-section-header` は文字 `#F4FEFE` × 背景 `#13B0D9` のコントラスト比が 2.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0E7F9C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 権威数字・大見出し（白明朝） | 明朝 | Shippori Mincho | 700 | 44px | 1.2 | 0.02em | | `headline-lg` | キャンペーン見出し（丸く太いポップ体） | 装飾・ディスプレイ | Dela Gothic One | 400 | 24px | 1.4 | 0.05em | | `headline-md` | セクション見出し・FV キャッチ | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.35 | 0.02em | | `headline-sm` | フォームの帯見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.0em | | `body-lg` | お客様の声・研究説明（明朝） | 明朝 | Noto Serif JP | 600 | 17px | 1.7 | 0.03em | | `body-md` | 一般本文・フォーム説明 | ゴシック | Noto Sans JP | 400 | 15px | 1.6 | 0.0em | | `note` | 注釈・※文 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 価格数字 | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.0em | - 権威・声・研究は明朝、キャンペーンはポップ体、手続きはゴシックと書体で文脈を切り替える - 見出しは中央揃えで 2〜4 行に改行する - 価格数字は単位や税込表記より 2 倍以上大きく - 暗い背景の白明朝には軽いグローや影をつける - 注釈は 10px 前後で必ず該当ブロック直下に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。特典カードは文字左・商品画像右の 2 分割 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 背景色ごとにセクションを全幅で切り替える - 特典は番号付きカードを縦に並べ、間を＋記号でつなぐ - 特長は全幅写真に番号と短文を重ねる - フォームは帯見出し＋淡水色の項目ラベル＋全幅入力欄の繰り返し - CTA は特典・価格ブロック直後に中央配置 ## Elevation & Depth - 購入ボタンは下方向に濃い青の影をつけて立体的にする - 特典カードは影なしの白カード - フォームのラジオ選択肢はグレーのグラデと薄い影のボタン風 - 権威見出しは白文字に柔らかい発光 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きで配置。生活写真は角丸なしの矩形を散らして重ねる。特長写真は全幅。 - **セクション境界**: V 字の矢羽根形の切り込みと、波線グラフィックで区切る - 吹き出しバッジは黄色の角丸に下向きしっぽ - 期間告知は黄色の星形・花形バッジ - 番号は青い円に白数字 - 価格カードは青い枠線の四角で角丸なし ## Components - **購入ボタン**（`button-primary`）: 青のピル型で下に濃い影。下に小さなタップ案内文。 - **フォーム送信ボタン**（`button-submit`）: 緑の角丸ボタン。左に同意文の小ラベル、右に矢印アイコン。 - **吹き出しバッジ**（`badge-speech`）: 黄色の角丸吹き出しに抽選人数などを書く。 - **番号付き特典カード**（`benefit-card`）: 白の大角丸カード。左上に青丸番号、赤の大きな割引率と商品画像。 - **価格比較ボックス**（`price-box`）: 紺の見出し帯付き枠。取り消し線の通常価格→下向き矢印→赤の明朝大価格。 - **声のテキスト**（`testimonial-text`）: 水色背景に白明朝で中央揃え、下に年齢・性別・地域。 - **フォーム項目ラベル**（`form-label`）: 淡水色帯に必須の赤ピンクバッジと太字ラベル、下向き三角付き。 - **フォーム帯見出し**（`form-section-header`）: 水色グラデの全幅帯に白太字。 ## Do's and Don'ts **Do** - ポップなキャンペーン部と上品な権威部を交互に配置する - マスコットイラストをセクションの端からのぞかせる - 価格は通常価格と割引価格を必ず並べて比較させる - 注釈は小さくても省かず該当箇所の直下に置く - フォームは 1 項目 1 ブロックで縦に並べる **Don't** - 権威パートにポップ体を使わない - 青と黄以外の強い色を面で増やさない - 購入ボタンを角張った形にしない - 暗い背景に小さいゴシック本文を長く載せない - 価格の赤を見出し以外の装飾に乱用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（由来と商品名を伝え実績を示す）: 白地に紺の極太見出し、右上に紺×金の実績バッジ、商品パッケージとマスコット 2. **キャンペーン告知**（期間限定プレゼントで興味を引く）: 青帯に黄ポップ体の見出し、吹き出しバッジ、赤文字の特典名に黄マーカー 3. **実績訴求**（販売数で信頼を示す）: 光の粒の紺背景に白明朝の大数字、黄文字の見出し 4. **お客様の声**（共感と安心感）: 水色背景に波線、白明朝の声を中央揃えで 3 件 5. **選ばれる理由**（成分の独自性を説明）: V 字切り込みの見出し、全幅写真に 01〜03 の番号と短文 6. **開発者の言葉**（研究根拠を示す）: 青テクスチャ背景に白明朝本文、重要語に黄下線、開発者写真 7. **まとめの提案**（生活イメージで背中を押す）: ベージュのボケ背景に生活写真を散らし中央に商品 8. **コラボ紹介**（親しみを出す）: 青ベタに黄ポップ見出しと白の短文、下端からマスコット 9. **定期コース特典**（定期購入へ誘導）: 黄ベタ背景に番号付き白カード 3 枚を＋でつなぎ、青ピルの CTA 10. **単品購入**（選択肢を示す）: 淡黄地に商品と紺の大価格、CTA 11. **成分表示・歴史**（情報開示とブランドの歴史）: 白地の成分表、夕景写真に白明朝の物語文 12. **価格選択**（コースと数量を選ぶ）: 紺見出し帯の価格比較ボックス 2 つと数量セレクト 13. **申込フォーム**（その場で購入完了）: 水色帯見出し＋淡水色ラベル＋入力欄、緑の送信ボタン、規約スクロール枠 ## Imagery - 商品パッケージは白背景で切り抜き、やや斜めに大きく置く - ゆるい線画の白いマスコットを端からのぞかせ、ハートや渦巻きを添える - 研究シーンは青みに寄せた実験器具の写真 - 人物は家族や幅広い年代の自然な笑顔写真 - 背景に青い波線や光の粒子を重ねて清潔感を出す - 歴史パートは夕景の草原など暖色の風景写真を暗めに - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 900px 前後の固定幅で SP の構成を踏襲 - PC ではファーストビューの商品と見出しを横並びに - お客様の声は PC で 2 カラム＋中央見出しに配置 - 特典カードは PC で 1 枚目全幅、2・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-99a2c0ef`（元 LP の URL から採番） - **元 LP**: https://www.calpis-shop.jp/c/acare_lp_12/ - **解析に使った画像**: 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/）からご連絡ください。