DESIGN.md — ミントとくすみピンクの透明感エステ LP（Aqua Teal and Blush Pink Esthetic Salon LP）

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

Overview

• 業種: 美容サロン・エステ・脱毛 ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 透明感・水光・ミント×ピンク・明朝見出し・ガラス玉バッジ・光の粒
• 地の質感: パステルのぼかしグラデーションに、光の玉・水滴・きらめきを重ねたしっとりした質感
• 形: 角丸カード、ピルラベル、円形のガラス調バッジ、雲形の吹き出し、V 字のセクション境界
• 温度感: やや暖かい。生成りとピンクにミントを差して、涼しさも出す

Colors

• 地は生成りとパステルのグラデーションが中心。純色のベタ塗りは帯とフッターだけにする
• 見出しの強調語はミントティールで塗り、それ以外の文字は濃いグレーにする
• 価格・結論・AFTER はピンク〜赤ラベルで目立たせる
• ミント系とピンク系のセクションを交互に置いてリズムを作る
• 暗いグレーの地は悩みの提起と BEFORE のような“問題”の場面だけに使う
• マーカーの黄色は見出し 1 行の下線だけに使う
• pill-tag は文字 #64BBB4 × 背景 #FFFFFF のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#39827C、4.51:1）を使う。
• price-label は文字 #FFFFFF × 背景 #D9505A のコントラスト比が 4.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D53F4A、4.53:1）を使う。
• faq-card は文字 #F9FEFF × 背景 #50AFAB のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#3A807D、4.52:1）を使う。

Typography

• 見出しは明朝、本文と UI はゴシックで分ける
• 見出しの中の強調語だけをひと回り大きくし、ミント色にする
• 小さな前置き文を「＼ ／」の斜線で挟んでから見出しを置く
• 特大コピーは写真の上に置き、白〜銀のグラデーションと淡い影を付ける
• 見出しは 2 行に改行し、中央揃えにする
• 本文は 2〜3 行で収め、中央または左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。円形バッジは 3 つ横並び、比較表は 3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は全幅か左右 4% の余白で置く
• カードは白い地か淡いグラデーションの地にし、画面幅の 92% にする
• 悩み・特長は円形バッジを 3 つ並べて見せる
• 工程は番号付きの縦の流れで、左に細い縦線を引く
• 比較表は自社の列をピンクの枠で囲んで強調する
• セクションの間は V 字やゆるいカーブで区切る

Elevation & Depth

• カードには薄く広い影を付ける（0 4px 16px、黒 6%）
• 円形のガラス調バッジは内側に光と白い縁を付けて立体的にする
• Instagram 風の写真枠は白フチを付け、少し傾けて影を落とす
• 口コミのリストは金色の額縁の中に置く

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形を基本にする。顔のアップは円、モデルは不定形のマスクで切り抜く
• セクション境界: V 字の切り込みや下向きのカーブ。グラデーションのぼかしでつなぐ
• ラベルは白地にミント文字のピル型にする
• アコーディオンは淡いピンクの角丸バーに、右端にピンクの丸い矢印を付ける
• 吹き出しは雲形かもこもこした形で、白〜パステルにする
• 番号は塗りつぶしたミントの円に白い明朝の数字

Components

• ガラス玉の円形バッジ（glass-badge）: 半透明の銀色の円に明朝の 2 行テキストを入れ、きらめきを添える。3 つ並べる
• 悩みタグ（pill-tag）: 白地のピル型にミント文字。悩みの種類を 3 つ横に並べる
• アコーディオンバー（accordion-bar）: 淡いピンクの角丸バーで、右端にピンクの丸い開閉アイコンを置く。店舗一覧にも使う
• 初回価格ラベル（price-label）: 赤の小さなラベルの横に、赤い明朝の大きな価格を置く。通常価格は枠で囲んで添える
• ビフォーアフター（before-after）: 茶色の BEFORE 帯と赤い AFTER 帯の下に写真を左右に並べ、間に矢印の切り込みを入れる
• 工程の番号見出し（step-number）: ミントの円に番号を入れ、明朝の工程名とピンクのピルラベルを横に並べる
• 比較表（compare-table）: 左の項目列はミント、自社の列はピンクの見出しと枠で囲んで◎、他社は灰色で×にする
• FAQ カード（faq-card）: ティール地の上に、白い質問バーとミントのセリフ体の Q を置き、回答は半透明の枠の中に白文字で書く
• 雲形の吹き出し（speech-cloud）: 見出しの前置きやポイントを、もこもこの白い吹き出しに入れる

Do's and Don'ts

Do - 地にはミントとピンクのパステルのぼかしを使い、白い光の粒を散らす - 見出しは明朝にし、強調語だけをミント色で大きくする - 悩み・原因・解決の流れを図解とバッジで視覚化する - 数値の実績は金色のメダル形で 3 つ並べる - 写真は明るく露出が高めで、肌のツヤを見せる

Don't - 彩度の高い原色やネオンカラーを使わない - 見出しを太いゴシックだけで作らない - 暗い面を広く使わない（悩みの提起の場面を除く） - 角が鋭い四角いボタンや枠だけで組まない - 余白を詰めて文字を密集させない

Page Structure

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

1. ファーストビュー（透明感のある肌のイメージと実績で引き付ける）: モデルのアップ写真に銀色の明朝の特大コピーを重ね、円形の悩みタグと金色の実績メダルを 3 つ置く
2. 悩みの提起（悩みのタイプを自分ごと化させる）: グレーの地にピルタグを 3 つ並べ、顔写真に引き出し線と円形のアップ写真を付けて図解する
3. 原因の解説（タイプ別の原因を示す）: ティールの帯の見出しの下に、ピンクのアコーディオンを 3 つ並べ、肌比較の写真カードを添える
4. 結論・解決の提示（総合ケアの必要性を伝える）: 赤い結論ラベル、マーカー付きの見出し、V 字に切ったピンクの帯で解決の場面へ移る
5. コース紹介（新しいコースと初回価格を提示する）: パステルの地に施術写真と赤い価格を置き、3 ステップの図解を横に並べる
6. ビフォーアフター（効果を実証する）: BEFORE と AFTER の 2 列を 3 段並べる
7. 特長・こだわり（独自成分と低刺激を訴求する）: POINT バッジ、研究写真のカード、否定形の言葉を入れたガラス玉バッジを 3 つ置く
8. メディア掲載（権威付けをする）: グレーの地に金色の紙吹雪を散らし、雑誌の誌面を並べる
9. 成分の解説（仕組みを理解させる）: ピンクの地にしずくのイラストを置き、白いカードの中にキャラクター付きの肌断面図を入れる
10. 従来品との比較（優位性を示す）: ティールの帯の見出しの下に 3 列の比較表を置き、自社の列をピンクで囲む
11. 施術の流れ（施術の手順を具体的に見せる）: 番号の円と縦線で 2 つの工程をつなぎ、写真・ラベル・説明文を交互に繰り返す
12. 料金（価格を明示する）: 欧文の飾り見出しの下に、グラデーションのカードで通常価格と初回の赤い価格を並べる
13. お客様の声（社会的証明を示す）: 金色の額縁の中に口コミのリスト、横スクロールの顔写真カード、傾けた SNS 投稿風の写真を置く
14. よくある質問・店舗一覧（不安を解消し、予約へ導く）: ティール地の FAQ カードの後、エリアごとの白いカードの中にピンクの店舗アコーディオンを並べ、ティールのフッターで締める

Imagery

• 30〜40 代の女性モデルを白背景・高めの露出で撮り、ツヤ肌を強調する
• 施術写真は施術台の上でタオルターバンを巻いた、清潔なサロンの場面
• 肌のアップはビフォーアフターがわかる鼻周りの接写
• 肌断面図は肌色のパステルのフラットなイラストに、丸い表情のキャラクターを添える
• 装飾は水滴、光のボケ、きらめき、プリズムのぼかし
• 製品は小さな薬剤瓶や美容機器の切り抜き写真
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は SP のデザインを幅約 480px のまま中央に置く
• PC の左右の余白は、ミント〜ピンクの淡いグラデーションに大きな欧文の流し文字を重ねる
• PC は左上にロゴとページ内リンクの縦メニューを固定する
• PC でも中の要素の並びや文字サイズは 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 行書くと起動時に読み込まれる。