DESIGN.md — 紺×淡水色の清潔感ある まつ毛美容液 LP（Clinical Navy and Pale Blue Eyelash Serum LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、上品・高級、情報量多め・訴求型
• キーワード: 紺の明朝見出し・淡い水色の地・水滴・泡の質感・製薬系の信頼感・赤帯の実績訴求
• 地の質感: 水滴や泡、ガラスの透明感を出す淡いグラデーション。白い紙面に薄い影をつける
• 形: 円形バッジと泡の円、角を少しだけ丸めたカード、細い枠線のボックス
• 温度感: 寒色寄りで冷たく清潔。肌写真でほんのり温かみを足す

Colors

• 地は淡い水色・白・ベージュを交互に使い、セクションを切り替える
• 見出しは紺の明朝で統一し、強調したい語だけ大きくする
• 赤帯はランキング実績のセクションだけに使い、ほかでは使わない
• 金はメダル・月桂樹・バッジに限って使う
• 本文の強調は黄色マーカーと太字の紺を併用する
• POINT帯や見出しバーには中くらいの青を使う
• point-bar は文字 #FEFEFE × 背景 #3A8CCB のコントラスト比が 3.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#307BB4、4.51:1）を使う。

Typography

• 見出しは明朝、本文と数字はゴシックで分ける
• 見出しの中のキーワードは1.3〜1.5倍に拡大する
• 強調する語の上には傍点を打つ
• ※の注釈は必ず小さいグレーで添える
• 縦書きの明朝コピーを写真の余白に置いてもよい
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。2列・3列の円グリッドを併用
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 画像主体の帯を縦に積み、地色でセクションを区切る
• 写真と短いコピーは左右交互に配置する
• 成分は丸い写真を3列グリッドで並べる
• 使い方は番号・写真・説明文を横並びにする
• 白カードを地の上に浮かせて本文を載せる

Elevation & Depth

• 白カードには薄くぼかした影をつける
• 円形バッジには内側にやわらかな光沢のグラデーションをかける
• 影は使いすぎず、基本はフラットにする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物と製品は四角い写真。成分写真は円形に切り抜く
• セクション境界: 直線で区切る。図解には下向きの矢印やV字で流れを示す
• 特徴を示す語は円形バッジに入れる
• 価格は細い青枠の四角ボックスに入れる
• 吹き出しには角の小さな四角を使う

Components

• 価格ボックス（price-box）: 青い二重枠の中に、製品写真・商品名・価格・送料無料タグを横に並べる
• 円形特徴バッジ（circle-badge）: 紺の円に白い明朝の短い語を入れ、写真の上にジグザグに配置する
• ランキングメダル（ranking-medal）: 赤帯の上に金のメダルを5列で並べ、月桂樹で囲んだ大きな数字を添える
• レビュー吹き出し（review-bubble）: 星5つ付きの白い吹き出しを製品写真のまわりに散らして置く
• 悩みチェックカード（check-list-card）: 紺帯の上に白カードを置き、チェック付きの悩みを4行並べてマーカーで強調する
• POINT帯（point-bar）: 青い帯の左に星とPOINTのラベル、右に補足説明を置く
• 手順番号（step-number）: 01・02の大きな紺の数字を写真の左上に重ねる
• FAQ項目（faq-item）: 白カードの中でQとAを紺の太字で始め、項目間に罫線を引く

Do's and Don'ts

Do - 見出しは紺の明朝で上品に組む - 根拠となる注釈を※で丁寧に添える - 水滴・泡・ガラスの透明なモチーフで清潔感を出す - 図解（周期・比較表）でまつ毛の仕組みを説明する - 強調は黄色マーカーと傍点に限る

Don't - 赤を実績のセクション以外で使わない - ポップな丸ゴシックで見出しを組まない - 原色や蛍光色を地に使わない - 写真に強い影やフィルターをかけない - ボタンをピル型の派手なものにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（製品と効果のイメージを一目で伝える）: モデル写真の上に縦書きの明朝コピーを置く。下部は紺のグラデーションに大きな白い見出しと円形バッジ
2. 価格提示（単品とセットの価格を示す）: 青枠の価格ボックスを2つ縦に並べる
3. 特長サマリー（使いやすさなど3つの特長を示す）: 写真と明朝コピーを左右交互に3段並べる
4. 実績（ランキングの受賞歴で信頼を作る）: 赤帯に金の月桂樹と大きな数字を置き、メダルのグリッドと小さな実績リストを並べる
5. お客様の声（利用者の評価を見せる）: 製品写真のまわりに星付きの吹き出しを散らす
6. 開発背景（製薬企業ならではの信頼を示す）: 研究所の写真と、泡の上に置いた製品、明朝の見出し
7. 悩みの提起（目元の悩みに共感する）: 紺帯の上に目元の写真とチェックリストを載せた白カード
8. 仕組みの解説（毛周期を説明して必要性を伝える）: 円形の図を3つ矢印でつなぎ、続けて比較表を置く
9. 理想の提示と成分（魅力的なまつ毛の条件と、成分による裏付けを示す）: モデル写真に円形バッジを重ね、成分は円形写真の3列グリッドで並べる
10. 役割と筆の特長（製品の役割と使いやすさを伝える）: 青い見出しバー付きの白カードに3色の円を並べ、筆のアップ写真と吹き出しを添える
11. 使用方法（正しい使い方を示す）: 番号・写真・説明文の3ステップにPOINT帯を添える
12. 注意喚起と無添加（安心感を補強する）: 罫線入りのノート風カードを置き、配合しない成分を泡のような円で並べる
13. よくある質問（不安を解消する）: 製品写真の下にQ&Aカードを置く
14. クロージング（仕上がりのイメージで締める）: モデル写真に明朝のコピーを重ねる

Imagery

• 自然光で撮った、黒髪ボブの女性のナチュラルメイク写真
• 白・シルバーの細長いボトルを、水滴やガラスと一緒に撮る
• 目元を大きく写したクローズアップで使い方を示す
• 成分の素材は白地で撮り、円形に切り抜く
• 毛周期の図解は、ピンクの肌断面をフラットに描いたイラストにする
• 背景に淡い泡やボケた光を入れて透明感を出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は幅約420px相当の中央カラムで組み、両側に淡い水色の地を見せる
• SP では中央カラムを全幅に広げ、見出しは24〜30pxにする
• 3列の円グリッドは SP でも3列のまま縮小する
• 価格ボックスは SP でも写真と文字の横並びを保つ

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 行書くと起動時に読み込まれる。