DESIGN.md — グレージュとトープの上品コスメ LP（Greige Taupe Editorial Cosmetics LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、シンプル・ミニマル、やさしい・柔らかい、ナチュラル
• キーワード: グレージュ・トープ・欧文セリフ・マット質感・エディトリアル・余白
• 地の質感: 細かいラメ粒子のようなざらつきのあるベージュ面と、柔らかな斜光のグラデーション
• 形: 角丸小さめの写真カードと見出し帯。ハッシュタグだけピル型
• 温度感: やや暖かいニュートラル。彩度は低い

Colors

• 地はオフホワイト・ライトグレー・ラメ調ベージュの 3 種をセクションごとに切り替える
• 見出しの強調はトープブラウン一色で、太字だけで差をつける
• 帯見出しはトープ→ベージュの横グラデーションに白文字
• 彩度の高い色はファーストビューの写真内だけに限る
• ハッシュタグは白のピルにトープ文字
• 黒は使わず、文字は濃いグレーかトープにする
• band-heading は文字 #FFFBF2 × 背景 #B4A19A のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#886E65、4.55:1）を使う。
• hashtag-pill は文字 #8A796E × 背景 #FFFBF2 のコントラスト比が 4.03:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#807066、4.59:1）を使う。
• color-chip は文字 #8A796E × 背景 #F3F2ED のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#807066、4.56:1）を使う。
• swatch-strip は文字 #FFFBF2 × 背景 #E4C0BF のコントラスト比が 1.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-2-accessible（#B75653、4.55:1）を使う。

Typography

• 見出しは欧文セリフを大きく、和文の訳を小さく下に添える
• 和文本文は細めのゴシックで中央揃え
• 強調したい句だけ太字にしてトープ色にする
• 1 行は 20〜24 字程度で改行して整える
• 欧文ラベルの『Point N』『01』は小さなセリフ体にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は 2 列、カラーチップは 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 70px、基本単位 8px、カード内 12px（375px 幅換算）
• 見出しと本文は中央揃え
• 写真グリッドは 2 列で隙間 2px ほどに詰める
• セクションは全幅の地色の切り替えで区切る
• 商品写真は全幅で大きく見せる
• 仕様カードは 2 列の細枠ボックスで表のように組む

Elevation & Depth

• 影はほとんど使わず、平面で構成する
• 商品写真の中の柔らかな落ち影だけで立体感を出す
• カードは影なしで地色の差と細線で分ける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: 角丸小さめの四角。部分拡大は円形にして点線の引出し線でつなぐ
• セクション境界: 直線で地色を切り替える
• 写真カードの角丸は 4〜6px
• ハッシュタグだけ完全なピル型
• 肌写真の塗る範囲は白の半透明の形と点線で示す
• 仕様の引出し線は細い点線に小さな丸を付ける

Components

• グラデ帯見出し（band-heading）: 写真グリッドの上に付ける、トープからベージュへのグラデーション帯。白い太字を中央に置く
• 2 列写真カード（photo-card-pair）: 肌の接写を 2 枚並べ、下にキャプション面と 2 行の説明を置く
• ポイント見出し（point-label）: 小さな欧文セリフの番号の下に、2 行の和文見出しを置く。2 行目を太字のトープにする
• ハッシュタグピル（hashtag-pill）: 白いピルにトープの太字で特徴を 2 つ並べる
• 仕様カード（spec-card）: 番号付きの名前と、項目ラベル＋値の表を細枠で囲む。★で強さを表す
• カラーチップ（color-chip）: 粉の質感を見せる 3 列のタイル。中央に欧文の色名、下に和文の名前と説明を置く
• 肌スウォッチ帯（swatch-strip）: 腕に塗った色を全幅の角丸写真で見せ、白い色名を重ねる
• 拡大コールアウト（callout-zoom）: 道具の先を円形に拡大し、点線でつなぐ。説明文と欧文セリフのラベルを添える

Do's and Don'ts

Do - 大きな欧文セリフ見出しには、必ず小さな和文の訳を添える - セクションごとに地色を 3 種の中で順に替えてリズムを作る - 強調は太字とトープ色だけで行う - 肌の接写は明るく均一な光で撮り、塗る範囲を半透明で示す - 余白を広めに取り、1 セクションに伝える内容を 1 つに絞る

Don't - 原色や蛍光色のボタン・バッジを置かない - 真っ黒の文字や太い枠線を使わない - 強いドロップシャドウや立体的なボタンを使わない - 見出しに丸ゴシックやポップ体を使わない - 文字を写真の上に詰め込まない

Page Structure

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

1. ファーストビュー（モデルと商品で世界観を印象づける）: モデル写真を全幅で置き、上に白い大きな欧文セリフの商品名を重ねる
2. 商品紹介（商品名と全体の姿を見せる）: ラメ調ベージュの地に、トープの欧文名と和文名、商品の静物写真、ハッシュタグを置く
3. コンセプト（一番の価値を一言で伝える）: グラデーション写真の上に白い欧文見出しを置き、下に太字トープの 2 行コピーを添える
4. 特長1（使い方の違いを実例で示す）: Point 見出しの下に、帯見出し付きの 2 列写真カードを 2 段並べる
5. 特長2（質感の設計を見せる）: 商品の図に番号と点線の引出し線を付け、細枠の仕様カードを 2 列で置く
6. 特長3（色の考え方を伝える）: ラメ調ベージュの地に見出しと本文を置き、白いハッシュタグピルを 2 つ並べる
7. カラー紹介（色ごとの違いを比べてもらう）: 番号と欧文の色名、商品写真、3 列のカラーチップ、肌スウォッチ帯の順に、色の数だけ繰り返す
8. 使い方のコツ（塗る位置を具体的に教える）: 帯見出しごとに、肌の接写を 2 列で並べる。塗る範囲は点線と半透明で示し、下に短いキャプションを付ける
9. 付属品紹介（付属の道具の価値を伝える）: 欧文見出しと商品写真を置き、白いカードの中で道具の両端を円形に拡大して説明する

Imagery

• 商品はベージュの背景に斜めの柔らかい光を当てて撮り、長い影を落とす
• パッケージを斜めに傾けたり、積み重ねたりしてエディトリアルらしく見せる
• 肌の接写は素肌感のある明るいトーンで、目元・鼻・口元を大きく切り取る
• 塗る範囲は白の半透明の形を点線で縁取って重ねる
• 粉は割った断面や粒子を真上から撮り、質感を見せる
• 背景面には細かいラメのノイズをうっすら入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、SP の 1 カラムを中央 640〜720px 幅に収める
• PC では地色の帯を全幅に広げ、コンテンツだけ中央に置く
• PC の写真カードは 2 列のまま大きくするか、4 列に広げる
• 欧文 display は PC で 96px 前後まで大きくする
• 仕様カードは PC で 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 行書くと起動時に読み込まれる。