--- version: alpha name: Translucent Pale Blue Mincho Skincare LP description: 淡い青灰の地に白の大きな角丸カードと楕円写真を重ね、明朝体と細い筆記体の英字で透明感と上品さを出す美容液LP。CTAはくすんだ青緑のピル型、価格と保証はゴールドで強調する。 colors: primary: '#3DAABA' cta: '#3EA9B9' on-cta: '#FFFFFF' background: '#E6EBEF' surface: '#FEFEFE' background-alt: '#F7F1E5' text: '#4D4D4D' text-body: '#5B5652' accent-1: '#CE9244' accent-2: '#B59A6A' tint-1: '#FAEFE4' secondary: '#8B8E9A' dark-section: '#333333' line: '#BAC6CA' cta-accessible: '#2F818D' accent-1-accessible: '#926326' accent-2-accessible: '#8B7245' typography: display: fontFamily: Shippori Mincho fontSize: 64px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.06em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Dancing Script fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Serif JP fontSize: 56px fontWeight: 500 lineHeight: 1.1 rounded: sm: 6px md: 20px lg: 32px full: 999px spacing: unit: 8px card: 24px section: 72px 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: 56px button-secondary: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px script-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 28px ingredient-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 80px product-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 560px discount-arrow: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 90px guarantee-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 90px benefit-list: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' rounded: '{rounded.lg}' height: 340px lead-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 70px review-carousel: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 290px --- # DESIGN.md — 淡青×白の透明感スキンケアLP（Translucent Pale Blue Mincho Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 上品・高級、清潔・爽やか、やさしい・柔らかい、信頼・誠実 - **キーワード**: 透明感・淡いブルーグレー・明朝体・楕円写真・筆記体英字・ゴールドの価格 - **地の質感**: ぼかした光や水滴の背景に白い面を重ね、霞がかった柔らかい質感 - **形**: 大きな角丸カード、縦長の楕円・カプセル型写真、ピル型ボタン、円形の成分バッジ - **温度感**: やや寒色寄り。価格・保証部分だけ暖色のゴールドとベージュ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3DAABA` | ブランド青緑（CTA・強調見出し） | 2% | 画素の実測 | | `cta` | `#3EA9B9` | 主CTAボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上文字 | 0% | 画素の主要色に補正 | | `background` | `#E6EBEF` | ページ地の淡いブルーグレー | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白の角丸カード | 28% | 画素の実測 | | `background-alt` | `#F7F1E5` | 使い方セクションのベージュ地 | 8% | 画素の実測 | | `text` | `#4D4D4D` | 見出し文字（チャコール） | 3% | 画素の実測 | | `text-body` | `#5B5652` | 本文・注釈 | 2% | 画素の主要色に補正 | | `accent-1` | `#CE9244` | 価格・特典のゴールド | 1% | 画素の実測 | | `accent-2` | `#B59A6A` | 保証・特典帯のゴールド面 | 3% | 推定 | | `tint-1` | `#FAEFE4` | 割引帯のベージュ | 1% | 画素の実測 | | `secondary` | `#8B8E9A` | 成分バッジ・ラベルのグレー | 1% | 画素の実測 | | `dark-section` | `#333333` | 通常購入のサブボタン | 0% | 画素の実測 | | `line` | `#BAC6CA` | 罫線・枠線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#2F818D` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#926326` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#8B7245` | AA を満たす補正値（計算） | | 計算 | - 地は淡いブルーグレー、情報は白の角丸カードに載せる - 青緑は主CTAと強調見出しの一部だけに使う - 価格・割引・特典・保証は暖色ゴールドに切り替えて特別感を出す - 使い方セクションのみベージュ地にして章を区切る - 黒系は通常購入のサブボタンに限定 - 見出し文字は純黒を避けチャコールで柔らかく - `button-primary` は文字 `#FFFFFF` × 背景 `#3EA9B9` のコントラスト比が 2.77:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#2F818D`、4.52:1）を使う。 - `discount-arrow` は文字 `#CE9244` × 背景 `#FAEFE4` のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#926326`、4.59:1）を使う。 - `guarantee-banner` は文字 `#FFFFFF` × 背景 `#B59A6A` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#8B7245`、4.57:1）を使う。 - `benefit-list` は文字 `#FFFFFF` × 背景 `#B59A6A` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#8B7245`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書き大コピー | 明朝 | Shippori Mincho | 400 | 64px | 1.1 | 0.05em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 400 | 28px | 1.6 | 0.06em | | `headline-md` | 小見出し・強調見出し | 明朝 | Noto Serif JP | 400 | 22px | 1.6 | 0.05em | | `accent` | 見出し上の筆記体英字ラベル | 欧文スクリプト | Dancing Script | 400 | 22px | 1.2 | 0.02em | | `body-md` | 本文・説明 | 明朝 | Noto Serif JP | 400 | 14px | 1.9 | 0.05em | | `note` | ※注釈・定期条件 | ゴシック | Noto Sans JP | 400 | 10px | 1.7 | 0.02em | | `label-button` | CTAボタン文字 | 明朝 | Noto Serif JP | 500 | 17px | 1.5 | 0.08em | | `headline-sm` | 価格数字 | 明朝 | Noto Serif JP | 500 | 56px | 1.1 | 0.0em | - 見出し・本文とも明朝で統一し、注釈だけゴシック - 見出し上に細い筆記体英字を青緑で添える - FVと情緒コピーは縦書きを使う - 見出しは字間を広めに取り軽く見せる - 価格の数字は大きくゴールド、円・税込は小さく添える - 注釈記号※は上付きで小さく - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、成分比較や効果は 2 列の円・カプセル - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右 6% 余白で中央に置く - 写真は左右交互に寄せて余白にコピーを置く - 見出しは中央揃え、本文は左揃え - 注釈は各ブロック右下に小さく - セクション間はたっぷり余白で静かに ## Elevation & Depth - 白カードはごく薄い影か影なしで地色差で浮かせる - 商品ボトルの下に柔らかい落ち影 - 成分バッジの円に淡い影 - ボタンは影なしのフラット ## Shapes - **角丸**: 小 6px ／ 中 20px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 縦長カプセル・楕円・円形に切り抜き、一部は画面外にはみ出す - **セクション境界**: 大きなアーチ型・半楕円の白面で次のセクションへつなぐ - 直角の写真は使わない - 成分ポイントは円形または角丸ピル枠 - カードは大きな角丸 - セクション上端をドーム状に丸める ## Components - **主CTAボタン**（`button-primary`）: 青緑のピル型、2行明朝文字、右端に白丸の矢印アイコン - **通常購入ボタン**（`button-secondary`）: チャコールのピル型、白文字と矢印丸 - **筆記体英字ラベル**（`script-label`）: 見出し直上に置く細い青緑の筆記体英字 - **成分円バッジ**（`ingredient-badge`）: 細線の円に成分名、上にグレー円の分類ラベルを重ねる - **商品・価格カード**（`product-card`）: 白の大角丸カードに商品名、医薬部外品の枠ラベル、ボトル写真、価格 - **割引矢印帯**（`discount-arrow`）: ベージュの下向き五角形にゴールド文字で割引率 - **返金保証帯**（`guarantee-banner`）: ゴールドグラデの角丸帯に白文字、両脇に月桂樹装飾 - **特典リスト**（`benefit-list`）: ゴールド地のドーム型面に白丸番号、点線区切りで3項目 - **斜線付き誘導見出し**（`lead-heading`）: 左右に斜めの二重線を置いた青緑の明朝2行見出し - **口コミ横スクロール**（`review-carousel`）: 正方形写真と短文の口コミを横に並べたカルーセル ## Do's and Don'ts **Do** - 余白を広く取り、明朝の細さで透明感を保つ - 写真は必ず楕円・カプセル・円で切り抜く - 見出しごとに筆記体英字ラベルを添える - 価格・特典ブロックだけゴールドで温度を上げる - 効能表現には※注釈を必ず添える - CTA直前に斜線付き誘導見出しを置く **Don't** - 原色や彩度の高い赤・黄をCTAに使わない - 太いゴシックの見出しを使わない - 角ばった写真枠や濃い影を使わない - 地を真っ白一色にしない（淡い青灰を残す） - 文字を詰め込みすぎない - 黒ベタの大きな面を作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **特典告知バナー**（購入者限定特典を最上部で予告）: 青緑の枠と斜めリボン見出し、右に動画サムネ 2. **ファーストビュー**（商品と透明感の世界観を伝える）: 笑顔の人物を楕円切り抜き、白抜き縦書き明朝の大コピーと商品ボトル 3. **ブランドの信頼性**（製薬会社の背景で安心感を出す）: 白いドーム面に明朝見出し、研究員・施設写真をカプセル型で配置 4. **商品概要とCTA**（成分と定期条件を見せ早期申込を促す）: 白角丸カードに成分円バッジ3つ、注釈、誘導見出し、主CTA 5. **コンセプト・アンバサダー**（ケアの方向性と起用人物の提示）: 筆記体英字＋明朝見出し、人物2名をカプセル写真で互い違いに 6. **成分解説**（保湿成分の特徴を理解させる）: 水滴球のビジュアル、2つのピル枠ポイント、比較表 7. **浸透技術**（技術の違いを図解）: 円形写真と細線の引き出し線、2つの円で比較図 8. **3つの有効成分**（成分ごとの役割を説明）: 番号つき円ラベルと横長カプセル写真、オレンジの浸透図 9. **開発ポイントまとめ**（特長を3つに要約）: 商品写真の右にピル枠3つを線でつなぎ、分子モチーフを散らす 10. **使い方**（使用手順を示す）: ベージュのドーム地に線画イラストを円で、ゴールド縦線でステップ連結 11. **ベネフィット**（使用後の気分と効果を情緒的に）: 人物楕円写真を左右交互、青緑帯の縦書きコピーと筆記体英字 12. **価格・オファー**（定期価格と割引を提示）: 白カードに通常価格→割引矢印帯→ゴールドの大きな価格 13. **返金保証・特典**（購入不安を除く）: ゴールドの保証帯と番号付き特典リスト 14. **お客様の声**（社会的証明）: 写真付き口コミの横スクロール、アンバサダーの手書き風コメントとサイン 15. **最終CTA**（定期と通常購入を選ばせる）: 定期価格カード＋主CTA、下に枠線カードの通常購入と黒ボタン ## Imagery - 白い服の人物を明るい自然光で撮り、高キーで柔らかく - 背景は淡い青や白の玉ボケ・光のにじみ - 商品は白背景で落ち影のみの切り抜き - 成分は水滴・泡・オイル球の接写で清潔感 - 使い方は細いグレー線の手描き風女性イラスト - 分子モデルを淡い青のガラス質感で散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に SP 幅（約 480〜750px）のカラムを置き左右は淡い青灰の背景で埋める - PCでは写真とテキストの左右配置を2カラムに広げてもよい - 縦書きコピーはPCでも維持し文字サイズを1.3倍程度に - 口コミは PC で 4 枚程度を同時表示 - CTAボタンは最大幅 420px に抑える ## 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-9eac5070`（元 LP の URL から採番） - **元 LP**: https://www.zenyaku-hbshop.com/lpm/lp/micomoi_lp_m241218_LS2/?adid=b2_micomoi_Essence_lp_te20_adr_LS2&argument=n5MdhEza&dmai=M058AD&sb_tracking=true&fbclid=PAZXh0bgNhZW0BMABhZGlkAasU_6x7CaABppof1m2vQyKZ-trNVg-W3f9jzNPbbIXcLXvGZOw24qPHwC34UAJo3WnOkA_aem_Qc2 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。