DESIGN.md — オーロラ系パステルグラデのスキンケアLP（Iridescent Pastel Gradient Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: やさしい・柔らかい、清潔・爽やか、かわいい、親しみ・手作り感
• キーワード: オーロラグラデ・シャボン玉・細線カード・手描きイラスト・Q&A・透明感
• 地の質感: パステルの縦グラデーションに、液体のような半透明の形とシャボン玉を重ねる。面はマットでノイズはない。
• 形: 角を内側にえぐったチケット形のカード、波線で縁取った楕円バッジ、角丸の小さいボタン。
• 温度感: 上はミント系の涼しい色、下にいくほどピンクの暖かい色に変わる

Colors

• 背景は1色に固定しない。ミント→水色→ラベンダー→ピンクと縦に移り変わるグラデーションにする。
• 情報は白いカードに載せる。輪郭は濃いグレーの1px線で描く。
• CTAは商品ごとに色を変え、ラベンダー・青・ティールを商品の容器色に合わせる。
• Q&Aの答え（NG/YES/NO）は淡黄の太い装飾文字にして、パステルの地から浮かせる。
• 文字は真っ黒にせずグレーにする。強調は色文字か淡い水色のマーカー線で行う。
• フッターだけはティールのベタ塗りにしてページを締める。
• button-primary は文字 #FFFFFF × 背景 #2592D3 のコントラスト比が 3.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#207DB5、4.5:1）を使う。
• badge-scallop は文字 #737BB9 × 背景 #FEFEFE のコントラスト比が 3.96:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#6971B4、4.51:1）を使う。
• seminar-box は文字 #FFFFFF × 背景 #737BB9 のコントラスト比が 3.99:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#6971B4、4.54:1）を使う。

Typography

• 字間は全体に0.08〜0.12emと広めにとり、ゆったり組む。
• 欧文見出しは細身（Light）の大文字にして、日本語の小見出しと組み合わせる。
• Q1/A1などの番号は細い欧文で書き、下線を添える。
• 本文は12px前後で、行間は2.0。
• 強調部分は太字にし、淡い水色のマーカー下線を敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（記事一覧だけ 2 列グリッド）
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白カードは左右に約8%の余白をとり、中央に置く。
• Q&Aは問い→イラスト＋答え→商品カードの順に繰り返す。
• イラストと答えの文章を左右交互に配置する。
• 画面の右端に、商品3つの小さな目次サムネを並べる。
• セクションのつなぎ目には、細い縦線のコネクターを入れる。

Elevation & Depth

• 影はほぼ使わない。カードは細い枠線で輪郭を出す。
• シャボン玉や液体のような形をカードの角に重ねて奥行きを出す。
• 商品写真の切り抜きだけ、ごく淡い落ち影をつける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 縦長の楕円カプセル形、または角をえぐったチケット形で切り抜く
• セクション境界: 段差はつけない。グラデーションの色が変わることと、液体シェイプが重なることで区切りを示す。
• カードは四隅を内側に丸くえぐった形にし、1px線で縁取る。
• CTAボタンは角丸4px程度の長方形にする。
• VIEW MOREだけは枠線のピル型ボタンにする。
• ナビ用のバッジは波線で縁取った縦長の楕円にする。

Components

• 購入CTA（button-primary）: 幅いっぱいの角丸長方形。色は商品の容器色に合わせて変える。
• チケット形白カード（card-ticket）: 四隅をえぐった白いカード。1pxのグレー線で縁取る。
• 波線楕円ナビ（badge-scallop）: 波線で縁取った楕円を3つ並べ、ページ内リンクにする。
• Q/A番号（qa-number）: 細い欧文の番号に下線を添え、横に問いの文を置く。
• 答えの装飾文字（answer-mark）: 淡黄の太い文字で答えを1語だけ大きく見せる。
• イベント情報ボックス（seminar-box）: 上はラベンダーの帯に見出し、下は淡い紫の地に日時を書く。
• VIEW MORE ボタン（button-outline）: 白地のピル型ボタン。グレーの枠線に欧文ラベルを入れる。
• 開発者プロフィール（profile-chip）: 円形のイラストアイコンと、淡黄のラベルを付けた名前を並べる。

Do's and Don'ts

Do - 背景は縦グラデーションでミントからピンクへつなげる。 - カードは白地に1px線で縁取り、角をえぐった形にする。 - 手描き線画の女性イラストで、悩みの表情を見せる。 - シャボン玉と液体シェイプを要所に散らす。 - CTAの色は商品の色に合わせる。 - 字間を広くとり、細身の書体でやさしく組む。

Don't - 真っ黒な文字や、濃い原色のベタ面を多用しない。 - 強いドロップシャドウや立体的なボタンにしない。 - 背景を1色のフラットな地にしない。 - 太いゴシックで本文を詰めて組まない。 - 赤やオレンジの煽るような強調色を使わない。

Page Structure

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

1. ファーストビュー（悩みの共感とテーマ提示）: 枠の中に悩む女性イラストを4つ置き、下に白抜きの大コピーを入れる。
2. ブランド紹介（ブランドの登場を告知）: ロゴを中央に置き、縦書きの吹き出しとチケット形のモデル写真を添える。
3. コンセプト（ブランドの想いを伝える）: 商品の切り抜き写真を散らし、白カードに開発者の言葉と顔イラストを載せる。
4. ページ内ナビ（主要コンテンツへ誘導）: 波線の楕円バッジを3つ横に並べる。
5. Q&A＋商品紹介（誤解を正し、商品を提案する）: Q番号→イラスト→大きな答え文字→商品カード＋CTAの流れを3回繰り返す。
6. 共通成分（成分の信頼性を示す）: ピンクのグラデ地に、ロゴ・成分名・説明文・注釈を中央揃えで置く。
7. 使い方動画（使い方を説明）: 欧文見出しの下に動画を幅いっぱいに置く。
8. 記事一覧（読み物への誘導）: 正方形の写真を2列に並べ、下に短いタイトルを置き、VIEW MOREボタンで締める。
9. セミナー・イベント告知（体験の場へ誘導）: ラベンダー帯の日程ボックスを2つ並べ、青とティールのCTAを置く。波線円のSNS案内も添える。
10. イベントレポート（活動実績を見せる）: 写真とタイトルを2列のグリッドで並べる。
11. フッター（購入・SNS・リンク）: 白い円アイコンを2つ置き、トップへ戻るボタンの下にティールのフッター帯を敷く。

Imagery

• イラストは細い黒線で描いた女性で、髪はサーモンピンク。塗りは淡く、悩みや洗顔の仕草を見せる。
• 商品写真は白背景で切り抜き、パステル地の上に斜めに散らして置く。
• 虹色に光るシャボン玉を半透明で点在させる。
• 青紫グラデの液体のような曲線シェイプを、カードの角からはみ出させる。
• 物撮りは単色の背景に商品を並べた、ポップなスタジオ写真にする。
• 白抜きコピーの周りに、小さなきらめきを添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも本文は約400px幅の1カラムのまま、画面中央に置く。
• PCでは左右の余白にも全画面のグラデーション背景を流す。
• PCの左側には、ロゴ・メインビジュアル・ナビバッジを固定表示する。
• PCの右側には、縦書きのコンセプト文を置く。
• PCでは上部にティールのグローバルヘッダーを追加する。

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