DESIGN.md — くすみピンク×チャコールの高級美容液 LP（Dusty Pink and Charcoal Premium Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク
• キーワード: くすみピンク・チャコール・細字欧文・角のない直線・余白・モノトーン
• 地の質感: マットで平らな塗り面。光沢や影は使わず、質感は写真に任せる
• 形: 角丸のない長方形と細い罫線が中心。円形は香りイラストと図版だけ
• 温度感: やや暖かいグレーに、肌色寄りのピンクを差した落ち着いた温度感

Colors

• 明るいグレーの面と、濃いグレーやチャコールの面をセクションごとに交互に置く
• 欧文の大見出しだけに、ピンクからグレージュへのグラデーションを入れる
• 主CTAは黒一色の面に白文字。色を変えて強調しない
• ピンクは薄い色を番号ラベルに、くすんだ色をアコーディオンにだけ使う
• 赤は図版の印にだけ使い、UI部品には使わない
• 香りカテゴリは、生成り・薄緑・薄ピンクのごく淡い色で区別する
• accordion-pink は文字 #FDFDFD × 背景 #B88A92 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#A1646F、4.52:1）を使う。
• gradient-display は文字 #B88A92 × 背景 #3E3A39 のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。
• routine-chart は文字 #000000 × 背景 #656160 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-alt-accessible（#797473、4.56:1）を使う。

Typography

• 欧文の大見出しは極細ウェイトで大きく、すべて大文字にする
• 和文の見出しは細め〜中くらいの太さにし、太字は避ける
• 本文は中央揃えにし、短い単位で改行する
• 注釈は※や*の番号で区別し、とても小さく添える
• 欧文ラベルの字間は0.1〜0.2emと広めに取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はポイント欄が左に文章・右に画像の 2 カラム、香りとステップは横並び
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算）
• 左右の余白は約14pxで統一する
• カードやボタンは画面幅いっぱいに近い帯状にする
• 各セクションは欧文の大見出し→和文サブ見出し→内容の順に並べる
• CTAは同じ高さのボタンを2つ縦に積む
• ポイントカード同士の間は約14pxあける

Elevation & Depth

• 影は一切使わない
• 奥行きは地の色の濃淡と細い線だけで表現する

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の裁ち落とし。商品は切り抜いて単体で置く
• セクション境界: 直線で地の色を切り替える
• ボタン・カード・ラベルはすべて角丸のない長方形にする
• 枠線は1pxの細い線にする
• 香りカテゴリのタブだけ、右上と右下に小さな角丸を付けてよい

Components

• 黒い主CTA（button-primary）: 黒い全幅の長方形ボタン。白い細字の欧文で、外部リンクには四角2つのアイコンを右端に付ける
• 枠線付きのアコーディオン（accordion-outline）: 白黒の1px枠の中で、文字を中央に置き、右に下向きの矢印を付ける
• ピンクグラデのアコーディオン（accordion-pink）: くすんだピンクのグラデーションの細い帯に、白い小さな文字と矢印を載せる
• ポイント番号ラベル（point-label）: 薄ピンクの長方形に、字間の広い番号を入れる。チャコールのカードの左上に置く
• グラデーションの欧文大見出し（gradient-display）: 濃い地の上に、ピンクからグレージュへのグラデーションをかけた極細の欧文を置く
• 価格の行（price-row）: 左に白い容量ラベル、右に白文字の価格（税込）を並べる
• 上下の罫線で挟む小見出し（line-heading）: 上下を細い線で挟み、中央に和文の見出しを置く
• 朝夜のお手入れ順チャート（routine-chart）: グレーの面に縦線を2本引き、白い枠のステップを並べる。主役の商品だけ黒く塗る
• 黒地のフッターナビ（footer-nav）: 黒地に細字の欧文メニューを並べ、グレーの線で区切り、右に細い矢印を付ける

Do's and Don'ts

Do - 淡いピンク背景の商品写真を、ファーストビューの全面に敷く - 欧文の大見出しは極細ウェイトでたっぷり大きくする - 濃いグレーと明るいグレーのセクションを交互に置く - ボタンとカードは角丸なしの長方形でそろえる - 注釈を省かず、小さな文字で丁寧に添える

Don't - ピル型ボタンやドロップシャドウを使わない - 原色の赤やオレンジをCTAに使わない - 太いゴシックで見出しを強く主張させない - ポップなアイコンや吹き出しを入れない - ピンクを広い面に塗らない

Page Structure

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

1. ヘッダー（ブランドの表示とメニュー）: チャコールの細い帯の中央にロゴ、右にハンバーガーメニューを置く
2. ファーストビュー（商品と効能を印象づける）: ピンクの商品写真を全面に敷く。左上に欧文の商品名と2行の和文キャッチ、受賞を示す月桂樹の金色エンブレムを重ねる
3. リード文とページ内リンク（要点の説明と目次）: 中央揃えの短い文の下に、枠線付きのアコーディオンを4つ縦に並べる
4. 商品詳細（価格と購入導線）: 濃い地の上にグラデーションの欧文見出しを置き、グレーのカードに価格の行・商品の切り抜き写真・黒いCTA2つ・受賞一覧のアコーディオンを入れる
5. 限定セット（期間限定の訴求）: 白い日付帯の下にセット商品の写真を置き、内容を線枠で囲む。関連商品へのバナーとCTA2つを続ける
6. 特長ポイント（技術・効果の説明）: 欧文見出しの下に、チャコールのカードを3枚並べる。各カードに番号ラベル・見出し・本文・画像を入れる
7. 香り（使い心地の情緒的な訴求）: 罫線見出しの下に、カテゴリタブ付きの淡い色の面を並べ、水彩風の素材イラストを置く
8. 使用順序（お手入れでの位置づけ）: グレーの面に、朝夜それぞれのステップを並べたチャートを置く
9. 使い方ステップ（正しい使い方の説明）: 白いカードの中に、ステップ見出し・線画の顔イラスト・本文を3回繰り返す
10. 定期便（継続購入へ誘導）: グレーの地に和文の大見出しを置き、白いバナー・説明文・黒いCTAを続ける
11. フッター（回遊とブランドの締め）: 黒地のナビ一覧の下に、大きなロゴ・SNSアイコン・白地のリンク群を置く

Imagery

• 商品は淡いピンクの背景に斜めに置き、泡の写真と水滴を添えて撮る
• 単体の商品写真は背景を抜き、影の少ない切り抜きにする
• 肌の写真は顎や頬のアップで、明るく柔らかいトーンにする
• 使い方の説明は、細いグレーの線画の顔に赤い印や番号を描き込む
• 香りは素材ごとの水彩風イラストで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央のコンテンツ幅を約80%に収める
• PCのポイントカードは、左に文章・右に画像の2カラムにする
• PCの香りカテゴリは2×2、使い方ステップは3列に並べる
• PCではページ内リンクのアコーディオンを4つ横に並べる
• PCのフッターでは、ロゴを左・SNSを右に配置する

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