DESIGN.md — ラベンダー×コーラルのきらめきコスメLP（Lavender Coral Glitter Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、かわいい、シンプル・ミニマル
• キーワード: ラベンダーグラデーション・コーラルピンク・グリッター・細い欧文ロゴ・エディトリアル・ホリデー限定
• 地の質感: 細かいラメの粒子、ガラス玉、柔らかい光のにじみ。背景はくすんだパステルのグラデーション
• 形: 角丸のない四角い写真ブロックが基本。写真を少しずらして重ね、コラージュ風に配置する
• 温度感: やや暖かい。紫の涼しさとコーラルの温かさを混ぜた中間の色温度

Colors

• 写真を使うビジュアル帯はラベンダーからコーラルへの斜めグラデーションにし、文字は白にする
• 解説パートはほぼ白の淡い地にして、写真と色見本を目立たせる
• 英字見出しはラベンダーからコーラルへのグラデーション文字にする
• 強調語は商品の色（テラコッタ・ゴールド・紫）で色分けし、本文中で 1〜2 語だけに使う
• 黒や原色の面は使わず、全体を彩度の低いパステルでまとめる
• hero-visual は文字 #F9F7F7 × 背景 #A494B5 のコントラスト比が 2.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#7F6897、4.54:1）を使う。
• point-label は文字 #F9F7F7 × 背景 #9E88A0 のコントラスト比が 3.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#836A85、4.51:1）を使う。
• texture-compare は文字 #81768B × 背景 #F6F1F3 のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#756B7F、4.51:1）を使う。

Typography

• 欧文ロゴは極細の書体を使い、文字を重ねたり大きく崩したりしてアート的に見せる
• 日本語見出しは太めのゴシックで中央揃え。前に細い前置きを 1 行入れる
• 本文は小さく行間を広めにして 2〜3 行に収める
• 英字の色名は、写真の横に縦書きの薄い文字としても置く
• ハッシュタグ風の短い言葉を 2〜3 個、見出しの下に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色見本は写真と色パネルの 2 分割、質感比較は 2 枚並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• ビジュアル帯は全幅の写真に文字を重ねる
• 解説パートは左右に約 6% の余白を取る
• 写真は左右に少しずらして置き、非対称の配置にする
• 色見本は目元写真を左、色パネルを右に置き、行を隙間なく縦に積む
• コラージュは 4〜5 枚の写真を重ね、背景に大きな英字を透かして置く

Elevation & Depth

• 影はほとんど使わず、平面に近い見せ方にする
• 商品の切り抜き写真にだけ、ごく薄い落ち影をつける
• 写真フレームの裏に、ずらした色の板を重ねて奥行きを出す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの四角形。目元や唇を大きく寄せて切り取る
• セクション境界: 直線で区切り、地の色の切り替えだけで区切る
• 写真は角丸にしない
• ポイントラベルは平行四辺形の小さな帯にする
• 質感サンプルは不規則な形の切り抜きを写真の端にはみ出させる

Components

• グラデーションのビジュアル帯（hero-visual）: モデル写真の上に細い欧文ロゴと白い日本語コピーを中央に重ねた全幅の帯
• グラデーション英字見出し（gradient-heading）: 紫からコーラルへ色が変わるセリフ体の英字見出しを中央に置く
• 色見本の行（swatch-row）: 左に目元写真、右に色パネルを置き、色名・質感の種類・2 行の説明を重ねる
• ポイントラベル（point-label）: 紫の平行四辺形に白い欧文で番号を入れ、その下に太字の訴求文を置く
• コラージュ（collage-block）: 大きな透かし英字の上に、大小の写真やラメの素材を重ねた雑誌風のブロック
• 使い方カード（howto-card）: 目元写真、パレット図（チェック印つき）、英字の色名、日本語の手順文をセットにする
• 質感の比較（texture-compare）: ラメの拡大写真と指に塗った写真を 2 枚並べ、下に色名と説明を横に並べる
• ポラロイド風フレーム（photo-frame）: 白い縁の写真フレームを傾けた色の板の上に重ね、周りに縦書きの英字ときらめきの記号を置く

Do's and Don'ts

Do - 背景や写真にはラベンダーとコーラルを両方入れる - 大きな欧文ロゴは細く繊細にし、余白を多く取る - ラメやガラス玉、光の十字（きらめき）を装飾に使う - 商品の色の解説では、実物の色パネルと着用写真を必ずセットにする - 強調語は商品の色に合わせて色を変える

Don't - 太いゴシックの英字や、原色の強い色は使わない - 角丸のカードや影の強いボタンで、ポップな印象にしない - 背景を真っ白や黒一色にしない - 説明文を長くしない（1 項目 3 行以内） - 写真をきれいなグリッドで均等に並べすぎない

Page Structure

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

1. ファーストビュー（コレクションの世界観を伝える）: グラデーション地のモデル写真に、極細の欧文ロゴと 2 行の詩的なコピー、年度とシリーズ名を重ねる
2. 商品集合カット（ラインナップを見せる）: ラメの地の上に商品写真を四角い枠で置き、その下に欧文ロゴと英文コピーを置く
3. アイテム 1 のビジュアル（1 つ目の商品を紹介する）: 商品を持ったモデル写真に、セリフ体の大きな商品名と日本語名を重ねる
4. 商品カット（特長を一言で伝える）: パレットの接写に、前置き 1 行、太字の名前、ハッシュタグ 2 つを置く
5. コラージュ（世界観を補う）: 透かし英字の上に目元・モデル・商品・ラメの写真を重ねる
6. カラーチャート（全色を見せる）: グラデーション英字の見出しの下に、色を割った 3×3 の色見本と、目元写真＋色パネルの行を色の数だけ積む
7. 使い方（塗り方の手順を見せる）: 目元写真とパレット図（チェック印つき）を左右交互に置き、英字の色名と手順文を添える
8. 質感の紹介（3 種類の質感の違いを伝える）: ラメの拡大写真と指に塗った写真のペアを 3 段に並べ、左に色名、右に説明を置く
9. アイテム 2 のビジュアル（2 つ目の商品を紹介する）: 商品を顔に添えたモデル写真、商品カット、ハッシュタグの順に置く
10. ポイントのまとめ（3 つの強みを一覧で見せる）: ラメの地に、ポイントラベルと一行の訴求文を 3 段に並べる
11. ポイントの詳細（それぞれの強みを証明する）: ラベル・2 段の見出しの下に唇の接写と色見本の組み合わせを置き、太字のまとめ文で締める
12. メイクの紹介（完成したメイクを見せる）: グラデーション英字の見出しの下に、傾けたポラロイド風フレームを置く
13. エンディングのビジュアル（余韻を残して締める）: 顔の寄り写真に、崩した欧文ロゴを縦に組んで重ねる

Imagery

• モデルは淡いパステルのグラデーション背景の前で撮り、肌はツヤのある白めのトーンにする
• 目元・唇は大きく寄せて撮り、ラメの粒やツヤのハイライトをはっきり見せる
• 商品はガラス玉やアクリルと一緒に、柔らかい逆光で撮る
• 色見本はパウダーを割った断面や、塗った跡の切り抜きで見せる
• 装飾は四方に光る十字のきらめきと、細かいラメのノイズを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に 480〜600px 幅の SP レイアウトを置き、左右をグラデーション地で埋める
• PC でビジュアル帯を全幅にする場合は、写真を左、ロゴを右に置く 2 分割にする
• 色見本の行と質感の比較は、PC では 2 列のグリッドに広げてもよい
• 欧文ロゴは PC で 1.5 倍程度まで大きくし、余白も同じ比率で広げる

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