DESIGN.md — ピンク×ラベンダーのキャラコラボ日焼け止め LP（Pastel Pink & Lavender Character Collab Sunscreen LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気、情報量多め・訴求型
• キーワード: くすみパステル・2色パート構成・セリフ英字ロゴ風・SNS・スマホUIモチーフ・ハート装飾・ポラロイド
• 地の質感: グレーのコンクリート地とやわらかなパステルの平塗りを組み合わせる。破れた紙のような境界線でラフさも足す。
• 形: 角丸の白カード、ピル型の吹き出し、円形アイコン、ポラロイド風の白フレーム。
• 温度感: 前半はピンクで温かく甘め、後半はラベンダーで涼しげに切り替える。

Colors

• 商品ごとに色パートを分ける。前半はピンク系、後半はラベンダー系で統一する。
• 地は淡色にする（淡ピンク・淡紫・グレー白）。濃い色は見出しの文字、帯、ラベルだけに使う。
• 強調語は primary か secondary の太字にする。サブ見出しは濃い色の帯に白抜き文字で置く。
• グラフの棒は、比較前をグレー、比較後をパートの色にする。
• 白カードの上にのせる文字は、ダークグレーとパートの色の 2 色に絞る。
• point-tag は文字 #FFFEFE × 背景 #E26A86 のコントラスト比が 3.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#D8375C、4.51:1）を使う。
• speech-bubble は文字 #C86B7E × 背景 #FFFEFE のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BE5167、4.57:1）を使う。
• before-after は文字 #FFFEFE × 背景 #DAC1DE のコントラスト比が 1.65:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9E5DA9、4.54:1）を使う。

Typography

• 商品名の英字はセリフ体で大きく 2 行に組み、パートの色でベタ塗りにする。
• 日本語の見出しは 2 段組みにする。1 段目は細めのリード文、2 段目は太い色文字。
• 英字見出しの下に、同じ意味の日本語見出しを小さく添える。
• 本文は中央揃えで短く改行する。
• 数値は欧文太字で大きく出し、単位と補足は小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポイントは 3〜4 列の小グリッドにし、比較表は 4 列にする。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 画像は全幅で見せ、テキストブロックは左右に約 5% の余白をとる。
• ポイントは『ラベル→リード→強調見出し→チェックリスト→ビジュアル』の順で繰り返す。
• テクスチャ写真は 2 枚を左右に並べ、1 枚の角丸カードにまとめる。
• グラフは角丸の白カードに 1 指標ずつ入れ、縦に積む。
• 各ブロックの終わりに小さな著作権表記を左下に置く。

Elevation & Depth

• 白カードには、ごく薄いぼかし影をつける。
• ポラロイド風フレームは、少し傾けて影を落とす。
• 商品の物撮りは、床に落ちる自然な影を残す。
• それ以外はフラットにする。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の矩形、ポラロイド風の白フレーム、円形アイコン。
• セクション境界: 直線で背景色を切り替える。ところどころに破れた紙のギザギザ境界を入れる。
• 吹き出しはピル型の枠線にし、端に小さな三角をつける。
• ポイントラベルは、斜めに切ったリボン風のタグにする。
• 成分アイコンは淡色の円の中に線画を入れる。
• グラフカードは二重枠（外側をパートの色にする）で角丸にする。

Components

• ポイントラベル（point-tag）: 番号付きのリボン型タグ。英字は手書き風。
• 吹き出しキャッチ（speech-bubble）: 白地のピル型に色枠をつけた吹き出し。下に入力欄風の枠を並べ、横にハートを散らす。
• 帯見出し（marker-heading）: 濃い色の帯に、白抜きの太字見出しを置く。
• SNS 投稿風カード（sns-card）: 上部にストーリーズ風のバー、アイコン、名前を置き、イラストを 2 枚とチェックリストを入れる白カード。
• 効果グラフカード（graph-card）: 見出しと棒グラフ 2 本で、比較前後の差を示す。中央には % を大きく入れる。
• 成分・試験アイコン（ingredient-icon）: 淡色の円に線画を入れ、下に 2 行の短いラベルを置く。5 個まで横に並べる。
• 使用前後比較（before-after）: 顔写真を 2 枚並べ、下に帯で英字のラベルをつける。使用後側はパートの色で強調する。
• シリーズ比較表（compare-table）: 上段に商品画像、行見出しに項目名を置いた 4 列表。色付きの小バッジとドット評価を使う。

Do's and Don'ts

Do - 商品ごとにテーマ色を決め、背景・見出し・装飾をその色でそろえる。 - ハートや雲などの小さな装飾を、見出しの周りに散らす。 - 効果の訴求は、数値・グラフ・試験注釈をセットで載せる。 - 英字の大見出しをうすく透かして、背景に敷く。 - スマホ画面や SNS など、デジタル UI をモチーフにする。

Don't - 原色や濃い地色を、広い面に使わない。 - ピンクと紫を、同じブロックの中で混ぜない。 - 角ばったビジネス調のボタンや表を使わない。 - 本文を長い段落にせず、短い改行で中央に組む。 - 装飾フォントを本文に使わない。

Page Structure

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

1. ファーストビュー（モデルと商品で世界観を伝える）: モデル写真の下に大型のセリフ英字の商品名を置き、商品の物撮り、日本語の商品名、ハッシュタグ 3 つを続ける。
2. コレクション紹介（シリーズ全体を見せる）: 白い棚に商品とキャラクターを並べたビジュアル。続けて、ストリート風のグラフィティ英字ポスターを置く。
3. コンセプト（コラボのテーマを伝える）: 空色の背景にスマホ画面のモックアップ。英字見出しと短い日本語の 3 行を添える。
4. 商品パート扉（1 品目の導入）: ピンクの全面地に白いセリフ英字。スマホ枠からキャラクターが飛び出すイラストを入れる。
5. テクスチャ・特長まとめ（質感とポイント 3 つを提示する）: 吹き出しキャッチ、テクスチャ写真 2 枚、帯見出し、物撮り、3 列のポイントタグを並べる。
6. ポイント詳細（効果を 1 つずつ証明する）: タグ、2 段見出し、チェックリスト、使用前後の写真、ポラロイド写真の順に置く。
7. 低刺激の訴求（安心感を与える）: 英字と日本語の見出しの下に SNS 投稿風カードを置き、円形の試験アイコンを 5 つ並べる。
8. 2 品目パート（もう 1 色の商品を訴求する）: 1 品目と同じ型をラベンダー色に置き換えて繰り返す。ポイントは 2×2 のグリッドにする。
9. データ実証（持続効果を数値で示す）: グラフカードを 3 枚縦に積み、カラーチャート図、使用前後の写真、試験書類の画像を続ける。
10. 成分・認証（処方の安心感を補う）: 円形の成分アイコンを 3 つ『+』でつなぎ、SPF・PA の数値を 2 列のカードで見せる。
11. シリーズ比較（選び方を案内する）: 4 商品の比較表。項目は商品名・機能・評価ドット。

Imagery

• モデルは白い服で、明るいグレー背景の前に立ち、ソフトな光で撮る。
• 商品は淡グレーのコンクリート壁にもたせかけ、2 本を並べて撮る。
• テクスチャは、クリームを伸ばした跡や指にとった様子を寄りで撮る。
• キャラクター風のイラストは、太い輪郭線とフラットな色で描く。スマホ枠から飛び出す構図にする。
• 装飾は、線画と塗りのハート、白い雲、音符を散らす。
• 肌の写真は、使用前後を同じ構図・同じライティングで撮る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元 LP は SP の縦長画像を中心に作られている。PC では中央に幅 480〜750px のカラムを置き、左右は背景色で埋める。
• PC ではポイントのグリッドを 3〜4 列のまま広げ、グラフカードを横に 2〜3 枚並べる。
• 英字の大見出しは PC で 1.5 倍程度に拡大する。
• 比較表は PC で余白を広げ、文字を 12px 以上にする。

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