DESIGN.md — ピンク×ブルーのポップなスキンケア企画LP（Pastel Pink Blue Switch Campaign LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: ポップ・元気、かわいい、やさしい・柔らかい
• キーワード: ピンク×ブルーの2色対比・方眼の背景・立体UIアイコン・縁取りロゴ・パステル・動画図鑑
• 地の質感: 淡い方眼や細かいドットの地。イラストはソフトな陰影がついた立体のフラット調
• 形: 大きめの角丸パネル、左半分が青・右半分がピンクの太い枠、丸いナンバータブ
• 温度感: 明るく軽い。パステルの寒色と暖色を半分ずつ

Colors

• ピンクと青を常にセットで使い、対になる概念を左右で塗り分ける
• 地色はセクションごとに水色→白→薄ピンク→薄ラベンダーと淡く切り替える
• 枠線は左半分を青、右半分をピンクにする
• 強調語は白文字をピンクか青のベタ帯に乗せる
• ボタンは落ち着いたグレーにして、カラフルなイラストと競わせない
• 黒は使わず、文字は青灰でやわらかく
• page は文字 #6E7A8C × 背景 #FFFFFF のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B7688、4.59:1）を使う。
• button-primary は文字 #F4FDFF × 背景 #83939D のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#657680、4.56:1）を使う。
• split-frame-card は文字 #6E7A8C × 背景 #FEE2F9 のコントラスト比が 3.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B7688、4.57:1）を使う。
• highlight-chip は文字 #F4FDFF × 背景 #F0607A のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E4153B、4.55:1）を使う。
• campaign-slider は文字 #6E7A8C × 背景 #FFFFFF のコントラスト比が 4.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B7688、4.59:1）を使う。
• video-thumb は文字 #F4FDFF × 背景 #F0607A のコントラスト比が 3.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E4153B、4.55:1）を使う。
• prize-balloon は文字 #7798EC × 背景 #FFFFFF のコントラスト比が 2.8:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#416FE4、4.55:1）を使う。
• check-list は文字 #6E7A8C × 背景 #FDFEFE のコントラスト比が 4.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B7688、4.55:1）を使う。
• icon-tile-row は文字 #F4FDFF × 背景 #7999E5 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#416FDA、4.51:1）を使う。

Typography

• ロゴ風の見出しは斜体ぎみに傾け、白い太縁取りと濃い影を重ねる
• リード文は中央揃えにして、行間を広く取る
• 英字ラベルはピンクの太字で、短く置く
• 強調語には色ベタの帯を敷く
• 注釈は*番号付きで小さく並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• パネルは画面端から約12pxの余白をとり、大きな角丸で区切る
• テキストは中央揃えを基本にする
• 動画サムネは縦長を1つ大きく、その下に正方形を2列で並べる
• 番号タブは4つを横に並べ、図鑑ページを切り替える
• 商品カードの下に効能見出し、チェックリスト、注釈、ボタンの順で置く

Elevation & Depth

• イラストやアイコンタイルは下方向にずらしたベタの影で立体のボタン風にする
• カード類はぼかし影を使わず、フラットな面と枠で見せる
• ボタンにはわずかな下影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角を立てた四角で、青/ピンクの太枠と三角の角飾りで縁取る
• セクション境界: 直線で区切り、背景色の切り替えや角丸パネルで境界を作る
• 枠は4〜6pxの太さで、色は半分ずつ青とピンク
• チェックリストはピル状の白い帯
• 番号は丸い円の中に入れる
• 吹き出しは丸い形とギザギザの形を併用する

Components

• 応募・詳細ボタン（button-primary）: グレーの長方形に白い太字を入れ、右端に▶や外部リンクのアイコンを置く
• 2色枠カード（split-frame-card）: 左半分が青・右半分がピンクの太枠で囲み、中に商品写真を入れる
• 強調語ベタ帯（highlight-chip）: ピンクか青の帯に白文字を乗せて、文中の語を強調する
• キャンペーンスライダー（campaign-slider）: 青い枠のカード。左右に赤と青の半円矢印、下にドットのページャーを置く
• 番号タブ（number-tab）: 上部が角丸のタブに円形の番号を入れる。選択中はピンク、それ以外は青
• TAP動画サムネ（video-thumb）: 写真に色付きの枠と再生ボタンを重ね、右下の三角に「TAP」の文字を入れる
• プレゼント告知枠（prize-balloon）: 2色の角丸枠にギザギザ吹き出しのバッジを重ね、商品写真を左右に置く
• チェックリスト（check-list）: 白いピル帯の先頭にピンクまたは青のチェックを置き、1行で効能を書く
• アイコンタイル列（icon-tile-row）: 立体風の青い角丸タイルを6つ横に並べ、装飾として使う

Do's and Don'ts

Do - ピンクと青を対で使い、対比の世界観を守る - 背景に方眼やドットの淡いテクスチャを敷く - 立体UIアイコンのイラストを余白に散らす - ロゴ見出しには太い白縁取りをつける - セクションごとに淡い地色を切り替える

Don't - 黒や濃い原色の地を使わない - ボタンをビビッドな色にしてイラストと競わせない - 明朝体や細い書体で可愛さを損なわない - 写真を丸く切り抜かない - 2色のうち片方だけに偏らせない

Page Structure

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

1. ファーストビュー（企画のタイトルと世界観を見せる）: 水色地に立体UIアイコンを敷き詰め、中央に縁取りロゴとスイッチのイラストを置く
2. 企画紹介（コンセプトを説明する）: 方眼の角丸パネル。透かしの英字、吹き出し、強調ベタ帯のリード文、アイコンタイル列で構成する
3. キャンペーン（SNSキャンペーンを告知する）: ピンクの英字ラベルを置き、青枠のスライダーカードに応募方法・当選数・期間のラベルとボタンを並べる
4. 動画図鑑の導入（動画視聴と応募特典へ誘導する）: 2色枠の方眼エリア。ロゴ見出し、中央揃えの説明、吹き出しバッジ付きのプレゼント枠を置く
5. 動画図鑑（共感できるシーンの動画を見せる）: 薄ピンク地に縦長の動画1つと正方形2つを並べる。下に応募ボタンと番号タブを置く
6. 商品紹介（対象商品を説明する）: 薄ラベンダー地に2色枠の商品カード、効能見出し、チェックリスト、注釈、グレーのボタンを2商品分並べる
7. フッター（締めとリンク）: FVのイラストを縮小して再掲し、SNSの丸アイコン、法務リンク、コピーライトを置く

Imagery

• スマホ、ハート、吹き出し、十字キーなどのUIアイコンを、パステルの立体フラットイラストで描く
• 人物写真はオフィスや自宅の生活シーンに、コミカルな表情やポーズを合わせる
• 写真の上に斜めの白黒テロップや吹き出しの文字を重ねる
• 商品は白いボトルを淡いピンク地で、明るく正面から撮る
• 背景には方眼、ドット、電車のアイコンなどの小さなパターンを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はFVだけ全幅のイラストで見せ、本文はSP幅の中央カラムに収める
• PC の中央カラムの外側は水色の単色背景で埋める
• 動画サムネはPCでも2列のままにする
• PC では文字サイズを据え置き、カラム幅は約30%に固定する

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