DESIGN.md — 水色×濃紺の爽やかな日焼け止め LP（Aqua Blue Fresh Sunscreen LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい
• キーワード: 水滴・透明感・ブランドブルー・大きな角丸カード・うるおい
• 地の質感: 水面や水滴の写真を淡くして背景に敷く。そのほかはフラットな単色面。
• 形: 角丸 40px 前後の大きなカードと、ピル型ボタンを使う。セクション境界は大きな曲線にする。
• 温度感: 水色と濃紺が中心の涼しい色調。商品一覧の生成り地で少し温かみを足す。

Colors

• 地の色は淡い水色、ブランドブルー、生成り、白の順に切り替えて、セクションの区切りを示す。
• ブランドブルーの地には白カードを置き、カードの中の見出しも濃紺にする。
• 主ボタンはすべてブランドブルー地に白文字で統一する。
• 黄色は SPF 表示や注目バッジだけに使う。
• 強調する本文には、水色の下線か濃紺の文字色を使う。
• spf-badge は文字 #FFFFFF × 背景 #049CF2 のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#037CC0、4.52:1）を使う。

Typography

• 見出しは中央揃えにし、字間を広めに取る。
• 英字の大見出しの下に、小さな和文の訳を添える。
• Point 番号は小さな英字と大きな数字の 2 段にし、ブルーで組む。
• 本文は行間 2.0 前後で、短い行を中央にまとめる。
• 注釈は 10px のグレーで本文の下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 70% 幅のカードの中で、テキストと図を 2 列に並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは画面中央に置き、左右に地の色を見せる。
• 商品カードは縦に並べ、カードどうしの間隔は 24px にする。
• 特長は 3 点を 1 枚の白カードの中に縦に並べる。
• CTA ボタンは横幅 70% ほどにして中央に置く。

Elevation & Depth

• 影はほとんど使わず、面の色の差で階層を表す。
• おすすめ枠には、ごく薄い影をつけた白カードを使う。

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 商品写真は切り抜いてカードに直接置く。図版は角丸の矩形か円形にする。
• セクション境界: ブランドブルーのセクションは、上端と下端を大きな曲線で切り替える。
• カードの角丸は 32〜40px と大きく取る。
• バッジはピル型にする。
• 効能アイコンは白丸の中に小さな文字を入れる。

Components

• 詳細・購入ボタン（button-primary）: ピル型のボタン。右端に矢印を付ける。
• 特長カード（point-card）: ブルー地に置く大きな白カード。番号付きで 3 点を並べる。
• 商品カード（product-card）: 水色のカード。左にバッジ・商品名・ボタン、右に切り抜いた商品写真を置く。
• SPF バッジ（spf-badge）: 水色または黄色のピル型。数値を太字で入れる。
• おすすめ枠（recommend-box）: 筆記体の英字を斜めに添えた白カード。チェック付きの項目を並べる。
• Point 番号（point-number）: 小さな英字の上に大きな 2 桁の数字を置く。色はブルー。
• 特徴タグ（tag-chip）: 白地に細い枠線を引いた小さな角丸タグ。
• 斜線つき吹き出しコピー（catch-slash）: 短い一言の両側に斜線を添える。

Do's and Don'ts

Do - 水色と濃紺の 2 色を軸にして、透明感を保つ。 - 大きな角丸カードで情報をまとめる。 - 背景に水滴や水面の淡い写真を使う。 - セクションの地の色を交互に変えて、リズムを作る。

Don't - 赤やオレンジなどの暖色を CTA に使わない。 - 角の尖ったカードや太い枠線を使わない。 - 濃い影や立体的なボタンを使わない。 - 本文の行間を詰めすぎない。

Page Structure

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

1. ヘッダー（サイト内の導線を示す。）: 白地にロゴとカテゴリーのリンクを横に並べる。
2. ファーストビュー（商品の印象と効能を伝える。）: 水滴を持つ人物写真の上に、太いブルーの大きなコピーを重ねる。No.1 バッジと商品写真も置く。
3. ページ内ナビ（特長や商品一覧へ移動させる。）: ブルーの帯を 3〜4 等分し、白文字のタブを置く。
4. ブランド説明（商品の考え方を伝える。）: 水面写真の淡い地に中央揃えの本文を置く。おすすめ枠と CTA を続ける。
5. 特長（成分や技術を 3 点で説明する。）: 曲線で切り替わるブルー地に白の大カードを置く。番号、図、本文を並べる。
6. 商品一覧（ラインナップを比較させる。）: 生成り地に水色の角丸カードを縦に並べる。各カードにバッジ、名称、ボタン、商品写真を入れる。
7. 関連バナー（関連ページへ誘導する。）: 白地に横長のバナーを 2 つ並べる。
8. フッター（サイト内のリンクをまとめる。）: 濃紺の SNS 帯の下に淡い水色の地を敷き、リンクを一覧にする。

Imagery

• 人物は白い背景で、自然な笑顔を見せる写真にする。
• 水滴、水の球、水しぶきを青く透明感のある質感で表現する。
• 商品写真は白背景で切り抜き、横にテクスチャのしずくを添える。
• 肌の断面図は淡い色の簡単なイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では商品カードを縦積みにし、商品写真をテキストの下に回す。
• 特長カードの 2 列は、SP では 1 列にする。
• ファーストビューのコピーは人物写真の下に重ねて大きく保つ。
• ページ内ナビは 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 行書くと起動時に読み込まれる。