--- version: alpha name: Fresh Mint Gradient Fasting Drink LP description: 白地にミントグリーン〜水色のグラデーションを重ねた、清潔で爽やかな健康飲料のLP。細い欧文の英字見出し、角丸カード、泡のような円バッジ、黄色の手書き風マーカーで、専門家監修の信頼感とやわらかさを両立させている。 colors: primary: '#59BCB2' secondary: '#6CC3D8' background: '#FDFEFE' background-alt: '#F2F2F2' tint-1: '#D4F0E6' tint-2: '#E9F3ED' dark-section: '#29776A' text: '#222222' text-body: '#4C423E' marker: '#FEF37B' accent-1: '#F3D58A' cta: '#44BA7A' on-cta: '#FFFFFF' accent-2: '#D65959' cta-accessible: '#308456' primary-accessible: '#2F746D' secondary-accessible: '#288095' accent-2-accessible: '#D04343' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em accent: fontFamily: Josefin Sans fontSize: 34px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Cormorant Garamond fontSize: 26px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 6px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 64px 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}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 64px bubble-badge: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 90px gold-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 90px point-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 120px marker-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 60px label-dark: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 26px voice-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 560px faq-item: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 72px price-block: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.md}' height: 200px --- # DESIGN.md — ミント×水色グラデの清涼感ある健康飲料LP（Fresh Mint Gradient Fasting Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型 - **キーワード**: ミントグリーン・水色グラデーション・泡・しずく・細い欧文見出し・角丸カード・黄色マーカー - **地の質感**: 白と淡いミントの地に、水滴や泡のボケを薄く重ねたみずみずしい質感 - **形**: 大きな角丸カード、片側だけ大きく丸めた角、円形の泡バッジ、細線の括弧枠 - **温度感**: やや寒色寄りで、黄色と金のアクセントがほどよい温かみを添える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#59BCB2` | ブランドのミントグリーン（強調文字・帯） | 9% | 画素の主要色に補正 | | `secondary` | `#6CC3D8` | 水色（グラデーションの起点・見出し帯） | 6% | 推定 | | `background` | `#FDFEFE` | 基本の地色 | 28% | 画素の実測 | | `background-alt` | `#F2F2F2` | 淡いグレーの区切り地 | 6% | 画素の実測 | | `tint-1` | `#D4F0E6` | 淡いミントの面 | 8% | 画素の主要色に補正 | | `tint-2` | `#E9F3ED` | 淡い水色のカード地 | 4% | 画素の主要色に補正 | | `dark-section` | `#29776A` | 濃いティールの帯・図版 | 3% | 画素の実測 | | `text` | `#222222` | 見出しの濃い文字 | 3% | 推定 | | `text-body` | `#4C423E` | 本文のグレー文字 | 4% | 画素の主要色に補正 | | `marker` | `#FEF37B` | 黄色の手書き風マーカー・強調 | 1% | 画素の実測 | | `accent-1` | `#F3D58A` | 金色の円バッジ | 2% | 推定 | | `cta` | `#44BA7A` | 購入ボタンの緑グラデ | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白・黄文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#D65959` | 価格・割引の赤 | 0% | 画素の実測 | | `cta-accessible` | `#308456` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#2F746D` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#288095` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#D04343` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にして、セクションの背景を淡いミント〜水色のグラデーションで切り替える - 見出しのキーワードはミントグリーンの文字にし、下に黄色の手書き風マーカーを敷く - 見出し帯やFAQは水色からミントへの横グラデーションの上に白文字を置く - 課題提起のパートだけグレーと黒に落として、ネガティブな場面を表す - 赤は価格と割引の表示だけに使う - 金色の円バッジは数値の訴求にだけ使う - `button-primary` は文字 `#FFFFFF` × 背景 `#44BA7A` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#308456`、4.6:1）を使う。 - `bubble-badge` は文字 `#59BCB2` × 背景 `#D4F0E6` のコントラスト比が 1.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2F746D`、4.53:1）を使う。 - `gold-badge` は文字 `#59BCB2` × 背景 `#F3D58A` のコントラスト比が 1.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2F746D`、4.58:1）を使う。 - `point-tab` は文字 `#FFFFFF` × 背景 `#59BCB2` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#2F746D`、4.54:1）を使う。 - `faq-item` は文字 `#FFFFFF` × 背景 `#6CC3D8` のコントラスト比が 2.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#288095`、4.55:1）を使う。 - `price-block` は文字 `#D65959` × 背景 `#FDFEFE` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#D04343`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キーワードの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.08em | | `headline-md` | カードや帯の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.05em | | `accent` | 英字の飾り見出し（細く大きく、薄い色で） | 欧文サンセリフ | Josefin Sans | 300 | 34px | 1.1 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | CTAボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.05em | | `headline-sm` | 商品名のロゴ風セリフ | 欧文セリフ | Cormorant Garamond | 500 | 26px | 1.2 | 0.02em | - 見出しはキーワードだけを大きくし、助詞は小さくして強弱をつける - 英字の飾り見出しは細いサンセリフで、見出しの上や背景に薄く置く - 本文中の強調はミントの太字にし、文全体は塗らない - 本文の行の下には点線の罫を引き、ノートのように見せる - 縦書きの大きなコピーを写真の上に重ねてよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。小さいカードは 2 列も使う - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは画面幅いっぱいの淡いグラデーション地の上に、白い角丸カードを左右約5%の余白で置く - 見出しの上下は点線の縦三点や縦線でつなぐ - ポイント紹介はタブ型の見出し帯とカードで、番号つきの章として並べる - 成分紹介は大きな細字の番号と写真を斜めの淡い地に重ねる - 注釈は各ブロックの末尾に右寄せで小さく入れる ## Elevation & Depth - 白カードにはごく薄い影（0 4px 16px rgba(0,0,0,.06)）をつける - CTAボタンには濃い緑の下影を入れて立体感を出す - 泡バッジは半透明の円にハイライトを入れ、ガラス玉のように見せる ## Shapes - **角丸**: 小 6px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 角丸の四角が基本。片側の角だけ大きく丸めたり、円形に切り抜いたりもする - **セクション境界**: 直線で切り替え、グラデーション地と大きな角丸カードの縁で区切る - 見出しを細線の角括弧で挟む - タブ型の見出しは上辺が台形になった帯にする - ハッシュタグ風のラベルは白いピル型にする ## Components - **主CTAボタン**（`button-primary`）: 緑の縦グラデーションのピル型ボタン。左に丸い矢印アイコンを置き、2行の文字を入れる - **泡の円バッジ**（`bubble-badge`）: 半透明のミント色の円に、白抜きのラベルと短い言葉を入れる - **金色の数値バッジ**（`gold-badge`）: 金色のグラデーション円に、数値を大きく入れる - **ポイント見出しタブ**（`point-tab`）: 台形のタブに番号を入れ、その下にミントの帯とピル型のサブ見出しを重ねる - **マーカー見出し**（`marker-heading`）: ミントの太字キーワードの下に、黄色の手書き風の線を敷く - **黒ラベル**（`label-dark`）: 黒地に白文字の小さい角丸ラベル。成分名の上につける - **お客様の声カード**（`voice-card`）: 写真の上にミントの帯で見出しを重ね、年代・属性と点線罫つきの本文を入れる。背景には英字の番号を縦に置く - **FAQアコーディオン**（`faq-item`）: 水色→ミントのグラデーション帯に白い太字で質問を入れる。左端に縦書きの英字、右端に濃い色の＋ボタンを置く - **価格ブロック**（`price-block`）: 通常価格に打ち消し線を引き、黄色の星形の割引バッジと、赤い大きな数字の価格を並べる ## Do's and Don'ts **Do** - 地は白と淡いミントに保ち、清潔感を優先する - キーワードはミントの太字と黄色マーカーで目立たせる - 英字の飾り見出しを各セクションに入れて、リズムを作る - 数値の訴求は金色や泡の円バッジにまとめる - 体験談や数値には注釈を必ず添える **Don't** - 濃い原色の背景を広い面に使わない - 赤を価格以外に使わない - 角の尖った重い枠線のボックスを使わない - 本文を中央寄せの長文にしない（短い導入文だけは中央寄せでよい） - 英字見出しを太字で濃く主張させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（専門家監修の商品と主な効果を一目で伝える）: 女性の写真と商品ボトルを並べる。白枠の肩書き見出しとミントの大見出しを置き、金色の円バッジを縦に3つ並べ、背景には縦書きの英字を薄く入れる 2. **概念の説明**（手法の意味を簡単に説明する）: 英字見出しのあとに、写真と水しぶきのイラストを置く。ミントのボックスに白文字で説明を入れる 3. **仕組みの図解**（体内の働きをキャラクターで図解する）: 2枚の角丸カードを並べる。グレー地に吹き出しと横棒グラフを置き、比較の前後を示す 4. **メリット**（得られる効果を写真で並べる）: 写真のコラージュに泡バッジと縦書きのコピーを重ねる 5. **課題の提起**（間違ったやり方のリスクを示す）: グレーの水滴地に黒いシルエットと×印を置き、反転した帯で注意を促す 6. **選び方の提示**（選ぶ基準を2つ示す）: 片側だけ丸めたピルを2つ並べ、グラスを持つ手の写真とつなぐ 7. **商品紹介**（商品を見せる）: グラデーション帯の見出しのあとに、ボトルとグラスの物撮りを大きく見せる 8. **SNSの評判**（SNSで話題になっていることを示す）: ピル型のハッシュタグと、SNS風の写真カード、短い感想を置く 9. **4つのポイント**（開発者・成分・ダイエット効果・無添加を訴求する）: タブ型の見出しと白い角丸カードで、番号つきの章を縦に連ねる 10. **満足度**（アンケート結果を見せる）: ミント地に吹き出しの感想とドーナツグラフ、円形の写真を散らす 11. **飲み方**（日数ごとの手順を説明する）: 日数ラベルを縦に置き、ステップごとのカードを並べる 12. **味と品質**（味のアレンジと国内製造を伝える）: 物撮りに縦書きのコピーを重ね、アレンジ例を2つのピルで見せる。工場の写真と国旗のバッジを置く 13. **お客様の声**（モニターの体験談）: 写真と見出し帯つきのカードを3件並べる 14. **オファーとCTA**（初回の価格で購入を促す）: ミント地のカードに価格ブロックと緑のピルCTAを置き、その下に定期コースの注意を枠で囲む 15. **よくある質問**（不安を解消する）: 括弧枠の見出しの下に、グラデーション帯のアコーディオンを並べる ## Imagery - 自然光の明るい室内で、白い服の女性が笑顔で飲む写真を使う - 商品の物撮りは、木の台と漆喰の壁、窓から差す光の影で撮る - 成分は食材を白背景に切り抜くか、木のスプーンに盛って撮る - 水色のキャラクターを丸くかわいいイラストで描く - 背景には水滴・泡・しずくのボケを薄く散らす - 課題の場面だけ黒いシルエットのピクトグラムを使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を480〜600pxの中央カラムにし、左右にグラデーション地を広げる - ファーストビューは写真とコピーを左右に分けてもよい - 声やポイントのカードは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-50bfdfd7`（元 LP の URL から採番） - **元 LP**: https://www.spirulinacleanse.com/product001/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。