DESIGN.md — 濃紺×水色グラデの透明感スキンケア LP（Deep Navy and Sky Blue Skincare Concept LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、清潔・爽やか、信頼・誠実、やさしい・柔らかい
• キーワード: 透明感・濃紺グラデーション・水色の空気感・明朝の情緒コピー・泡の球体・方眼紙Q&A
• 地の質感: 水色の淡い光のグラデーションと白飛び気味の写真。シャボン玉のような半透明の球体、方眼紙の背景で質感を足す。
• 形: ボタンは角丸なしの長方形。吹き出しは青〜緑のグラデーション線で描いた角丸枠。泡は正円。
• 温度感: 寒色寄りでクール。肌写真と白で柔らかさを補う。

Colors

• 地は白・淡い水色・濃紺グラデーションの3種を交互に使う。
• 濃紺はヘッダー、CTA、アコーディオン、見出し文字に限定し、ブランドの軸にする。
• コンセプト文は水色→濃紺の縦グラデーション上に白文字で置く。
• 装飾線は青→青緑のグラデーションで吹き出しや枠を描く。
• 暖色は使わない。SNSアイコンの公式色だけ例外。
• 強調は濃紺の太字と、青緑の下線で行う。
• variation-tab は文字 #F2FDFF × 背景 #707E87 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#69767F、4.51:1）を使う。

Typography

• 情緒的なコピーは明朝、説明・Q&Aはゴシックで使い分ける。
• FVの大コピーは縦書きにして写真右に置く。
• ボタン文字は字間を0.2em前後と広くとる。
• コンセプト本文は行間2倍以上で余白を多くとる。
• 強調語は太字と青緑の下線で示す。
• 注釈は※付きの小さな文字でブロック直下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの 1 カラムで、Q&Aは4列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 写真は画面幅いっぱいに置き、テキストブロックは左右約5%の余白をとる。
• セクション間は地色の切り替えで区切り、区切り線は使わない。
• CTAボタンは幅90%で縦に並べ、間隔は16px。
• バリエーションはカルーセルで横スワイプにし、ドットを付ける。
• Q&Aは方眼紙のカードに入れ、四隅に十字マークを置く。

Elevation & Depth

• 基本はフラットにする。
• クーポン告知カードは少し傾けた白い紙として濃紺の影板に重ねる。
• 泡の球体は内側の光と柔らかい影で立体感を出す。
• 商品写真は床に反射を入れて奥行きを出す。

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形を画面幅いっぱいに置く。商品は切り抜きで白抜きにする。
• セクション境界: 直線で地色を切り替える。グラデーションで白へ溶かす区間もある。
• CTAは角丸なしの長方形にし、右端に丸囲みの矢印を付ける。
• バリエーションのタブは大きく角を丸めたピル状にする。
• 吹き出しはグラデーション線の角丸枠に、三角のしっぽを付ける。
• 見出しラベルは右端を斜めに切った濃紺の帯にする。

Components

• 濃紺CTAボタン（button-primary）: 群青の長方形に白文字を広い字間で置き、右に丸矢印を付ける。
• FV下のグラデーションリンク帯（fv-coupon-bar）: 水色から濃紺へ変わる横帯に白文字と右矢印を置く。
• 泡の特長バブル（bubble-feature）: 半透明の球体の中に、特長を3行ほどの明朝で書く。商品の周りに4つ散らす。
• グラデーション線の吹き出し（speech-frame）: 白地に青→青緑の線で枠を描き、短いコピーを中央に置く。
• バリエーション名のピルタブ（variation-tab）: 種類ごとに色を変えたピルに、種類名と特徴を2行で白文字にする。
• 方眼紙のQ&Aカード（qa-grid-card）: 方眼紙柄のカードにQアイコンの見出しを置き、A吹き出しと線画の人物を並べる。
• 斜めカットの見出しラベル（label-slant）: 右端を斜めに切った濃紺の帯に白い太字を置き、カードの左上に重ねる。
• 濃紺アコーディオン（accordion-faq）: 濃紺の帯に「Q.」で始まる白文字の質問を置き、右に下向きの矢印を付ける。

Do's and Don'ts

Do - 濃紺・水色・白の3色で全体をまとめる。 - コンセプトは明朝で行間を広くとり、短い行で改行する。 - 装飾線には青→青緑のグラデーションを使う。 - 商品は白い切り抜きで並べ、光の反射で清潔感を出す。 - 注釈は※付きの小さな文字で必ず添える。

Don't - 赤やオレンジなどの暖色をCTAに使わない。 - ボタンをピル型や大きな角丸にしない（タブだけ例外）。 - 太いゴシックの派手な見出しを多用しない。 - 余白を詰めて情報を詰め込まない。 - 写真に強いドロップシャドウや枠線を付けない。

Page Structure

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

1. ファーストビュー（ブランドの世界観と商品を一目で伝える）: 顔のアップ写真を青のグラデーションの上に置き、縦書きの明朝コピーと商品ボトルを配置する。下に濃紺帯で説明文を入れる。
2. クーポン導線帯（すぐ行動したい人を誘導する）: グラデーションの横帯に白文字と右矢印を置く。
3. コンセプト（情緒的な共感をつくる）: 水色から濃紺への縦グラデーションの上に、白の明朝で詩のような文を置く。
4. イメージ写真（透明感のある余韻を出す）: 白飛びさせた横顔を白地に溶け込ませる。
5. 特長（商品の強みを4つ示す）: 明朝の大見出しの下で、商品の周りに泡のバブルを4つ散らす。グラデーション枠で根拠文を添える。
6. ラインナップ（選べる種類の多さを伝える）: 群像の商品写真とキャッチの吹き出しを置き、種類別のピルタブをカルーセルで並べる。
7. お客様の声（使用者の実感を伝える）: 方眼紙カードにQの見出しを置き、A吹き出しと線画の人物をカルーセルで見せる。
8. お試しサイズ（試しやすい入口を示す）: 吹き出し見出しの下に商品写真と中央揃えの説明文を置き、濃紺CTAを付ける。
9. キャンペーン（サンプルプレゼントで来店を促す）: 傾けた白い紙のカードに斜めカットのラベルを付け、濃紺のボックスに期間と内容を入れる。
10. CTA群（SNS・店舗検索へ誘導する）: 濃紺のボタンを3つ縦に並べ、左にSNSアイコンを付ける。
11. 動画・インタビュー（コラボ動画で話題性を出す）: 斜線で挟んだ見出しの下に動画を埋め込み、濃紺のアコーディオンを並べる。
12. 関連サービス・フッター（周辺サービスとSNSを案内する）: バナー画像、SNSアイコン3つ、グレー地のリンク一覧の順に置く。

Imagery

• 人物は素肌感のある女性の顔を、上向きや横顔のアップで撮る。
• 背景は青空や青いグラデーションの光にし、ハイキー気味にする。
• 白いボトルを多数並べ、床の反射と淡い水色の光で清潔感を出す。
• 半透明のシャボン玉風の球体を装飾に使う。
• 人物は単色ベタ塗りの太い黒線のシンプルなイラストにする。
• 背景に淡い方眼紙柄と、ひし形のきらめきを散らす。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは上部に横並びのグローバルナビを置く。
• PCのFVは横長にし、コピーを横書きで写真右に置く。
• PCではバリエーションのタブを4つ横並びで全部見せる。
• PCのQ&Aは4列グリッドで一覧にする。
• PCのCTA3つは横一列に並べる。
• お試しサイズは写真左・テキスト右の2カラムにする。

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