DESIGN.md — 星空ブルー×キャラクターのコラボ美容マスク LP（Starry Night Cute Character Skincare Collab LP）

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

Overview

• 業種: 化粧品・スキンケア ／ 雰囲気: かわいい、やさしい・柔らかい、ポップ・元気
• キーワード: 夜空・星と雲・眠るキャラクター・コラボ・2タイプ比較・グラデーション背景
• 地の質感: フラットな青地に星・雲・流れ星のイラストを散らす。カード内は波状の淡いストライプ柄
• 形: 角丸カード、ピル型ボタン、丸みのある星と雲
• 温度感: 寒色の青が主体。黄色い星と緑・クリームのカードで温かみを加える

Colors

• 背景は濃い青から明るい空色へ、下に行くほど少しずつ明るくする
• 青地の上の文字はすべて白にする
• 黄色は星の装飾にだけ使い、文字には使わない
• タイプ別カードは緑系とクリーム系に分け、見出し・ボタンもカードと同じ色系統にそろえる
• 紺のピル型ボタンは動画視聴・外部リンクの補助操作に使う
• 雲は淡い青白にして、背景になじませる
• page は文字 #52A0BE × 背景 #FEFCED のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-body-accessible（#387C96、4.53:1）を使う。
• button-type-green は文字 #FBFBEF × 背景 #068760 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#06825D、4.62:1）を使う。
• button-type-aqua は文字 #FBFBEF × 背景 #02ACCD のコントラスト比が 2.59:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#017D95、4.61:1）を使う。
• type-card は文字 #068760 × 背景 #D2DE92 のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#06825D、4.61:1）を使う。

Typography

• 見出しも本文も、ほぼすべて中央揃えにする
• 全体を丸ゴシックの太字でそろえ、柔らかい印象にする
• 本文は 1 行を短くして改行を多めにし、行間を 2.0 程度に広くとる
• 字間は 0.05〜0.15em と広めにとる
• 見出しの中で強調する語は少し大きくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はタイプ別カードのみ 2 カラム）
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• キャラクターと星はコンテンツの左右に散らして配置する
• セクションの区切りに、星と点線を並べた横帯を挟む
• テキストブロックは中央に寄せ、両側に余白をとる
• カードは画面幅の約 86% で、中央に置く

Elevation & Depth

• 商品パッケージ画像にはやわらかいドロップシャドウを付ける
• 動画枠は角丸で、少し明るい青の縁取りを付ける
• カードには白い太枠と薄い影を付けて、背景から浮かせる
• ボタンには下方向に薄い影を付ける

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージとキャラクターは切り抜き。動画は角丸の長方形
• セクション境界: 直線で区切らず、星と流れ星を並べた装飾帯で区切る
• カードは角丸 16px と白い縁取り
• カードの角に花のイラストを重ねる
• ボタンはすべてピル型にする

Components

• 紺ピルボタン（button-sub-navy）: 動画視聴や詳細リンク用。白い細枠付き
• グリーン詳細ボタン（button-type-green）: ▶ 付きのピル型。影付き
• 水色詳細ボタン（button-type-aqua）: クリームカード用の ▶ 付きピルボタン
• タイプ別商品カード（type-card）: 波状ストライプ地、白い縁取り、角に花のイラスト。中にタイプ名・悩み・商品画像・価格を入れる
• 星の区切り帯（star-divider）: 黄色い星と流れ星、点線を横一列に並べる
• アプリ情報ブロック（app-info）: ロゴ、アイコン、小さな仕様テキスト、ストアバッジを横に並べる
• 発売情報（release-info）: 星マークで挟んだ見出しと、日付・内容の 2 列リスト
• 動画埋め込み枠（video-frame）: 角丸の明るい青の枠に 16:9 の動画を入れる

Do's and Don'ts

Do - 背景全体に星・雲・眠るキャラクターを散らし、夜の雰囲気を保つ - 文章は短く改行し、中央揃えにする - 2 つのタイプは色で明確に分け、カード・見出し・ボタンを同じ色系統にそろえる - 背景の青は下に向かって明るくする - 価格は「枚数＋税込価格」の形で、大きめの文字にする

Don't - 黒や原色の赤を広い面積に使わない - 角張ったボタンや細い明朝体を使わない - 青地に暗い色の文字を置かない - 装飾を本文に重ねて、読みにくくしない - 説明文を長い段落のまま左揃えにしない

Page Structure

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

1. ファーストビュー（コラボの世界観と商品を一目で伝える）: 白い 2 行キャッチ、2 社のロゴを × でつないで表示、眠るキャラクターの群像、商品 2 点、紺の動画ボタン
2. コンセプト紹介（睡眠と肌ケアを習慣にする提案）: キャラクターのイラスト、白い大見出し、中央揃えの段落を 4 つ
3. アプリ紹介と動画（コラボ相手のアプリを紹介する）: ロゴ、見出し、角丸枠の動画、アプリ情報とストアバッジ、紺ボタン
4. チャレンジ提案（7 日間続けることを促す）: アイコン、小さなリード、大見出し、短い改行の本文
5. タイプ診断（自分に合う商品を選ばせる）: 問いかけ型の見出しと補足文
6. 商品カード A（緑）（1 つめのタイプの商品を紹介する）: 緑の波柄カードに、悩み→提案→商品画像→商品名→価格→ボタンの順で配置
7. 商品カード B（クリーム）（2 つめのタイプの商品を紹介する）: カード A と同じ構成。クリーム地に水色の文字
8. 発売情報（発売日と販売チャネルを伝える）: 星で挟んだ見出しと、日付・内容の 2 列リスト
9. 権利表記（商標表記）: 白い小さな文字を中央揃えで並べる

Imagery

• キャラクターは、目を閉じて眠るポーズのフラットなイラストにする
• 星は角を丸めた黄色の星形にし、濃紺の縁取りがある星と塗りつぶしの星を混ぜる
• 雲は淡い青白のシルエットで、画面の端から半分はみ出すように置く
• 商品パッケージは正面から見た切り抜きで、影を付ける
• カードの角に、南国風の花や白い花のイラストを添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では本文を中央に寄せ、幅を約 600px に絞る
• PC のファーストビューは、キャラクターを中央に置き、商品 2 点を左右に配置する
• PC ではタイプ別カードを 2 カラムで横に並べる
• PC でも装飾は左右の余白に散らす
• PC の発売情報は、日付と内容を 1 行にまとめる

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