--- version: alpha name: Aqua Mint Clinical Skincare LP description: 淡いミントブルーの地に、ティールとビビッドオレンジで成分と数値を強調する機能性スキンケアLP。悩みのセクションだけグレーの暗い地にする。成分は丸い写真と番号付きの白カードで、清潔感と理系らしい信頼感を出す。 colors: primary: '#4BCCCB' cta: '#FE620A' on-cta: '#FFFFFF' background: '#FEFFFF' background-alt: '#D3EDEE' tint-1: '#A8E3E9' tint-2: '#E4F3F3' dark-section: '#737D7C' on-dark: '#FBFFFF' text: '#535457' accent-1: '#FEBC02' line: '#F5B800' text-muted: '#929394' primary-accessible: '#258281' cta-accessible: '#CF4B01' typography: display: fontFamily: Montserrat fontSize: 110px fontWeight: 600 lineHeight: 1.0 letterSpacing: -0.02em 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: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Montserrat fontSize: 56px fontWeight: 300 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px number-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px concern-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px check-list-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px feature-tab-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px speech-box: backgroundColor: '{colors.tint-2}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 120px free-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px faq-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px --- # DESIGN.md — ミントブルー×オレンジの機能性スキンケアLP（Aqua Mint Clinical Skincare LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 化粧品・スキンケア ／ **雰囲気**: 清潔・爽やか、信頼・誠実、情報量多め・訴求型 - **キーワード**: ミントブルー・ティール・オレンジの数値強調・丸写真・点線枠・斜線ストライプ - **地の質感**: 淡い斜線ストライプの地紋と、水のテクスチャ写真で清涼感を出す - **形**: 角丸の白カード、正円の写真とバッジ、ピル型ラベル、点線の枠 - **温度感**: クールで清潔。オレンジのアクセントで少し温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4BCCCB` | ブランドのティール。バッジ・ラベル・番号に使う | 5% | 画素の実測 | | `cta` | `#FE620A` | 強調のオレンジ。数値・ラベル・無添加バッジに使う | 3% | 画素の実測 | | `on-cta` | `#FFFFFF` | オレンジ面の上の白文字 | 0% | 画素の主要色に補正 | | `background` | `#FEFFFF` | カードと白地 | 33% | 画素の実測 | | `background-alt` | `#D3EDEE` | セクション地の淡いミント | 22% | 画素の実測 | | `tint-1` | `#A8E3E9` | 濃いめのアクアの帯地（特長一覧・使い方） | 8% | 画素の実測 | | `tint-2` | `#E4F3F3` | 説明文の背景に敷く淡いミントの吹き出し | 6% | 画素の実測 | | `dark-section` | `#737D7C` | 悩み提起セクションのグレー地 | 8% | 画素の実測 | | `on-dark` | `#FBFFFF` | グレー地の上の白見出し | 0% | 画素の実測 | | `text` | `#535457` | 見出しと本文のチャコール | 2% | 画素の実測 | | `accent-1` | `#FEBC02` | サブで使う黄色の丸バッジ | 2% | 画素の実測 | | `line` | `#F5B800` | 黄色の区切り帯 | 0% | 推定 | | `text-muted` | `#929394` | 注釈のグレー文字 | 0% | 画素の実測 | | `primary-accessible` | `#258281` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#CF4B01` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いミントを交互に置き、白カードを浮かせる - 数値と成分名のキーワードはオレンジの大きな文字で強調する - ティールは番号・ピル型ラベル・丸バッジに使う - 悩みのセクションだけグレーの暗い地にして、空気を変える - セクションの境目にはティールと黄色の細い二重帯を入れる - オレンジは一画面に 1〜2 か所までにする - `pill-label` は文字 `#FFFFFF` × 背景 `#4BCCCB` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258281`、4.58:1）を使う。 - `concern-badge` は文字 `#FFFFFF` × 背景 `#4BCCCB` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#258281`、4.58:1）を使う。 - `free-badge` は文字 `#FFFFFF` × 背景 `#FE620A` のコントラスト比が 3.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CF4B01`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのパーセントなどの大きな数値 | 欧文サンセリフ | Montserrat | 600 | 110px | 1.0 | -0.02em | | `headline-lg` | FVのキャッチ、セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 28px | 1.4 | 0.08em | | `headline-md` | 特長の見出し（番号の横） | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.4 | 0.08em | | `headline-sm` | ピル型ラベル、Qの質問文 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.1em | | `body-md` | 説明文、回答文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.05em | | `accent` | 大きな細線の番号と英字の見出し | 欧文サンセリフ | Montserrat | 300 | 56px | 1.0 | 0.0em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.03em | - 見出しは字間を広めにとった太いゴシックにする - 番号は細い Montserrat を大きく、ティール色で置く - 数値は本文の 2〜4 倍の大きさで、オレンジにする - 英字見出しは大文字で、字間を広くとる - 成分名には※の番号を上付きで付け、注釈はカードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。成分の丸写真は 2〜3 列、無添加バッジは 4〜5 列 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは左右 6% の余白をとって中央に置く - 特長の見出しは、左に大きな番号、右に 2 段の見出し - カードの中は、ラベル→写真→説明文の吹き出し→注釈の順 - 特長一覧は番号タブ付きの横長カードを 4 枚縦に並べる ## Elevation & Depth - カードは影をつけず、細い淡い枠線で浮かせる - FVの商品写真にだけ自然な落ち影を付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 成分写真は正円。人物写真は角丸か正円で、オレンジの縁取りを付ける - **セクション境界**: 斜めの三角形の色面、下向き三角、ティールと黄色の二重帯 - ラベルは両端に点を付けたピル型にする - 特長一覧と FAQ の枠は点線にする - 悩みの括りは両端が弧になった括弧型の枠にする ## Components - **ピル型ラベル**（`pill-label`）: 両端に点を付けたティールかオレンジのピル型。左右に点線を伸ばす - **番号付きの特長見出し**（`number-heading`）: 細い大きな数字の下にオレンジの三角。右に小見出しと大見出しを2段で置き、細線で区切る - **悩みの丸バッジ**（`concern-badge`）: ティールか黄色の正円に、白い太字を2行で入れる - **悩みのチェックリスト**（`check-list-card`）: グレー地の上の白カード。オレンジのチェックアイコンを付けた項目を5つ並べ、四隅に小さな点を置く - **番号タブ付きの特長カード**（`feature-tab-card`）: 左上にティールの三角タブと番号。白地を点線で囲む - **説明文の吹き出し**（`speech-box`）: 淡いミントに斜線を重ねた地。左上に小さなしっぽを付ける - **無添加の丸バッジ**（`free-badge`）: オレンジの正円に白文字。斜線で打ち消しを表す - **FAQ カード**（`faq-card`）: ティールの点線で囲んだ白カード。Q と A は細い線で区切り、A はティール色にする ## Do's and Don'ts **Do** - 数値はオレンジの特大の欧文数字で見せる - 成分は正円の写真に名前を添えてグリッドに並べる - セクションの区切りにはティールと黄色の二重帯を使う - 地には淡い斜線ストライプを敷いて、清潔な質感を出す - 注釈の※はカードの下に小さくまとめる **Don't** - 濃い原色を広い面積に塗らない - 数値以外にオレンジを多用しない - 明朝体や手書き書体を使わない - 濃い影や立体的な装飾をつけない - 写真を四角いままベタ貼りしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（成分の配合率と商品を一目で伝える）: 水の質感の背景に、キャッチ、オレンジの特大数値、斜めに置いた商品を配置。下に丸バッジを3つ並べる 2. **悩みの提起**（読み手に当てはまる悩みを自覚させる）: グレー地に白の見出し。白カードのチェックリスト5項目と、括弧型の枠で囲った原因の提起 3. **解決の提示**（商品を解決策として示し、効果を4つ挙げる）: 白地の見出しの下に、商品を中心に置き、周りにティールと黄色の丸バッジを4つ配置 4. **特長一覧**（特長4つの要約）: アクア地に番号タブ付きの点線カードを4枚。キーワードの数字はオレンジ 5. **特長詳細（主成分）**（主成分の説明と配合率）: 番号見出し、白カード、英字ラベル、丸い人物写真、吹き出し、しずく形の背景に置いた数値 6. **特長詳細（副成分）**（サポート成分の紹介）: ラベルごとに、丸い成分写真を2〜3列のグリッドで並べる 7. **無添加・日本製**（安全性と品質の訴求）: オレンジの丸バッジを9個並べ、モノクロの工場写真を添える 8. **使い方**（使う順番と使用量を示す）: アクア地に英字見出し。円のアイコンを矢印でつないだステップ、オレンジのタブ付き写真カード、注意事項の箇条書き 9. **よくある質問**（購入前の不安を解消する）: 角括弧で挟んだ見出しと、点線枠の Q&A カードを縦に並べる ## Imagery - 商品は白いチューブを斜めに置き、クリームのテクスチャを添える - 背景には水滴や水面のアクアの写真を使う - 成分は素材の接写を正円で切り抜く - 人物は肌に塗っている顔のアップを使い、オレンジの円と重ねる - 工場写真はモノクロにして品質感を出す - 使い方のアイコンはティールの線画を白い円の中に入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP と同じ縦長のレイアウトを中央に置き、幅は 750px 程度にする - 左右の余白は淡いミントの斜線ストライプで埋める - 成分グリッドは PC で 4 列まで広げてよい ## 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-854f2e22`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/virginbeautyshop/kwm-az-sc-20/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。