DESIGN.md — パステル×オレンジ縁取り文字のカラコン LP（Sweet Pastel Color Contact Lens LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、情報量多め・訴求型
• キーワード: パステルグラデ・白フチ見出し・ハート型・ハーフトーンドット・色別テーマ・量産型かわいい
• 地の質感: 淡いグラデーション地に細かいドット柄とキラキラの光。写真は明るくソフトフォーカス
• 形: ハート・角丸タグ・円形レンズ・吹き出し・リボン帯
• 温度感: 暖色寄り。商品色によってピンク・ブラウン・水色・紫へ切り替える

Colors

• 基本地はクリームイエロー〜ピーチのグラデーション
• 商品ごとに地色とタグ色をその色に合わせる（ピンク・ブラウン・水色・紫）
• 大見出しはオレンジ〜黄のグラデ文字に太い白フチと淡い影
• スペックタグは各商品のテーマ色ベタに白文字
• 黒い文字は濃いブラウンにし、純黒は使わない
• 差し色の黄緑はサブラベルや比較軸にだけ使う
• page は文字 #8F7166 × 背景 #FEEFCB のコントラスト比が 3.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#82665C、4.6:1）を使う。
• spec-tag は文字 #FEFCF5 × 背景 #FF8D53 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CD4500、4.6:1）を使う。
• heart-badge は文字 #AC83E4 × 背景 #FEF8E8 のコントラスト比が 2.78:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#8C53DA、4.54:1）を使う。
• hashtag-band は文字 #FB5E6D × 背景 #FEF8E8 のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#E3061B、4.6:1）を使う。
• compare-card は文字 #FF8D53 × 背景 #FEF8E8 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CD4500、4.54:1）を使う。
• ribbon-label は文字 #FEFCF5 × 背景 #FF8D53 のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CD4500、4.6:1）を使う。

Typography

• 大見出しは極太丸ゴシックに白フチ3〜4pxとドロップシャドウ
• 見出しの一部の語だけ色を変えて強調する
• 語尾にハート記号を付けて甘さを出す
• セクション名は欧文セリフを左右の横線で挟む
• スペック数値は明朝・セリフ系で上品にまとめる
• キャッチの上にスラッシュで挟んだ小さいリード文を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品紹介は写真左・情報右の 2 分割、ラインナップは 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真・レンズ画像・文字を重ねて置き、すき間を作らない
• 商品ごとに同じ構成を色だけ変えて繰り返す
• スペックは2×2のタググリッドにする
• 着用比較は2枚の角丸写真を横に並べる
• 仕様表は左ラベル列が色付きの2列テーブル

Elevation & Depth

• 見出し文字に柔らかいドロップシャドウ
• レンズ画像に薄い影を付けて浮かせる
• カードはほぼフラットで、細い色付き枠で区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 瞳のアップはハート型・角丸四角で切り抜き、レンズは円形
• セクション境界: 直線で背景色を切り替えるか、グラデーションでつなぐ。レース柄の縁取りも使う
• ハート型の枠やバッジを多用する
• 吹き出しは楕円の白地に黒フチ
• ハッシュタグ帯は角丸四角の白地に色枠
• ラベルはリボン型・ピル型

Components

• 白フチグラデ見出し（outlined-display）: オレンジ〜黄のグラデ文字に白い太フチと影
• スペックタグ（spec-tag）: テーマ色ベタに白文字の小さい角丸タグ。2×2で並べる
• ハート型バッジ（heart-badge）: 銀フチのハートにシリーズ名とキャラクター、上に小ラベル
• ハッシュタグ帯（hashtag-band）: 白地＋色枠の角丸帯にハッシュタグ型コピー
• 吹き出し（speech-bubble）: 写真の上に置く白い楕円吹き出し。黒フチと短いコメント
• 着用比較カード（compare-card）: テーマ色の枠の角丸写真2枚と下のキャプション
• リボンラベル（ribbon-label）: 瞳写真の上に斜めにかかるリボン型の特長ラベル
• 仕様表（spec-table）: 左列はオレンジベタに白文字、右列は白地。外枠は角丸

Do's and Don'ts

Do - 商品色ごとにセクションの地色とタグ色を統一する - 見出しには必ず白フチと影を付ける - ハート・ドット・キラキラの装飾を写真のまわりに散らす - スペック数値は全商品で同じ位置・同じ形のタグにする - 瞳アップは高解像度で睫毛まで見せる

Don't - 純黒の文字や濃い暗色の面を広く使わない - 細いゴシックだけで見出しを組まない - 角ばった硬いフレームや直角のボタンを使わない - 商品セクションごとに構成を変えない - 寒色を基本地にしない（水色は商品テーマのときだけ）

Page Structure

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

1. ファーストビュー（モデルとシリーズの世界観を見せる）: モデルの全面写真にロゴ、白フチ大見出し、レンズ色一覧、基本スペック
2. コンセプト訴求（デザインの魅力を伝える）: グラデ地に大キャッチ、瞳アップのハート切り抜き、3色のレンズ円
3. 特長ポイント（フチと発色のこだわりを説明）: 巨大なレンズの拡大画像の横に見出しと短い説明
4. 設計の根拠（比率と直径の説得）: 瞳写真の上に補助線と矢印、ハート型の数値バッジ、吹き出し
5. シリーズ定義（コンセプトを図解で示す）: ハッシュタグ帯と、要素を＋でつなぐ3つのラベル式
6. 色別ダイジェスト（新色3色を一覧で比べる）: 色ごとの背景の上に、アプリ写真・プリ写真とスペックタグ
7. 色別詳細（各色を深く紹介）: モデル写真→商品名→瞳アップ→タグ→拡大レンズ注釈→着用比較を色ごとに繰り返す
8. 全ラインナップ紹介（既存色も含めて紹介）: 色帯見出しの下に写真左・情報右の2分割カード
9. カラーチャート（明るさ×フチ太さで比較）: 角丸枠の4象限マップにレンズ円を配置し、軸ラベルはピル
10. カラーラインナップ（全色を一覧で見せる）: 2列グリッドで瞳写真、レンズ円、色付きスペックタグ
11. イメージモデル（モデルの紹介）: ベージュ地にレース縁の写真と中央揃えのプロフィール
12. レンズ特長（機能面の安心感）: 2×2アイコングリッドを点線で区切り、グラデのアイコン
13. 仕様・注意事項（法定表示と使用上の注意）: オレンジのラベル列の仕様表と小さい箇条書き注意

Imagery

• モデル写真は明るい単色背景で、ソフトな肌と小物（花・リボン・ニット）で色を表現
• 瞳アップは真正面のマクロ撮影。睫毛を強調し、ハート型に切り抜く
• レンズ単体は白背景の円で、少し影を付ける
• 背景にハーフトーンドット、キラキラ、点線のハートを散らす
• 黒猫などのミニキャラを小さく配置して遊び心を出す
• 商品テーマの小物柄（リボン、チェック、チョコ）を写真枠に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に SP 幅（約 480px）のカラムを置き、左右にパステルの背景を敷く
• 広げる場合でも、画像に文字を重ねた構成は維持する
• ラインナップは PC では 3〜4 列のグリッドにする
• 仕様表は最大幅 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 行書くと起動時に読み込まれる。