--- version: alpha name: Pastel Sky Cloud Anime Collab Campaign LP description: 水色と山吹色の雲形の面を交互に重ね、オレンジ→黄→青のグラデ文字で特典を大きく見せるキャンペーンLP。キャラクターイラストとゆるいマスコットを散らし、ピル型のグラデCTAでエントリーへ誘導する。後半は表形式の詳細で信頼感を補う。 colors: primary: '#4EA1EE' background: '#FFFFFF' background-alt: '#ADE9F9' secondary: '#FFECC6' cta: '#FE762A' on-cta: '#FFFFFF' accent-1: '#FB9940' accent-2: '#F4D584' accent-3: '#84E7F3' text: '#222222' text-muted: '#555555' line: '#EFFCFE' tint-1: '#BBEBFC' cta-accessible: '#CE4A01' accent-1-accessible: '#BA5B04' primary-accessible: '#1166B5' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.01em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Montserrat fontSize: 14px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.15em label-button: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 64px button-secondary: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 62px badge-condition: backgroundColor: '{colors.tint-1}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 32px step-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 22px bubble-speech: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px card-point: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 620px voice-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px info-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 120px detail-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1800px --- # DESIGN.md — 水色×山吹の雲柄アニメコラボ金融キャンペーンLP（Pastel Sky Cloud Anime Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、清潔・爽やか、情報量多め・訴求型 - **キーワード**: 雲形セクション・グラデーション文字・キラキラ装飾・アニメキャラ・ピル型CTA・ステップ構成 - **地の質感**: フラットなパステル面に薄い円の線とキラキラ星を散らす。光沢やノイズはない - **形**: もこもこした雲のふち、ピル型ボタン、角丸の大きいカード、吹き出し - **温度感**: 明るく爽やか。水色の涼しさと山吹色の暖かさを交互に出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4EA1EE` | ブランド青（見出し文字・表の見出し列） | 7% | 画素の実測 | | `background` | `#FFFFFF` | 白の基本地・カード面 | 22% | 画素の実測 | | `background-alt` | `#ADE9F9` | 水色の雲形セクション地 | 17% | 画素の実測 | | `secondary` | `#FFECC6` | 山吹色の雲形セクション地 | 16% | 画素の実測 | | `cta` | `#FE762A` | 主CTAのオレンジ（グラデ始点） | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FB9940` | 見出し文字のオレンジ | 2% | 画素の実測 | | `accent-2` | `#F4D584` | 大きな円・グラデ中間の黄 | 8% | 画素の主要色に補正 | | `accent-3` | `#84E7F3` | 水色の濃い雲・下部帯 | 5% | 画素の実測 | | `text` | `#222222` | 本文の濃い墨色 | 2% | 推定 | | `text-muted` | `#555555` | 注釈のグレー | 2% | 推定 | | `line` | `#EFFCFE` | 表の罫線・CTA枠の青 | 0% | 画素の主要色に補正 | | `tint-1` | `#BBEBFC` | 番号丸・吹き出しの淡い水色 | 4% | 画素の実測 | | `cta-accessible` | `#CE4A01` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#BA5B04` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#1166B5` | AA を満たす補正値（計算） | | 計算 | - 地は白・水色・山吹の3色を雲形の境界で交互に切り替える - 大見出しはオレンジ→黄→緑→青の横グラデ文字に白フチと淡い影を付ける - 主CTAはオレンジ→青の横グラデ塗り、サブCTAは白地にオレンジ文字とグラデ枠 - 表の見出し列はブランド青の塗りに白文字、値列は白地に黒文字 - 強調数値はオレンジ文字で本文中に1〜2か所だけ使う - 注釈はグレー小文字で※を付けて本文と差を付ける - `button-primary` は文字 `#FFFFFF` × 背景 `#FE762A` のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CE4A01`、4.56:1）を使う。 - `button-secondary` は文字 `#FB9940` × 背景 `#FFFFFF` のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BA5B04`、4.58:1）を使う。 - `badge-condition` は文字 `#4EA1EE` × 背景 `#BBEBFC` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1166B5`、4.57:1）を使う。 - `step-label` は文字 `#FFFFFF` × 背景 `#4EA1EE` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1166B5`、4.62:1）を使う。 - `bubble-speech` は文字 `#4EA1EE` × 背景 `#FFFFFF` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1166B5`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの特典訴求の超大見出し | 丸ゴシック | Dela Gothic One | 900 | 56px | 1.1 | 0.02em | | `headline-lg` | セクション大見出し（グラデ文字） | 丸ゴシック | M PLUS Rounded 1c | 900 | 36px | 1.2 | 0.03em | | `headline-md` | ステップ名・ポイント見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.03em | | `headline-sm` | リード文・吹き出し文 | ゴシック | Noto Sans JP | 700 | 17px | 1.6 | 0.02em | | `body-md` | 表の値・本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.7 | 0.01em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `accent` | STEPラベル・英字バッジ | 欧文サンセリフ | Montserrat | 800 | 14px | 1.0 | 0.15em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 20px | 1.0 | 0.05em | - 見出しは丸く太いポップ書体、本文は標準ゴシックで分ける - 大見出しは白フチ＋薄い水色の影で浮かせる - 助詞は小さめにして名詞を大きく見せる - 数字は見出しサイズの1.5倍程度に拡大する - 見出しの前後に「＼ ／」型のスラッシュ記号を添える - 注釈は12px程度でぶら下げインデントにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム中央揃え - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 見出し・CTAは中央揃え、注釈と本文は左揃え - セクション境界は雲形で重ねて途切れなく見せる - ステップ間は色の変わる点線ドットでつなぐ - CTAは幅84%程度で画面中央に置く - 詳細表は左見出し列30%・右値列70% ## Elevation & Depth - CTAボタンに淡い青のぼかし影 - カード・表は影ほぼなし、白い面と角丸で浮かせる - スライダーカードは中央を前面、左右をぼかして奥に置く - 見出し文字に淡いドロップシャドウ ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: キャラ画像は全幅で配置、スマホ壁紙は角丸の端末フレーム型で切り抜く - **セクション境界**: もこもこした雲形のふちで水色・山吹の面を重ねる - ボタンは完全なピル型 - 吹き出しは大きな角丸＋三角のしっぽ - 番号は丸形バッジ - 大きな円と線の円を背景に散らす ## Components - **グラデ主CTA**（`button-primary`）: オレンジ→青の横グラデのピル型。左にキラキラ、白い太字。横にマスコットを重ねる - **白地サブCTA**（`button-secondary`）: 白地にオレンジ文字、オレンジ→青のグラデ枠のピル型 - **条件ピルラベル**（`badge-condition`）: 見出し上に置く二連のピル。黄地と青地を＆でつなぐ - **STEP番号**（`step-label`）: 青のピルに白英字STEP、下に大きな青数字とオレンジの見出し - **雲形吹き出し**（`bubble-speech`）: 見出しに添える小さな丸い吹き出し、白地に青文字 - **ポイントカードスライダー**（`card-point`）: 上部グラデ帯に番号見出し、白本文、左右に水色の丸矢印 - **お客様の声吹き出し**（`voice-bubble`）: 水色・黄色交互の楕円吹き出しに白フチ、左右に互い違い配置 - **ヒント枠**（`info-box`）: 白地に水色の太枠、電球アイコンと強調オレンジ数値 - **キャンペーン詳細表**（`detail-table`）: 左青見出し列・右白値列、灰罫線、外角丸 ## Do's and Don'ts **Do** - 雲形の境界で水色と山吹のセクションを交互に切り替える - 大見出しは多色グラデ文字に白フチを付ける - CTAはFVとステップ1・2の直下に繰り返し置く - マスコットをCTAや吹き出しの端に重ねて動きを出す - キラキラ星と線の円を余白に散らす - 条件や期間は表と※注釈で正確に書く **Don't** - 暗い色や黒地のセクションを入れない - 角張ったボタンや細い明朝の見出しを使わない - グラデ文字を本文に使わない - 写真の実写素材を中心にしない - 注釈を本文と同じ大きさにしない - 強調オレンジを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボと特典を一目で伝える）: 上半分にキャラ全身イラスト、下に雲形を重ね条件ピルと超大グラデ見出し、主CTAとサブCTA、期間帯 2. **特典1（抽選）**（限定抽選特典を見せる）: スラッシュ付き見出し、黄色ピルで当選数、大見出し、商品画像を中央配置 3. **特典2（全員）**（全員もらえる特典で後押し）: 山吹地に吹き出し、斜め配置見出し、スマホ枠の壁紙画像 4. **特典3（予告）**（追加特典の予告）: 水色雲地に吹き出し、グラデ面のカードに斜めの帯で近日公開表示 5. **参加ステップ**（手順を3段階で示す）: STEPピルと大数字、説明、※注釈、CTA、点線ドットで次へ。水色と山吹で段を分ける 6. **条件の補足**（達成条件の補足）: 白地に水色枠のヒント枠と電球アイコン、下向きシェブロン 7. **FV再掲**（後半で再訴求）: FVと同じキャラ画像と大見出し 8. **サービスのおすすめポイント**（商品メリットを伝える）: カード型スライダー、数値を巨大グラデで強調、左右丸矢印 9. **お客様の声**（利用者の満足感を示す）: 左右で黄・水色に分かれた地、楕円吹き出しを互い違いに配置、マスコット添え 10. **キャンペーン詳細**（条件を正確に示す）: 水色グラデ地に白フチ見出し、2列の角丸表、番号丸バッジ付き箇条書き ## Imagery - 明るい青空と街路樹を背景にしたアニメ調キャラの全身イラスト - ゆるい手描き線の白い犬などマスコットを端に配置 - 黄色と水色の四芒星キラキラを余白に散らす - 背景に大きな塗り円と細線の円を半分はみ出させる - スマホ画像は黒い角丸フレームで端末風に見せる - 権利表記を画像右上に小さく入れる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC画像はないため、PCでは中央に幅480〜560px程度のSPレイアウトを置き左右を水色の地で埋める - FVイラストはPCで横幅を広げ見出しを右寄せにする案も可 - ポイントカードはPCで3枚横並びにできる - 詳細表はPCで見出し列を200px固定にする - 雲形の境界はPCでも全幅で繰り返す ## 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-b168330b`（元 LP の URL から採番） - **元 LP**: https://www.smbc.co.jp/kojin/olive/special/campaign/collab/hololive202602/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。