DESIGN.md — 淡い青と泡の透明感スキンケア LP（Translucent Blue Foam Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、やさしい・柔らかい、シンプル・ミニマル
• キーワード: 透明感・泡・淡い青・明朝・光・静けさ
• 地の質感: 光が差し込むハイキー写真。泡・水滴・シャボン玉が浮かぶ、柔らかくぼかした質感
• 形: 角は直線が基本。カードだけ小さめの角丸と白い半透明。泡を思わせる円形の装飾
• 温度感: やや寒色寄りの涼しい清潔感。白の多さでやわらかさを足す

Colors

• 地は白〜淡い水色のみで、濃色の帯セクションは作らない
• 見出し・強調はすべて濃紺1色で統一する
• 金色は見出し下の細線や番号の装飾に限定する
• セクション境界は地色の明度差やグラデで切り替える
• 購入ボタンのような強い色面は置かず、商品ボトルの青紫を最も濃い面とする
• 注釈は小さく灰色で添える

Typography

• 見出しは明朝で、助詞を小さくしキーワードを大きくする
• 見出しは短い句で改行し、句点で締める
• 本文はゴシック細字で行間を広くとる
• 番号やQ/Aは斜体ぎみの欧文セリフで大きく
• 文字の左揃えが基本。締めのコピーだけ中央揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特徴アイコンだけ 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真を全幅で敷き、その上の余白部分に文字を置く
• テキストは左寄せで画面の半分〜7割幅に収める
• 見出しと本文の間に細い区切り線を入れる
• カードは左右16px程度の余白を残して並べる

Elevation & Depth

• カードはごく淡い青みの影（ぼかし大・濃度低）
• 白い半透明の面で写真上の情報をまとめる
• 強い影や立体ボタンは使わない

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の角なし写真。泡や水滴の円形モチーフを散らす
• セクション境界: 直線またはグラデによる自然な切り替え
• カードは角丸12px前後の白
• ラベルは細枠の角丸ほぼなし
• アイコンは淡い青の正円に収める
• 見出し下は中央に小さなひし形を置いた細線

Components

• 金線付き明朝見出し（heading-serif-gold-line）: 濃紺の明朝大見出しの下に、端が消える細い金線を引く
• 細枠ラベル（badge-outline）: 区分や搭載機能を、細い紺の枠で囲んだ小さなラベル
• 番号付き特長（numbered-feature）: 欧文セリフの大きな番号と見出しを細線で区切り、右側に泡の写真を置く
• 半透明解説カード（info-card）: サイズ比較などの図解を収める白い半透明カード。項目は点線で区切る
• 使用手順カード（step-card）: 左に写真、右に大きな斜体番号と短い説明を並べた横長の白カード
• Q&Aカード（faq-item）: 淡い丸の中に大きなQとAを置き、間を細線で区切る。右上にきらめきの装飾
• 特徴アイコンカード（icon-grid-card）: 淡い青の円に線画アイコンを置き、下に2行の説明。2列×3段に並べる
• 泡の吹き出しコピー（bubble-quote）: シャボン玉のような透明な円の中に明朝のコピーを中央揃えで置く

Do's and Don'ts

Do - 地は白〜淡い青で統一し、光が差すハイキーな写真を使う - 見出しは濃紺の明朝で、短い句ごとに改行する - 泡・水滴・シャボン玉を装飾として散らす - 金の細線を見出しの区切りに控えめに使う - 成分の説明には※注釈を小さく添える

Don't - 赤やオレンジなど暖色の強い色を使わない - 太いゴシックや派手な装飾文字を見出しに使わない - 濃い色の帯セクションや強い影を入れない - 情報を詰め込まず、余白を削らない - ボタンや価格を目立たせすぎない

Page Structure

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

1. ファーストビュー（コンセプトと商品を一目で伝える）: 上部に明朝2行の大見出しとリード。泡を顔に当てる人物と商品ボトル、下に商品名・価格・ラベル
2. 悩みの提起（洗顔を見直すきっかけを作る）: 鏡を見る人物の全幅写真の上に、短い悩みを3つ並べ、解決の一文で締める
3. コンセプト（こすらず洗う考え方を伝える）: 泡で洗う写真の上に明朝見出しと本文を左寄せで置く
4. 商品の特長提示（商品の役割をまとめて伝える）: 金線付き見出しと、ボトル・泡の写真を合わせた構成
5. 3つの設計（特長を番号つきで整理する）: 01〜03の欧文番号と見出し、右に泡の写真。最後にまとめの3行
6. 仕組みの解説（泡の細かさを図で説明する）: 半透明カード内に泡の大きさ比較と、肌断面のイラスト
7. 薬用の説明（安心感を伝える）: 商品を持つ写真と本文、泡の吹き出しコピー
8. 使用感・ベネフィット（洗いあがりを想像させる）: 肌に触れる人物写真の上に大きな明朝見出し
9. ブランド内の位置づけ（スキンケアの最初の工程であることを示す）: 洗顔する人物写真に、キーワードを特大にした見出し
10. 使用方法（使い方を手順で示す）: 線と点で挟んだ中央見出しに、写真付きの手順カード4枚と注意カード
11. よくある質問（購入前の不安を解消する）: 明朝見出しと欧文の小見出し、Q&Aカードを5つ縦に並べる
12. 商品紹介・6つの特徴（購入判断の情報をまとめる）: 商品写真・価格の下に、アイコンカード2列×3段
13. クロージング（印象を残して締める）: 人物写真と本文、商品と泡の写真に中央揃えの明朝コピーと商品名

Imagery

• 白い服の女性が目を閉じ、泡で顔を包む柔らかなポートレート
• 窓から光が差す白い洗面台。背景は大きくぼかし、淡い緑を少し入れる
• 角の立った白い泡、水滴、透明なシャボン玉を前景に散らす
• 商品ボトルは白い反射面に置き、正面から少し下の角度で撮る
• 全体を青みのハイキーに補正し、白飛び気味の光を入れる
• アイコンは紺の細い線画を淡い青の円に入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では写真を左右に分け、テキストを片側に置く2カラムにする
• 本文の幅は最大 1000px 前後に抑え、余白は左右に広げる
• 特徴アイコンは PC で 3 列にする
• FAQ や手順カードは中央に幅 720px 前後で並べる
• 見出しの改行位置は 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 行書くと起動時に読み込まれる。