DESIGN.md — 夜空の青×星屑の夜用スキンケア LP（Midnight Starry Sky Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 上品・高級、やさしい・柔らかい、クール・先進的
• キーワード: 夜空・星屑・群青グラデーション・細線フレーム・アーチ窓・静けさ
• 地の質感: 雲がかかった夜空のような、粒子感のある青紫グラデーション。ところどころに流れ星風の細い斜線を入れる。
• 形: 細い白線の四角フレーム、上辺が半円のアーチ窓、円形メダリオン。角の頂点に小さな星や点の装飾を置く。
• 温度感: 寒色が主体で静か。最下部だけラベンダーピンクに移り、夜明けのような温かみを出す。

Colors

• 地は群青の夜空グラデーションを全面で通し、白い地のセクションは作らない
• 文字は白一色にする。注釈だけ透明度を下げた淡い白にする
• 強調色は使わない。白い細線と星の装飾でメリハリをつける
• ボタンも地より少し濃い群青にし、白枠で浮かせる
• フッターは青紫からラベンダーピンクへのグラデーションにして、夜明けの印象で締める
• 成分ビジュアルの緑・黄・ピンクは円の内側だけに使う

Typography

• 英字は細身で字間の広いジオメトリック系にし、英字だけで見出しを組む
• 日本語の大見出しは明朝で中央揃えにし、行を短く折り返す
• 本文は小さめの太ゴシックで、字間と行間を広くとる
• 注釈は※番号つきでまとめ、成分ブロックの直下に小さく置く
• 成分名や商品名には上付きの※番号を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。成分の円は 2 列グリッド
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 見出し・本文は中央揃えを基本にする
• 写真は左右 9% 程度の余白を残して幅いっぱいに置く
• 成分の円は 2 列で並べる。奇数個のときは最後の 1 個を中央に置く
• 購入ボタンは縦に 5 つ積み、間隔を約 20px あける
• 仕様リストは見出しと値を左揃えにし、星つきの細線で区切る

Elevation & Depth

• 影はほぼ使わない。発光感とフレーム線で奥行きを出す
• 円形メダリオンは外側に細い白線のリングを重ね、淡い光をまとわせる
• ボタンは白い細枠の外側に、もう一重の細線フレームを重ねる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 200px。ボタンは角丸の長方形。
• 写真の切り抜き: 上辺が半円のアーチ型窓と円形が中心。補助写真は四角にする。
• セクション境界: 直線の区切りは使わず、グラデーションで連続させる。一部だけ細い白の横線を入れる
• ボタンとタグは角丸 0 の四角にし、細い白線で囲む
• アーチ窓・円の外周には細線を沿わせ、端に 4 点星と小さな丸を置く
• フリー処方のタグには、四角の対角に細い斜線を入れる
• テキストリンクには下線と斜めの細矢印を付ける

Components

• 購入ボタン（button-primary）: 濃い群青の四角に白い二重線の枠を付ける。中央に販路名を太字、右端に細い矢印。5 つを縦に並べる。
• 成分の円形メダリオン（ingredient-medallion）: 白またはカラーの円に素材写真を入れ、細いリングと星を添える。下に成分名と効果を 2 行で置く。
• アーチ窓フレーム（arch-frame）: 上辺が半円の写真枠。外側に細い白線を沿わせ、四隅に星と丸を置く。
• 成分仕様リスト（spec-list）: 太字の見出しの下に成分名を置き、両端に星が付いた細線で区切る。
• 使い方の番号（step-number）: 細い欧文の 01/02/03 を左に、白の太ゴシックの手順文を右に並べる。
• フリー処方タグ（tag-outline）: 細線の四角に対角線を引き、白文字を中央に置く。2 列×2 段で並べる。
• 全成分アコーディオン（accordion-outline）: 幅いっぱいの細線の四角。中央に文字、右に細い＋を置く。
• 斜め矢印つきテキストリンク（link-underline）: 写真の下に太字の白文字を置き、下線の右端を跳ね上げた矢印にする。写真の角には流れ星風の斜線を重ねる。

Do's and Don'ts

Do - 夜空グラデーションの地を最後まで途切れさせない - 装飾は白の細線・4 点星・小さな丸・流れ星の斜線に限定する - 見出しは明朝、英字は細身の欧文にして静けさを保つ - 写真はアーチか円で切り抜き、細線フレームを添える - 注釈は※番号でまとめ、小さく淡い白で置く

Don't - 白やベージュの地のセクションを挟まない - 赤・オレンジなどの暖色の CTA や派手なバッジを置かない - 太い枠線・ドロップシャドウ・角丸の大きいピルボタンを使わない - 極太ゴシックや装飾の強い見出しにしない - 写真を四角のまま大きく並べ続けない

Page Structure

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

1. ファーストビュー（商品と世界観を一目で伝える）: 光る球体に商品を浮かべたビジュアルを置く。下に細い英字の商品名、カナ名、悩みと効果の短文、価格を続ける。
2. 購入ボタン群（販路別の購入導線）: 二重細線枠の四角ボタンを 5 つ縦に積む。
3. 独自処方の紹介（核となる成分コンセプトを示す）: 明朝の見出しとリードを置き、植物写真入りの円メダリオンを 3 つ並べる。最後に注釈。
4. ダメージケア成分（補助成分の訴求）: アーチ窓にテクスチャー写真を入れる。下にカラー球体の成分を 2×2 で並べる。
5. 使用感・ベネフィット（悩みから仕上がりまでを描く）: 小さな悩み文、明朝の大きな結論見出し、アーチ窓の肌アップ写真の順に置く。
6. 注目成分（話題成分の配合を訴求）: ピンク背景の商品写真をアーチ窓に入れる。見出しの下に細線区切りの成分リストを置く。
7. シートの特長（密着感を伝える）: アーチ窓のモデル写真に、円形の拡大写真を重ねる。下に中央揃えの本文。
8. 香りの紹介（眠りに向けた香りを訴求）: 明朝の見出しと本文を置き、紫グラデーション背景の商品写真を四角で配置する。
9. 使い方（手順を示す）: 英字見出しの下に、欧文番号つきの手順を 3 つ置く。
10. フリー処方・全成分（安心感の担保）: 対角線入りのタグを 2×2 で並べ、細線のアコーディオンで全成分を開閉する。
11. 取扱店・FAQ 導線（外部ページへの誘導）: 英字見出しの下に写真カードと斜め矢印つきのリンクを置く。
12. フッター（ブランド情報とSNS）: ラベンダーピンクのグラデーション地に、紫のロゴ、SNS アイコン、英字リンクを置く。

Imagery

• 背景は、雲と星屑が漂う青紫の夜空をデジタルで描き、粒子感を残す
• 商品は、ピンク〜紫の柔らかなグラデーション背景で斜めに置いて撮る
• 成分は、白背景の植物の切り抜き、または色付きの液体の球体マクロにする
• 人物は、目を閉じたリラックス顔や肌のアップにする。白壁のやわらかな自然光で撮る
• 装飾として、4 点星、小さな丸、流れ星風の平行な斜線を白の細線で描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 1000px に収め、背景の夜空は全幅で伸ばす
• FV は左に球体ビジュアル、右に商品名・価格・購入ボタン（2 列）を置く
• 各特長は写真と文章を左右に並べ、セクションごとに左右を入れ替える
• 成分メダリオンは PC では 3〜4 個を横 1 列に並べる
• フリー処方タグは 4 つを横 1 列に、取扱店と FAQ は 2 列で並べる
• PC はヘッダーに英字のグローバルナビを横に並べる。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 行書くと起動時に読み込まれる。