DESIGN.md — 氷とパステル水色の清涼ボディケアLP（Icy Pastel Cooling Body Care LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、かわいい、やさしい・柔らかい
• キーワード: 氷・パステル水色・レモンと桃・結晶模様・線画イラスト・白カード
• 地の質感: 透明感のある氷やプリズムの結晶柄を背景に使い、その上に白い面を重ねる
• 形: 大きな角丸の白カード、六角形バッジ、ピル型ラベル、波線の飾り
• 温度感: 冷たく軽い。パステル色で甘さも少し足す

Colors

• 地は白を中心にし、セクションの外側を水色の帯や氷・結晶の柄で囲む
• 香りごとに黄色とピンクで色を分け、ラベル・ボタン・図に同じ色を通して使う
• 主CTAは黄色1色で目立たせ、香りを選ぶボタンはピンクを並べる
• 見出しや成分ラベルは濃い水色にし、本文は濃いグレーにする
• 原色に近い濃い色は使わず、パステルの明度を保つ
• button-primary は文字 #FFFFFF × 背景 #F3CE03 のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#595959、4.55:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #FCA5BB のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E90841、4.59:1）を使う。
• badge-hex は文字 #FFFFFF × 背景 #7DCCE1 のコントラスト比が 1.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#237F98、4.6:1）を使う。
• ingredient-tag は文字 #FFFFFF × 背景 #6494B1 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#4D7C98、4.51:1）を使う。
• badge-new は文字 #FCA5BB × 背景 #FFFFFF のコントラスト比が 1.87:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E90841、4.59:1）を使う。

Typography

• 和文の字間は広めに取り、軽さを出す
• セクションの英字タイトルは白い細めの字で水色の帯に載せる
• 小見出しは中央に置き、上下を水色の波線で挟む
• 商品名は水色の太字、価格は小さめのグレー
• 本文は中央揃えか、短い行で左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品画像の下に説明を縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• 商品ごとに1枚の大きな白い角丸カードにまとめ、水色の地の上に間隔をあけて並べる
• カードの中は商品画像→キャッチ→説明→バッジ→価格→ボタン→配合成分→使い方の順に並べる
• 使い方やおすすめポイントは円形の線画を3つ横に並べる（SPでは縦並びか2列）
• 香りの比較はピラミッド図と果物写真を左右に組む

Elevation & Depth

• 白カードにはごく薄い影を付け、氷の背景から少し浮かせる
• ボタンに影は付けず、平らな塗りにする
• 上に戻るボタンは濃紺の円で、影は弱く付ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は切り抜いて白地に置く。果物は切り抜き、使い方の写真は六角形か円で切り抜く
• セクション境界: 氷や結晶柄の帯、水色の帯、カード同士の間にある水色の隙間で区切る
• CTAは角丸が小さめの長方形にする
• 香りラベルと成分ラベルはピル型にする
• 特長バッジは六角形にする
• NEWのマークは細い線の円に筆記体の文字

Components

• 商品を見るボタン（button-primary）: 黄色の面に白い太字。香りが1種類の商品ではこれを単独で置く
• 香り別ボタン（button-secondary）: ピンクの面に白い文字。黄色のボタンと横に並べる
• 商品カード（product-card）: 白い大きな角丸カード。氷の背景や水色の帯の上に置く
• 波線の小見出し（heading-wave）: 中央に置いた水色の文字を、上下の波線または左右の飾り線で挟む
• 六角形の特長バッジ（badge-hex）: 水色と緑の六角形に白い文字で特長成分を示し、＋でつなぐ
• 香りラベル（label-scent）: 黄色かピンクのピル型ラベル。左端に果物のイラストを付ける
• 成分のタグ（ingredient-tag）: 水色の小さなタグに白い文字。横に成分名を並べる
• 円形の線画（icon-circle-illust）: 水色の細い円の中に、使う部位を線画で描く。下に見出しと説明を付ける
• NEWのマーク（badge-new）: ピンクの細い線の円に筆記体で書き、商品画像の右上に重ねる

Do's and Don'ts

Do - 白カードと水色の氷の背景をくり返し使い、涼しさを保つ - 香りの色（黄色とピンク）をラベル・図・ボタンで揃える - イラストは細い単色の線画にする - 見出しのまわりには余白を広く取る

Don't - 濃い原色や黒い面を使わない - 太い影や立体的なボタンにしない - 文字を詰めて情報を詰め込まない - 暖色の背景を広く敷かない

Page Structure

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

1. ファーストビュー（シリーズ全体と季節感を一目で伝える）: 氷のブロックの中に商品を並べ、果物と氷を散らす。英字の大きなタイトルを白い文字で重ね、六角形の限定バッジを置く
2. 新登場の告知（新しい香りの追加を伝える）: 白地の中央にグラスの線画を置き、2行の太字リードを中央揃えで組む
3. 成分の説明（特長となる成分を手短に説明する）: 円形のラベルと薄い水色の横長の帯を組み合わせる
4. 香りの解説（香りの違いを比べて見せる）: 結晶柄の背景に白いカードを置く。中に黄色とピンクのピラミッド図、果物写真、香りラベルを並べ、ストライプで区切る
5. 商品紹介（商品ごとの特長・価格・購入への導線）: 水色の帯に英字タイトルを入れる。白いカードに商品画像とNEWのマーク、キャッチ、六角形のバッジ、ボタンを置く
6. 配合成分（成分を種類ごとに示す）: 水色のタグと成分名を2列のリストで並べる
7. 使い方（使う手順や部位を伝える）: 波線の見出しを置き、円形の線画や写真を3つ並べて短い説明を添える
8. 2通りの使い方（使う場面を2つ提案する）: 円形の線画を2つ並べ、それぞれに太字の見出しと説明を付ける
9. ページ下部（ページを締めて上へ戻る導線を置く）: 最後のカードの右下に、濃紺の円形の上に戻るボタンを置く

Imagery

• 商品は白地に切り抜いて置き、正面から明るく撮る
• 氷・水しぶき・結晶のプリズム柄を水色とピンクのパステルで描く
• レモンと桃は瑞々しい切り抜き写真にし、ラベルには小さなアイコンで使う
• 人物は水色の細い線画で描き、顔や肩などの部位を見せる
• ペンギンやシロクマなど寒い地域の動物をパステルのイラストで添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅の中央にカードを置き、商品画像と説明を左右2列に組む。SPでは縦1列に積む
• 3つ並びの線画はSPでは縦並びにするか、横にスワイプさせる
• 香りボタンはSPでも横に2つ並べるが、幅が足りなければ縦に積む
• FVの英字タイトルはSPでは2行に折り返してもよい

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