DESIGN.md — 黒×金×黄色の力強いSEOツールLP（Black Gold and Bold Yellow SaaS Tool LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、情報量多め・訴求型、ラグジュアリー・ダーク、ポップ・元気
• キーワード: 黒×金の高級感・ビビッドな黄色・赤グラデCTA・線画イラスト・黒丸のPOINT番号・画面キャプチャ
• 地の質感: 黒地に金粉のきらめきを散らす。黄色面はベタ塗りで平面的。
• 形: ピル型ボタン、白い角丸カード、黒丸の番号バッジ、黒い太線の影付きボックス
• 温度感: 黒で引き締めて黄色と赤で熱く煽る、高コントラストで温かめ

Colors

• 地は黒・黄・白の3色を交互に切り替え、セクションの区切りを色面で作る。
• 黒地には必ず金粉の光とゴールドのロゴを添えて高級感を出す。
• 主CTAは赤グラデのピル型に統一し、黒地・水色地どちらでも置く。
• 悩みや数値は赤文字か赤いベタ背景＋白文字で強調する。
• サブボタンは目的別に茶・紺・金・青の色を分ける。
• 黄色地の上では白カードに黒の影を付けて浮かせる。
• button-primary は文字 #FFFFFF × 背景 #F40201 のコントラスト比が 4.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EC0201、4.59:1）を使う。

Typography

• 見出しは太いゴシックで中央揃え、2行に分けて組む。
• ロゴ周りは金色の筆文字と字間の広い欧文で高級感を出す。
• 番号はMontserratの太字を黒丸の中に白抜きで置く。
• 料金の数字は一回り大きくし、税込は小さな括弧書きで添える。
• 本文は左揃えで行間を1.7前後に保つ。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。事例カードのみ 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 14px（375px 幅換算）
• セクションは全幅の色帯で区切る。
• チェック項目は白い角丸カードを縦に並べる。
• POINTは番号バッジ＋見出し＋本文＋画面キャプチャの順。
• 料金ブロックは黒地中央揃えで何度も繰り返す。
• FAQは黒いQバーの下に赤いAアイコン付きの回答を置く。

Elevation & Depth

• 実績ボックスや見出しボックスは右下に黒いオフセット影を付ける。
• ボタンにはやわらかいドロップシャドウを付ける。
• チェックカードは影なしのフラットにする。

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 事例写真は大きめ角丸の四角。画面キャプチャは角丸なしで細い枠を付ける
• セクション境界: 直線で色を切り替える
• 番号バッジは黒い正円にして吹き出しの尻尾を付ける。
• スペック表示は角括弧の線で左右を挟む。
• 右下に赤い円形の追従CTAを置く。

Components

• 赤グラデ主CTA（button-primary）: 赤のグラデにしたピル型ボタン。右に白丸の矢印アイコン
• 色違いサブボタン（button-secondary）: 茶・紺・金・青のグラデにしたピル型。資料DL・問い合わせ用
• チェックリストカード（check-card）: クリーム地に置く白い角丸カード。左に赤いチェック丸を付ける
• POINT番号バッジ（point-badge）: 黒い正円の中に小さいPOINTの文字と大きい2桁番号を白で入れる
• 実績数値ボックス（stat-box）: 白地に黒の影を付けたボックス。数字は赤ベタに白抜き。上にCHECK番号の黒丸
• 料金訴求ブロック（price-block）: 黒地に金粉を散らし、金ロゴ・月額・大見出し・スペックと主CTAを並べる
• 事例カード（testimonial-card）: 写真の上に白帯の引用文を重ね、下部に黄色帯で会社名と肩書を入れる
• FAQ（faq-item）: 黒い角丸バーに白丸のQ。その下に赤丸のAと回答文
• 仕様表（spec-table）: 左が灰色の見出しセル、右が白セル。黒地の上に置く

Do's and Don'ts

Do - 黒・黄・白の色帯を交互に置いてリズムを作る。 - 主CTAは赤のピル型にし、料金ブロックごとに繰り返す。 - 機能説明には実際の管理画面キャプチャを添える。 - 人物は白黒＋ベージュの線画イラストで描く。 - 数字の実績は赤ベタに白抜きで大きく見せる。

Don't - 黄色地の上に赤以外の派手な色を足さない。 - 金はロゴとサブボタン以外に広げすぎない。 - 写真を背景に敷いて文字を読みにくくしない。 - CTAを角張った四角にしない。 - 見出しを細い明朝にしない。

Page Structure

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

1. ファーストビュー（ブランドの印象付けと2つのCTA）: 黒地に金の筆文字ロゴ、白の太字の版表記。下部に金粉と赤CTAを2つ並べる
2. 新機能訴求（新しい対応点を伝える）: 黄色帯に見出しを置き、クリーム帯に白いチェックカードを3つ並べる。これを2回繰り返す
3. 紹介動画（短時間でサービスを理解させる）: 白地に見出しと全幅の動画埋め込み
4. 悩みの提起（ユーザーの不安に共感する）: 頭を抱える人物の線画と、赤チェック付きの悩み3行。キーワードを赤字にする
5. 解決プロセス（5つの手順で機能を説明）: POINTラベル付きの黄色い吹き出し見出しのあと、番号バッジ＋見出し＋本文＋画面キャプチャを5回繰り返す
6. 料金訴求（価格と主要スペックを提示）: 黒地に金粉、金ロゴ、月額と大見出し、括弧で挟んだスペック、赤CTA
7. メリット・セミナー（資料DLとセミナーへ誘導）: 黄色地に人物線画、白帯の見出し、茶と紺のボタン
8. 実績数値（数字で信頼を補強）: CHECK番号付きの影付き白ボックスに赤ベタの数字。群衆や握手の線画を添える
9. 導入事例（お客様の声）: 黒地に角丸写真カードを2カラム。引用は白帯、社名は黄色帯
10. 無料診断案内（オンライン診断への申込）: 水色グラデ地に本文と虫眼鏡の写真、赤CTA
11. よくある質問（不安を解消）: 白地に黒いQバーと赤丸Aの回答
12. メディア掲載（第三者評価）: 青い光の粒子の写真を背景に白文字と青ボタン
13. 仕様・特典（料金表・動作環境・無償ツール）: 黒地に灰と白の2列表、特典はキャプチャと白文字の説明
14. 最終CTA・フッター（申込と問い合わせ）: 料金ブロックを再掲し、金と青の全幅ピルボタン、ロゴ、規約リンク

Imagery

• 黒地の装飾には金色の粒子とボケ光を下部に散らす。
• 人物は黒の線画で、服を灰色とベージュで塗るフラットなイラストにする。
• 機能説明は管理画面のスクリーンショットを細い枠で見せる。
• 事例写真はオフィスで撮った自然光のバストアップ。
• ロゴは金箔の質感の筆文字にする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約1000px幅で配置し、背景の色帯は全幅に広げる。
• POINTはPCでテキストと画像の2カラムにし、左右を交互に入れ替える。
• 事例カードはPCで3列に並べる。
• PCの料金ブロックはロゴを左、料金を右にした2カラム。
• 仕様表はPCで料金と動作環境を左右に並べる。

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