DESIGN.md — 黄緑×黄×黒のポップなBtoB広告サービスLP（Lime Yellow Pop BtoB Marketing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、信頼・誠実
• キーワード: ライムグリーン・イエロー・黒フチ＋黒い落ち影・吹き出しラベル・斜めストライプ・太字ゴシック
• 地の質感: フラットな単色面と、やわらかい斜めグラデーションの黄緑帯。ノイズや質感は加えない
• 形: 角丸の長方形カード、ピル型の黒ラベル、円形アイコン、下向き三角の吹き出し
• 温度感: 明るく暖かい。黄緑と黄で活気を出し、黒で締めて信頼感を足す

Colors

• 地は白・ライトグレー・淡い黄緑・クリームを順に切り替え、セクションの区切りを色で見せる
• CTAブロックは黄緑の斜めグラデーション帯に置き、主ボタンは黄色、サブボタンは白にする
• 黒は小ラベル・結果帯・比較パネルに使い、上に載る強調語は黄色にする
• 本文で強調したい語は黄緑の帯マーカーで塗り、文字を白にする
• 見出しの強調語は黄色に黒フチで目立たせ、助詞は小さく黒で書く
• オレンジはアイコンや再生ボタンなどの小さな差し色だけに使う
• case-card は文字 #FFFFFF × 背景 #95C51B のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#607F11、4.62:1）を使う。

Typography

• 見出しは極太ゴシックにし、キーワードは大きく、助詞は約70%に小さくしてメリハリを出す
• 強調語は黄色の文字に黒フチ、または黄緑の文字にする
• 見出しの上に「＼ ／」で挟んだ小見出しを添える
• 本文は行間を広めの1.9にし、強調は帯マーカーで行う
• 数字は大きく、単位は小さく組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。アイコン説明は3列のグリッド
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約7%の余白を取って中央に置く
• ケースは悩みのグレー箱、下向きのシェブロン、黄緑の解決カードの順に縦に積む
• 解決カードの背面に黄色の帯を敷き、下を斜めストライプで区切る
• CTAブロックは同じ構成でページ内に4回入れる
• 魅力セクションの終わりには縦に並べたドットで次へつなぐ

Elevation & Depth

• ボタンとカードは2pxの黒フチに、ぼかしなしの黒い落ち影（右下へ約4px）を付ける
• 白い本文カードは影なしのフラットにする
• ぼかしたドロップシャドウは使わない

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは全幅の角版。区切りではV字や斜めの切り抜きを使う。アイコンは白い円の中に置く
• セクション境界: 黄×白の斜めストライプ帯、下向き三角の切り欠き、V字の切り抜き、大きな円弧
• CTAボタンは角丸約12pxの長方形にし、左に白い「無料」タグ、右に「＞」を置く
• 小ラベルは黒のピル型にし、下に三角の吹き出し口を付ける
• CASEの番号は黄緑の線の円に入れ、カードの上辺に重ねる
• STEPは黄緑の円バッジにし、文字を円弧状に配置する

Components

• 主CTAボタン（button-primary）: 黄色の地に黒フチと黒い落ち影。左に白い無料タグ、右に矢印を置く
• サブボタン（button-secondary）: 白の地に黒フチと落ち影。見積もり体験などに使う
• 吹き出しラベル（speech-label）: 黒または白のピル型で、下に三角の口を付ける。所要時間などのマイクロコピーを書く
• 悩み→解決カード（case-card）: 上がグレーの悩み箱、下が黄緑の解決面と白い効果行。下端に黒いピル型の結果帯を重ねる
• マーカー付き本文カード（marker-text-card）: 白い角丸カードに本文を書き、要点を黄緑の帯で白抜きにする
• 円アイコンの3列グリッド（icon-circle-grid）: 白い円の中に黄緑×オレンジのフラットアイコン、下に2行の短い説明
• ステップカード（step-card）: 左に黄緑の円バッジ、右にグレーのカード。補足は黄色の吹き出しにする
• FAQアコーディオン（faq-accordion）: 淡い黄緑の角丸バー。左にQ.付きの太字、右に二重のシェブロン
• 実績の丸バッジ（stat-badge）: 黒い円に白文字と大きな黄色の数字。周囲に欧文を円弧状に回す

Do's and Don'ts

Do - CTAには必ず黒フチと、ぼかしなしの黒い落ち影を付ける - 見出しの強調語は大きく色を変え、助詞は小さくする - セクションごとに地の色を変え、ストライプやV字で区切る - 数字の実績は黒い丸バッジや黒い帯で目立たせる - 吹き出しラベルで、CTAの直前に不安を解消する一言を置く

Don't - ぼかした影やガラス風の質感を使わない - 黄緑と黄以外の鮮やかな色を面に広く使わない - 細い明朝体や細字で見出しを組まない - 写真の実写素材を主役にしない（イラストで統一する） - 長い本文に強調のマーカーを付けすぎない

Page Structure

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

1. ファーストビュー（サービスの価値と実績を一目で伝える）: グレーの地にロゴ、黄緑の帯の2行コピー、極太の見出しを置く。下に全幅イラスト、実績の黒丸バッジ2つと注釈
2. CTA（無料登録と見積もり体験へ誘導する）: 黄緑グラデーションの帯に吹き出し、黄色の主ボタン、白のサブボタンを縦に並べる
3. 導入実績（信頼性を示す）: 黄緑の角丸パネルに人物イラストと黒い実績バッジ。下に企業ロゴを5列ほどで並べる
4. 悩み別の活用ケース（読み手の課題と解決を結びつける）: ストライプの見出しの後、CASEカード4枚を黄色の帯の上に縦に並べる
5. 3つの魅力（サービスの差別化ポイントを説明する）: 黒い斜めラベルとロゴ見出しの後、淡い黄緑とクリームの地を交互にして、画面モック、本文カード、円アイコンを並べる
6. 追加サービス（同時に発注できる施策を伝える）: 黄色の円に人物イラスト、黒い2×2の比較パネル、黄緑の帯の見出し
7. 相乗効果（組み合わせのメリットを図で見せる）: 黄色の3つの円をつないだ図と、黄色に黒フチの大きな成果コピー
8. ブランドメッセージ＋CTA（気持ちを高めて再度誘導する）: V字に切り抜いたイラストでグレーの帯を挟み、黒ラベルとコピーを置く。続けてCTAブロック
9. 利用の流れ（手順の簡単さを示す）: 6つのSTEPカードを縦に並べ、補足は黄色の吹き出しにする
10. 締めのメッセージ＋CTA（最終的に申し込みを促す）: 全幅イラストとグレーの帯のコピーの後、CTAブロック
11. よくある質問（最後の疑問を解消する）: 黄色の欧文ラベルと見出しの後、淡い黄緑のアコーディオンを4つ並べる

Imagery

• 明るい緑の多い住宅街を、フラットでやや絵画調のイラストで描く
• 人物は黄色の上着に黒いリュックの配達員や、オフィスワーカー。親しみのある表情にする
• PCの画面モックに地図のUIとオレンジの再生ボタンを重ね、動画を示唆する
• アイコンは黄緑とオレンジの2色で描くフラットなピクトグラム
• 地図ピンや見積もりの意匠を、カードの背景に薄く透かして入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは中央に約900pxのコンテンツ幅を取り、ケースカードを2列にする
• PCのFVは左にコピー、右に大きなイラストの2分割にする
• PCのCTAは主ボタンとサブボタンを横に並べる
• PCの魅力セクションはテキストと画像を左右に交互に配置する
• PCのSTEPは3列×2段のグリッドにし、バッジをカードの上に置く

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