--- version: alpha name: Pastel Aqua Idol Collab Game LP description: 水中モチーフの水色と、ピンク〜ラベンダーのグラデーションで作るゆめかわ系のアプリコラボ LP。キャラクターのイラストを大きく見せ、リボン付きのバナーカードを縦に並べてコラボの内容を紹介する。最後はアプリストアへの導線で締める。 colors: background: '#FCFCFF' primary: '#66C8F5' secondary: '#9E8CBD' cta: '#D4A6CC' on-cta: '#FEFEFF' background-alt: '#FAFEFF' tint-1: '#ECD7FE' tint-2: '#FAEDFE' accent-1: '#7DB0F5' accent-2: '#F196E7' accent-3: '#E0507A' text-body: '#3A3A3A' dark-section: '#020202' cta-accessible: '#AD559E' typography: display: fontFamily: Fredoka fontSize: 36px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.03em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px store-badges: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 44px feature-banner: textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 190px section-title: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 80px heart-bubble: textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 70px profile-row: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px floating-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px --- # DESIGN.md — 水色×ラベンダーのゆめかわゲームコラボ LP（Pastel Aqua Idol Collab Game LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: かわいい、ポップ・元気、やさしい・柔らかい - **キーワード**: ゆめかわ・水中・人魚・パステルグラデーション・キラキラ・リボン・キャラクター主役 - **地の質感**: 泡・光の筋・星のきらめきを重ねる。白地には薄い肉球やアイコンを敷き詰めたパターンを使う - **形**: 角丸カード、ハート型やスカラップ型のフレーム、ピル型ボタン - **温度感**: 明るく涼しげな寒色が中心。ピンクで甘さを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FCFCFF` | ページの白地 | 30% | 画素の実測 | | `primary` | `#66C8F5` | 水色のメインカラー（FV・帯） | 12% | 画素の主要色に補正 | | `secondary` | `#9E8CBD` | ラベンダー（ロゴ・見出し） | 4% | 画素の実測 | | `cta` | `#D4A6CC` | ラベンダーピンクのピル型ボタン | 2% | 画素の主要色に補正 | | `on-cta` | `#FEFEFF` | ボタンの文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FAFEFF` | 淡い水色の帯 | 8% | 画素の実測 | | `tint-1` | `#ECD7FE` | 淡いラベンダーのフッター | 7% | 画素の実測 | | `tint-2` | `#FAEDFE` | 淡いピンクのグラデーション端 | 4% | 画素の実測 | | `accent-1` | `#7DB0F5` | 見出し英字のブルー | 2% | 画素の実測 | | `accent-2` | `#F196E7` | 見出し英字のピンク | 1% | 画素の実測 | | `accent-3` | `#E0507A` | キャラ名のピンク赤 | 0% | 推定 | | `text-body` | `#3A3A3A` | 本文の文字 | 2% | 推定 | | `dark-section` | `#020202` | ストアバッジの黒 | 2% | 画素の実測 | | `cta-accessible` | `#AD559E` | AA を満たす補正値（計算） | | 計算 | - 地は白か、ごく淡い水色〜ラベンダー。真っ白で冷たく見えないようにする - FV とバナーの帯は、水色からピンクへの左右グラデーション - 見出しの英字は、前半を水色、後半をピンクに塗り分ける - CTA はラベンダーピンクの面に白い文字 - 黒はアプリストアのバッジと SNS アイコンだけに使う - フッターは淡いラベンダーの面で締める - `button-primary` は文字 `#FEFEFF` × 背景 `#D4A6CC` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AD559E`、4.56:1）を使う。 - `floating-bar` は文字 `#FEFEFF` × 背景 `#D4A6CC` のコントラスト比が 2.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#AD559E`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの英字 | 欧文サンセリフ | Fredoka | 700 | 36px | 1.1 | 0.02em | | `headline-lg` | FV の開催告知の大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em | | `headline-md` | バナー帯の白い太字タイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.3 | 0.03em | | `headline-sm` | キャラ名（和名＋小さい英字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.02em | | `accent` | 英字見出しの下の和文サブ見出し | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.4 | 0.1em | | `body-md` | プロフィールと紹介文 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.0em | | `note` | 商標の注記と著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.0 | 0.03em | - 見出しは丸みのある極太の書体にする - 英字見出しの下に、星や貝の飾りで挟んだ和文サブ見出しを添える - バナー内の白い文字には、薄い影か縁取りを付ける - 紹介文はラベンダー色で中央揃えにする - 本文は 12px 前後と小さめでよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - バナーカードは幅 92% 前後で、約 32px の間隔を空けて縦に積む - プロフィールは左に丸型の画像、右にテキストを置く 2 段組 - スクリーンショットはカルーセルにし、左右の端をのぞかせる - ストアバッジは 2 つを横並びにする ## Elevation & Depth - バナーカードには薄いドロップシャドウを付ける - 白い文字には柔らかい影を付ける - それ以外はフラットにする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: カードは角丸の長方形。キャラ画像は円形やハート型で切り抜く - **セクション境界**: グラデーションでフェードさせる。動画枠はスカラップ（波形）のフレームにする - カードの左上にリボンの飾りを重ねる - バナー帯の右端に、花型の丸い矢印アイコンを置く - 吹き出しはハート型やぷっくりした形にする ## Components - **ピル型 CTA**（`button-primary`）: ラベンダーピンクの面に白い文字と「>」を入れる - **ストアバッジ**（`store-badges`）: 黒い角丸のバッジを 2 つ横に並べる - **リボン付きバナーカード**（`feature-banner`）: イラストの下に、水色からピンクへのグラデーション帯のタイトルと矢印アイコンを置く - **2 色英字見出し**（`section-title`）: 水色とピンクに塗り分けた英字に、飾り付きの和文サブ見出しを添える - **ハート吹き出し**（`heart-bubble`）: 白いハート型の中にピンクの文字で特典を書く - **キャラのプロフィール**（`profile-row`）: 円形やハート型の画像、名前、紹介文、SNS アイコンを並べる - **追従ダウンロードバー**（`floating-bar`）: ピル型ボタン、SNS ボタン、トップへ戻るボタンを画面下に固定する ## Do's and Don'ts **Do** - パステルのグラデーションとキラキラの飾りをたっぷり使う - キャラクターのイラストを大きく見せる - 角はすべて丸くする - カードごとにリボンの飾りを付けて統一する **Don't** - 濃い原色の面を大きく使わない - 明朝体や細い直線的な書体は使わない - 角張った無装飾のボタンは使わない - 黒い背景のセクションは作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボを告知し、期間を示してダウンロードへ誘導する）: 水中背景にロゴ 2 つとキャラのイラストを置く。白い極太の告知見出し、期間、ストアバッジを並べる 2. **紹介動画**（コラボの内容を動画で見せる）: スカラップ型のフレームに入れ、ステージ風の装飾を添える 3. **コラボの楽しみ方**（特典や施策を一覧で見せる）: リボン付きのバナーカードを 5 枚縦に並べる 4. **キャラクター紹介**（コラボ相手を紹介する）: パターン地に、円形とハート型の画像を使ったプロフィールを並べる 5. **アプリ紹介**（ゲームの魅力を伝える）: ロゴ、ラベンダー色の紹介文、スクリーンショットのカルーセルを置く 6. **CTA**（ダウンロードと公式サイトへ誘導する）: ストアバッジ、ピル型ボタン、SNS アイコンを並べる 7. **フッター**（商標と著作権を表記する）: 淡いラベンダーの面に小さな文字を中央揃えで置く ## Imagery - アニメ調のキャラクターイラストを、人魚や水中のテーマで描く - 背景には泡、光の筋、星のきらめきを散らす - リボン、パール、貝殻、ハートを飾りに使う - 白地には、薄い肉球やアイコンを敷き詰めたパターンを敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため推奨として書く。PC では幅 480〜600px の中央カラムに SP の構成をそのまま載せる - 左右の余白は、水中のグラデーション背景で埋める - バナーカードは 2 列にしてもよい - 追従バーは右下に固定する ## 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-29b8f446`（元 LP の URL から採番） - **元 LP**: https://special.pokecolotwin.jp/hololive/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。