DESIGN.md — 白×薄グレーの清潔感ある美容液ヘアケア LP（Clean White Lab Haircare Brand LP）

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

Overview

• 業種: ヘアケア・ボディケア ／ 雰囲気: 清潔・爽やか、シンプル・ミニマル、上品・高級、クール・先進的
• キーワード: 白基調・ラボ感・水滴・欧文見出し・明朝コピー・商品グリッド
• 地の質感: フラットな白・薄グレーの面に小さな水滴を散らし、みずみずしさを出す
• 形: 四角い枠線ボタンと直角の写真が基本。ラベルだけピル型や円形にする
• 温度感: やや寒色寄りのニュートラル。青系のボトル写真が差し色になる

Colors

• 地は白と #F7F7F7 の 2 色だけにして、ブランドを語る帯と商品一覧で切り替える
• 文字はチャコールとグレーの 2 段階。純黒は使わない
• 彩度のある色は商品写真の青だけに任せ、UI には入れない
• ラベルはチャコール塗りに白文字か、白地に細枠のどちらかに統一する
• フッターは青みグレーで締め、文字は白にする
• 赤は注意喚起アイコンにだけ使う

Typography

• 見出しは欧文の大文字ゴシックで字間を広くとる
• 情緒的なコピーは明朝にして、欧文見出しと対比させる
• 本文は小さめのグレー文字で行間 2.0 にする
• 商品は欧文名→英語の詳細→和名→容量と価格の順に、サイズを段階的に小さくする
• 注釈記号（※1 など）は上付きの小さな文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、商品は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 欧文見出しは左寄せ、カテゴリ見出しは中央寄せにして下に短い横線を置く
• コピーと本文の間に短い横線（約 32px）を入れる
• 商品カードは画像→ラベル→テキスト→ボタンの縦積み
• 商品の 2 列は各列約 45% 幅で、間に約 8% のガターをとる
• ニュースは横スクロールのカルーセルにする

Elevation & Depth

• 影は使わずフラットにする
• 奥行きは写真と面の色の差だけで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は白背景の切り抜き、イメージ写真は全幅または直角の長方形
• セクション境界: 直線で背景色を切り替える
• ボタンは角丸なしの 1px 枠線
• 香りなどのラベルは細枠のピル型
• 訴求ラベルはチャコールの円形・角丸の塗り
• シリーズカードは写真の下に薄グレーのテキスト面をつなげる

Components

• 詳細ボタン（button-outline）: 白地に 1px のチャコール枠、中央に欧文ラベル
• 欧文セクション見出し（section-heading-en）: 大文字の太ゴシックを字間広めで左寄せ
• カテゴリ見出し＋短線（category-heading）: 中央寄せの欧文小見出しの下に短い黒線
• 商品カード（product-card）: 切り抜き写真、商品名、和名、価格、詳細ボタンの順に並べる
• 香りラベル（badge-pill-outline）: 細枠のピル型に明朝の小さな文字
• 訴求ラベル（badge-dark）: チャコール塗りの円や角丸に白い明朝文字。写真の角に重ねる
• シリーズカード（series-card）: 写真の下に薄グレーの面を置き、ロゴ・ライン名・短い説明を中央寄せ
• ニュースカルーセル（news-carousel）: サムネ・タイトル 2 行・日付を横スクロールで並べ、スクロールバーを見せる

Do's and Don'ts

Do - 余白は広めにとり、1 画面の情報を絞る - 商品写真は白背景の切り抜きで、大きさをそろえる - 背景に小さな水滴を少しだけ散らす - 見出しは欧文、コピーは明朝で役割を分ける - ボタンは細枠のアウトラインで統一する

Don't - 彩度の高い塗りボタンやグラデーションを使わない - ボタンに角丸や影をつけない - 装飾アイコンや柄を増やさない - 本文を太字や大きな文字にしない - 暖色をアクセントに使わない

Page Structure

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

1. ファーストビュー（ブランドの世界観とキャッチを伝える）: 中央にロゴを置いたヘッダーの下に、白い衣装の人物と商品の明るい写真。下部に明朝の大きなキャッチを重ねる
2. ニュース（最新情報を知らせる）: 欧文見出しと一覧リンクを左右に置き、横スクロールのカードを並べる。下に注意喚起を 1 行
3. コンセプト（ブランドの考え方を伝える）: 薄グレー地に欧文見出し、明朝の 2 行コピー、短線、グレーの本文
4. 動画紹介（CM などの映像へ誘導する）: 明朝の小見出し、ほぼ全幅の動画サムネ、外部リンク付きの枠線ボタン
5. 成分・特長（補修効果と成分を伝える）: コンセプトと同じ組み方に詳細ボタンを足し、ラボのガラス器具と原料の全幅写真で締める
6. 商品ラインナップ（使うシーン別に全商品を見せる）: カテゴリ見出しと短線で区切り、2 カラムの商品カードを並べる
7. シリーズ紹介（関連ラインへ誘導する）: 写真と薄グレーのテキスト面でできたカードを縦に積む
8. 注釈（成分表示などの補足）: 小さなグレー文字をまとめて置く
9. フッター（会社情報と SNS を載せる）: 青みグレー地に白いロゴ、SNS アイコン、リンク、所在地、コピーライト

Imagery

• 人物写真は白い衣装でハイキーに撮り、背景は白か淡い青
• 商品は白背景の切り抜きにし、自然な接地影だけ残す
• イメージ写真はガラスのビーカーや原料をラボ風に、明るく撮る
• 派生ラインは青い水しぶきや液体の写真で爽快感を出す
• 背景に小さな透明の水滴を点在させる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では商品グリッドを 4 カラムにする
• PC では欧文見出しを縦書きにして画面端に置く
• PC ではコンセプト文を右側の狭い列に寄せ、余白を大きくとる
• PC ではニュースを 3 枚横並びで固定表示にする
• 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 行書くと起動時に読み込まれる。