DESIGN.md — 桜ピンク×明朝の上品ジェルネイル通販 LP（Soft Pink Elegant Gel Nail Kit LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、情報量多め・訴求型
• キーワード: 淡いピンク・明朝見出し・白カード・ネイルチップ装飾・ミントCTA・数字訴求
• 地の質感: ほのかなグラデーションと水彩風のぼかしを重ねたマットな質感。白カードには柔らかい影を落とす。
• 形: 角の立った白カードと円形の写真・バッジ・カラーチップを組み合わせる。ボタンだけ丸いピル型。
• 温度感: 暖かめ。ピンクとベージュが中心で、悩みのパートだけグレーで温度を下げる。

Colors

• 地は白と淡いピンクを交互に置く。ときどきベージュやブルーグレーを挟んでリズムを作る。
• 強調はローズピンク1色だけにする。数字・価格・キーワードを太字で着色する。
• ミントは購入ボタンだけに使い、ピンクの地から浮き立たせる。
• 悩みのパートはグレーの写真地にする。解決のパートでピンクに戻す。
• 注意喚起や一部の強調帯には濃いグレーの面を使ってよい。
• カラー紹介の見出し帯は商品色に合わせた多色のピルを使う。ここだけ例外とする。
• button-primary は文字 #FFFFFF × 背景 #02BCB3 のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01847E、4.56:1）を使う。
• price-box は文字 #D9466E × 背景 #F5CAD6 のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AF244A、4.51:1）を使う。
• badge-circle は文字 #FFFFFF × 背景 #E46485 のコントラスト比が 3.25:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DB325E、4.54:1）を使う。
• benefit-card は文字 #D9466E × 背景 #FEFEFE のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AF244A、4.54:1）を使う。
• color-pill-heading は文字 #FFFFFF × 背景 #F4B5C8 のコントラスト比が 1.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DF2960、4.54:1）を使う。

Typography

• 見出しは明朝にし、キーワードだけ1.5倍の大きさでピンクにする。
• POINT番号は欧文セリフのイタリック体で大きく置き、上に小さな英字を添える。
• 英字の飾り文字は細いセリフ体にし、淡い色で背景に縦書きや大きな文字として敷く。
• 本文はゴシックで12px前後。強調部分は太字のピンクにする。
• 口コミ見出しは手書き風の書体にし、ピンクの手書き下線を添える。
• 価格は明朝のイタリック体で大きく、ピンクにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典は2列、カラーチップは3列。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約6%の余白をとり、斜めのグレーの影を背後にずらして置く。
• 写真とテキストは左右交互にずらし、画面端まで裁ち落とす。
• 購入ボックスは3回繰り返す。各ブロックは同じ構成にする。
• 数字訴求は写真の横に大きな数字とコメント吹き出しを並べる。
• 使い方は丸い写真と番号を縦の線でつなぐ。

Elevation & Depth

• 白カードの背後に、斜めにずらした淡いグレーの面を置き、浮いて見せる。
• 購入ボタンには柔らかいドロップシャドウとわずかな立体感をつける。
• コメント吹き出しは白地に小さな影をつける。
• そのほかの要素はほぼフラットにする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸なしの長方形で、画面端まで裁ち落とすかずらして配置する。付属品や使い方の写真は円形に切り抜く。
• セクション境界: 直線を基本とし、ゆるい曲線や斜めの面を重ねる。区切りに下向きの山形矢印を置く。
• 特典の訴求は円形バッジにし、上にチェック印をつける。
• カードは角丸なしかごく小さな角丸にする。
• 見出しを細い線のカギ括弧や斜線で挟む。
• ハッシュタグや見出しの帯はピンクの長方形にする。

Components

• 購入ボタン（button-primary）: ミントのピル型ボタン。カートアイコンと右向き矢印をつけ、影で立体的に見せる。
• 価格ボックス（price-box）: 商品の集合写真に、割引率の円形バッジ、取り消し線の通常価格、ピンクの大きな特価、枠線つきの送料無料帯を組み合わせる。
• 特長の円形バッジ（badge-circle）: ピンクの円に白文字で特長を2行で書き、上にチェック印を置く。3つ並べる。
• 特典カード（benefit-card）: 白カードに明朝で特典番号を書き、イラストと内容を載せる。2列で並べる。
• 悩みチェック帯（worry-check）: グレー写真の上に白い帯を置き、チェック印と悩みの文章を並べる。キーワードは太字にする。
• ポイント見出し（point-heading）: 大きなイタリックの番号と小さな英字を置き、明朝の2行見出しをつける。キーワードはピンクにする。
• 口コミカード（voice-card）: 写真と白カードを横に並べる。手書き風の見出しに下線を引き、本文と灰色ピル型の属性ラベルを載せる。
• カテゴリ帯見出し（color-pill-heading）: 多色のピル型帯に白い太字を載せ、その下に3列の円形カラーチップを並べる。
• 使い方ステップ（step-item）: 円形の写真の左上にピンクの明朝番号を置き、右に手順名と説明を書く。

Do's and Don'ts

Do - 見出しは明朝で、キーワードだけ大きくピンクにする。 - 白カードには斜めにずらした影面を添え、軽やかな立体感を出す。 - 空いた余白にネイルチップの切り抜き写真をあしらう。 - 満足度や持続期間などの数字は大きなセリフ体で見せる。 - 購入ボックスはページ内で3回以上、同じデザインで繰り返す。 - 注釈は小さいグレーの文字で各ブロックの直後に置く。

Don't - CTA以外にミント色を使わない。 - 原色の赤や黒を大面積に使わない。 - 見出しを太いゴシックだけで組まない。上品さが失われる。 - 角丸の大きいカードを多用しない。 - 写真を暗いトーンや硬いコントラストで扱わない。 - 強調色を複数増やさない。

Page Structure

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

1. ファーストビュー（対象と効果を一目で伝える）: 手元に寄った人物写真に縦書きの明朝コピーを重ね、ネイルチップを散らす。下に商品名の帯と円形バッジを3つ置く。
2. オファー・CTA（価格と割引で購入を促す）: 淡ピンク地に商品の集合写真、割引バッジ、大きな特価、送料無料帯、ミントのボタンを置く。
3. 特典（お得感を積み上げる）: ピンク地に白い特典カードを2列で6枚並べる。付属品は円形写真で見せる。
4. 悩みの提起（共感を得る）: グレー写真地にカギ括弧つきの見出しを置き、白いチェック帯を5本並べる。
5. 解決の提示（商品に橋渡しする）: 縦線でつないだ導入文の後、明朝の大きな見出しと人物写真を置く。
6. 満足度データ（数字で信頼を示す）: 濃ピンク地に写真と大きな%数字、コメント吹き出しを左右交互に並べる。
7. SNS投稿（人気と仕上がりの多彩さを見せる）: ハッシュタグ帯を添え、ネイル写真を3列のグリッドで並べる。
8. 選ばれる理由（特長を詳しく説明する）: POINT番号の見出し、写真、本文を5回繰り返す。地色はピンク・ベージュ・ブルーグレーで変える。
9. カラー選択（選ぶ楽しさを伝える）: 色見本のスクロール枠に加え、多色のピル見出しと円形チップを3列で並べる。
10. 導入実績（権威付けをする）: 白カードに学校名と地域タグを一覧で並べる。
11. お客様の声（体験談で安心させる）: 英字見出しの下に、写真と白カードの口コミを左右交互に3件並べる。
12. セット内容（付属品を詳しく見せる）: 白カードに品名・通常価格の枠・太字の特長・説明を載せ、縦に並べる。
13. 使い方（簡単さを伝える）: 背景に大きな英字を敷き、円形写真と番号で5ステップを縦に並べる。
14. 最終CTA・容器の特長（最後の後押しをする）: 購入ボックスを再掲する。容器の拡大写真と注意帯で補足する。

Imagery

• 指先と手元に寄った明るいハイキーの写真。白い服とふんわりした背景で撮る。
• 人物は透明感のあるメイクの女性。手を頬に添えるポーズにする。
• ネイルチップを白背景で切り抜き、余白に斜めに散らす。
• 商品は白背景の集合写真か、大理石風の背景で撮る。
• ピンクの水彩のにじみや花びらのぼかしを背景に重ねる。
• 淡いグレーの細いセリフ英字を背景の飾りに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではSPのデザインを中央に約750px幅で置き、左右を淡いピンク地で埋める構成を推奨する。
• PCで2カラムにする場合、写真と本文を左右に分け、POINTごとに左右を入れ替える。
• 特典カードはPCで3列、カラーチップは4〜6列に広げる。
• 見出しサイズはPCで約1.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 行書くと起動時に読み込まれる。