DESIGN.md — 緑×レモン黄のポップ漫画風通信キャンペーンLP（Pop Comic Green Yellow Mobile Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感
• キーワード: ポップ・漫画風・太枠・ドット柄・マーカー強調・キャンペーン
• 地の質感: フラットな単色面。黒い太枠とずらした影で立体感を出す。FVだけ波線柄とドット柄の文字を使う
• 形: 角が少し丸い太枠カード、ピル型ボタン、円形の囲み、吹き出し型ラベル
• 温度感: 明るく元気で温かい。若い層に向けて親しみやすい

Colors

• セクションの地はミントとレモン黄を交互に切り替え、FVだけ濃い緑にする
• 情報は白いカードに載せ、墨色の太枠と影で地色から浮かせる
• 主CTAは紫だけにする。他のセクションに紫の面は使わない
• 価格は墨色かオレンジの巨大数字にし、黄色マーカーを下に敷く
• カードの見出し帯は種類ごとにピンク・黄・緑・青で色分けする
• 注釈はグレーの小さい文字にまとめる
• circle-badge は文字 #F07818 × 背景 #FEFFFE のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#BC5A0C、4.55:1）を使う。

Typography

• セクション見出しは白文字に墨の縁取りと右下の影を付け、漫画のロゴ風にする
• 数字は本文の4倍以上にし、単位の「円」「相当」は小さく右に添える
• 見出しの前置きは「＼ ／」の斜線で挟み、短い一行にする
• 強調したい語だけを緑やオレンジに変え、太字を保つ
• 本文は中太ゴシックで行間を1.7前後にとる
• 注釈は※で始め、カードの下にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。ナビカードと特典の比較は2カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションは地色の帯で区切り、上下に60px前後の余白をとる
• カードは左右に約6%の余白を残し、中央に置く
• 特典カードの間は「＋」の丸アイコンでつなぐ
• ナビ用のアイコンカードは2×2のグリッドに並べる
• 料金カードは大きな白いカードの中に入れ子で重ねる

Elevation & Depth

• カードは墨色の太枠（2〜3px）に、右下へずらした墨のベタ影（4〜6px）を付ける
• ボタンにも下方向に濃い影を付け、押せる立体感を出す
• ぼかしたドロップシャドウは使わない
• 白い角丸パネルは枠も影もない平置きでもよい

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 写真は使わない。フラットなイラストとアイコンを切り抜かずに置く
• セクション境界: 直線で地色を切り替える
• 特典や料金のカードは角丸を小さく（0〜4px）して太枠で囲む
• コミコミやFAQのパネルは角丸を大きく（16〜24px）する
• 強調ワードは緑の線で囲んだ白い円に入れる
• STEP番号は墨色の四角いタブにして、カード上辺にかぶせる
• 吹き出しラベルは角丸の帯に下向きのしっぽを付ける

Components

• 主CTAボタン（button-primary）: 紫のピル型。白い太字に右矢印を添え、下に墨の影を付ける
• サブボタン（button-outline）: 白地に紫の枠と紫の文字を置くピル型。下に紫の影を付ける
• 特典カード（benefit-card）: 色帯の見出しを持つ白カード。太枠とベタ影で囲む
• ナビ用アイコンカード（nav-icon-card）: 角丸の白カードにアイコン・ラベル・下向き矢印を縦に並べる。2×2で配置する
• マーカー付き価格（price-marker）: 巨大な数字の下半分に黄色マーカーを敷き、単位を小さく添える
• 吹き出しラベル（speech-label）: 短い訴求文を入れる、くすんだ青か墨色の角丸吹き出し
• 円形強調バッジ（circle-badge）: 緑の線で囲んだ白い円の中に、オレンジの太字を2行で入れる
• STEPカード（step-card）: 上辺中央に墨色のSTEPタブを置いた太枠カード。キャラクターのイラストを添える
• FAQアコーディオン（faq-accordion）: 角丸パネルの中に、Q.で始まる質問を区切り線で並べる。右端に紫の＋と「開く」を置く

Do's and Don'ts

Do - 地色はミントとレモン黄を交互に切り替え、セクションごとにリズムを付ける - カードには墨の太枠とずらしたベタ影を必ず付ける - 数字は極太の大サイズにし、マーカーを引いて一目で伝わるようにする - 主CTAは紫のピル型に統一する - アイコンは墨の線画に黄緑の塗りを差したフラットなタッチでそろえる

Don't - ぼかしたソフトな影やグラデーションを使わない - 落ち着いたくすみ色や細い明朝体を使わない - CTA以外に紫を多用しない - 写真の人物やリアルな物撮りを入れない - 数字を本文と同じサイズで済ませない

Page Structure

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

1. ファーストビュー（キャンペーン名を強く印象付け、特典の構成を見せる）: 緑の波線柄の地に雲形の白い吹き出しを置く。ドット柄の巨大ロゴ見出しに、踊る人物イラストを添える。特典カード2枚を＋でつなぎ、紫のCTAを置く
2. 通常特典（常設の特典額を伝える）: ミントの地に、ピンクの見出し帯を持つ太枠カードを置く。巨大な数字にマーカーを敷く
3. 週替わり特典（期間限定の特典で今すぐの申込を促す）: 黄色の見出し帯とクリーム色の地。ピンク枠の内側に開催中バッジと期間を置き、詳細ボタンとサブボタンを並べる
4. ページ内ナビ（知りたい情報へ誘導する）: レモン黄の地に、アイコン付きの角丸カードを2×2で並べる
5. 料金プラン（料金の安さとプランの違いを示す）: 大きな白い角丸カードの中に、プランごとに色の違う見出し帯（緑・青）の太枠カードを入れる。グレーの料金表と円柱イラストを使う
6. 特徴・コミコミ（含まれるサービスと条件のなさを訴求する）: 白パネルを十字の区切り線で4分割する。その下に、円形バッジを並べたクリーム色とミント色のパネルを置く
7. 申込ステップ（乗り換えの手順が簡単だと示す）: STEPタブ付きの太枠カードを縦に2つ並べる。キャラクターのイラストを添える
8. よくある質問（不安を解消する）: 影付きの角丸パネルに、Q.の質問を区切り線で並べるアコーディオン

Imagery

• 人物は太い墨の線と平塗りで描いた漫画調のイラストにし、ジャンプなど躍動感のあるポーズにする
• 季節のモチーフ（カニやスイカなど）を小さく配置し、キラキラの星を添える
• アイコンは墨の線画に黄緑または緑の差し色を入れたフラットなもの
• 料金のデータ量は円柱の図形で表現する
• 黄緑のマスコットキャラクターで親しみを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約70%幅のコンテンツ列を置き、左右の地色は全幅にする
• FVのロゴ見出しは横長に縮め、高さを抑える
• ナビカードは4列横並びにする
• 料金プランとSTEPカードは2カラムで横に並べ、STEPの間に矢印を置く
• コミコミのパネルは4列横並びにし、円形バッジはパネル内で横に並べる

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