DESIGN.md — 赤×モノクロの広報支援SaaS LP（Bold Red and Monochrome PR SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、信頼・誠実、力強い・インパクト、情報量多め・訴求型
• キーワード: 深紅グラデーション・モノクロ写真背景・金の実績バッジ・白カード・フラットイラスト・矢印型タグ
• 地の質感: 背景にモノクロ写真や斜めの幾何学パターンを薄く敷き、上に単色フラットな面を重ねる
• 形: 角丸小さめのカード、右向き矢羽型のタグ、正円の写真とラベル、ギザ縁の金メダル
• 温度感: クールな無彩色ベースに赤で熱量を足す、やや硬めの温度感

Colors

• 地は黒→グレー→淡青白→グレー→淡青白→墨と交互に切り替え、リズムを作る
• 赤はカード面・見出し・CTA・下線に限定し、左上濃→右下明の斜めグラデにする
• 金は実績数値・回数メダルにだけ使い、権威付けの記号とする
• 本文はグレー地でも墨色、黒地では白にする
• 見出し下には短い赤の水平バーを置く
• サブボタンは白地＋墨文字、主CTAは赤グラデ＋白文字の対で並べる
• gold-badge は文字 #FBFCFA × 背景 #C9A35A のコントラスト比が 2.3:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#906F2F、4.53:1）を使う。

Typography

• 見出しは太字ゴシックで字間を広めにとる
• 見出し上に小さなグレーの英字ラベルを置く
• 強調語だけ赤で一回り大きくする
• 番号は太い欧文数字を大きく扱う
• 本文は行間を広めに取り左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードは2列グリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 70px、基本単位 8px、カード内 16px（375px 幅換算）
• 特徴詳細は番号ボックス左＋見出し右の横並び
• CTAは白サブと赤主の2ボタンを横に並べ、各セクション末に繰り返す
• 悩みは中央イラストの左右に黒ラベルを2個ずつ置く
• 円形写真やラベルはイラストの周囲に浮かせて散らす
• セクション見出しは中央揃え、本文は左揃え

Elevation & Depth

• 白カードには薄く柔らかい影をつける
• ボタンは軽い影で浮かせる
• 黒地・赤面はフラットで影なし

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は正円、事例写真は角丸の長方形
• セクション境界: 直線で色面を切り替える
• タグは右向きの矢羽（シェブロン）型
• 回数バッジはギザ縁の金メダル
• Qマークは角丸の赤い正方形
• ボタン右端に細い右矢印を添える

Components

• 主CTAボタン（button-primary）: 赤から暗赤への横グラデに白文字と右矢印
• サブボタン（button-secondary）: 白地に墨文字と矢印、影つき
• 問い合わせ誘導帯（button-dark）: 濃灰の横長ボタンに白文字と矢印
• 赤グラデ特徴カード（feature-card-red）: 大きな番号、白いイラスト、白見出し、矢羽タグ2個、下向き矢印
• 矢羽型タグ（chevron-tag）: 白地に赤文字のシェブロン形を2つ連ねる
• 特徴番号ボックス（number-box）: 赤グラデ正方形に小ラベルと大きな白数字
• 金メダル実績バッジ（gold-badge）: ギザ縁の金円に白い大数字と単位
• 白情報カード（info-card）: 左に赤縦線付き見出し、本文、赤字ラベル＋媒体名
• 見出し赤下線（heading-underline）: 英字ラベル＋見出し＋中央の短い赤バー
• FAQアコーディオン（faq-item）: 赤いQ角ボックス＋淡色の質問帯と下線、右に開閉矢印

Do's and Don'ts

Do - 赤は斜めグラデで面に厚みを出す - 実績数値は金の月桂樹やメダルで飾る - 機能説明はモノトーン＋赤差しのフラット人物イラストにする - 各セクション末に白と赤の2ボタンCTAを置く - 背景にモノクロ写真や幾何学パターンを薄く敷く

Don't - 赤以外の鮮やかな色を足さない - 大きな角丸やピル型ボタンにしない - 金を装飾全般に広げない - カラフルな写真を背景全面に使わない - 見出しを細い書体にしない

Page Structure

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

1. ファーストビュー（価値提案と実績で信頼を示す）: モノクロ写真の黒地に白キャッチ、ロゴ、金の月桂樹数値を2つ並べる
2. 導入企業ロゴ（社会的証明）: 白地にロゴを2段で横並び
3. 新機能告知（追加機能の訴求）: 金茶グラデ帯に白文字見出し、白ボタン3つ、PC画面モック
4. 悩みの提起（課題への共感）: 赤い小見出し＋見出し＋赤下線、中央イラストの左右に黒ラベル4つ
5. 特徴一覧（3つの特徴を俯瞰させる）: 黒写真地に赤グラデカード3枚を縦積み
6. 特徴詳細（各機能を深く説明）: グレー地に番号ボックス＋赤見出し、画面キャプチャや図解、矢羽タグ、金メダル
7. 事例カード一覧（具体的な募集例を示す）: 白カード2列グリッドと濃灰の問い合わせ帯
8. CTA（資料請求・問い合わせ）: 白サブと赤主のボタンを横並び
9. 出会える対象（接点の幅を示す）: 淡青白地に赤強調の数値文、アイコン付き白カード2×2
10. 実績紹介（露出実績を示す）: 写真＋白カードの横スライダー、赤の媒体ラベル
11. サービス全体図（仕組みを図で理解させる）: 関係図、赤と黒のグラデ面でデジタル／リアルを左右に対比
12. よくある質問（不安解消）: 幾何学グレー地に赤Q付きアコーディオン
13. フッター（ナビと運営情報）: 墨色地に白のリンク、ロゴ、規約リンク

Imagery

• 背景はキーボードや手元のモノクロ写真を暗く敷く
• 人物はダークネイビーの服にアクセントの赤を差したフラットイラスト
• 人物写真は正円で切り抜き、イラストの周りに浮かせる
• グレー地には白い斜め四角を重ねた幾何学パターン
• アバターは丸背景の簡易フラット顔イラスト
• サービス画面のスクリーンショットをPCとスマホのモックで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは特徴カード3枚を横並びにする
• PCの特徴詳細はテキストと図解の2カラムで左右を交互に入れ替える
• 情報カードはPCで3列
• PCヘッダーにナビとCTA2つを常時表示する
• 出会える対象カードはPCで4列1行
• 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 行書くと起動時に読み込まれる。