DESIGN.md — ミント×ピンクの氷菓風スキンケア LP（Pastel Mint and Pink Frozen Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、清潔・爽やか、やさしい・柔らかい、ポップ・元気
• キーワード: パステルミント・パステルピンク・氷・シャーベット・手書き擬音・波形の境界・涼感
• 地の質感: マットな単色面に、半透明の氷キューブ写真とフロスト質感を重ねる
• 形: 大きな波形のセクション境界、上が丸いタブ型の番号見出し、正円の特長バッジ
• 温度感: 冷たく涼しいがパステルで甘さがある

Colors

• 地は白と淡いミント（#EDF9F7）を交互に置き、商品比較だけ淡いピンク地にする
• ミントとピンクは2種類の商品の色として対で使う
• 強い濃色は使わず、文字は灰緑色で黒を避ける
• ミント文字は見出しや強調語、ピンク文字はもう一方の商品の強調に限定
• 注意事項の帯のみ濃い灰緑の面を使う
• マーカーは淡黄で見出しの下半分に敷く
• point-tab-card は文字 #62A59F × 背景 #EDF9F7 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#467A75、4.53:1）を使う。
• info-card は文字 #62A59F × 背景 #FFFFFF のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#467A75、4.5:1）を使う。
• ingredient-box は文字 #BE7594 × 背景 #FFFFFF のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B1597E、4.57:1）を使う。

Typography

• 見出しは中央揃えにして、改行は短めに入れる
• 擬音や感覚語は手書き風書体で大きく、色はミントかピンクにする
• 強調語は文字色を変えるか、白地のハイライトボックスで囲む
• 本文の色は灰緑色にし、純黒は使わない
• 注釈は小さい灰色の文字で、該当箇所のすぐ下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品比較だけ 2 カラム、特長バッジは 3 列
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 25px
• ポイントのカードは淡いミント地の全幅ボックスにする
• 写真は本文幅いっぱいの正方形で置く
• セクションの間に大きな波形の色面を挟んで区切る

Elevation & Depth

• 影はほとんど使わず、平面的に仕上げる
• 立体感は氷キューブ写真の透明感で出す
• カードは影を付けず、細い枠線か淡い面で区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの正方形。商品は斜めの2色背景で撮る
• セクション境界: 大きくうねる波形（丘のような曲線）
• ポイント番号は上が半円のタブ型で、カードから突き出させる
• 特長は白い正円のバッジを3つ並べる
• 情報カードは角丸 16px で細い枠線を付ける
• 成分ボックスは角丸 4px で、商品色の枠線にする

Components

• 波形セクション境界（wave-divider）: 次の地の色で大きな曲線を描き、上に盛り上げる
• POINT 番号カード（point-tab-card）: 上部の半円タブに細線の POINT 数字を入れ、下にミント見出しと内容を置く
• 特長の円形バッジ（circle-badge）: 白い正円に太字の短い効果名を入れ、3つ並べる
• 発売告知カード（info-card）: 白地に細いミント枠を付け、日付・案内文・SNS アイコンを並べる
• 氷キューブのアンカーナビ（ice-cube-nav）: 氷の写真の上に短いラベルと▼を置き、ランダムに傾けて散らす
• 成分ボックス（ingredient-box）: 商品の色の細い枠で囲み、成分名を中央揃えで並べる
• 白ハイライト語（highlight-word）: 見出しの一部を白いボックスで囲んで強調する
• 注意事項の見出し帯（notice-bar）: 濃い灰緑の全幅帯に白文字を中央揃えで置く
• 利用シーンのアイコン（scene-icons）: 線画アイコンを3つ並べ、下に短いラベルを付ける

Do's and Don'ts

Do - ミントとピンクの2色を対にして、2種類の商品を色分けする - 擬音のコピーは手書き風にして、ギザギザの効果線を添える - セクションの境界は波形にして、柔らかく切り替える - 見出しは灰緑の太字を中央揃えで置く - ※注釈は該当箇所の近くに小さく入れる

Don't - 黒や原色の濃い面を広く使わない - 強いドロップシャドウや光沢グラデーションを付けない - 直線だけの硬い区切りを続けない - 暖色の赤やオレンジを強調色に使わない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（商品の世界観を一目で伝える）: 上半分ミント・下半分ピンクの2色背景にする。商品をグラスに盛り、氷を散らして手書きのキャッチを重ね、下端は波形で切る
2. 商品紹介（新商品であることと価格を示す）: NEW ラベル、太字の中央見出し、正方形の商品写真、商品名・価格・注釈の順に並べる
3. 発売告知（発売日を知らせ SNS フォローへ誘導する）: 枠線付きの白い角丸カードに、日付と SNS アイコンを入れる
4. コンセプト（使用感を感覚的に伝える）: 手書きの擬音を2色で入れ、白ハイライトの強調語を含む中央揃えの文を置く
5. アンカーナビ（各セクションへ誘導する）: 氷キューブ3つにラベルと▼を入れ、傾けて配置する
6. 特長（効果と仕組みを説明する）: 斜め2色のイメージ写真の後に、POINT タブカードを並べる。円形バッジと図解を入れる
7. まとめコピー（ベネフィットを要約する）: ミントの太字見出しに淡黄のマーカーを引く
8. 商品比較（2種類から選ばせる）: 淡いピンク地に2カラムで写真・特徴・成分ボックスを並べ、下に共通成分のボックスを置く
9. 使用シーン（使うタイミングを提示する）: 英字見出しの下に、線画アイコンを3つ並べる
10. 使い方（手順を説明する）: 丸数字の手順を左に、線画イラストを右に置き、常温と冷凍の比較写真を続ける
11. 注意事項（安全上の注意を伝える）: 濃色の見出し帯の下に、◇付きの箇条書きを並べる

Imagery

• 商品はミントとピンクの斜め分割背景の上で、明るくフラットな光で撮る
• 半透明の氷キューブとシャーベット状の質感を周りに散らす
• フルーツやミントの葉を香りのイメージとして添える
• 人物やアイコンは細い線画のイラストで描く
• 写真の上に白い手書き文字とギザギザの効果線を重ねる
• 図解はパステル色のシンプルなイラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約 750px 幅のカラムを置き、両側は淡い地の色で埋める
• 商品比較の 2 カラムはそのまま保ち、余白を広げる
• FV の写真は横長に構図を組み直し、キャッチは左側に置く
• 波形の境界は横に引き伸ばして、曲線をなだらかにする

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