DESIGN.md — 空色グラデと透明感のベースメイク LP（Glassy Sky Blue Base Makeup LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、やさしい・柔らかい
• キーワード: 透明感・ツヤ・空色グラデーション・明朝×欧文イタリック・光の映り込み
• 地の質感: 白〜淡グレーの地に、光が差したような柔らかいグラデーションと薄い影を重ねる。キャンペーン部分は細かい紙のようなグレーの粒子地。
• 形: 大きく角丸をとった半円の青い帯、角丸の写真、ピル型のアウトラインボタン、アーチ型のカード。
• 温度感: やや寒色。青と白が基調で、セルフチェック部分だけ暖かいピーチ色。

Colors

• 地は白と淡い青グレーを交互に使い、光が差したようなグラデーションで変化をつける。
• 空色は半円帯・ブランド帯・円形の商品背景など大きな面にだけ使う。
• 濃い青は見出し・カテゴリラベル・欧文の飾り文字に限定する。
• 強調語は空色〜青の帯で塗りつぶし、白抜き文字にする。
• セルフチェック診断のみピーチ地と茶色文字に切り替え、暖色の区切りを作る。
• 緑は LINE 登録ボタンだけに使い、ほかの部分には使わない。
• button-outline は文字 #5BAED3 × 背景 #FFFFFF のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B7DA2、4.61:1）を使う。
• button-line は文字 #FFFFFF × 背景 #05C555 のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#03893B、4.52:1）を使う。
• half-capsule-band は文字 #3A5BA8 × 背景 #5BAED3 のコントラスト比が 2.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2B7DA2、4.51:1）を使う。
• quiz-card は文字 #817264 × 背景 #FBFAF5 のコントラスト比が 4.44:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#807163、4.51:1）を使う。

Typography

• 感情に訴えるコピーは明朝で中央揃えにし、2〜3 行に分けて改行する。
• スペック・説明はゴシックの小さめサイズで左揃えにする。
• 欧文イタリックの飾り文字は商品写真や帯に重ね、少し斜めに置いて動きを出す。
• 商品名には下線を引き、その上に小さなカテゴリラベルを置く。
• 注釈番号は小さく上付きにし、近くにまとめて記載する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビだけ 2×2 のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品ブロックは『写真＋半円帯 → カテゴリラベル → 商品名 → スペック』の順に縦に並べる。
• 写真は横幅の約 56% の角丸縦長で中央に置き、下に飾り文字を重ねる。
• 特長カードは横いっぱいに置き、青い帯の見出しと白い本文エリアで作る。
• How to Use は左右に点線を引いた中央見出しにし、その下にイラストと手順を並べる。
• 余白は大きめにとり、セクション同士は背景のトーン変化で区切る。

Elevation & Depth

• 特長カードと写真には、青みのある大きくぼかした影（0 10px 30px rgba(90,150,200,.25)）をつける。
• 円形の特徴バッジは、真珠のような虹色の光沢とごく薄い影で作る。
• ボタンは影を使わず、枠線だけで表現する。

Shapes

• 角丸: 小 2px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角丸の縦長長方形。商品は切り抜いて、半円帯や円形グラデーションの上に置く。
• セクション境界: 直線で区切り、背景トーンを切り替える。半円の帯が画面の端からはみ出すように配置する。
• 空色の帯は片側だけ大きく丸めた半円（カプセル半分）の形にする。
• キャンペーンのカードは上部がアーチ型の白いカード。
• カテゴリラベルは角丸のない小さな長方形の帯。
• 特長の補足は大きなピル型のアウトライン枠に入れる。

Components

• アウトラインピルボタン（button-outline）: 淡い青の細い枠に空色の文字。右端に丸で囲んだ＋アイコン。カラーチャートなどの展開に使う。
• LINE 登録 CTA（button-line）: 緑の角丸ボタンに白文字とアイコン。グレーの枠で囲んだ白い箱の中に置く。
• カテゴリラベル（category-label）: 商品名の上に置く、中間青の長方形帯に白い小さな文字。
• 特長カード（feature-card）: 濃い青のグラデーション帯に欧文見出し、その下に白地の説明。影つき。
• 塗りつぶしの強調語（highlight-marker）: 明朝コピー中のキーワードを青い帯で塗り、白抜き文字にする。
• 半円の空色帯（half-capsule-band）: 画面の端から伸びる半カプセル形の空色グラデーション面。その上に商品と New の飾り文字を重ねる。
• 2×2 ページ内ナビ（nav-grid）: 白地を細い線で区切った 4 マスのナビ。文字は青。
• セルフチェック設問カード（quiz-card）: クリーム色の大きな角丸カードに Q 番号と質問文、茶色枠の選択肢ボタン、ページ送りのドット。
• 日付の円形バッジ（date-badge）: 青のグラデーションの正円に、白いイタリックで日付と start を入れる。

Do's and Don'ts

Do - 透明感を出すため、地は白〜淡い青グレーにとどめ、光のグラデーションを重ねる。 - コピーは明朝、情報はゴシック、飾りは欧文イタリックと、書体を役割で使い分ける。 - 商品は切り抜き写真にし、空色の半円や円形グラデーションの上に浮かせる。 - 注釈は ※ 番号で小さく、近くにまとめる。 - 余白を広くとり、1 画面に置く要素を絞る。

Don't - 原色の赤・黄の強い CTA ボタンは使わない。 - 太いゴシックの大見出しで押し出さない。 - ボタンをベタ塗りで多用しない（基本はアウトライン）。 - 濃い暗色の背景面は作らない。 - 写真に装飾フレームや強いドロップシャドウをつけない。

Page Structure

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

1. ファーストビュー（ブランドとツヤ肌の世界観を一瞬で伝える）: 青背景のモデルのアップ写真に白のロゴ、明朝のキャッチ、商品の切り抜きを重ねる。
2. ブランドコンセプト（シリーズの思想を伝える）: 空色のグラデーション全面に白いロゴと、明朝の中央揃えの文を置く。
3. ページ内ナビ（主要コンテンツへ誘導する）: 白地の 2×2 グリッドに青文字を置き、細線で区切る。
4. 新商品紹介（ファンデーション）（主力の新商品を訴求する）: 半円の空色帯に商品と New の飾り文字。その下にラベル・商品名・スペック、円形の特徴バッジ。
5. 技術・特長（独自技術と性能を示す）: テクスチャ写真に欧文の飾り文字と引き出し線。強調帯入りの明朝コピー、青帯見出しの特長カードを縦に並べる。
6. 使用イメージと使い方（仕上がりと使用方法を見せる）: 角丸の人物写真に、空色帯とイタリックのコピー。点線つきの How to Use 見出し、線画イラスト、手順文、アウトラインボタン。
7. 新商品紹介（2〜3 品目）（関連商品を同じ型で訴求する）: 同じ商品ブロックの型を繰り返す。補足はピル型の枠に入れる。
8. キャンペーン（購入の動機づけ）: 粒子のあるグレー地に白いアーチ型カード。欧文の見出し、日付の円形バッジ、プレゼント商品、注釈。
9. セルフチェック診断（自分に合う商品へ導く）: ピーチ地に茶色の明朝見出しと商品の集合写真。クリーム色のカードで質問を出し、選択肢ボタンを置く。
10. ラインアップ（シリーズ全商品を一覧する）: 欧文見出しと、カテゴリごとの明朝コピー、円形の青グラデーションに置いた商品、点線区切りの展開リンク。
11. LINE 登録 CTA（サンプルクーポンの獲得）: グレー枠の白い箱に案内文と緑のボタンを置く。
12. 店舗・相談導線（来店とオンライン相談へ誘導する）: 人物写真の上に色帯を敷いたバナーを 2 つ並べる。

Imagery

• モデルは素肌感のあるツヤ肌のアップ。光が差す明るいトーンで、背景は空色かニュートラルにする。
• 商品は真上〜斜め上から撮った切り抜き。パールや金の細部が見えるように柔らかい反射を残す。
• テクスチャはクリームを X 字に塗り広げたスウォッチを白地に置く。
• 使い方は細い黒線の手描き風イラスト。円の中に顔パーツを描き、青い矢印で動きを示す。
• 背景には窓から差す光のような斜めの白いグラデーションと、ぼかした影を入れる。
• 特徴バッジはシャボン玉のような虹色の光沢を持つ正円にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 70% の幅に収め、商品ブロックを『左にテキスト・右に商品と半円帯』の 2 カラムにし、ブロックごとに左右を入れ替える。
• 特長カードは PC では 3 枚横並びにする。
• 使い方は PC では左に写真、右にイラストと手順文の 2 カラムにする。
• ナビは PC では 1 行 4 項目の横並びにし、縦線で区切る。
• セルフチェックは PC では左に見出しと集合写真、右に設問の 2 分割にする。
• ラインアップは 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 行書くと起動時に読み込まれる。