--- version: alpha name: Lime and Warm Gray Beauty Supplement LP description: ライムイエローと温かみのあるグレージュを主役にした美容系サプリの LP。細いゴシックと明朝で上品に見せつつ、「注意」ブロックや数値の強調で訴求力も出している。写真の全面使い、白枠の POINT 見出し、ライム地のまとめ帯をくり返してリズムを作る。 colors: primary: '#E4F35C' background: '#F4F5F0' secondary: '#898681' dark-section: '#5A5A5A' surface: '#FEFEFE' text: '#685755' text-body: '#685755' on-dark: '#E6E4DF' accent-1: '#DDEF88' accent-2: '#BC155A' accent-3: '#E8952C' cta: '#E0605A' on-cta: '#FFFFFF' tint-1: '#B28B62' background-alt: '#EDEDED' line: '#585854' cta-accessible: '#D93B33' tint-1-accessible: '#7F5F3E' typography: display: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 300 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Quicksand fontSize: 28px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 0px md: 4px lg: 12px 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}' height: 54px button-secondary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 54px point-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 32px caution-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px summary-band: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 220px ingredient-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 58px connector-badge: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 50px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 48px benefit-tile: backgroundColor: '{colors.tint-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 64px price-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 300px --- # DESIGN.md — ライム×グレージュの美容サプリ LP（Lime and Warm Gray Beauty Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: クール・先進的、上品・高級、清潔・爽やか、情報量多め・訴求型 - **キーワード**: ライムイエロー・グレージュ・細字ゴシック・科学的ビジュアル・比較訴求・ミニマル枠線 - **地の質感**: マットな単色面。水滴やバブル、分子の 3D 画像で透明感とサイエンス感を出す - **形**: 角丸なしの直線的な箱と細い枠線が基本。ロゴ由来の六角形モチーフを装飾に使い、吹き出しは雲形やギザギザにする - **温度感**: ややクールで、グレージュでぬくもりを足す中間の温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E4F35C` | ブランドのライム。まとめ帯と強調面 | 14% | 画素の実測 | | `background` | `#F4F5F0` | ページの地色（オフホワイト） | 25% | 画素の実測 | | `secondary` | `#898681` | グレージュの説明面・注意ブロック | 15% | 画素の実測 | | `dark-section` | `#5A5A5A` | 成分名ラベル・濃色の帯 | 4% | 画素の実測 | | `surface` | `#FEFEFE` | カードと価格ボックスの白 | 13% | 画素の実測 | | `text` | `#685755` | 見出しの文字 | 2% | 画素の主要色に補正 | | `text-body` | `#685755` | 本文の文字 | 3% | 画素の主要色に補正 | | `on-dark` | `#E6E4DF` | 濃色面の上の白文字 | 1% | 画素の実測 | | `accent-1` | `#DDEF88` | グレー面の上のライム強調文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#BC155A` | 「注意」ラベルのマゼンタ | 0% | 画素の実測 | | `accent-3` | `#E8952C` | 数値強調のオレンジ | 0% | 推定 | | `cta` | `#E0605A` | 主購入ボタンのコーラルレッド | 0% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#B28B62` | 特典タイルのキャメル | 1% | 画素の実測 | | `background-alt` | `#EDEDED` | 購入エリアのライトグレー地 | 5% | 画素の実測 | | `line` | `#585854` | 枠線と区切り線 | 0% | 画素の実測 | | `cta-accessible` | `#D93B33` | AA を満たす補正値（計算） | | 計算 | | `tint-1-accessible` | `#7F5F3E` | AA を満たす補正値（計算） | | 計算 | - 地はオフホワイトにする。グレージュの説明面とライムのまとめ帯を交互に置いてメリハリを出す - ライムは「結論・解決」を示す面に使う。濃グレーの文字を載せる - グレー面の上で強調する語はライム文字にする - マゼンタは「注意」ラベルにだけ使う - 数値の訴求（％・倍率）だけはオレンジのグラデーション文字にしてよい - 主 CTA はコーラルレッド、サブの購入ボタンは濃グレーにして差をつける - `button-primary` は文字 `#FFFFFF` × 背景 `#E0605A` のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D93B33`、4.54:1）を使う。 - `benefit-tile` は文字 `#E6E4DF` × 背景 `#B28B62` のコントラスト比が 2.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `tint-1-accessible`（`#7F5F3E`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大コピー（写真上の白文字） | ゴシック | Noto Sans JP | 700 | 30px | 1.9 | 0.02em | | `headline-lg` | セクションの大見出し | 明朝 | Noto Serif JP | 400 | 24px | 1.5 | 0.1em | | `headline-md` | POINT 下の見出し | ゴシック | Zen Kaku Gothic New | 300 | 20px | 1.6 | 0.12em | | `headline-sm` | 注意ブロック・ライム帯の太字コピー | ゴシック | Noto Sans JP | 700 | 16px | 1.8 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.08em | | `note` | 注釈・参照論文 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | 欧文ロゴ風の商品名と英字ラベル | 欧文サンセリフ | Quicksand | 300 | 28px | 1.2 | 0.04em | | `label-button` | 購入ボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.15em | - 見出しは細字（300〜400）で字間を広く取り、上品に見せる - 強い訴求をする箇所（注意ブロック・まとめ帯）だけ太字 700 にする - 数値は欧文の大きなサイズにし、単位は小さくする - 英字の小見出しは字間を広げたスモールキャップ風にする - 注釈は ※ 付きで 9px 前後、本文より薄いグレーにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。説明は写真と文を左右に交互に並べる 2 分割 - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - POINT ごとに白枠の見出し、本文、注意ブロック、ライムのまとめの順をくり返す - 写真は画面幅いっぱいで見せ、本文ブロックは左右に約 8% の余白を取る - 写真と文の 2 分割は写真を画面端まで寄せ、左右を交互に入れ替える - 比較グラフや図解は白いカードの中に置く - 価格ボックスは白い面にして、ライム地の上に浮かせる ## Elevation & Depth - 影はほぼ使わず、色面の差と細い線で階層を表す - 白い価格カードは影なしで、色地との対比だけで浮かせる - 購入ボタンだけ、上部にわずかな明るいグラデーションを付けて立体感を出す ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。成分の写真は左右の半幅で断ち切る。ベン図は円 - **セクション境界**: 直線で区切る。ボックス下に下向き三角の吹き出しを付けて次へつなぐ - ボタンは角丸なしの矩形にし、右端に縦線で区切った「››」を置く - 成分カプセルは角丸 12px 程度の濃グレー帯にし、左に円形写真を重ねる - 接続語の「しかも」「だから」は濃グレーの円バッジに下向き三角を付ける - 悩みの吹き出しは雲形、「合計で〜」の強調はギザギザの星形にする - 装飾にはロゴ由来の六角形を大きく、半透明で置く ## Components - **主購入ボタン**（`button-primary`）: コーラルレッドの矩形ボタン。右端に縦の区切り線と「››」を置く - **サブ購入ボタン**（`button-secondary`）: 通常購入用の濃グレーの矩形ボタン。形は主ボタンと同じ - **POINT 見出し枠**（`point-heading`）: 白い面を 1px の濃グレー枠で囲み、字間の広い英字と番号を入れる - **注意ラベル**（`caution-label`）: やや傾けたマゼンタの帯に白い太字を載せ、グレージュのブロック左上に重ねる - **ライムのまとめ帯**（`summary-band`）: 注意ブロックの直下に置くライムの面。濃グレーの太字で結論を述べ、右に商品の写真を斜めに配置する - **成分名＋配合量ラベル**（`ingredient-label`）: 左側は濃グレーに成分名を白文字で、右側はライムに配合量を入れる。下に三角を付ける - **接続語の円バッジ**（`connector-badge`）: 直径 50px ほどの濃グレーの円に白文字の接続語を入れ、下向きの三角を付ける - **Q&A カード**（`faq-item`）: 写真の上に白い Q 行と半透明の A 行を置き、Q と A は大きく細い欧文で表示する - **定期特典タイル**（`benefit-tile`）: キャメル色のタイルを 2×2 に並べる。小さなラベルと大きな白文字の特典名を入れる - **価格カード**（`price-box`）: 白いカードに通常価格、割引バッジ、細字で大きな価格を並べ、細線で区切る ## Do's and Don'ts **Do** - ライムは「解決・結論」の面と強調にだけ使い、グレージュと交互に並べる - 見出しは細字で字間を広く取り、上品さを保つ - ロゴ由来の六角形を写真の上に大きく、半透明で重ねる - 配合量などの数値ははっきり大きく見せる - 注意ブロックは悩みの提示から問題、ライムの結論へ順に流す - 購入ボタンは角のある矩形にし、右端に区切り線と矢印を付ける **Don't** - ピル型や丸みの強いボタンにしない - パステルの多色使いをしない。主な色はライム・グレー・白に絞る - ドロップシャドウを重く付けない - マゼンタを注意ラベル以外に使わない - 本文を太字にしない - ライムの面に白文字を載せない（読みにくくなる） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の強みを一言で示し、パッケージを見せる）: ライムの水滴背景に白の太字コピーを大きく置き、中央にスティック包装、下にグレージュの面と箱の写真を置く 2. **配合サマリー**（主成分とサポート成分を一覧で見せる）: グレージュの帯に主成分を書き、「＋」の下に円形写真付きのカプセルを 3 つ並べる 3. **イメージビジュアル**（使ったときの理想像を見せる）: 笑顔の人物写真を全面に置き、英字ラベルと白のコピー、六角形の装飾を重ねる 4. **効果の 3 要素**（数値で効果をまとめる）: 黄金色の液体背景に、白い円 3 つを重ねたベン図を置き、重なり部分をライムで塗る 5. **成分の解説**（主成分の仕組みを説明する）: 分子の 3D 図にライムのラベルを付ける。続けて見出しと本文を置く 6. **課題の提起**（一般品の弱点を示す）: グレージュのボックスに写真と本文を入れ、ライムの強調文字で結論を述べ、下向きの三角で次へつなぐ 7. **解決の提示**（商品を解決策として紹介する）: ライムの全幅の面に、明朝の見出し、こだわり 4 点の山括弧表記、商品写真を置く 8. **選ばれる理由 POINT**（特長を 4 つ順に説明する）: 全面写真の扉に続けて、白枠の POINT 見出し、2 分割の写真と文、グラフ、注意ブロック、ライムのまとめをくり返す 9. **悩みの共感**（悩みを持つ人を当事者にする）: 暗めの人物写真の上に雲形の吹き出しを 4 つ並べ、縦書きの問いかけとライムの結論文を添える 10. **よくある質問**（不安を解消する）: くすんだ水色系の人物写真の上に Q&A カードを縦に並べる 11. **注意事項**（購入条件と規約を伝える）: グレーの枠の上部に濃グレーのタブ見出しを付け、明朝の見出しの下に本文を置き、要点にライムのマーカーを引く 12. **定期コースの案内**（定期コースの特典を見せる）: ライム地に説明文、キャメルの特典タイル 2×2、商品の白い価格カード、コーラルの購入ボタンを置く 13. **単品購入**（定期以外の購入方法を示す）: ライトグレー地に、白枠の商品カードと濃グレーのボタンを 2 セット置き、破線で区切る ## Imagery - 商品はマットな黒のパッケージにする。ライムのロゴが映えるよう、明るい背景で正面か斜めから撮る - 人物は白人女性の肌をアップで撮る。自然光で柔らかく、彩度はやや低めにする - 成分は柑橘、ナッツ、黄金色の油滴などを俯瞰かアップで、鮮やかに撮る - 分子や細胞は青と金の 3D CG にし、科学的な信頼感を出す - 背景にはライムの水滴、水色の水面、液体のうねりなど、透明感のあるテクスチャを使う - ロゴ由来の六角形を大きく切れ込ませて、装飾として配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため、推奨のみ記す - PC は中央に 750px 前後の 1 カラムで置き、写真は全幅に広げる - 写真と文の 2 分割は PC でも左右交互のまま、余白を広げる - 特典タイルは PC では 4 列に並べる - FV のコピーは PC では 48px 程度に拡大し、商品を右に寄せる ## 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-256f4fe5`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/odecomart/roptimal-lipopurec/#roptimal-lipopurec - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/16 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。