DESIGN.md — 水色×黄色グラデの科学系スキンケア LP（Aqua Yellow Gradient Science Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、シンプル・ミニマル、信頼・誠実
• キーワード: 透明感・ティール×イエローのグラデーション・細い明朝・科学的な図解・余白多め・白カード
• 地の質感: マットで平らな面。グラデーションは淡く、透け感がある
• 形: 四角い白カードが基本。ボタンだけピル型で、角丸はほぼ使わない
• 温度感: 涼しめ。水色寄りの中に、黄色がほんのり温かさを足す

Colors

• 地はライトグレー。情報のまとまりは白カードに乗せる
• ティールは強調の文字・下線・アイコンにだけ使う
• 見出し帯とボタンは、左がアクア・右が黄色の淡いグラデにする
• 濃い色の面は使わない。いちばん暗くても中間のティールまで
• 文字は真っ黒にせず、#333 前後のグレーにする
• 図解はベージュと水色の2色でまとめる
• step-flow は文字 #7A7F79 × 背景 #F9F9F9 のコントラスト比が 3.88:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#6F736E、4.58:1）を使う。

Typography

• 見出しも本文も細めの明朝で、上品さを出す
• 太字は使わない。強調はティール色と下線で表す
• 本文は中央揃えにし、短い行で改行する
• 注釈だけ小さいゴシックにする
• 成分名などには肩付きの※番号を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。手順の説明だけ 2 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは中央の狭い幅に収め、左右に大きな余白をとる
• 写真のセクションは画面幅いっぱいに広げる
• セクションは見出し帯→リード文→図解の順に組む
• グレー地の中に白い面を重ねて階層を作る

Elevation & Depth

• 影は基本的に使わない
• 白カードは影なし。うすい枠線か地色との差で区切る
• 商品写真にだけ、ごく淡い落ち影を付ける

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンはピル型。
• 写真の切り抜き: 四角く切る。人物は画面幅いっぱいのフラットな背景の写真
• セクション境界: 直線の色面で切り替える。小見出しは上下を細い線で挟む
• カードとアコーディオンは角丸なしか 2px
• ボタンだけピル型にする
• 流れを示す矢印は小さな逆三角形

Components

• グラデのピル型購入ボタン（button-primary）: アクア→黄のグラデに、カートアイコン＋短い文言
• グラデ帯の見出し（heading-band）: 淡いアクア→黄の横長の帯に、明朝の見出しを中央に置く
• 線で挟む小見出し（heading-lined）: 上下を細いティールの線で挟んだ、中央揃えの見出し
• 白いアコーディオン（accordion）: 白い帯に下線付きの項目名と右端の▼。縦に並べて目次を兼ねる
• 悩みのチェックリスト（check-list）: 白い箱に、ティールのチェックボックス付きの悩みを4つ並べる
• 声のカード（voice-card）: 細い枠の白カード。左にグレーの横顔シルエット、文中の一部をティールで強調
• 手順のフロー図（step-flow）: 灰色の手順→ティール枠で囲んだ本品→矢印→次の手順の横並び
• 受賞バッジ（award-badge）: 線で挟んだ英字ラベルの下に、月桂樹エンブレムと受賞画像を並べる

Do's and Don'ts

Do - 余白をたっぷりとり、要素は中央にまとめる - 強調はティールの文字と下線だけで行う - 見出しは毎回同じグラデ帯で統一する - 仕組みは立体の断面図で図解する - 成分の根拠には注釈を添える

Don't - 原色の赤やオレンジで売り込まない - 太いゴシックの大見出しは使わない - 濃い影や立体的なボタンにしない - グラデーションを濃くしない - 文字を詰め込みすぎない

Page Structure

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

1. ファーストビュー（新しさと商品の印象を伝える）: 斜めに置いたボトルの大きな写真に縦書きの明朝コピー。下に発売日の帯と購入ボタン
2. 関連コンテンツのバナー（専門家との対談記事へ誘導する）: グレーのバナーに人物2人と見出し、小さなボタン
3. 商品の紹介・受賞（商品の概要と実績を示す）: 左に商品写真、右に名称・容量・ティールのコピー。下に受賞バッジ
4. 悩みの提起（うるおい不足を自分ごとにしてもらう）: 白い箱にチェックリスト。続けてティールの下線付きコピー
5. イメージビジュアル（仕上がりの肌を印象づける）: 画面幅いっぱいの女性の横顔写真に明朝コピー
6. 目次アコーディオン（各セクションへ案内する）: 白い帯を5本縦に並べ、右端に▼
7. 成分の特長（独自成分を説明する）: グラデ帯の見出し、成分図、詳細のアコーディオン、注釈
8. 処方の仕組み（効果のしくみを図で見せる）: 線で挟んだ小見出しと断面図を2段重ね、▼の後にティールのまとめ
9. 効果の持続（効果が長く続くことを訴える）: グラデ背景の商品写真と女性の写真に縦書きコピー
10. 感触と香り（使い心地を伝える）: 下線付きの見出し、短い説明、手に取る写真
11. 使用者の声（使い心地を実感として示す）: 声のカードを4枚縦に並べ、最後に調査の注釈
12. お手入れの手順（使う順番を示す）: 白いフロー図で本品の位置をティール枠で示す
13. なじませ方（使い方を具体的に示す）: 線画の顔イラスト4コマに番号付きの説明

Imagery

• 人物は短髪の女性。目を閉じた穏やかな表情で、白〜淡いグレーの背景
• 商品は白いボトルにティールと黄の水彩風グラデ
• 図解は肌の断面を立方体で見せる3D風イラスト。ベージュと水色
• 使い方は細い線画の顔イラストに赤い矢印
• 背景に淡いアクア〜黄の光のにじみを入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC もコンテンツ幅は約 600px のまま中央に置く
• SP は余白を 16px にし、カードは画面幅いっぱいに使う
• 写真の帯は SP でも画面幅いっぱいにし、文字は写真の下に回してもよい
• なじませ方の4コマは SP で 2×2 に組む
• ファーストビューの縦書きコピーは SP では左上に重ねる

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