--- version: alpha name: Starry Night Watercolor Cheer Campaign LP description: 濃紺の水彩夜空を全面に敷き、淡い金色のピル型ボタンときらめく星の区切り線を合わせたLP。受験生を応援するメッセージ投稿キャンペーンで、手描きイラストと縦書きの吹き出しを使った情緒的な作り。 colors: primary: '#265294' background: '#C3CBC3' cta: '#BDBE8E' on-cta: '#F9F9F7' secondary: '#5683AE' on-dark: '#F9F9F7' accent-1: '#EFE3B8' surface: '#F9F9F7' background-alt: '#F9F9F7' tint-1: '#DCD9EA' text-body: '#55555A' text: '#224584' accent-2: '#C9C69A' line: '#A08A5C' background-accessible: '#C4CCC4' cta-accessible: '#747543' secondary-accessible: '#4C769F' accent-2-accessible: '#787440' typography: display: fontFamily: Yomogi fontSize: 32px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Zen Maru Gothic fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.15em label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px star-divider: textColor: '{colors.accent-1}' height: 30px speech-bubble-vertical: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 150px arch-frame: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 380px vertical-label: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 180px icon-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 125px message-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 400px --- # DESIGN.md — 星空ブルー×金の受験応援キャンペーンLP（Starry Night Watercolor Cheer Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: やさしい・柔らかい、かわいい、上品・高級 - **キーワード**: 夜空・水彩・星のきらめき・天使の羽・手紙・エモーショナル - **地の質感**: 粒子感のある水彩の夜空テクスチャ。雲がにじみ、小さな星が散る - **形**: ピル型ボタン、アーチ窓型フレーム、楕円の吹き出し、角丸カード - **温度感**: 寒色ベースに淡い金とパステルを足した、静かで温かみのある色調 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#265294` | 夜空の地色（全面背景） | 55% | 画素の主要色に補正 | | `background` | `#C3CBC3` | ページ外枠の生成りグレージュ | 6% | 画素の主要色に補正 | | `cta` | `#BDBE8E` | 主CTAの淡金色グラデーション | 3% | 推定 | | `on-cta` | `#F9F9F7` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#5683AE` | サブボタンの青グラデーション | 2% | 画素の主要色に補正 | | `on-dark` | `#F9F9F7` | 夜空上の本文・見出し白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#EFE3B8` | 区切り線と星の淡いゴールド | 0% | 推定 | | `surface` | `#F9F9F7` | カード・アーチ内の白面 | 4% | 画素の主要色に補正 | | `background-alt` | `#F9F9F7` | アーチ内の和紙風オフホワイト | 4% | 画素の主要色に補正 | | `tint-1` | `#DCD9EA` | 吹き出しの淡いラベンダー | 2% | 推定 | | `text-body` | `#55555A` | 白面上の本文グレー | 0% | 推定 | | `text` | `#224584` | 吹き出し・見出しの濃紺文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#C9C69A` | 縦書きラベルのオリーブ金 | 1% | 推定 | | `line` | `#A08A5C` | 吹き出し・カードの細い金茶枠 | 0% | 推定 | | `background-accessible` | `#C4CCC4` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#747543` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#4C769F` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#787440` | AA を満たす補正値（計算） | | 計算 | - 地は濃紺の水彩夜空で統一し、セクションを色で分けない - 主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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの手書きキャッチ | 手書き・筆 | Yomogi | 400 | 32px | 1.3 | 0.05em | | `headline-lg` | セクション見出し | 丸ゴシック | Zen Maru Gothic | 500 | 28px | 1.4 | 0.08em | | `headline-md` | アーチ内の小見出し | 丸ゴシック | Zen Maru Gothic | 700 | 20px | 1.4 | 0.05em | | `body-md` | 夜空上の本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 2.0 | 0.05em | | `accent` | 縦書きの吹き出し・ラベル | 丸ゴシック | Zen Maru Gothic | 500 | 13px | 1.5 | 0.15em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.2 | 0.1em | | `note` | 運営紹介・注記 | ゴシック | Noto Sans JP | 700 | 10px | 2.2 | 0.03em | - 全体は丸ゴシックでやわらかく統一 - キャッチは手書き風の細い線で、斜めに揺らして置く - 吹き出しの中は縦書きにする - 本文は太めにし、行間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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-1359e994`（元 LP の URL から採番） - **元 LP**: https://life-campaign.com/ale/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（0/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。