DESIGN.md — 霧がかった青灰グラデのヘアケア LP（Misty Blue-Gray Moonlight Haircare LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 上品・高級、クール・先進的、シンプル・ミニマル、清潔・爽やか
• キーワード: くすみブルーグレー・縦グラデーション・細身の欧文セリフ・細い白罫線・月・新月モチーフ・余白多め
• 地の質感: うっすら粒子ノイズの乗ったマットなグラデーション面。すりガラスのような半透明パネル。
• 形: 直角の写真と枠、ボタンだけがピル型。細い1px線で枠と区切りを作る。
• 温度感: 寒色寄りで静か。夜明け前のようなひんやりした温度感。

Colors

• 地はほぼ全面を青灰の縦グラデにし、上は明るく下へ行くほど暗くする。
• ギフトとSNS帯だけ白〜極淡ブルーに切り替え、休符にする。
• 暗い青灰の上の文字はすべて白。淡地上は青灰の見出しと濃紺グレーの本文。
• 購入ボタンは地より一段濃いスレートで、彩度の高い色は使わない。
• 区切りは半透明の白い細線のみ。
• 暖色や原色はEC外部ロゴ以外に入れない。
• button-secondary は文字 #F4FAFF × 背景 #7E8EA1 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#637489、4.55:1）を使う。
• product-grid-card は文字 #F4FAFF × 背景 #A1B9C5 のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#547788、4.57:1）を使う。
• set-card は文字 #F4FAFF × 背景 #A1B9C5 のコントラスト比が 1.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#547788、4.57:1）を使う。
• shop-list-panel は文字 #6E7B8E × 背景 #FFFFFF のコントラスト比が 4.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#6B778A、4.53:1）を使う。

Typography

• 英字見出しは細いセリフで大文字、字間を広く取る。
• 和文は細めのゴシックで行間2.0前後、字間広め。
• 太字は使わず、強弱はサイズと色で付ける。
• サブラベルは丸括弧で挟んだ英字にする。
• 価格の「税込」は小さく添える。
• ブランド欧文は背景に低コントラストで大きく透かす。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品のみ 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 商品は2列のマス目に並べ、縦横を細線で区切る。
• 本文ブロックは左右に約8%の余白を取り、左揃え。
• 英字見出し＋和文サブコピーは中央揃え。
• ギフトセットは縦に積んだグラデーションカード。
• ギャラリー写真は大小をずらして横に流す。

Elevation & Depth

• 影はほぼ使わず、面のグラデと細線で奥行きを出す。
• 写真は半透明の白い細線枠を少し外側にずらして重ねる。
• トップへ戻るボタンだけ、ぼかした同心円状の光彩。

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 角丸なしの矩形。商品は淡い面に切り抜きで中央配置。
• セクション境界: 直線で切り替える。グラデの色変化でつなぐ。
• ボタンはすべてピル型。
• カード・写真は角を立てる。
• 細い斜線や三日月の線画を装飾に添える。
• 枠は1pxの半透明白線。

Components

• 購入ボタン（button-primary）: カートアイコン付きのピル型。濃いスレート地に白文字、細い白線の縁。
• 詳細を見るボタン（button-secondary）: 購入ボタンの上に置く低めのピル。地より少し濃い半透明面。
• もっと見るボタン（button-outline）: 幅広のピル型アウトライン。暗地では白線、淡地では淡ブルー面。
• 商品マス（product-grid-card）: 淡い面に商品を切り抜き配置、下にキャッチ・商品名・容量と価格・2ボタン。
• ギフトセットカード（set-card）: 上から下へ暗くなるグラデ面。括弧英字ラベル、写真、セット名、罫線区切りの内容表、価格、購入ボタン。
• 透かし欧文（watermark-logo）: 見出しの上に大きな欧文を地色に近い薄さで敷く。
• 二重枠の写真（framed-photo）: 写真の外側に細い白線枠をずらして重ね、大小を交互に並べる。
• 販売店パネル（shop-list-panel）: 半透明の白パネル内に、白地のロゴボタンを2列で並べる。
• 注釈（note-text）: ※番号付きで小さく並べる。暗地では白、淡地では青灰。

Do's and Don'ts

Do - 青灰グラデを主役にし、明暗の差で場面を切り替える。 - 英字見出しは細いセリフで大きく字間を広げる。 - 白の細線で枠と区切りを作る。 - 商品写真は淡い面に余白多めで中央配置する。 - ボタンは低彩度のスレートでピル型にそろえる。

Don't - ビビッドな赤やオレンジのCTAを使わない。 - 太いゴシックの大見出しや煽り装飾を入れない。 - 濃いドロップシャドウを付けない。 - カードや写真に大きな角丸を付けない。 - 白文字を明るすぎる面に載せてコントラストを失わない。

Page Structure

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

1. ヘッダー（ブランド提示とメニュー）: 淡い青灰地に白い細セリフのロゴ、右に細線のハンバーガー。
2. ファーストビュー（世界観の提示）: 紺の夜色写真のスライダー。上に大きな白い欧文ロゴ、右下に小さな注釈、下にドットのページャー。
3. 商品一覧（単品を選んで購入）: 流れる英字帯の下に、細線区切りの2列グリッド。各マスに2つのボタン。
4. 注釈（表現の補足）: 暗い帯に※付きの小さな白文字を並べる。
5. ブランドについて（名前の由来と思想）: 二重枠の写真を横に散らし、透かし欧文、英字見出し、行間広い物語文、アウトラインボタン。
6. 監修者紹介（専門家の裏付け）: 暗い青灰地に括弧英字ラベル、鉤括弧の引用見出し、本文、三日月の線画、ロゴと人物写真を細線枠で並べる。
7. ギフトセット（セット購入の提案）: 極淡ブルー地に英字見出しとサブコピー、グラデのセットカードを縦に並べる。
8. SNSギャラリー（最新の雰囲気を見せる）: 白地に英字見出し、正方形写真の2列グリッド、淡いピル型のもっと見る。
9. 販売店一覧（外部ECへ誘導）: 青灰グラデ地に大きな白ロゴ、半透明パネル内に白いロゴボタン2列、光彩のTOPボタン。
10. フッター（関連導線と規約）: 生成り地に横長の白い角丸バナー2本、SNSアイコン、2列のテキストリンク、コピーライト。

Imagery

• 人物は濃紺の背景で青い光を当て、肌は透けるように白く撮る。
• 商品はすりガラス調のボトルを淡い無地の上で正面から撮る。
• 水面や布のゆらぎで透明感を出したイメージ写真。
• 撮影の舞台裏など、くすんだ色に統一したSNS写真。
• 三日月や細い斜線を白い線画で控えめに添える。
• 全体を青寄りに色補正し、彩度は低めにそろえる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを横長にし、左に大きな欧文ロゴ、右に縦書き風の白コピー。
• PCの商品グリッドは4列横並びで、細線区切りを保つ。
• PCの監修セクションは文章左、写真右の2カラム。
• PCのギフトセットは2枚を横並びに。
• PCのSNSは5列、販売店ロゴは4列横並び。
• PCの本文幅は中央に約60%まで絞る。

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