DESIGN.md — 苺ピンク×チェック柄のキャンディポップなカラコンLP（Candy Pop Y2K Color Contact Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、情報量多め・訴求型、レトロ
• キーワード: キャンディポップ・Y2K・市松チェック・ぷっくり立体文字・ステッカー装飾・カラー別テーマ色
• 地の質感: 光沢のあるグミ・キャンディ風の質感。チェック柄やストライプのテントで駄菓子屋っぽい賑やかさを出す
• 形: 雲形・ハート形のフレーム、スカラップの円形バッジ、ピル型のスペックラベル、角丸の白カード
• 温度感: 暖色寄りの高彩度。カラーごとに寒色（水色・ミント）も入れる

Colors

• 基本の地はストロベリーレッド。章の切り替えで地色を変える
• 商品カラーごとにテーマ色（ピンク・水色・ミント・赤）を決め、ビジュアル・ロゴ・ラベルを同系色で揃える
• 白文字には濃い色のフチ取りか影を付け、高彩度の地の上でも読めるようにする
• スペックカードと写真枠は白で、地の色から浮かせる
• 市松チェックは地色と白の2色で、セクション上下の端にだけ置く
• badge-scallop は文字 #FE3C5E × 背景 #FEFDFE のコントラスト比が 3.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#EA012A、4.56:1）を使う。
• spec-pill は文字 #FEFDFE × 背景 #FF8DFF のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CF00CF、4.54:1）を使う。
• spec-cloud は文字 #FEFDFE × 背景 #FF85B6 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E8005D、4.51:1）を使う。

Typography

• 見出しは極太の書体に白フチと濃い色の影を重ね、ステッカーのように見せる
• 欧文ロゴは2行で組み、ベースラインを少しずらして弾む感じを出す
• 説明コピーは4行前後の中央揃えで、白文字に色フチを付ける
• 数値は単位を小さく、数字だけを大きくする
• 本文の細字は白カードの中だけで使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・ラインナップは 2 カラム、スペック表は 2 カラムと 4 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算）
• 各カラー章は「ビジュアル→スペックラベル＋拡大した目元→コピー→スペック／自然光／室内光」の順で繰り返す
• スペック行は左に雲形バッジ、右に白枠の写真を並べる
• テントのようなストライプでビジュアルと詳細の境目を区切る
• 装飾ステッカーは写真の縁にはみ出させて重ねる
• カラーチャートは2×2の象限グリッドにレンズ画像を配置する

Elevation & Depth

• 白カードには色付きのズレ影（右下4px程度）をベタで付ける
• ロゴ文字は白フチと濃い影を重ねた立体表現にする
• ステッカーは白フチ＋薄いドロップシャドウ
• ぼかした柔らかい影は使わない

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物は雲形・ハート形フレームに切り抜き、目元は角丸の四角か楕円、レンズ単体は円形にする
• セクション境界: 雲形スカラップ＋市松チェック帯、またはテント状のストライプ
• 見出しバッジは花形のスカラップ円にする
• スペック値はピル型ラベルに入れる
• 写真カードの角丸は控えめ（6〜10px）にする

Components

• ぷっくり立体ロゴ（logo-puffy）: カラー名を2行の欧文で書き、グミのような光沢と白フチを付ける
• スカラップ見出しバッジ（badge-scallop）: 花形の円に英字の見出しを入れ、周りにキャンディを散らす
• スペックピルラベル（spec-pill）: 左端に丸アイコンの略称、右に数値を置くピル型ラベル
• 雲形スペックバッジ（spec-cloud）: 二重フチの雲形に見出しと数値を入れ、星のきらめきを添える
• 目元写真カード（photo-card）: 白フチの角丸写真の右下に、撮影条件のラベルを付ける
• レンズ機能カード（feature-card）: 白カードの左にアイコンと数字の枠、右に見出しと説明を置く
• 人気順位バッジ（rank-badge）: カードの左上に、ポップな斜めの順位表記を重ねる
• ラインナップカード（lineup-card）: 目元写真の右下にレンズの円をはみ出させ、下に和名とローマ字を書く

Do's and Don'ts

Do - カラーごとにテーマ色を決め、背景・ロゴ・ラベルを統一する - キャンディ・グミ・ハート・さくらんぼのステッカーを写真の周りに散らす - 市松チェックと雲形の縁で章の始まりを示す - スペックは数値を大きく、ラベルはピル型で揃える - 目元写真は自然光と室内光を並べて見比べられるようにする

Don't - くすんだ色や低彩度の地は使わない - 細い明朝体や上品なセリフ体を見出しに使わない - ぼかした大きな影やグラスモーフィズムにしない - 白文字をフチなしで高彩度の地に直接置かない - 余白を広く取ったミニマルな構成にしない

Page Structure

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

1. ファーストビュー（モデルと新商品の世界観を一目で伝える）: 赤い地に人物の大きな写真、市松チェックの角、ハートを添えた極太キャッチを置く
2. 新色一覧（新しいカラーと共通スペックを見せる）: 4色のレンズを丸く並べ、スペックピルを3つ、2×2の目元カードを並べる
3. カラー紹介（ピンク）（1色目の世界観と発色を伝える）: ピンクの雲形フレームに人物と立体ロゴ、テント帯の下に拡大した目元とコピーを置く
4. カラー詳細（ピンク）（スペックと見え方の比較）: 雲形バッジと写真カードを3段並べる
5. カラー紹介・詳細（水色）（2色目を同じ型で見せる）: 水色テーマで同じ構成を繰り返す
6. カラー紹介・詳細（ミント）（3色目を見せる）: ミントテーマで同じ構成を繰り返す
7. カラー紹介・詳細（赤）（4色目を見せる）: 赤ピンクテーマで同じ構成を繰り返す
8. レンズの機能（品質や機能の安心感を伝える）: 赤い地に白い機能カードを2カラム×3段、既存品は4カラムの小さなカードで並べる
9. イメージモデル紹介（モデルのプロフィールで親近感を出す）: ハート形フレームの人物写真、水色の立体ロゴ、中央揃えの短い紹介文
10. ラインナップ（全カラーの一覧）: 2カラムの目元カードに順位バッジを付ける
11. カラーチャート（明るさと盛れ度で選び方を示す）: 方眼の上に2×2の象限を作り、軸ラベルと色の見出しを付けてレンズを配置する

Imagery

• 人物はリボン・白手袋・ギンガムなどガーリーな衣装で、ハイキーかつ正面寄りの寄りで撮る
• 目元は片目を真横から、まつ毛までシャープに写す
• レンズ単体は白背景で真上から円形に撮る
• 装飾は光沢のある3Dのキャンディ・グミベア・さくらんぼ・ハートのアイコン
• レトロなワッペン風ステッカー（花・虹・星のキャラ）を添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約480px）のカラムを固定し、左右をテーマ色のチェック柄で埋める推奨
• ラインナップと機能カードは PC で 3〜4 カラムに広げてもよい
• 立体ロゴは PC で最大 720px 幅に抑える

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