DESIGN.md — ピンク×水色の太線イラスト男性スキンケアLP（Pop Illustration Collab Men's Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 太線イラスト・ピンク×水色・黄色マーカー・比較の2枚並び・グレー地に白カード・コラボ限定
• 地の質感: フラットなベタ塗りイラストに、紫〜ピンクのグラデ背景を少しだけ使う。紙面は無地でノイズなし。
• 形: 四角いイラストタイルと角丸なしの白カードが中心。CTAだけ黒枠つきのピル型。
• 温度感: 明るくて軽い。ユーモアがあり、親しみやすいトーン。

Colors

• 地は白と淡いグレーを交互にしてセクションを分ける。
• ピンクはキャラクターとCTAにだけ使い、ブランドの顔にする。
• 水色は大見出しの縁取り文字と、日付や締めのコピーに使う。
• 本文の要点は黄色マーカーで1〜2行だけ塗る。
• イラスト背景のグラデーションは水色→ピンク、または紫に限る。
• 黒は太い線と本文に使う。グレー文字はカード内の長文用。
• button-primary は文字 #FFFFFF × 背景 #D295B2 のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B75583、4.53:1）を使う。
• date-band は文字 #FFFFFF × 背景 #24B5EB のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0F7FA9、4.54:1）を使う。

Typography

• 大見出しは2行・中央揃え。色は水色で太い縁取りを付ける。
• 本文は中央揃えで、1行を短く切って改行する。
• カード内の本文だけは左揃えのグレー文字にする。
• 強調は太字ではなく黄色マーカーで表す。
• 欧文は極太のサンセリフを使い、繰り返して文字壁を作る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。比較イラストだけ2列で並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各テーマは「見出し→比較イラスト2枚→本文→POINTカード」の順で繰り返す。
• POINTカードは白地。左端に大きな縦書きの欧文を淡い黄色で敷く。
• カード内はテキストとイラストを左右に並べ、テキストをイラストに回り込ませる。
• 比較イラストは左に良い例、右に悪い例を置く。
• 購入ブロックは商品写真→価格→CTAの順に縦に積む。

Elevation & Depth

• 影は使わずフラットにする。
• 立体感は面の色差（グレー地と白カード）で出す。
• CTAは黒い太枠で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。
• 写真の切り抜き: イラストは正方形の角張ったタイル。商品写真は切り抜きか、淡いグレー背景の四角。
• セクション境界: 直線で背景色を切り替える。
• カードとタイルは角丸なしにする。
• ピル型はCTAだけに使う。
• バッジ（送料無料・数量限定）は小さな角丸の四角にする。

Components

• 購入ピルボタン（button-primary）: ピンク地に黒の太枠。文字は白抜きに黒縁。
• 縁取り見出し（outlined-heading）: 水色の文字に黒と白の二重の縁取りを付けた2行の見出し。
• POINTカード（point-card）: 白地のカード。背面に縦書き欧文の透かしを置き、テキストとイラストを回り込ませる。
• 良い例・悪い例タイル（compare-tiles）: 2枚並びの正方形イラスト。背景は水色系と紫系のグラデにする。
• 日付帯（date-band）: 全幅の水色帯。白文字で日付を入れ、白地の札で終了条件を添える。
• 下線付きリード（underline-lead）: 導入文の各行に黒の下線を引いて中央に並べる。
• 限定・送料無料バッジ（badge-limited）: 黒地（または水色地）に白文字の小さな四角バッジ。
• 左右罫線見出し（line-heading）: 見出し文字の左右に黒の細線を伸ばす。

Do's and Don'ts

Do - キャラクターイラストは太い黒線とベタ塗りで描く。 - 比較は必ず2枚並べ、良い例と悪い例をはっきり描き分ける。 - 本文の要点は黄色マーカーで強調する。 - セクションごとに白地とグレー地を交互にする。 - 締めに欧文のスローガンを水色で大きく置く。

Don't - ドロップシャドウやリアルな質感は加えない。 - CTA以外にピル型ボタンを増やさない。 - 落ち着いた高級系の明朝体は使わない。 - マーカーを段落全体に塗らない。 - 原色を増やさない。ピンク・水色・黄色の3色に絞る。

Page Structure

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

1. コラボ帯（コラボ企画であることを示す）: 淡い黄色の細い帯に2つのロゴを並べ、右に下線付きのラベルを置く。
2. ファーストビュー（問いかけで興味を引く）: 青みグレー地に、縁取りした黄色の問いかけコピーを置く。背面はピンクの欧文の文字壁。中央に商品を持つキャラクターを大きく配置する。
3. セット告知（限定セットの内容を見せる）: ポーチと商品の写真を左に、ピンクとグレーの見出しを右に置く。下に水色の日付帯を入れる。
4. 導入・作家紹介（企画の趣旨と作家を紹介する）: 下線付きの中央リードを置き、その下に正方形の似顔絵とプロフィールを2カラムで並べる。
5. 悩みの提起1（アイテム選びの重要性を伝える）: 縁取り見出し、比較タイル2枚、中央揃えの本文、POINTカードの順に並べる。
6. 悩みの提起2（正しい洗い方を伝える）: 同じ構成で白地に置く。POINTカードの下に泡の手元写真を入れる。
7. 悩みの提起3（保湿ケアの重要性を伝える）: 同じ構成で作り、カード内に2タイプの商品比較を並べる。
8. オファー・CTA（限定セットの購入を促す）: 水色の下線見出し、黒の数量限定バッジ、黄色の大見出し、商品写真、大きな価格、ピンクのピルCTAの順に並べる。
9. 特典の詳細（ポーチの使い方を見せる）: 左右罫線の見出しを置き、着用写真2枚を並べる。続けてマーカー入りの中央本文を置く。
10. 締め（余韻を残して締める）: 短い一言の下に、水色の欧文スローガンを大きく置く。

Imagery

• 太い均一な黒線で描くフラットなキャラクターイラスト。肌はピンクにする。
• イラスト背景は水色→ピンク、または紫グレーのグラデーションにする。
• 悪い例は彩度を落とし、×印や汗を描き足す。
• 擬音の手書き文字（黄色地に黒縁）をイラストに添える。
• 商品写真は白〜淡いグレー背景で真正面から撮り、きらめきの装飾を添える。
• 小さな白丸に黒縁の泡モチーフを写真の上に散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はPCでも約480px幅の1カラム構成。SPではそのまま全幅で使える。
• SPでは比較タイルを2列のまま幅44%ずつにする。
• POINTカード内のイラストは、SPでは本文の上に移して縦に積んでもよい。
• PCでは中央480〜600px幅に固定し、左右を背景色で埋める。
• 価格とCTAはSPで画面幅の85%にする。

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