DESIGN.md — ピンク×ハートのアイドル系カラコン LP（Sweet Pink Idol Color Contact LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ピンクグラデーション・ハート散らし・リボン・白フチ文字・カラー別テーマ色・瞳アップ写真
• 地の質感: ぼかしたハートのボケ背景と柔らかいグラデーション。光沢のある甘い質感。
• 形: ハート型、リボン、ピル型ラベル、タグ型吹き出し、丸く切り抜いたレンズ・瞳。
• 温度感: 暖色寄りで甘い。カラー別にオレンジとミントグリーンで変化をつける。

Colors

• 地は淡ピンクのグラデーションを基本にし、白やオフホワイトへ縦に移ろわせる。
• 見出し・ラベル・スペック表の項目セルは primary のピンクで統一。
• 商品カラー別セクションはピンク・オレンジ・グリーンのテーマ色で地と見出し色を切り替える。
• 大見出しは色文字に白の太フチとピンクの影を重ねて目立たせる。
• 黒や濃色の面は使わず、本文だけダークブラウンにする。
• 価格の訴求は濃いマゼンタのハート面に白文字で置く。
• heart-price は文字 #FFF7FF × 背景 #E94A8A のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DD1B69、4.51:1）を使う。
• pill-label は文字 #FFF7FF × 背景 #E2588C のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9266A、4.51:1）を使う。
• crown-badge は文字 #D94F80 × 背景 #FCF0F3 のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#CE2C66、4.52:1）を使う。
• tag-callout は文字 #E2588C × 背景 #FCF0F3 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9266A、4.55:1）を使う。
• spec-chip は文字 #FFF7FF × 背景 #E2588C のコントラスト比が 3.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9266A、4.51:1）を使う。
• check-card は文字 #E2588C × 背景 #FCF0F3 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#D9266A、4.55:1）を使う。

Typography

• 大見出しは極太の丸ゴシックに白の太フチをつけ、少し傾けて配置する。
• 見出しの一部の語だけを大きくし、文字サイズに強弱をつける。
• 文末にハート記号を添えて甘い口調にする。
• 英字の見出しは太いセリフ体を大文字で、ピンク一色にする。
• カラー名は立体感のあるレトロ調スクリプトで、テーマ色のグラデーションにする。
• 本文は中央揃えで短く改行する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。比較とスペック表だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真はほぼ全幅で、文字や切り抜き素材を重ねて組む。
• カラー紹介は瞳アップとレンズの丸い切り抜きを左右交互に並べる。
• 吹き出しやタグを斜めに置いて動きを出す。
• 装用前後の比較は 2 カラムの角丸カードにする。
• 特長はアイコン円を左、ラベルと説明を右に置く横並びにする。

Elevation & Depth

• 白フチと淡いピンクのドロップシャドウで文字を浮かせる。
• アイコン円には白く光るぼかし影をつける。
• カードには薄い影と白いレースの縁をつける。
• レンズ画像には柔らかい影をつけて立体感を出す。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 瞳アップは楕円形または角丸、レンズは正円に切り抜く。人物は背景を抜いた切り抜き。
• セクション境界: 直線の境界でグラデーション色を切り替える。リボンやハートを境界にまたがって置く。
• ラベルはピル型か、端をリボン状に切った帯にする。
• 価格はハート型の面に入れる。
• 注釈タグは値札のような五角形タグにして、引き出し線をつける。

Components

• ハート型価格バッジ（heart-price）: マゼンタのハート面に、1日あたりの価格を特大の数字で入れ、下にリボン帯で総額を書く。
• ピル型見出しラベル（pill-label）: ピンクのグラデーションのピル型に白文字を入れ、特長名やコピーを置く。
• 王冠付き丸バッジ（crown-badge）: 上に王冠をのせた白い丸の中に、カラーの位置づけを 2 行で入れる。
• タグ型注釈（tag-callout）: レンズ画像から引き出し線を伸ばし、白い値札型タグで特徴を 2 行で示す。
• スペック帯（spec-chip）: テーマ色の淡い帯に、直径などの数値を白いセリフ体で入れる。
• チェック付き予定カード（check-card）: レース縁の白カードにチェックマークと見出しを置き、手帳を拡大する虫眼鏡風の円を重ねる。
• 特長アイコン行（feature-row）: 白く光る円にピンクの線のアイコンを置き、右にピル型ラベルと説明文を並べる。
• スペック表（spec-table）: 項目はピンクのセルに白文字、値は白いセル。角丸で 1〜2 列を組み合わせる。

Do's and Don'ts

Do - ハート・リボン・王冠・パールなどの甘いモチーフを背景に散らす。 - カラーごとにテーマ色を決め、地・見出し・帯をその色でそろえる。 - 大きなコピーには白フチと影をつけ、写真の上でも読めるようにする。 - 瞳アップとレンズ単体の画像を必ずセットで見せる。 - 数値スペックは小さな帯やチップにまとめる。

Don't - 黒・紺などの重い面や、角ばった直線的な装飾は使わない。 - 細い明朝体だけで見出しを作らない。 - テーマ色以外の原色を増やさない。 - 文字を写真にフチなしで直接のせない。 - 余白の多いミニマルな構成にしない。

Page Structure

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

1. ファーストビュー（プロデューサーの人物と新商品の発売を伝える）: ピンクのボケ背景に人物写真を全幅で置き、白フチの大見出しを重ねる。下にレンズ 3 色の円と、カラー名、スペック帯を並べる。
2. 発売の告知（人気カラーの新タイプ登場を期待感とともに伝える）: 大きなリボンとレースの円フレームの中に中央揃えの見出しと短い声を置き、人物とレンズを下に並べる。
3. ラインナップ概要（3 色の特徴を一覧で見せる）: 英字見出しの下に、カラーごとに王冠バッジ・ロゴ風カラー名・瞳アップ・レンズ拡大とタグ注釈を左右交互に配置する。地はテーマ色のグラデーション。
4. 価格訴求（コスパのよさを示す）: 斜めの白フチコピー、人物の切り抜きと吹き出し、ハート型の価格バッジとリボン帯で構成する。
5. 利用シーン（毎日使える場面を想像させる）: チェック柄の背景に、手帳風の予定カード 3 枚をずらして重ねる。
6. カラー詳細（1 色ずつ着用イメージを深く見せる）: テーマ色の地に人物写真を全幅で置き、縦書きコピーと番号付きの縦書き英字を添える。ロゴ風カラー名、瞳とレンズ、全身の切り抜き、装用前後の比較 2 カラムを続ける。
7. 比較一覧（裸眼と各色の違いを比べる）: 瞳写真の角丸カードを 2×2 で並べ、各カードにレンズ円とカラー名を添える。
8. プロデューサー紹介（信頼感と推しへの共感をつくる）: 大きなハート型の背景に人物の切り抜きを置き、リボン装飾の名前と中央揃えのプロフィールを続ける。
9. 特長（機能面の安心感を伝える）: 光る円のアイコン、ピル型ラベル、説明文の行を 5 つ縦に並べる。
10. スペック・注意事項（仕様と法定の注意を示す）: ピンクと白の角丸セルの表、括弧付きの小見出し、小さな注意文、ロゴで締める。

Imagery

• 人物はパールやリボン、白い手袋などの甘い小物を合わせ、ピンクのボケ背景で正面を向いたアイドル風のポートレートにする。
• 瞳は横長の超アップで撮り、まつ毛とカラーの発色を見せる。
• レンズ単体は白地に置いて正円に切り抜き、柔らかい影をつける。
• 背景にはぼかしたハート、白い小さなハート、斜めにした薄い英字（day/date/school など）を散らす。
• カラーごとに背景をピンク・ピーチ・ミントのボケで撮り分ける。
• アイコンはピンクの細い線で描いたシンプルな線画にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、PC では幅 480〜600px の中央カラムに SP デザインをそのまま収める。
• 左右の余白は淡ピンクのグラデーションにハートを散らして埋める。
• 比較一覧は PC で 4 カラムに並べてもよい。
• 大見出しのサイズは最大 1.3 倍までに抑える。

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