--- version: alpha name: Pop Anime Pastel Side-Job LP description: アニメ調キャラとパステルピンク・紫・クリームの地色で作る、ポップで親しみやすい LINE 登録誘導型の副業紹介 LP。赤い極太の金額訴求、黄色マーカー強調、ピンク斜線枠の Q&A カードが特徴。 colors: primary: '#DC3848' background: '#FEFDFD' cta: '#4CC301' on-cta: '#FCFCFB' secondary: '#CCBCFE' text-body: '#523B45' background-alt: '#FEEBBB' tint-1: '#FDE3E4' line: '#F08CB4' accent-1: '#EC5A99' marker: '#FEE393' accent-2: '#6A45A8' accent-3: '#F39A1E' tint-2: '#FEF5EF' cta-accessible: '#338401' primary-accessible: '#CF2435' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 900 lineHeight: 1.1 letterSpacing: -0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.12em accent: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em label-button: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-line-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 64px merit-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.display}' rounded: '{rounded.md}' height: 200px qa-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.md}' height: 400px declaration-box: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 420px ng-icon-tile: backgroundColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 80px marker-highlight: backgroundColor: '{colors.marker}' textColor: '{colors.primary}' typography: '{typography.body-lg}' height: 24px balloon-copy: textColor: '{colors.text-body}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 400px speech-badge: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — パステル×アニメ絵の副業紹介 LP（Pop Anime Pastel Side-Job LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: その他 ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: アニメ調キャラ・パステル・極太赤文字・マーカー強調・雲形の区切り・LINE誘導 - **地の質感**: 背景に薄いローマ字の大文字を敷き詰め、紫地は斜めストライプで質感を出す。全体はフラットで、見出しだけ白フチと影で立体的にする - **形**: 角丸カード、雲形・波形のセクション境界、風船の円形、斜線ボーダーの枠 - **温度感**: 暖色寄り。ピンクとクリームが主で、悩みのパートだけ寒色の紫にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DC3848` | メイン見出し・金額の赤 | 5% | 画素の主要色に補正 | | `background` | `#FEFDFD` | 本文エリアの白地 | 38% | 画素の実測 | | `cta` | `#4CC301` | LINE 追加ボタンの緑 | 1% | 画素の実測 | | `on-cta` | `#FCFCFB` | CTA 上の白文字 | 0% | 画素の実測 | | `secondary` | `#CCBCFE` | 悩みセクションのラベンダー地 | 9% | 画素の実測 | | `text-body` | `#523B45` | 本文・太字コピーの焦げ茶 | 7% | 画素の主要色に補正 | | `background-alt` | `#FEEBBB` | メリット部のクリーム地 | 6% | 画素の実測 | | `tint-1` | `#FDE3E4` | FV・Q&A 周辺の淡ピンク地 | 6% | 画素の実測 | | `line` | `#F08CB4` | Q&A カードのピンク斜線枠 | 2% | 推定 | | `accent-1` | `#EC5A99` | Q&A 見出し・こたえのピンク | 2% | 画素の実測 | | `marker` | `#FEE393` | 強調語の黄色マーカー | 2% | 画素の主要色に補正 | | `accent-2` | `#6A45A8` | NG アイコンタイルの紫 | 1% | 推定 | | `accent-3` | `#F39A1E` | メリットカード枠・番号のオレンジ | 1% | 推定 | | `tint-2` | `#FEF5EF` | フッターの淡いクリーム | 4% | 画素の主要色に補正 | | `cta-accessible` | `#338401` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#CF2435` | AA を満たす補正値（計算） | | 計算 | - 地はセクションごとに淡ピンク→クリーム→白→ラベンダー→白と切り替えて区切る - 金額・数字は赤の極太文字に白フチと影をつけて最も目立たせる - 悩みのパートだけラベンダーの斜めストライプ地に白い大文字を置く - 本文は黒ではなく焦げ茶を使う。強調語は赤ピンクの文字に黄色マーカーを重ねる - 主 CTA は LINE の緑にする。他の場所では緑を使わない - Q&A カードは白地にピンクの斜線枠で統一する - `button-line-cta` は文字 `#FCFCFB` × 背景 `#4CC301` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#338401`、4.61:1）を使う。 - `merit-card` は文字 `#DC3848` × 背景 `#FEEBBB` のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF2435`、4.5:1）を使う。 - `marker-highlight` は文字 `#DC3848` × 背景 `#FEE393` のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF2435`、4.51:1）を使う。 - `speech-badge` は文字 `#DC3848` × 背景 `#FEFDFD` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#CF2435`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の金額訴求・大見出し | 装飾・ディスプレイ | Dela Gothic One | 900 | 56px | 1.1 | -0.02em | | `headline-lg` | 悩みの大文字・風船コピー | 丸ゴシック | M PLUS Rounded 1c | 900 | 44px | 1.2 | 0.02em | | `headline-md` | セクション見出し（安心宣言など） | ゴシック | Zen Kaku Gothic New | 700 | 32px | 1.3 | 0.1em | | `headline-sm` | Q&A の質問タイトル | 丸ゴシック | Zen Maru Gothic | 900 | 24px | 1.3 | 0.05em | | `body-lg` | カード内の本文 | 丸ゴシック | M PLUS Rounded 1c | 400 | 17px | 1.9 | 0.12em | | `accent` | 見出し下の英字サブタイトル | 欧文サンセリフ | Montserrat | 400 | 10px | 1.4 | 0.15em | | `label-button` | CTA ボタンの文言 | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.2 | 0.05em | | `note` | CTA 下の注釈・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 数字だけ極端に大きくし、単位や助詞は小さく組んでジャンプ率を出す - 見出しには白い太フチと濃い影をつけて、画像の上でも読めるようにする - 本文は字間を広め（0.1em 以上）、行間は 1.9 程度にして読みやすくする - 強調語は文字色を変え、太さは上げずに黄色マーカーを引く - 「こたえ」のラベルは左右に▼を置き、字間を広くして中央に揃える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。NG アイコンだけ 4 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右 5% ほどの余白で画面幅いっぱいに置く - メリットカードはキャラ画像を左右交互に配置する - Q&A カードは 32px 間隔で縦に積む - FV と同じ構成の CTA ブロックをページ末尾にも繰り返す - 悩みのパートはキャラとコピーを左右ジグザグに配置する ## Elevation & Depth - カードには影を落とさず、枠線だけで浮かせる - メリットカードには下に濃いオレンジの段差をつけ、ステッカー風にする - CTA ボタンには下に濃い緑の段差をつけて押せそうに見せる - 見出し文字には影をつけて立体的にする ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: キャラは背景を抜いた切り抜きにし、枠からはみ出させる - **セクション境界**: 雲形・波形のスカラップで切り替える。紫セクションの上下は雲形にする - CTA は角丸 12px の横長ボタンにする - Q&A 枠は斜線柄の太いボーダーにする - NG タイルは角丸の正方形にし、左上に赤い×を置く - 風船は円形を重ねて文字を 1 字ずつ載せる ## Components - **LINE 追加ボタン**（`button-line-cta`）: 緑の横長ボタン。左上に LINE ラベル、上に吹き出し型のサブコピーを載せ、右下に指差しと「タップ」を添える - **番号付きメリットカード**（`merit-card`）: クリーム地に濃いオレンジ枠のカード。角に丸数字を置き、キャラが枠からはみ出す - **Q&A カード**（`qa-card`）: 白地にピンク斜線枠。左上に「質問!」タグ、右上にキャラの顔を置き、点線の区切りの下に「こたえ」ラベルを入れる - **安心宣言ボックス**（`declaration-box`）: 見出しの下に英字サブを添え、ピンク斜線枠の白ボックスに本文とマーカー強調を入れる - **NG アイコンタイル**（`ng-icon-tile`）: 紫の角丸タイルに白アイコンとラベルを入れ、左上に赤い×を置く。4 列で並べる - **マーカー強調**（`marker-highlight`）: 強調語は赤ピンクの文字にし、下半分に黄色の帯を敷く - **風船コピー**（`balloon-copy`）: パステル色の風船に焦げ茶の文字を 1 字ずつ載せた共感コピー - **吹き出しバッジ**（`speech-badge`）: 白い吹き出しに日給などの小さな訴求を書く ## Do's and Don'ts **Do** - 金額・数字は赤の極太文字に白フチをつけて最大サイズで見せる - 各セクションにアニメ調キャラを置き、表情で感情を伝える - 強調語には黄色マーカーを引く - CTA ブロックはページの最初と最後の両方に置く - セクションの区切りは雲形・波形の曲線にする **Don't** - 本文に純黒を使わない（焦げ茶を使う） - 写真素材を混ぜない。イラストで統一する - 直線だけの硬い区切りや細い明朝体を使わない - CTA に緑以外の色を使わない - 白地を大きく空けすぎない。背景にはパターンや色を敷く ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（収益の訴求と特典を示し、LINE 登録へ誘導する）: 淡ピンク地にローマ字パターンを敷く。赤い金額コピー、キャラ集合、特典帯、緑の CTA、注釈の順に並べる 2. **メリット**（3 つの利点を示す）: クリーム地に飾り見出しを置く。番号付きカード 3 枚を、キャラを左右交互にして並べる 3. **安心宣言**（不安を解消し、信頼を得る）: 白地に見出しと英字サブを置き、斜線枠のボックスに本文とマーカー強調を入れる 4. **悩みの提起**（読み手の悩みに共感する）: ラベンダーのストライプ地に、困り顔のキャラと白い大文字の悩みコピーをジグザグに配置する 5. **共感・転換**（理想の姿を示す）: パステルの風船に文字を載せたコピーの後に、「そんなあなたへ」の流れでつなぐ 6. **提案**（サービスを紹介し、避けるべき働き方を否定する）: ロゴ風の大見出しの下に NG アイコン 4 列と紫の締めコピーを置く 7. **再訴求ビジュアル**（金額訴求をもう一度見せる）: ピンク地にキャラ 4 人と金貨のイラストを入れ、大きな金額コピーを載せる 8. **よくある質問**（疑問を解消する）: Q&A 見出しの下に、ピンク枠の Q&A カードを縦に積む 9. **参加方法**（登録手順を示す）: スマホの画面モックに「ここをタップ」の吹き出しとキャラを添える 10. **クロージング CTA**（最終的な登録を促す）: FV と同じ構成を繰り返す 11. **フッター**（規約へのリンクを置く）: クリーム地にキャラのシルエットとロゴを置き、オレンジの小さな文字でリンクを並べる ## Imagery - 大きな目と明るい配色のアニメ調キャラを使う。男女 4 人ほどがスマホを持っている構図にする - 悩みの場面はデフォルメした困り顔や涙で描く - 装飾には金貨・お札・プレゼント箱・クラッカー・音符・キラキラを使う - 背景にはパステル多色の大きなローマ字を薄く敷き詰める - スマホの画面モックで操作手順を図解する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP と同じ 1 カラムのデザインを中央に約 480〜640px 幅で表示する - PC の左右の余白は淡ピンク地かパターン背景で埋める - NG タイルは PC でも 4 列のまま保つ - 見出し画像は幅に合わせて比率を保ったまま拡大縮小する ## 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-d2ac9480`（元 LP の URL から採番） - **元 LP**: https://relegate-sprout.work/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。