--- version: alpha name: Bold Red Tokusatsu Hero Health Drink LP description: 真っ赤な地に集中線と筆文字ロゴを重ねた特撮ヒーロー調のキャンペーン LP。前半は TVCM 動画を中心に強いインパクトで見せる。後半はクリーム地に切り替わる。淡いピンクとベージュのパネルで成分を解説し、蛍光マーカー見出しと人物の顔切り抜きでくだけた雰囲気を出している。 colors: primary: '#FE0000' secondary: '#BA0104' background: '#FEFFED' background-alt: '#F7ECCC' tint-1: '#FFE0D3' accent-1: '#EB5B24' accent-2: '#029D2C' marker: '#FEED02' cta: '#EE000E' on-cta: '#FFFFFE' dark-section: '#016935' text: '#2C271E' surface: '#FDFDFD' line: '#474747' primary-accessible: '#EC0000' accent-2-accessible: '#028926' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 accent: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-burst-title: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.display}' height: 160px narration-balloon: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' height: 180px video-heading: textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 60px slant-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 110px marker-heading: textColor: '{colors.accent-2}' typography: '{typography.headline-md}' height: 150px tag-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 40px face-reaction: textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 90px legal-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 380px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 70px button-secondary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 70px --- # DESIGN.md — 真紅×集中線の特撮ヒーロー風健康飲料 LP（Bold Red Tokusatsu Hero Health Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、ポップ・元気、情報量多め・訴求型 - **キーワード**: 真紅・集中線・特撮ヒーロー・筆文字ロゴ・マーカー見出し・顔切り抜き - **地の質感**: 前半はベタ赤に放射状の集中線と影のグラデーションが入る。後半はクリーム地にフラットなパネルを置く - **形**: 角丸なしの四角いパネルと帯見出しが中心。斜めに傾いた赤帯、ギザギザの吹き出しやバースト形も使う - **温度感**: 暖色寄りで熱量が高い。後半はクリームとベージュで少し和らぐ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE0000` | 前半の地色・ブランドの赤 | | 画素の実測 | | `secondary` | `#BA0104` | 影になった深い赤・斜めの帯 | | 画素の主要色に補正 | | `background` | `#FEFFED` | 後半の地色・クリーム | | 画素の実測 | | `background-alt` | `#F7ECCC` | リコピン解説パネルのベージュ | | 画素の実測 | | `tint-1` | `#FFE0D3` | GABA 解説パネルの淡いピンク | | 画素の実測 | | `accent-1` | `#EB5B24` | GABA 見出しと帯ラベルのオレンジ | | 画素の実測 | | `accent-2` | `#029D2C` | リコピン見出しと帯ラベルの緑 | | 画素の実測 | | `marker` | `#FEED02` | キーワード下の蛍光イエローマーカー | | 画素の実測 | | `cta` | `#EE000E` | 外部サイト誘導ボタン（赤） | | 画素の実測 | | `on-cta` | `#FFFFFE` | ボタン文字 | | 画素の主要色に補正 | | `dark-section` | `#016935` | サブ誘導ボタンの深緑 | | 画素の実測 | | `text` | `#2C271E` | 本文・見出しの墨色 | | 画素の実測 | | `surface` | `#FDFDFD` | 表示ボックス内の白 | | 画素の実測 | | `line` | `#474747` | 見出し両脇の細線 | | 画素の実測 | | `primary-accessible` | `#EC0000` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#028926` | AA を満たす補正値（計算） | | 計算 | - 前半はベタ赤一色にして、白文字と白い筆文字ロゴでインパクトを出す - 赤からクリームへの境界には、破れ紙風のギザギザ線と斜めの赤帯を入れる - 成分ごとにテーマ色を分ける。一方はピンク地×オレンジ、もう一方はベージュ地×緑で揃える - キーワードの下半分には蛍光イエローのマーカーを敷く - 注意喚起・法定表示は赤枠の中に白ボックスを入れ、赤文字で目立たせる - フッター寄りの誘導は白地にし、写真の下に赤ボタンまたは緑ボタンを付ける - `hero-burst-title` は文字 `#FFFFFE` × 背景 `#FE0000` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EC0000`、4.6:1）を使う。 - `tag-label` は文字 `#FFFFFE` × 背景 `#029D2C` のコントラスト比が 3.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#028926`、4.55:1）を使う。 - `legal-box` は文字 `#FFFFFE` × 背景 `#FE0000` のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#EC0000`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のヒーロー風キャッチ（筆・ブラシ調） | 手書き・筆 | Dela Gothic One | 900 | 64px | 1.1 | 0.0em | | `headline-lg` | 赤地のナレーション見出し（太い明朝） | 明朝 | Shippori Mincho | 700 | 40px | 1.3 | 0.05em | | `headline-md` | 成分解説の大見出し（色付きの太ゴシック） | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.5 | 0.02em | | `headline-sm` | 帯ラベルの小見出し・動画タイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.02em | | `body-md` | 解説本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.0em | | `note` | ※注釈・法定表示 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | | `accent` | 顔写真に添える手書き風のつぶやき | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.3 | 0.05em | | `label-button` | 誘導ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | - 前半の赤地パートは明朝の白文字にして、ドラマのナレーション調にする - 後半の解説パートは極太ゴシックに切り替える - 成分名は一回り大きくし、マーカーを敷いてテーマ色で書く - 斜めの帯見出しは白の極太イタリック風ゴシックで、2 行に組む - 注釈は見出しの右に小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せで、解説パネル内のみ文字と写真の 2 カラム - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 解説パネルは左右 5% の余白を取り、ほぼ全幅に置く - 動画は 16:9 で幅 90% に置き、上に中央揃えの線付き見出しを付ける - 顔切り抜きはパネルの角や境界からはみ出させる - セクション間に大きな＋記号を置いて、2 つの成分をつなぐ ## Elevation & Depth - 影はほぼ使わず、フラットなベタ塗りが基本 - FV やバッジの人物・小物には、立体感のあるドロップシャドウを付ける - 赤地の奥行きは、放射状の集中線と暗い赤のグラデーションで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は背景を抜いて切り抜く。顔だけの切り抜きも多用し、商品写真は白背景で角版にする - **セクション境界**: 赤からクリームへは破れ紙風のギザギザ境界と斜めの赤帯で切り替え、それ以外は直線で切る - ボタン・パネル・帯ラベルはすべて角丸 0 の四角にする - 吹き出しはギザギザの矩形か、尖った尻尾付きにする - 円形の線枠はアイコン的な顔写真にだけ使う ## Components - **筆文字ヒーロー見出し**（`hero-burst-title`）: 白い筆文字に黒いフチを付け、斜め気味に配置する。人物写真の上に重ねる - **ナレーション吹き出し**（`narration-balloon`）: 暗い赤のギザギザ吹き出し。白い明朝で説明文を入れる - **線付き動画見出し**（`video-heading`）: 両脇に細い白線を引いた鉤括弧付きのタイトル。下に動画を置く - **斜め赤帯見出し**（`slant-band`）: 数度傾けた赤帯に、白の極太文字を 2 行で入れる - **マーカー成分見出し**（`marker-heading`）: 成分名を大きく書き、下に蛍光イエローを敷く。続く文はテーマ色の太字にする - **ベタ塗り帯ラベル**（`tag-label`）: テーマ色のベタ地に白太字を入れた、行ごとの帯見出し - **顔切り抜きリアクション**（`face-reaction`）: 人物の顔だけを切り抜き、驚きのつぶやきを弧状の小さな文字で添える - **機能性表示ボックス**（`legal-box`）: 赤いタブ見出しの下に、赤枠と白い内箱を置く。内箱に赤字で表示文、下に白い小文字で注意事項を入れる - **写真付き誘導ボタン**（`button-primary`）: 横長写真の直下に付ける赤の角型ボタン。白字を 2 行中央揃えで入れる - **写真付きサブ誘導ボタン**（`button-secondary`）: 同じ形で深緑地にしたもの ## Do's and Don'ts **Do** - 前半は赤一色に集中線と特撮風の演出を集中させる - 成分ごとに地色とテーマ色のペアを固定する - 人物の顔切り抜きで驚きや納得のリアクションを入れ、硬い健康情報を和らげる - 注釈・法定表示は必ず小さな文字で近くに添える - ボタンと帯はすべて角丸 0 の四角で統一する **Don't** - 角丸のピルボタンや柔らかいパステルの CTA は使わない - 赤地パートに細いゴシックの長文を置かない - 1 つの成分パネルに、オレンジと緑のテーマ色を混ぜない - ギザギザ境界以外で、赤地とクリーム地を唐突に切り替えない - 効果を断定する誇大表現は使わない。報告ベースの言い回しにする ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラクターで一瞬に注目を集め、問題提起する）: オフィス写真に、指差す覆面キャラを大きく置く。左上に明朝の小コピー、下部に白い筆文字ロゴを重ねる 2. **ナレーション解説**（キャラの意味と問題を説明する）: 赤地に集中線を引き、明朝の大見出しを置く。暗い赤の吹き出しで説明し、商品を持った人物とバースト形の小アイコンを添える 3. **TVCM 動画**（CM で世界観を伝える）: 線付き見出しと 16:9 の埋め込み動画を 2 本縦に並べる。下に小物の立体画像を置く 4. **キャラ集合ビジュアル**（後半の解説へ橋渡しする）: ギザギザ境界でクリーム地に切り替え、人物とキャラを横一列に並べる。下に斜めの赤帯見出しを置く 5. **成分解説 1**（1 つ目の成分の機能を伝える）: ピンクのパネルに、オレンジのマーカー見出し、帯ラベル、本文を入れる。オレンジ枠の素材写真に顔リアクションを添える 6. **成分解説 2**（2 つ目の成分の機能と誤解を正す）: 大きな緑の＋記号でつなぐ。ベージュのパネルに緑のマーカー見出しと緑の帯ラベル 2 組を入れ、顔を 3 つ並べて締める 7. **意識喚起**（行動を促す締めのメッセージ）: クリーム地に赤の極太文字を 2 行中央揃えで置き、トマトの切り抜きを添える 8. **機能性表示**（法定表示と注意事項を示す）: 赤いタブ見出し、赤枠、白い内箱、白い小文字の注意事項で構成する 9. **関連サイト誘導**（ブランドサイトと詳細サイトへ送客する）: 白地に線付き見出しを置く。横長写真の下に赤ボタンと緑ボタンをそれぞれ付ける ## Imagery - 特撮ヒーロー風の金属的な覆面を被ったスーツ姿の人物が、カメラを指差す強い構図にする - 背景は少しくすんだオフィス写真にして、赤とのコントラストを出す - 赤地には放射状の集中線と、黄色いバースト形の装飾を使う - 人物は首から上を切り抜き、驚き顔や笑顔のリアクションに使う - 素材は白背景で艶のある真っ赤なトマトにする。誘導用には屋外の明るい商品写真を使う - トマト片や果汁の飛沫を散らして動きを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 70% に絞って中央に置き、背景色は全幅に敷く - PC のナレーション解説は、縦書き明朝、人物、吹き出しの横並びにする - PC の斜め帯見出しは 1 行にまとめる - PC の成分パネルは、見出しを 1 行にし、本文と写真を左右 2 カラムにする - PC の関連サイト誘導は 2 カラムに並べる ## 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-568312d5`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/products/brand/tomatojuice/ketsuatsu-kamen/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。