--- version: alpha name: Red and Blue Split Functional Dairy LP description: 画面を左右に赤と青で二分して、2 つの機能を対比させる機能性表示食品の LP。太い角ゴシックの白抜き文字、赤と青の帯を組み合わせた見出し、臨床データのグラフ、青枠の Q&A カードで構成する。広告らしい力強さと、データで示す信頼感の両方を出す。 colors: primary: '#E70012' secondary: '#014EA2' background: '#FFFFFF' background-alt: '#F4F4F4' on-primary: '#FFFFFF' text: '#272727' text-body: '#444444' accent-1: '#E5007F' accent-2: '#BEBEBE' accent-3: '#C9A85A' line: '#135298' surface: '#FAFAFA' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em headline-lg: fontFamily: Noto Sans JP fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 16px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 0px md: 0px lg: 30px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' split-hero: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 1100px band-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 110px badge-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px data-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 560px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px store-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 70px faq-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 340px pagetop-bottle: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 150px --- # DESIGN.md — 赤×青二分割の機能性乳飲料 LP（Red and Blue Split Functional Dairy LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、信頼・誠実、ポップ・元気、情報量多め・訴求型 - **キーワード**: 赤青二分割・対比訴求・白抜き極太ゴシック・臨床データ・帯見出し・角ばった枠 - **地の質感**: ベタ塗りの原色の面が基本。データ部は薄いグレーの水玉地にする。FV の下端に金色のグラデーション帯を 1 本入れる。 - **形**: 角丸なしの矩形と太い枠線が中心。人物写真は金縁の正円にする。サブボタンだけピル型。 - **温度感**: 赤の温かさと青の冷静さを半分ずつ。全体ではやや熱量が高め。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | 左半分の地色・強調文字・A 面 | | 画素の主要色に補正 | | `secondary` | `#014EA2` | 右半分の地色・Q バッジ・表の枠 | | 画素の実測 | | `background` | `#FFFFFF` | 本文の地 | | 画素の実測 | | `background-alt` | `#F4F4F4` | データセクションの水玉地 | | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤・青の面に載せる白抜き文字 | | 画素の主要色に補正 | | `text` | `#272727` | 見出し・Q の本文 | | 画素の実測 | | `text-body` | `#444444` | 注釈・説明文 | | 推定 | | `accent-1` | `#E5007F` | グラフで自社側を示すマゼンタ | | 画素の実測 | | `accent-2` | `#BEBEBE` | グラフで対照側を示すグレー | | 画素の実測 | | `accent-3` | `#C9A85A` | 見出し上の金色の英字・金縁 | | 推定 | | `line` | `#135298` | 表・Q&A カードの青い枠線 | | 画素の実測 | | `surface` | `#FAFAFA` | グラフ内の薄いグレー面 | | 画素の実測 | - FV と動画セクションは中央で左右に分け、左を赤、右を青で塗る。 - 赤は 1 つ目の機能、青は 2 つ目の機能に固定する。見出し・説明文・グラフの色も、この割り当てに合わせる。 - 大見出しは赤帯と青帯をずらして重ね、白抜き文字を載せる。 - 結論文は濃いグレーの地文の中で、キーワードだけを赤または青の極太文字にする。 - グラフは自社側をマゼンタ、対照側をグレーで塗る。 - Q は白い面に青枠、A は赤い面に白文字。A の中の強調は白地のマーカーに赤文字で入れる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大キャッチ・締めのコピー | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.04em | | `headline-lg` | 帯に載せるセクション大見出し | ゴシック | Noto Sans JP | 900 | 40px | 1.2 | 0.02em | | `headline-md` | 結論文・Q の質問文 | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.5 | 0.02em | | `headline-sm` | 表のタイトル・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 700 | 14px | 1.7 | 0.03em | | `note` | 試験条件・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 700 | 16px | 1.1 | 0.02em | | `label-button` | ボタン・「回答を見る」 | ゴシック | Noto Sans JP | 900 | 16px | 1.2 | 0.04em | - 見出しは 900 ウェイトの極太ゴシックで統一する。 - ひらがなの助詞（や・の・など）は小さく、名詞は大きくして、ジャンプ率を作る。 - 英字ラベルは見出しのすぐ上に、小さく赤で置く。 - 注釈は ※ で始め、11px 程度で長くてもまとめて載せる。 - 明朝体と手書き体は使わない。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。FV と動画セクションだけ左右二分の 2 カラムにする。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 二分割の部分は、背景を画面中央で真っ二つに分ける。 - データ表は青い太枠の箱に入れ、タイトル帯・グラフ・出典欄の順に積む。 - 結論文は中央揃えで、データ表のすぐ下に置く。 - Q&A カードは幅 75% 程度で中央に縦に並べる。 - セクションの間は白地を広めに取る。 ## Elevation & Depth - 影はほぼ使わない。平面のベタ塗りと太い枠線で階層を出す。 - 商品パッケージ画像だけ、ごく薄い落ち影を付けてよい。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 30px。ボタンはピル型。 - **写真の切り抜き**: 人物は金縁の正円で切り抜く。商品は背景を抜いた切り抜きにする。 - **セクション境界**: 直線で区切る。FV の下に金色のグラデーション帯を 1 本入れる。 - 表・Q&A・帯見出しは角丸 0 の矩形にする。 - サブボタンは細い色枠の白いピル型にし、右端に「>」を付ける。 - 吹き出しは角丸の矩形に三角のしっぽを付け、白地に黒文字で書く。 - Q と A は面の左上に正方形のバッジとして置く。 ## Components - **左右二分ヒーロー**（`split-hero`）: 左が赤、右が青の地に、それぞれの機能のコピーを白抜きで置く。中央に商品を大きく配置する。 - **赤青帯の見出し**（`band-heading`）: 赤帯と青帯を段違いに重ね、極太の白抜き文字を載せる。上に小さな英字ラベルを添える。 - **金縁の丸バッジ**（`badge-circle`）: 白い円に金縁を付け、短い特長を 2 行で入れるバッジ。 - **臨床データの枠**（`data-table`）: 青い太枠で囲み、タイトル帯・グラフ・出典欄を順に入れる。右上に青地の「変化量」タグを付ける。 - **詳細リンクボタン**（`button-secondary`）: 白地に赤または青の細い枠を付けたピル型のボタン。 - **購入先の案内帯**（`store-band`）: 赤帯と青帯を上下に重ね、白抜き文字を中央に置く。 - **Q&A 開閉カード**（`faq-card`）: 青枠の白カードの左上に Q バッジ、中央に質問文と青いアイコンを置く。下の帯の「回答を見る」で、赤地の A 面が開く。 - **ボトル形のページトップ**（`pagetop-bottle`）: 商品ボトルのシルエットを青で塗り、白で文字と上向きの矢印を入れる。 ## Do's and Don'ts **Do** - 2 つの機能の色を、赤と青に一貫して割り当てる。 - 見出しには極太ゴシックの白抜き文字を使う。 - 根拠のデータと注釈は省略せず、枠の中にきちんと並べる。 - 結論文のキーワードは、色を変えて大きくする。 - FAQ のアイコンは青一色のフラットなイラストにする。 **Don't** - 淡いパステルやグラデーションの地を主役にしない。 - 角丸の大きいカードや影を多用しない。 - 赤と青以外の強い色を、見出しや帯に足さない。 - 細い明朝や軽いウェイトで見出しを組まない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（2 つの機能を対比して一目で伝える）: 赤と青の二分割の地に白抜きのコピーを置く。中央に商品、周りに丸バッジを散らす。 2. **成分の紹介**（成分ごとの働きを説明する）: 左右それぞれに、金色の見出し・円形の人物写真・説明文・小さなアイコンを置く。 3. **締めのコピー**（両方の価値をまとめる）: 二分割の地をまたいで、白抜きの極太 2 行コピーとロゴを置く。 4. **動画**（CM の世界観で興味を引く）: 白い吹き出しの見出しの下に、赤青の枠付きサムネイルと別編へのバナーを置く。 5. **臨床試験の結果**（科学的な根拠を示す）: 水玉地の上に帯見出しを置く。青枠の表にグラフと出典を入れ、注釈と結論文を続け、ピル型ボタンで締める。 6. **2 つ目の成分の研究**（もう一方の根拠を示す）: 同じ表の型で棒グラフを入れ、青の強調で結論を書く。 7. **商品情報**（商品の仕様を伝える）: 左に商品の切り抜き、右に商品名・容量タグ・説明・ピル型ボタンを置く。下に黒枠の表示事項欄を付ける。 8. **購入先の案内**（買える場所を伝える）: 赤青 2 段の帯に白抜き文字を入れる。 9. **よくある質問**（不安を解消する）: 帯見出しの下に、Q&A カードを縦に積む。A は赤面で開く。 10. **フッター**（関連リンクとページトップへの導線）: ボトル形のページトップボタンを置く。小さなテキストリンクを右に寄せ、コピーライトを添える。 ## Imagery - 人物は赤または青の衣装で、明るく笑う広告らしい写真にし、正円で切り抜く。 - 商品は背景を抜いた正面の切り抜きにし、大きく見せる。 - アイコンは青一色のフラットな図形にする（時計・分子・カプセルなど）。 - グラフはシンプルな折れ線と棒にし、マゼンタとグレーの 2 色で塗る。 - 動画のサムネイルには網点のテクスチャを重ね、吹き出しの文字を添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも左右二分割を保ち、コピーを商品の左右に横並びにする。 - PC ではデータ表を 2 つ横に並べる。 - PC の FAQ は Q と A を市松状の 2 カラムにし、A を常に表示する。 - 帯見出しは PC では 1 行に収める。 - コンテンツ幅は PC で 1000px 前後に収める。 ## 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-68922368`（元 LP の URL から採番） - **元 LP**: https://www.meg-snow.com/helve/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。