--- version: alpha name: Mediterranean Teal and Pomegranate Supplement LP description: 機能性表示食品サプリの縦長訴求LP。ティールの帯見出しとザクロ赤・オリーブ緑の成分セクション、木目調の口コミ・価格枠、オレンジの価格強調で情報量の多い通販LPを作る。 colors: primary: '#3E9A90' secondary: '#985348' accent-1: '#A7B576' cta: '#247462' on-cta: '#F3FEFF' accent-2: '#E8761E' background: '#FBF5E3' background-alt: '#FBF4E4' surface: '#F9FAFE' dark-section: '#744B3D' text: '#61574E' tint-1: '#F3FBFB' marker: '#FBEFA0' text-muted: '#7A7470' text-muted-accessible: '#79736F' accent-2-accessible: '#B65A13' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.0 headline-sm: fontFamily: Cormorant Garamond fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 10px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 56px button-secondary: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 52px arrow-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 44px ingredient-pair: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 44px badge-medal: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 80px voice-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px benefit-row: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 52px price-card: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.lg}' height: 700px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 48px note-text: textColor: '{colors.text-muted}' typography: '{typography.note}' height: 60px --- # DESIGN.md — ティール×ザクロ赤の地中海系サプリ LP（Mediterranean Teal and Pomegranate Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 情報量多め・訴求型、ナチュラル、信頼・誠実、やさしい・柔らかい - **キーワード**: 地中海・ティール帯・木目テクスチャ・生成り地・筆記体の英字透かし・価格の大文字訴求 - **地の質感**: 生成りの紙地と木目板を背景に使い、写真は明るく淡い光。英字の筆記体を薄く透かして重ねる。 - **形**: 矢羽型の帯、角丸カード、円形バッジ、括弧型コーナー枠、ピル型CTA。 - **温度感**: 暖色の生成り・木目をベースに、ティールで清潔感と信頼を足す中間〜やや暖かい温度感。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3E9A90` | ティールの見出し帯・機能リスト面 | 6% | 推定 | | `secondary` | `#985348` | ザクロ成分セクションの赤茶地 | 6% | 画素の主要色に補正 | | `accent-1` | `#A7B576` | オリーブ成分セクションの緑地 | 4% | 画素の実測 | | `cta` | `#247462` | 申込ボタンの深緑 | 1% | 画素の実測 | | `on-cta` | `#F3FEFF` | CTAボタン文字 | 0% | 画素の実測 | | `accent-2` | `#E8761E` | 価格・割引率・ラベル帯のオレンジ | 3% | 推定 | | `background` | `#FBF5E3` | 生成りのベース地 | 20% | 画素の実測 | | `background-alt` | `#FBF4E4` | 口コミの紙地 | 10% | 画素の実測 | | `surface` | `#F9FAFE` | カード・価格枠の白 | 15% | 画素の実測 | | `dark-section` | `#744B3D` | 木目板の見出し・価格セクション | 7% | 画素の実測 | | `text` | `#61574E` | 本文・見出しの濃グレー | 3% | 画素の実測 | | `tint-1` | `#F3FBFB` | 素材セクションの淡い水色地 | 6% | 画素の実測 | | `marker` | `#FBEFA0` | 黄色のマーカー帯 | 0% | 推定 | | `text-muted` | `#7A7470` | 注釈テキスト | 1% | 推定 | | `text-muted-accessible` | `#79736F` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B65A13` | AA を満たす補正値（計算） | | 計算 | - 地は生成り・白を基本に、成分ごとに赤茶とオリーブ緑の全幅セクションで切り替える。 - 機能リスト・特典見出しはティール地に白文字で統一する。 - 価格・割引率・強調語はオレンジ文字、CTAだけ深緑のグラデーションにする。 - 口コミと価格枠は木目の濃茶背景の上に生成りカードを載せる。 - 見出し内のキーワードはオレンジまたはティールの色替えで強調する。 - 注釈は小さいグレー文字にして、強調色は使わない。 - `button-secondary` は文字 `#F3FEFF` × 背景 `#7A7470` のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#79736F`、4.55:1）を使う。 - `benefit-row` は文字 `#E8761E` × 背景 `#F9FAFE` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B65A13`、4.51:1）を使う。 - `price-card` は文字 `#E8761E` × 背景 `#F9FAFE` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B65A13`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・セクションの大見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 28px | 1.35 | 0.05em | | `headline-md` | 帯見出し・カード見出し | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.05em | | `body-md` | 本文・口コミ文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.04em | | `note` | ※注釈・出典 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | 薄い透かし英字・Voice番号 | 欧文スクリプト | Playfair Display | 400 | 44px | 1.0 | 0.0em | | `headline-sm` | 英字ラベル（HAPPY VOICE等） | 欧文セリフ | Cormorant Garamond | 500 | 11px | 1.2 | 0.2em | | `label-button` | CTAボタン・価格数字 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.2 | 0.08em | - 見出しは極太ゴシックで、強調語だけ1.3倍に大きくして色を替える。 - Voice・Supportなどの英字は筆記体やセリフ体を薄く敷き、和文見出しの背後に置く。 - 口コミの短いキャッチは濃茶地に白の縦書き帯で並べる。 - 価格数字はオレンジで本文の4倍以上に大きくする。 - 注釈は※番号付きの10px程度でまとめる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。機能リストは2〜3列、写真グリッドは3列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは全幅背景を切り替え、カードは左右5%の余白を取る。 - セクション間は縦3点リーダーでつなぎ、流れを示す。 - 口コミは写真と文章を左右交互に配置する。 - 見出しの上に小さい英字ラベルとアイコンを置く。 - 価格カードは木目背景の中に白カードを入れ子にする。 ## Elevation & Depth - カードには弱いドロップシャドウ（y2px・ぼかし8px・薄茶）を付ける。 - CTAは下方向に濃い影を付け、立体的なボタンにする。 - 円形バッジには金属調のグラデーションと影を付ける。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 人物は角版か切り抜き。成分写真は円形や角丸の枠に入れる。 - **セクション境界**: 直線で全幅の色を切り替える。一部は上辺をアーチ状や斜めにカットする。 - 機能名は右端を矢羽型にした帯にする。 - 見出しは「」型のコーナー括弧の枠で囲む。 - 効能は円形バッジで並べる。 - FAQは角丸の白い箱に＋アイコンを付ける。 ## Components - **申込CTA**（`button-primary`）: 深緑グラデーションのピル型ボタン。右端に白丸の矢印アイコンを置き、影を付ける。 - **単品購入ボタン**（`button-secondary`）: グレーの角丸ボタンに2行で価格を入れ、CTAより控えめにする。 - **矢羽型機能帯**（`arrow-band`）: ティール地の帯に白抜き文字で効能を縦に並べる。左に線画アイコンを置く。 - **成分ペア表示**（`ingredient-pair`）: 白い枠2つを＆の円で結び、左右に成分の写真を添える。 - **金メダルバッジ**（`badge-medal`）: 金色の円形メダルに実績語と※番号を入れる。 - **口コミカード**（`voice-card`）: 大きなセリフ数字と筆記体のVoiceラベル、オレンジの名前帯、点線区切りの本文で作る。 - **特典リスト行**（`benefit-row`）: 左に円形の番号バッジ、右に白い角丸の横長バーを置き、割引をオレンジで大きく見せる。 - **定期コース価格カード**（`price-card`）: 木目枠の中に白カードを置く。商品画像、黄色マーカーの送料行、取り消し線の通常価格、オレンジの特大価格、CTA、注意書きの順で並べる。 - **FAQ項目**（`faq-item`）: 筆記体のQuestionラベルを付けた白い箱に、右端のオレンジ＋丸アイコンを置く。 - **注釈ブロック**（`note-text`）: ※番号付きの小さいグレー文字で各セクションの下に置く。 ## Do's and Don'ts **Do** - 成分ごとに背景色を切り替え、テーマ色を持たせる。 - 大見出しの背後に薄い筆記体の英字を重ねる。 - 効能や割引は数字を大きくしてオレンジで強調する。 - 根拠となる図やグラフはイラストで簡潔に見せ、注釈を必ず添える。 - セクション同士は縦の点線とつなぎ文でつなぐ。 **Don't** - CTAの色を他の要素に流用しない。 - 黒の全面背景やネオン色を使わない。 - 注釈を本文と同じサイズにしない。 - 見出しを細字や明朝だけで組まない。 - 写真を暗く彩度の低いトーンにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（成分と効能を一目で伝える）: 成分ペア枠、金メダル、ティールの矢羽帯で効能を5つ並べる。右に爽やかな女性写真と商品パッケージを置く。 2. **効能まとめ**（機能の数を訴求する）: 黄色い光の背景にティールの円形バッジを並べ、極太の大見出しを置く。 3. **お客様の声**（共感と信頼を得る）: 木目の見出し板の下に、生成り地の口コミカードを左右交互に並べる。 4. **SNS・専門家の声**（第三者の権威を示す）: 写真を3列グリッドで並べる。専門家は大きな人物写真、円形の肩書きバッジ、経歴リストで見せる。 5. **悩みの提起**（読み手の悩みに共感する）: グレー地の白カードにチェックリストを6項目並べる。線画の悩む女性イラストと吹き出しを添える。 6. **解決策の提示**（成分と商品を紹介する）: 地中海の風景を円形に切り抜き、商品画像を重ねる。下にティールの機能グリッドを置く。 7. **制度の説明**（機能性表示食品の信頼性を伝える）: 白い角丸カードに円形アイコンを3つ並べ、紺の帯で強調する。 8. **成分解説**（作用の仕組みを説明する）: 赤茶・オリーブ緑の全幅地に、成分写真と比較イラストを白カードで載せる。 9. **配合・飲み方・素材のこだわり**（商品の付加価値を伝える）: オレンジのPlus枠、縦書きの飲み方ラベル、産地写真、円形の原料バッジ、開発者プロフィールで構成する。 10. **品質**（製造面の安心感を示す）: 青い空の工場写真に、白い見出し枠と大見出しを重ねる。 11. **試験結果**（エビデンスを示す）: 成分色の背景に白カードで折れ線グラフを置き、差の値をティールの吹き出しで示す。 12. **特典**（購入動機を高める）: オレンジの案内枠の後、ティールの見出しと番号付きの特典バーを5本並べる。 13. **価格・申込**（コースを選んで申し込んでもらう）: 木目の背景に価格カードを3コース分縦に並べる。最後にグレーの単品購入ボタンを置く。 14. **よくある質問**（購入前の不安を解消する）: 空の写真上に円形エンブレムの見出しを置き、アコーディオン形式のFAQを並べる。 ## Imagery - 人物は明るい自然光の笑顔写真を使う。白やベージュの服で、軽やかさを出す。 - 原料はザクロ・オリーブなどを瑞々しく切り抜き、水滴や葉を添える。 - 地中海の海と街並みの風景を、明るい彩度で背景に使う。 - 仕組みの説明は淡色フラットなイラストにし、細い線で注記を入れる。 - 悩みのパートは単色の線画イラストを使う。 - 口コミ枠には木目の板と紙のテクスチャを使う。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文の幅を最大750px前後で中央に置き、左右の余白には生成り地を敷く。 - PCでは口コミの写真と文章を2カラムで並べたままにする。 - PCでは写真グリッドを4〜6列まで広げてよい。 - CTAはPCでも幅480px程度の大型ピル型を維持する。 ## 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-62266dae`（元 LP の URL から採番） - **元 LP**: https://supplife.jp/lp?u=SL011NR001?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。