DESIGN.md — ミントブルー×オレンジの機能性スキンケアLP（Aqua Mint Clinical Skincare LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: ミントブルー・ティール・オレンジの数値強調・丸写真・点線枠・斜線ストライプ
• 地の質感: 淡い斜線ストライプの地紋と、水のテクスチャ写真で清涼感を出す
• 形: 角丸の白カード、正円の写真とバッジ、ピル型ラベル、点線の枠
• 温度感: クールで清潔。オレンジのアクセントで少し温かみを足す

Colors

• 地は白と淡いミントを交互に置き、白カードを浮かせる
• 数値と成分名のキーワードはオレンジの大きな文字で強調する
• ティールは番号・ピル型ラベル・丸バッジに使う
• 悩みのセクションだけグレーの暗い地にして、空気を変える
• セクションの境目にはティールと黄色の細い二重帯を入れる
• オレンジは一画面に 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

• 見出しは字間を広めにとった太いゴシックにする
• 番号は細い 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。