--- version: alpha name: Aqua Blue Water-Texture Supplement LP description: 水面テクスチャの淡い水色を地にしたサプリメント LP。シアンの帯見出し、ランキング訴求の深紅、比較表の赤セルで強弱をつける。明朝の大見出しとゴシックの情報テキストを組み合わせ、清潔感と訴求力を両立させている。 colors: primary: '#37A2C0' background: '#F3FDFE' background-alt: '#FFFFFE' dark-section: '#7A0E14' accent-1: '#D9314D' accent-2: '#F27401' accent-3: '#019243' secondary: '#568BC4' text: '#1A2165' text-body: '#333333' marker: '#F4F111' surface: '#E5E5E5' accent-1-gold: '#C4A46A' on-dark: '#FBFEFE' primary-accessible: '#2B7F96' accent-2-accessible: '#BD5A01' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.04em headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 36px fontWeight: 700 lineHeight: 1.1 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 130px ranking-hero: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 640px price-table: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 240px worry-checklist: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' height: 300px point-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 110px comparison-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' height: 480px ingredient-tag: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 26px hex-badge: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 120px speech-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px expert-profile: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px --- # DESIGN.md — 水色×赤の水面質感サプリメント LP（Aqua Blue Water-Texture Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、情報量多め・訴求型、信頼・誠実 - **キーワード**: 水面テクスチャ・シアン帯見出し・深紅ランキング・明朝×ゴシック・比較表・成分訴求 - **地の質感**: 水の波紋や光の反射を淡く敷いた写真背景。ランキング部分は赤のグラデーションに光のボケを重ね、金文字で光沢を出す。 - **形**: 角が立った四角の帯とカードが基本。成分タグだけピル型、ビタミンは六角形バッジ。見出し帯の下に小さな三角の吹き出しをつける。 - **温度感**: 寒色が中心で清涼感がある。赤と金で熱量を一部に足している。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#37A2C0` | 見出し帯・ブランドシアン | 10% | 画素の主要色に補正 | | `background` | `#F3FDFE` | 水面テクスチャの淡い地 | 25% | 画素の実測 | | `background-alt` | `#FFFFFE` | 白に近い本文の地 | 10% | 画素の実測 | | `dark-section` | `#7A0E14` | ランキング訴求の深紅の地 | 10% | 推定 | | `accent-1` | `#D9314D` | 比較表の自社セル・強調の赤 | 4% | 画素の実測 | | `accent-2` | `#F27401` | 成分カテゴリの橙 | 2% | 画素の実測 | | `accent-3` | `#019243` | 栄養カテゴリの緑 | 1% | 画素の実測 | | `secondary` | `#568BC4` | 比較表の項目列の青 | 3% | 画素の実測 | | `text` | `#1A2165` | 明朝見出しの紺 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文のダークグレー | 3% | 推定 | | `marker` | `#F4F111` | 黄色の帯線・下線マーカー | 1% | 画素の実測 | | `surface` | `#E5E5E5` | 比較表の他社セルのグレー | 4% | 画素の実測 | | `accent-1-gold` | `#C4A46A` | 金文字の光沢色 | 1% | 推定 | | `on-dark` | `#FBFEFE` | 濃色地上の白文字 | 2% | 画素の主要色に補正 | | `primary-accessible` | `#2B7F96` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#BD5A01` | AA を満たす補正値（計算） | | 計算 | - 基本の地は水面テクスチャの淡い水色にし、セクションごとに濃淡を変える。 - セクションの大見出しはシアンの全幅帯に白の明朝で載せ、帯の下端に黄色線を引く。 - 実績やランキングの訴求だけ深紅の地に金と白の文字を使う。 - 比較表は自社列を赤、項目列を青、他社列をグレーにして一目で差がわかるようにする。 - 数値の強調は赤、成分カテゴリは橙と緑で色分けする。 - 明朝の見出しは紺、本文はダークグレーにする。 - `band-heading` は文字 `#FBFEFE` × 背景 `#37A2C0` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B7F96`、4.52:1）を使う。 - `point-card` は文字 `#F27401` × 背景 `#FFFFFE` のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#BD5A01`、4.54:1）を使う。 - `ingredient-tag` は文字 `#FBFEFE` × 背景 `#F27401` のコントラスト比が 2.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#BD5A01`、4.58:1）を使う。 - `speech-pill` は文字 `#FBFEFE` × 背景 `#37A2C0` のコントラスト比が 2.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2B7F96`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ランキング・数値の特大訴求 | 明朝 | Shippori Mincho | 800 | 56px | 1.1 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 600 | 28px | 1.4 | 0.04em | | `headline-md` | 帯見出し・悩み見出し | ゴシック | Noto Sans JP | 900 | 24px | 1.35 | 0.02em | | `headline-sm` | ポイントカードと比較表の数値 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 数値・mg の斜体強調 | 欧文セリフ | Playfair Display | 700 | 36px | 1.1 | 0.0em | | `label-button` | 成分タグ・ポイント番号 | ゴシック | Noto Sans JP | 500 | 12px | 1.3 | 0.02em | - 情緒的な大見出しは明朝、事実や数値はゴシックの極太にする。 - 強調語は文字を大きくし、残りは小さくして 1 行内で強弱をつける。 - 数値は赤の斜体セリフ体にして目立たせる。 - 強調語の下に黄色の半透明マーカーを引く。 - かぎ括弧で商品名やキーワードを囲んで目立たせる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ポイントカードと価格表だけ 2〜3 列にする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の背景に切り替え、余白でなく背景の色で区切る。 - 商品パッケージ画像は見出しの横か下に何度も配置する。 - ポイントカードは 2×2 のグリッドにする。 - 比較表は 4 列で、項目・自社・他社 A・他社 B の順に並べる。 - 成分 3 種は丸い写真と説明文を横 3 列に並べる。 ## Elevation & Depth - 影はほとんど使わない平面的な構成にする。 - 商品パッケージにだけ薄いドロップシャドウをつける。 - 説明パネルは白の半透明にして写真の上に重ねる。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 写真は全幅の角版か丸型に切り抜く。商品は切り抜き画像を使う。 - **セクション境界**: 直線で区切る。帯見出しの下に三角の吹き出しを出し、ランキング部分の下端は浅い V 字にする。 - カードは角丸なしの細い枠にし、上部にシアンのラベルをつける。 - 成分タグはピル型にする。 - ビタミンは銀枠の六角形バッジにする。 - 誘導ラベルは吹き出し付きのピル型にする。 ## Components - **シアン帯見出し**（`band-heading`）: 全幅のシアン帯に白の明朝で 2 行の見出しを載せる。下端に黄色線と三角をつける。 - **ランキング訴求ブロック**（`ranking-hero`）: 深紅の地に王冠エンブレムと金文字の大きな順位を置き、ランキング画面のキャプチャを添える。 - **まとめ買い価格表**（`price-table`）: 単品・2袋・3袋を比べる表。見出し行は黒、割引率は赤。下に赤の「お得額」タブを並べる。 - **悩みチェックリスト**（`worry-checklist`）: 暗いグレー写真の上に、赤いチェックボックスと白文字の悩みを 4 行並べる。 - **ポイントカード**（`point-card`）: 上部にシアンの番号ラベルがある枠付きカード。本文は橙と青の太字ゴシックにする。 - **他社比較表**（`comparison-table`）: 項目列は青、自社列は赤の地に黄色の太字、他社列はグレー。 - **成分タグ**（`ingredient-tag`）: 橙または緑のピル型タグを 3 列に並べ、カテゴリ色の枠で囲む。 - **六角形ビタミンバッジ**（`hex-badge`）: 銀の枠と白い半透明の内側をもつ六角形。中に黄色マーカー付きの太字を入れる。 - **誘導吹き出しラベル**（`speech-pill`）: シアンのピル型に白の太字を入れ、下に三角をつけて次のセクションへ誘導する。 - **監修者プロフィール**（`expert-profile`）: 左に肩書と明朝の大きな氏名、右に白衣の人物写真を置く。下に経歴の本文を続ける。 ## Do's and Don'ts **Do** - 地は淡い水色の水面テクスチャにして清涼感を保つ。 - 大見出しは明朝、数値はゴシックの極太か赤の斜体にして強弱をつける。 - 商品パッケージ画像を各セクションに繰り返し登場させる。 - 比較表とポイントカードで、根拠を数字で見せる。 - セクションの区切りにはシアンの帯と黄色線を使う。 **Don't** - 暖色の地をページ全体に広げない。赤はランキングと比較表に限る。 - 角丸を大きくした柔らかいカードを多用しない。 - 明朝を本文の小さい文字に使わない。 - 影を強くかけた立体的な UI にしない。 - 見出しを装飾なしの黒文字だけで済ませない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と主な配合量・機能を一目で伝える）: 白い浴室で撮った脚の写真の右に商品パッケージを置く。左に丸いバッジを 2 つ、上に青のゴシックのキャッチを載せる。 2. **ランキング実績**（人気を示して信頼を得る）: 深紅のグラデーションに王冠と金文字の大きな順位を置き、ランキング画面のキャプチャを添える。 3. **まとめ買い価格**（複数袋の購入を促す）: 金色の見出し帯の下にセット商品の画像と赤い割引バッジ、価格比較表を置く。 4. **悩みの提起**（読み手に自分ごと化させる）: 暗いグレー写真の上に、白の大見出しと赤チェック付きの悩みを 4 つ並べる。 5. **原因の提示**（成分不足が原因かもしれないと気づかせる）: 明朝の紺の見出しと黄色マーカー付きの説明文を置き、横に商品を配置する。 6. **解決提案**（商品で解決できることを示す）: 青い水面写真の上に白の明朝コピーと商品を載せる。 7. **特長ポイント**（主な特長を 4 つに絞って示す）: シアン帯見出しの後、赤の斜体で数値を訴求し、2×2 のポイントカードを並べる。 8. **他社比較**（優位性を見せる）: 女性の写真と明朝の見出しを置き、4 列の色分け比較表を続ける。 9. **成分紹介**（主要成分とその他の配合成分を伝える）: 丸く切り抜いた成分写真を 3 列に並べる。その他の成分は橙と緑のタグ群で見せる。 10. **機能性の説明**（食品区分の安心感を伝える）: 枠で囲んだ明朝の大見出しの後、研究室写真の上に六角形バッジと半透明の説明パネルを重ねる。 11. **専門家監修**（専門家の監修で権威を示す）: シアン帯見出しの後、プロフィールと写真、コメント本文、注釈を置く。 12. **品質管理**（製造の安心安全を伝える）: 明朝の見出しを罫線付きのサブ見出しで挟み、工場写真と認証マーク、説明文を横並びにする。 ## Imagery - 水面の波紋や光の反射を淡い水色で撮った写真を背景テクスチャに使う。 - 白く明るい浴室や室内で、素足や脚を見せる女性のモデル写真を使う。 - 成分は素材のクローズアップ写真を丸く切り抜く。 - 研究室や工場の青みがかった写真で、清潔さと信頼を表す。 - 王冠エンブレムや金属光沢の文字で、実績の訴求に高級感を出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は SP 想定の縦長画像を PC 中央に約 720px 幅で置いた構成。 - SP では 1 カラムで、見出しは 24〜28px にする。 - PC に広げるときは本文を 720〜960px の中央にまとめ、背景のテクスチャだけ全幅に伸ばす。 - 比較表は SP でも 4 列のままにし、セル内の文字を縮める。 - 成分の 3 列は SP でも維持し、説明文は 12px まで下げてよい。 ## 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-77571ffd`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/levante/kr001/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。