DESIGN.md — オーロラ青×水の透明感スキンケアLP（Aurora Blue Transparent Skincare LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: 清潔・爽やか、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: オーロラ・水の透明感・深い青・明朝見出し・縦書きコピー・LINE誘導
• 地の質感: 夜空とオーロラの光、水面の揺らぎ、水しぶき、ガラス玉のような泡。つややかで冷たい質感。
• 形: 四角い白カードと濃紺の帯、円形の泡バッジ、ピル型CTA。曲線は泡とボタンだけに使う。
• 温度感: 寒色中心のクールな温度感。CTA周りだけ緑と赤で温度を上げる。

Colors

• 地は白。世界観を出す場面だけ濃紺の夜空とオーロラの写真帯を使う。
• 見出しはオーロラブルー(#247DA8)の明朝体を基本にし、黒と組み合わせる。
• CTAは緑だけに限定し、ブランドの青系と混ぜない。
• 割引数字には赤を使う。赤の使用はオファーカードの中だけにする。
• 悩みリストはくすみ青の帯に白文字で並べ、強い警告色は使わない。
• 水色の淡い色は写真の背景として面で敷き、べた塗りは控えめにする。
• button-primary は文字 #FFFFFF × 背景 #3CA363 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#318551、4.56:1）を使う。
• bonus-banner は文字 #FFFFFF × 背景 #01A65A のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#01884A、4.54:1）を使う。

Typography

• 世界観を伝える見出しは明朝体にする。説明や訴求はゴシック体にする。
• 特長コピーは縦書き明朝で2〜3行に分け、写真の横に置く。
• 見出しに入れるブランド名は欧文大文字で、字間を広く取る。
• 強調語には傍点（文字上のドット）や青文字を使い、太字は多用しない。
• ※注釈は見出しや本文の直下に小さく必ず添える。
• 割引数字だけを極端に大きくして、ジャンプ率を作る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真と縦書きコピーを左右に組む部分だけ2分割
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文と見出しは中央揃えを基本にする。
• 特長ブロックは写真の左右を交互に入れ替え、縦書きコピーを反対側に置く。
• オファーカードは写真背景の上に白い四角カードとして浮かせる。
• 悩みリストは横長の帯を4本、等間隔に縦に並べる。
• 写真は横幅いっぱいの全面配置を多用する。

Elevation & Depth

• オファーカードは白地に細い青枠と淡い外側の光を付け、背景から浮かせる。
• CTAボタンには下方向に濃い緑の影を付け、押せる立体感を出す。
• 泡バッジは半透明のガラス球の表現で奥行きを出す。
• それ以外の要素はフラットにし、影を付けない。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 横幅いっぱいの長方形。商品写真は切り抜き、または水面背景の上に斜めに置く。
• セクション境界: 直線で切り替える。写真帯と白地を交互に並べる。
• CTAはピル型にする。
• オファーカードと悩みの帯は角丸なしの四角にする。
• 特徴バッジは円形の泡にする。
• 運営者紹介は角丸16pxの線枠カードにする。
• チェックアイコンは帯から少しはみ出す円の中に入れる。

Components

• LINE登録CTA（button-primary）: 緑のピル型ボタン。左に人物追加アイコン、下に濃い緑の影を付ける。
• 割引オファーカード（offer-card）: オーロラ写真の上に置く白い四角カード。黒い吹き出しの限定バッジと赤い大きな割引数字を入れ、斜線で挟んだ案内文を添える。
• 特典帯（bonus-banner）: 緑の全幅帯。黄色と白の太字コピーに、キャラクターと吹き出しを添える。
• 泡の特徴バッジ（bubble-badge）: 半透明の円形の泡の中に、特徴を短く3行で書く。
• 悩みチェック帯（worry-bar）: くすみ青の横帯に白文字を入れ、左端に白丸のチェックアイコンを重ねる。
• 縦書きコピー（vertical-copy）: 大きな明朝の縦書き2〜3行を商品写真の横に置く。黒地の帯付きにする場合もある。
• 注釈・キャプション（caption-note）: ※付きの小さなグレー文字。商品名のキャプションは写真の右下に付ける。
• 運営者紹介カード（company-card）: 紫の線枠の角丸カード。ロゴ見出し、本文、円形の写真で構成する。

Do's and Don'ts

Do - 青系の写真と白地を交互に並べ、透明感を保つ。 - 見出しは明朝で字間を広く取る。 - CTAとオファーはページの上部と末尾で同じデザインを繰り返す。 - 効果表現には必ず※注釈を添える。 - 商品写真は水面・水しぶき・ジェルのしずくと組み合わせる。

Don't - 暖色の背景を使わない。 - CTAの緑を見出しや装飾に流用しない。 - 本文に明朝を使って読みにくくしない。 - 影やグラデーションを多用しない（ボタンは例外）。 - 割引の赤をオファーカードの外で使わない。

Page Structure

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

1. ファーストビュー（世界観と商品を一目で伝える）: オーロラ夜空の写真に商品を並べ、白い明朝のキャッチと泡のバッジを重ねる。
2. オファーCTA（LINE登録へ誘導する）: オーロラ背景に白カードを置き、限定バッジ、赤い割引数字、緑のピル型ボタンを入れる。
3. 特典帯（登録の特典を訴求する）: 緑の全幅帯に黄色と白の太字コピーとキャラクターを置く。
4. ブランドコンセプト（商品の価値を宣言する）: 青い明朝の見出しと中央揃えの本文。水しぶきの商品写真と泡バッジ3つを添える。
5. ブランド名の由来（ストーリーで共感を得る）: 見出しと本文を中央揃えにし、縦書きの黒帯コピーとジェルの大きな写真を組む。
6. 誕生ストーリー（色の特別さを伝える）: 濃紺のオーロラ写真の全幅帯に、白い明朝の大見出しと手に持った商品の写真を置く。
7. 悩みの提起（ターゲットの悩みに共感する）: 傍点付きの見出しの下に、チェック付きのくすみ青の帯を4本並べる。
8. 解決提案（商品を解決策として示す）: 青い明朝の大見出しのあと、モデルが使っている全幅写真を置く。
9. 商品ラインナップ（各アイテムの特長を伝える）: 水面背景の商品写真と縦書きコピーを左右交互に3段組み、キャプションを付ける。
10. オファーCTA（再掲）（最終的な登録を促す）: 上部と同じオファーカードと特典帯を繰り返す。
11. 運営者紹介（信頼性を示す）: 紫の線枠カードにロゴ見出し、本文、円形の写真を入れる。
12. フッター（販売者を表記する）: 白地に小さな中央揃えの文字を置く。

Imagery

• オーロラが揺らめく夜空の写真を、濃紺から青緑のトーンで使う。
• 商品は青いボトルとチューブ。水しぶきや水面の反射と一緒に、上から光が差す構図で撮る。
• ジェルのしずくや透明な泡を小物として添える。
• モデルは目を閉じて目もとに商品を当てる、クローズアップの写真にする。
• キャラクターのイラストは特典帯の中だけに使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元のLPはPCでも中央の細い1カラムで、SPとほぼ同じ構成。
• SPでは画像を全幅にし、本文の左右余白は約6%取る。
• 縦書きコピーと写真の2分割はSPでも維持し、文字は24〜28pxにする。
• PCではコンテンツ幅を480〜600pxの中央寄せにし、左右には背景色を延長する。

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