DESIGN.md — 青×黄の信頼感ある営業代行BtoB LP（Blue and Yellow Corporate Sales Outsourcing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、清潔・爽やか
• キーワード: 水色地・黄色CTA・白カード・線画イラスト・実績数字・比較表
• 地の質感: フラットな単色面に、カードの薄い影だけを付ける。CTA帯のみ青のグラデーション。
• 形: 角丸8px前後のカード、ピル型ボタン、見出し下に短い下線。
• 温度感: クールな青が基調。黄色とピンク赤で強調して温度を足す。

Colors

• セクション地は水色とライトグレーを交互にする。
• 内容は白カードに載せ、地色と分ける。
• 主CTAは黄色、サブCTAは白地に青文字の2つを並べる。
• CTA帯は青のグラデーション＋白文字。
• 本文中の強調はピンク赤文字か黄色マーカーに限る。
• 数字実績はピンク赤の大きい数字で目立たせる。
• cta-band は文字 #FFFFFF × 背景 #3B95F4 のコントラスト比が 3.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#0D73E0、4.62:1）を使う。

Typography

• 見出しは中央揃えの青太字にし、下に短い線を引く。
• 本文は左揃えで行間を広めにする。
• 特長番号は細めの欧文数字を青で大きく置く。
• 強調はピンク赤の太字か黄色マーカーにし、1段落に2箇所までとする。
• 注釈は小さいグレー文字にする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央寄せの約700px幅で、カード内は図と文の2カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは地色の切替で区切る。
• 見出しの下に24pxの余白をとる。
• CTA帯は複数のセクションの間に繰り返し挟む。
• 悩みカードは小さい白カードを横に並べる。
• 導入事例はカードを3列のグリッドで並べる。

Elevation & Depth

• 白カードに薄くぼけた影を付ける（0 2px 8px rgba(0,0,0,.08)）。
• ボタンは影なしのフラットにする。
• FAQ項目は白地に薄い影を付ける。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 事例写真は角丸カードの上部に矩形で入れる。顔写真グリッドは正方形。
• セクション境界: 直線で地色を切り替える
• CTAはすべてピル型にする。
• グラフは角丸の大きい白枠に入れる。
• 機能タイルは上部が青帯の小カードにする。

Components

• 主CTA（button-primary）: 黄色のピル型ボタンに黒い太字。
• 資料請求ボタン（button-secondary）: 白いピル型ボタン。上に小さい補足文、下に青太字。
• CTA帯（cta-band）: 青のグラデーション帯。白見出し、ロゴ、ボタン2つを並べる。
• 下線付き見出し（section-heading）: 青太字を中央に置き、下に細い線を引く。
• 番号付き特長カード（feature-card）: 白カードの上に青い番号と見出し。中にイラストと説明文。
• 導入事例カード（case-card）: 上に写真、下に要約文と社名、業種の青ラベル。
• 比較表（comparison-table）: 見出しセルは紺地に白文字。自社の列を青枠で囲み、評価は◎×で示す。
• FAQアコーディオン（faq-item）: 白いバーの左に青のQ、右に開閉の矢印。
• 実績バッジ（stat-badge）: 月桂樹の飾りで大きな数字を囲む。

Do's and Don'ts

Do - CTA帯は2〜3回繰り返して挟む。 - 主張は数字とグラフで裏付ける。 - イラストは青を差し色にした線画でそろえる。 - 強調はピンク赤と黄色マーカーの2種類に限る。 - 白カードと淡い地色の差で情報をまとめる。

Don't - 暗い色の背景をページ全体に使わない。 - CTAの色を黄色以外にしない。 - 明朝体や装飾フォントを混ぜない。 - 強い影や立体的な効果を付けない。 - 強調の色を増やさない。

Page Structure

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

1. ファーストビュー（サービスの立ち位置と実績を伝える）: 明るいオフィスで撮った人物の集合写真に、青の大見出しと実績バッジ3つを重ねる。
2. 導入企業ロゴ・写真（社会的な証明を示す）: マスタード地に顧客写真を2段のグリッドで並べ、下に累計支援数を置く。
3. CTA（早い段階で申込を促す）: 青い帯に黄色と白のボタンを横に並べる。
4. 導入効果（成果を数値で示す）: 左に白枠の棒グラフ、右に大きな%数字と説明文。
5. 悩みの提起（読み手の課題に共感する）: 短い悩みの小カードを5つ横に並べる。悩む人物の線画と、ピンク赤の問題提起を置く。
6. 市場の問題点（背景にある課題を説明する）: 白カード2枚に、それぞれイラストと見出しと出典付きの本文を入れる。
7. 求められる体制（解決の方向性を示す）: グレー地にイラストと文を左右交互に配置し、最後にマーカー付きの結論を置く。
8. 3つの特長（サービスの強みを示す）: 番号付きの白カード3枚。3枚目は6つの機能タイルとコスト比較グラフを入れる。
9. 類似サービス比較（他社との差を示す）: ◎×の比較表。右に要約文。
10. 導入事例（実例で信頼を得る）: 写真付きカードを3列と2列で並べ、業種ラベルを付ける。
11. 動画インタビュー（生の声を届ける）: 埋め込み動画の下に説明文とラベルを置く。
12. よくある質問（不安を取り除く）: グレー地にアコーディオンを5件並べる。
13. 申込フォーム（コンバージョンにつなげる）: 案内文、実績画像と青のデモ内容ボックスを置き、最後に黄色のCTA。

Imagery

• スーツ姿のビジネスパーソンを、明るい自然光のオフィスで撮った写真を使う。
• イラストは黒の線画に青を差し色にしたフラットな人物にする。
• グラフはシンプルな棒グラフで、青のグラデーションを使う。
• 顧客写真は人物とオフィスや店頭の実写にする。
• アイコンは青の細線で描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPはカードの2カラムを縦積みにし、図を上に置く。
• 悩みカードはSPで2列に折り返す。
• 事例カードはSPで1列にする。
• CTAボタンはSPで縦に並べ、幅90%にする。
• 比較表はSPで横スクロールにするか、列幅を縮める。

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