DESIGN.md — ミント×黄×黄緑のポップな配信者募集LP（Vivid Pop Blob Creator Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: ビビッド配色・ブロブ型の写真切り抜き・太字ゴシック・英字セクション見出し・丸バッジ・吹き出し
• 地の質感: グラデーションや影は使わないフラットなベタ塗り。小さなキラキラ・花形の装飾を散らす
• 形: 大きな角丸・片側だけ大きく丸めた葉形、円形バッジ、ピル型タグ、手描き風の吹き出し
• 温度感: 明るく暖かい高彩度。黒文字で全体を引き締める

Colors

• 前半は白地、後半は黄→黄緑の全幅面に切り替えてリズムを作る
• 声カードはミントの面に黒文字、タグは白ピルにミント文字
• 自社の強調はオレンジ1色に限定し比較表の自社列に使う
• 応募CTAはLINEの緑か黒の面で、黒地には白文字
• 人物写真の背景図形はピンク・黄・紫・ミント・青・オレンジを順に変える
• 文字色は基本黒。グレーの文字は控えめに使う
• button-line は文字 #05C654 × 背景 #FFFFFF のコントラスト比が 2.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#03883A、4.58:1）を使う。

Typography

• 本文も含めて太字（700以上）を基本にする
• セクション見出しは大きい英字＋下に小さな和文の2段組
• 数字はディスプレイ書体で大きくし、単位は小さく添える
• 見出しは中央揃え、カード本文は左揃え
• 強調の一語は文字サイズの差で目立たせ、色は変えない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。強みバッジは 3 列、比較表は 4 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右16pxの余白で画面幅いっぱい近くまで広げる
• 声カードは写真の位置を左右交互にする
• 引用符を左上・右上に交互にカード外へはみ出させる
• ステップは横1列の矢羽型にして、上に番号付きのタイムラインを置く
• FAQは白カードを縦に並べ、間隔は16〜20pxにする

Elevation & Depth

• 影は使わずフラットにする
• 重なりはベタ面と写真の重ね合わせで表現する
• 引用符などの装飾はカードの角に重ねて奥行きを出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物写真は葉形・数字の8形・六角形などの角丸図形で切り抜く。声カード内は横長の楕円にする
• セクション境界: 直線で全幅の色面に切り替える
• 声カードは片側の角だけ直角にして葉形にする
• 強みは正円のバッジにする
• タグとCTAは完全なピル型にする
• 吹き出しは手描き風の黒線のいびつな楕円にする
• ステップは右向きの矢羽型にする

Components

• LINE応募ボタン（button-line）: 白地に緑の枠、左にLINEアイコン、右に緑の丸い矢印
• 黒の最終CTA（button-primary）: 黒いピル型。2行の白文字と右側にLINEアイコンを置く
• 強み円バッジ（badge-circle）: 黄色の正円に黒い太字で短い強みや数字を入れ、3×2で並べる
• 声カード（card-voice）: ミントの葉形カード。楕円写真・名前・本文と、下部に白ピルのタグ。角に大きな黒い引用符
• 比較表（table-compare）: 自社列だけオレンジで上下にはみ出させ、チェックアイコン付き。他社列はグレー、行は点線で区切る
• ステップ矢羽（step-arrow）: STEP番号と黒点を通るタイムラインの下に、淡黄の矢羽ボックスを7つ並べる
• FAQアコーディオン（faq-item）: 白い角丸カード。左に大きなQ、右に＋
• 吹き出し（speech-bubble）: 白地に黒線の手描き風吹き出し。条件の訴求や募集中の表示に使う
• 斜線見出し（heading-slash）: 2行の和文見出しを左右の斜線ではさむ

Do's and Don'ts

Do - 人物写真は毎回違う色の図形で切り抜き、散らして配置する - セクション見出しは英字の大見出し＋和文サブにする - 後半は黄・黄緑の全幅面で区切り、明るさを保つ - 文字は太字の黒にして、高彩度の背景でも読めるようにする - 小さなキラキラや花形の装飾を余白に散らす

Don't - くすんだ色や中間調のグレーを主役に使わない - 影・グラデーション・立体表現を入れない - 明朝体や細い書体を使わない - 写真を四角いまま並べない - CTAの色をLINE緑と黒以外に広げない

Page Structure

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

1. ファーストビュー（華やかな人物群で活気と実績を伝える）: 色付き図形で切り抜いた人物写真をコラージュし、太い2行コピーと黒いピル帯、LINEボタンを置く
2. 強み（選ばれる理由と数字の実績を示す）: 斜線見出しの下に黄色の円バッジを3列×2段で並べる
3. お客様の声（所属者の人物像で親近感を出す）: ミントの葉形カードを縦に積み、写真の左右と引用符の位置を交互にする
4. 他社比較（優位性を一目で見せる）: 自社列をオレンジで強調した4列の比較表
5. 入会後の流れ（手順を見せて不安をなくす）: 黄色の全幅面にタイムラインと7つの矢羽ステップを置く
6. よくある質問（疑問を解消する）: 黄色の地に白い角丸のQカードを縦に並べる
7. 費用・条件（費用がかからないことと応募条件を伝える）: 黄緑の面に黄色の四角を3つ並べ、吹き出しで否定を強調。点線の下に条件を箇条書きする
8. CTA・フッター（応募へ誘導する）: 吹き出しと黒いピルのLINEボタン、白ピルの外部リンク、コピーライト

Imagery

• 人物は明るい照明の上半身写真。表情やポーズは元気に
• 背景を抜いて色付きの図形に重ねる
• 図形は数字の8形・葉形・六角形などを組み合わせる
• 4方向のキラキラ星や花形・目付きの小さなキャラクターを装飾に使う
• アイコンはシンプルな線や塗りで、LINEアイコンは正方形の角丸
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでもSP幅（約400px）のカラムを中央に固定して表示する
• PCの両脇は淡い青の背景に、大きな白い英字ロゴを透かして置く
• PCではカラムの右横に目次ナビとLINEボタンを固定する
• カラム内のレイアウトはSPと同じにする

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