DESIGN.md — 紺黒×金文字×赤CTAのBtoB広告サービスLP（Dark Navy Gold Premium BtoB Promo LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ラグジュアリー・ダーク、力強い・インパクト、クール・先進的、情報量多め・訴求型
• キーワード: 濃紺・金グラデ文字・赤CTA・切り抜き人物・光彩グラデ・グリッド背景
• 地の質感: 暗い地に光のにじみ・虹色の光線・細かい方眼グリッドを薄く重ねた、映像広告のような質感
• 形: ボタンはピル型。カードは角なしで、四隅にカギ線。見出しラベルは斜めカットの帯
• 温度感: 冷たい紺の地に、金と赤の暖色を差して高揚感を出す

Colors

• 地は暗色（紺黒）と青紫グラデを交互に使い、セクションを切り替える
• 最重要語は金グラデの斜体明朝・太字で示す
• 主CTAは赤だけで塗る。サブCTAは白地に赤文字
• 白カードの見出しは濃い青。本文はグレー寄りの黒
• 比較ラベルは淡い黄で小さく使う
• フッターは落ち着いた灰紺にして、本編と分ける

Typography

• 見出しはゴシック白と金の斜体明朝を一行の中で組み合わせ、強調語だけを大きくする
• 助詞は小さめの白にして、強調語との大小差を出す
• 本文は中央揃えで、1行18字前後で改行する
• 理由カードの本文は左揃え
• 数字は金の明朝で大きく見せる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は活用例が 2 カラム、理由が 3 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• カードは左右16pxの余白で画面いっぱいに置く
• セクション見出しの上下に40〜56pxの余白を取る
• CTAはサブ（白）→主（赤）の順に縦に積み、間を16pxあける
• CTA群の直下に注釈を置く
• 画像はカード内で幅いっぱいに置く

Elevation & Depth

• ボタンの下に濃い同系色の厚み影（下4px）を付けて立体感を出す
• 白カードは影なしで地とのコントラストだけで浮かせる
• 暗色カードは影を付けず、線で区切る

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いて地に溶かす。事例画像は角なしの四角
• セクション境界: 直線で色を切り替える（グラデ地↔暗色地）
• カードは角丸なし
• 番号ラベルは右端を斜めに切った帯
• 理由カードは四隅だけにカギ型の線を置く
• ボタンは完全なピル型で、右端に＞矢印

Components

• 資料DL主ボタン（button-primary）: 赤いピル型。左にDLアイコン、右に＞。下に濃い赤の厚み影
• 問い合わせボタン（button-secondary）: 白いピル型に赤文字。下に灰色の厚み影
• 金白ミックス見出し（heading-mixed）: 白ゴシックと金グラデの斜体明朝を組み合わせた2行見出し
• スラッシュ小見出し（eyebrow-slash）: ＼ ／ で挟んだ白い小見出し
• 活用例カード（card-usecase）: 白カード。左上に濃い青の斜めカット番号帯を置き、BEFORE/AFTER画像、青見出し、本文の順に並べる
• 番号ラベル帯（label-number）: 濃い青の帯に白文字で番号と見出し。右端を斜めにカット
• 比較ラベル（tag-compare）: 画像下に付ける淡い黄の帯ラベル
• 理由カード（card-reason）: 暗色地に四隅のカギ線。白見出し、写真、左揃えの本文
• 限定注釈（note-limited）: CTAの下に置く※付きの小さなグレー文字

Do's and Don'ts

Do - 強調語は必ず金グラデの斜体明朝にする - CTAは赤と白の2本を縦に並べ、ページ中で3回置く - 暗色地と青紫グラデ地を交互に配置する - 人物は切り抜きで大きく、表情豊かに見せる - 白カード内の見出しは濃い青で統一する

Don't - 明るいパステル地を広く使わない - 赤をCTA以外に多用しない - カードに大きな角丸を付けない - 金文字を本文サイズで使わない - 背景を単色ベタだけにしない（光彩やグリッドを入れる）

Page Structure

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

1. ファーストビュー（新サービスの衝撃を伝え、資料DLへ誘導する）: 虹色の光彩が入る暗い地。2行のリード、特大の白明朝キーワード、切り抜き人物2名、赤CTAを重ねる
2. 変化点の提示（何が変わったかを一言で示す）: スラッシュ小見出しと金白見出し、2行の説明文、横並びの人物4名、限定注釈
3. 活用方法（具体的な使い方を4パターンで見せる）: 青紫グラデ地に番号帯付きの白カードを4枚。BEFORE/AFTER比較画像、青見出し、本文
4. 中間CTA（活用例の理解直後に問い合わせを促す）: 白の2行まとめ文、白と赤のピル型ボタン、注釈
5. 選ばれる理由（成果が出る理由を3つで示す）: 暗色地に金白見出しと金の数字。四隅カギ線のカードを3枚縦に並べ、写真と本文を入れる
6. クロージングCTA（将来像を示して申込を後押しする）: 方眼グリッド入りの青紫グラデ地に金白見出し、説明3行、CTA2本、注釈
7. フッター（規約リンクとコピーライト）: 灰紺の地に白文字のリンクを横並びで置き、下に小さなコピーライト

Imagery

• 人物は白スタジオで撮った、指差しや笑顔など動きのあるポーズ。背景を抜いて使う
• 暗い地には紫・青・オレンジの光の筋やボケを重ねる
• 事例は広告バナーやスマホ・PCの画面に入れたモックで見せる
• BEFORE→AFTERは青い曲線矢印でつなぐ
• グラデ地には薄い方眼グリッドを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは左にコピーとCTA、右に人物を置く横並びにする
• PCでは活用例カードを2×2、理由カードを3列にする
• PCではCTA2本を横並びにする（各約300px幅）
• PCでは本文の改行を減らして1〜2行にまとめる
• PCの見出しサイズはSPの約1.3倍

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