DESIGN.md — 星空ブルー×金の受験応援キャンペーンLP（Starry Night Watercolor Cheer Campaign LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: やさしい・柔らかい、かわいい、上品・高級
• キーワード: 夜空・水彩・星のきらめき・天使の羽・手紙・エモーショナル
• 地の質感: 粒子感のある水彩の夜空テクスチャ。雲がにじみ、小さな星が散る
• 形: ピル型ボタン、アーチ窓型フレーム、楕円の吹き出し、角丸カード
• 温度感: 寒色ベースに淡い金とパステルを足した、静かで温かみのある色調

Colors

• 地は濃紺の水彩夜空で統一し、セクションを色で分けない
• 主CTAは淡金、サブ導線は青グラデのピルで役割を分ける
• 白い面はメッセージカードとアーチ内だけに使う
• 金は区切り線・星・枠線・ラベルなど細い要素に絞る
• 吹き出しは半透明のラベンダーや白に金茶の細枠
• 文字は夜空上なら白、白面上なら濃紺かグレー
• page は文字 #55555A × 背景 #C3CBC3 のコントラスト比が 4.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら background-accessible（#C4CCC4、4.51:1）を使う。
• button-primary は文字 #F9F9F7 × 背景 #BDBE8E のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#747543、4.56:1）を使う。
• button-secondary は文字 #F9F9F7 × 背景 #5683AE のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4C769F、4.53:1）を使う。
• vertical-label は文字 #F9F9F7 × 背景 #C9C69A のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#787440、4.56:1）を使う。
• message-card は文字 #F9F9F7 × 背景 #5683AE のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#4C769F、4.53:1）を使う。

Typography

• 全体は丸ゴシックでやわらかく統一
• キャッチは手書き風の細い線で、斜めに揺らして置く
• 吹き出しの中は縦書きにする
• 本文は太めにし、行間2.0で夜空の上でも読めるようにする
• 見出しは字間を広めにして余白を取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。活用方法だけ 3 列のアイコンカード
• 本文ブロックの幅: 画面幅の約 80%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右に約10%の余白を取る
• 各セクションの最後にCTAボタンを置く
• セクション間は中央に星がある金の横線で区切る
• イラストは画面幅いっぱいに裁ち落としてもよい
• ページ全体を外枠の生成り色の上の角丸パネルにする

Elevation & Depth

• 影はほとんど付けず、平らに見せる
• ボタンにだけ下方向へごく薄い影を付ける
• 吹き出しやカードは半透明と細枠で浮いて見せる

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: アーチ窓型や楕円で切り抜き、イラストの一部を枠の外にはみ出させる
• セクション境界: 細い金の横線の中央に四芒星を置く。背景の境目は直線
• ボタンはすべてピル型で、右端に小さな三角矢印を付ける
• コンテンツ枠は上が半円のアーチ型
• 吹き出しは楕円に小さなしっぽを付け、金茶の細枠
• 縦書きラベルは縦長のピル型
• アイコンカードは角丸12pxで、上端にタブ状のラベル

Components

• 金のピル型CTA（button-primary）: 淡金のグラデーション、白文字、右に三角矢印。幅80〜90%
• 青のピル型サブボタン（button-secondary）: 青グラデーションに白の細枠、白文字と三角矢印。幅65%
• 星付き区切り線（star-divider）: 金の細い横線の中央に、光る四芒星を重ねる
• 縦書き吹き出し（speech-bubble-vertical）: 半透明の楕円に金茶の細枠、濃紺の縦書き文字
• アーチ窓フレーム（arch-frame）: 上が半円の枠を金の二重線で囲み、中にイラストや本文を入れる
• 縦書きラベル（vertical-label）: オリーブ金の縦長ピルに白の縦書き文字。アーチの左上に重ねる
• 活用方法アイコンカード（icon-card）: 半透明の角丸カード。上に金のタブラベル、中央に線画アイコン。3列並び
• メッセージチケットカード（message-card）: 空の写真の上に円形の窓を作り、手紙文を載せる。下部に宛先と差出人の欄

Do's and Don'ts

Do - 背景は全セクション共通の水彩の夜空テクスチャにする - 小さな星やきらめきを余白に散らす - 主導線のボタンは各セクションで同じ金のピル型を繰り返す - 吹き出しは縦書きで、短い励ましの言葉にする - イラストは淡いパステルの手描きタッチにする

Don't - 原色の赤や黄など強い警告色は使わない - 角張った四角ボタンや太い枠線は使わない - 白い背景のセクションを長く続けない - 硬い明朝や極太のゴシックで見出しを組まない - 濃い影や立体的なベベル効果は付けない

Page Structure

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

1. ファーストビュー（世界観と企画の趣旨を一目で伝える）: 夜空に手書きのキャッチ、羽のある人物イラスト、縦書きの吹き出し3つ、紙飛行機の線画
2. 導入メッセージ（共感を呼ぶ詩的な語りかけ）: 白い太めの文字を中央寄せの短い行で並べ、下に金のCTAを置く
3. 企画説明（誰に何を贈るかを説明する）: 放射状の光に囲まれた人物イラストと白い本文
4. メッセージ見本（完成イメージを見せる）: 淡金の円を背景にチケット型カードを置き、下に説明文とCTA
5. 活用方法（使い方の選択肢を示す）: 星の区切り線、見出し、3列のアイコンカード、注記、CTA
6. 投稿されたメッセージ（社会的証明と参加意欲を高める）: クリスタルの星を頂点に乗せたアーチ枠の白カードに投稿文を入れ、下にCTA
7. 関連サービス紹介（診断）（別のサービスへ誘導する）: 手書き風の見出し、アーチ枠に入れたスマホ画面とキャラクター、縦書きラベル、青ボタン
8. 関連サービス紹介（LINE・記事）（継続的な接点を作る）: アーチ枠を繰り返し、縦書きラベル・吹き出し・3D小物を配置し、青ボタンを置く
9. 運営者紹介・フッター（信頼性を示す）: 星の区切り線、ロゴ、小さな白文字の説明、生成り色のピル型リンク、コピーライト

Imagery

• 背景は粒子感のある水彩の夜空。雲のにじみと小さな星の点を入れる
• 人物は顔を見せない後ろ姿や前髪で目元を隠した構図。淡いベージュとパステルで描く
• 天使の羽、紙飛行機、星、光線など、希望を感じさせるモチーフを入れる
• 線画アイコンは淡金の太めの線で、半透明の面を塗る
• デフォルメした動物キャラクターや、ゴールドの3D小物でアクセントを付ける
• 四芒星のきらめきに淡い紫やピンクを差す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではSPと同じ1カラムのデザインを中央に置き、幅は最大480px程度にする
• PCの左右余白は生成り色か夜空の背景で埋める
• PCでもアイコンカードは3列のまま、ボタン幅は最大360px
• イラストの縦横比は保ち、拡大しすぎない

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