DESIGN.md — ミルキーピンクの限定コスメコレクション LP（Pastel Pink Holiday Cosmetics Collection LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、上品・高級
• キーワード: くすみピンク・パステル・リボン・封蝋・スウォッチ・ホリデー
• 地の質感: マットなパウダー感とオーガンジーの透け感。フラットな色面に、柔らかい光の写真を組み合わせる
• 形: 四角いブロックと写真タイルが中心。角丸はほぼなく、FV だけ斜めの切り返しで封筒のフラップ風に見せる
• 温度感: 暖かめのピンクベージュ。甘いけれど甘すぎない、ミルキーで落ち着いたトーン

Colors

• 地は白・くすみピンク・淡いピンクの 3 色を交互に切り替え、セクションの区切りに使う
• 新商品の紹介ブロックはくすみピンク地に白枠の写真を置く
• 欧文見出しと色名はブランドピンクにし、日本語はグレーで添える
• 黒は使わない。文字は濃いグレーまで
• 濃い色は商品の色見本（リップ・シャドウ）だけに任せ、UI には使わない
• 色面の上に置く文字は白にし、写真の上には置かない
• product-intro-block は文字 #6A6466 × 背景 #EABECF のコントラスト比が 3.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#F4DDE6、4.5:1）を使う。
• shade-header は文字 #EEA3C1 × 背景 #FFFFFF のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D93174、4.52:1）を使う。
• layering-tile は文字 #FFFFFF × 背景 #B26464 のコントラスト比が 4.29:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#AF5F5F、4.54:1）を使う。

Typography

• 欧文の筆記体はセクション見出しにだけ使い、ピンク色で中央に置く
• 色名は欧文セリフ（ピンク）＋日本語ゴシック（グレー）の 2 段にする
• 日本語の本文は中央揃えで 2 行程度に短くまとめ、その下に太字の商品名を置く
• 文字は細めから中太にし、極太は使わない
• 写真の上に乗せる文字は白の小さな欧文ラベルにとどめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。着用写真は 2 列、色見本は 3 列（質感・パレット・目元）のグリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真タイルどうしの隙間は 2〜3px の白
• 商品の紹介ブロックは色面の地に、余白 24px をとって写真を内側に置く
• 色ごとのブロックはパレット画像（左）と色名（右）を横に並べて始める
• 見出しの上下には 40〜60px の余白をとる
• タグ見出し帯は写真グリッドと同じ幅にそろえる

Elevation & Depth

• 影はほとんど使わず、フラットな面で構成する
• 影がつくのは商品パレットの切り抜き画像のごく弱い影だけ
• 階層の差は、地の色の切り替えと白い枠で表す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は直角の矩形。商品は背景を抜いた切り抜き画像
• セクション境界: 基本は直線の色面切り替え。FV だけ封筒のフラップのような斜めの V 字にする
• 角丸は使わずシャープな矩形にする
• 丸い封蝋のモチーフを FV の中央にアクセントとして置く
• リップの色見本はなめらかな筆跡の形で重ねて見せる

Components

• 筆記体セクション見出し（script-heading）: ピンクの筆記体欧文を中央に置く見出し。装飾の線は付けない
• 商品紹介ブロック（product-intro-block）: くすみピンク地に、2 行のリード文、太字の商品名、余白付きの大きなイメージ写真を順に置く
• 色名ヘッダー（shade-header）: 左にパレットの切り抜き画像、右に欧文の色名（ピンク）と日本語の色名（グレー）を置く
• 色見本グリッド（swatch-grid）: 横 1 行に「質感スウォッチ・パレットの崩し・目元の着用写真」の 3 枚を並べ、4 行重ねる。白文字の欧文ラベル付き
• #タグ見出し帯（tag-band）: ピンクの帯の左側に「#英語」の見出しを置き、すぐ下に写真グリッドを続ける
• 重ね付け色面タイル（layering-tile）: 唇の写真の横に、リップの色面と白文字の「A + B」を並べる
• リップ色の筆跡スウォッチ（lip-swatch-stack）: 筆跡の形をした色面を斜めに重ね、中央に白い欧文と日本語の色名を入れる

Do's and Don'ts

Do - 地はピンク系と白を交互に使い、全体を淡くまとめる - 色ごとに目元・唇の着用写真を必ず添える - リボン・オーガンジー・封蝋などのギフト小物で世界観を出す - 欧文見出しはピンクの筆記体かセリフ体にする - 写真は高い明度で、柔らかい拡散光にする

Don't - 真っ黒の文字や濃い色の背景を使わない - ボタンやバッジを派手に増やして訴求型にしない - 角丸のカードや強い影を使わない - 原色の赤や青のアクセントを入れない - 長い文章を入れない

Page Structure

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

1. ファーストビュー（季節限定コレクションの世界観を伝える）: モデルのアップ写真に筆記体のタイトルを重ね、封筒フラップ風の斜めの切り替えと封蝋を置く。その下にコンセプトの一文とコレクション名、商品の集合写真を続ける
2. 商品紹介（アイシャドウ）（1 つめの商品を紹介する）: くすみピンク地にリード文 2 行と太字の商品名、白枠付きのイメージ写真を置く
3. カラー一覧（全色を一目で比べてもらう）: 筆記体の見出しの下に、腕に塗った全色のスウォッチ写真を置き、色名を縦書きで添える
4. 色ごとの詳細（色ごとの質感と仕上がりを見せる）: 色名ヘッダー、目元の写真 2 枚、3 列の色見本グリッドの組み合わせを色の数だけ繰り返す
5. 使い方（塗り方を伝える）: 筆記体の見出しの下に、ブラシと指で塗る写真を 2 列で並べ、1 行の説明を添える
6. 商品紹介（リップ）（2 つめの商品を紹介する）: くすみピンク地に、リード文・商品名・イメージ写真を置く
7. リップのカラー展開（色の違いと重ね付けの方法を伝える）: 淡いピンク地に、筆跡スウォッチの重ね、#タグ帯付きの唇写真 2×2 グリッド、重ね付けの色面タイルを置く
8. 商品紹介（チーク）（3 つめの商品を紹介する）: くすみピンク地に、リード文・商品名・イメージ写真を置く
9. チークの色詳細（質感と組み合わせを見せる）: 白地に色名とパレット画像、肌の写真と質感写真の非対称グリッド、3 つの円形スウォッチを並べる

Imagery

• モデルは透明感のある肌のアップで、ピンクのメイクにリボンやシュシュを合わせる
• 商品は白〜生成りの布の上に置き、オーガンジーのリボンとピンクの封蝋を散らして俯瞰で撮る
• 目元・唇の接写は明るく均一な光で撮り、色が正しく見えるようにする
• スウォッチは肌や紙の上に平塗りし、ラメは粒子感が見えるまで寄って撮る
• 全体を淡いピンクの色かぶりに統一し、彩度は控えめにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 600〜750px 幅の 1 カラムを置き、左右は淡いピンクか白で埋める
• 色見本グリッドは PC でも 3 列を保ち、写真を拡大して見せる
• 着用写真は PC で 4 列に広げてもよい
• 見出しのサイズは PC で 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 行書くと起動時に読み込まれる。