DESIGN.md — 水色×オレンジのフラット図解BtoB集客支援LP（Light Blue Flat Illustration BtoB Marketing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 清潔・爽やか、信頼・誠実、情報量多め・訴求型
• キーワード: 淡い水色の地・オレンジの実績数字・フラットイラスト・細線アイコン・前後比較・ピル型黄色ボタン
• 地の質感: グラデーションをほぼ使わないフラットな単色面。背景に淡い水色の有機的なブロブ形を薄く敷く。
• 形: 角丸は小さめのカードと四角い枠線ボックスを組み合わせる。ボタンはピル型、ステップは正円の線枠。
• 温度感: 寒色の水色・青がベース。暖色のオレンジと黄色を成果とCTAにだけ差して温度を上げる。

Colors

• 白地と淡水色地を交互に並べてセクションを区切る。
• 見出しラベル、カードの上部帯、英字サブ見出しは青で統一する。
• オレンジは成果の数字、対策後のバッジ、CTA帯の地色だけに使う。
• CTAボタンは黄色にし、オレンジ帯の上でも目立たせる。
• 料金プランは緑青・青・オレンジの3色で段階を色分けする。
• 文字は濃グレーにし、真っ黒は対策前バッジにだけ使う。
• price-card は文字 #FEF9ED × 背景 #02ABA3 のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#01807A、4.57:1）を使う。
• step-circle は文字 #3293C2 × 背景 #F1F8FB のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2979A0、4.51:1）を使う。

Typography

• 見出しは和文の下に英字サブ見出し（青・Montserrat）を添える2段構成にする。
• 成果の数字は本文の3倍ほどに拡大し、オレンジで目立たせる。単位は小さく添える。
• 理由セクションの番号「01〜04」は淡水色の大きな数字にし、見出しの背後に重ねる。
• 本文は中央揃えの短い段落、または左揃えの4〜5行の段落にする。
• FVのコピーは字間を広めにとり、3行で区切る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットと事例内の数値は 2〜3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• カードとボックスは左右に約6%の余白をとり、中央に置く。
• 実績カードは上を青い帯（人物アイコン＋悩み）、下を白（前後比較）にした2段構成にする。
• メリットカードは上端に円形のアイコン台座を半分はみ出させる。
• フローは縦一列に並べ、各ステップの間に細い矢印を入れる。
• フォームは白カードに収め、影を付けて地から浮かせる。

Elevation & Depth

• フォームカードには柔らかく広い影（0 4px 20px rgba(0,0,0,0.08)）を付ける。
• メリットカードとFAQ行は影なしの白面で、淡水色の地との差だけで区別する。
• 事例ボックスは影を付けず、1.5px の青枠で囲む。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 人物アイコンは正円で切り抜く。イラストは切り抜きのまま淡いブロブの上に置く。
• セクション境界: 直線で背景色を切り替える。FVとお問い合わせの背景には大きな有機的な曲線のブロブを置く。
• CASEラベルは右上だけ角丸のタブ形にし、枠の左上に載せる。
• 見出しラベルは下に小さな三角を付けた吹き出し型にする。
• ステップは細い青線の正円で囲む。

Components

• 黄色ピルCTA（button-primary）: 黄色のピル型ボタン。中央に太字の文字、右端に「>」を置く。
• お問い合わせフォームカード（contact-form-card）: 白カードの上部に水色の見出し帯。入力欄は極淡色で塗り、必須項目にはオレンジの＊を付ける。
• 吹き出し見出しラベル（heading-ribbon）: 青い帯に白文字。下中央に三角を付けて問いかけを表す。
• 前後比較実績カード（before-after-card）: 上は青い帯に円形の人物アイコンと悩み、下は白地に黒の対策前バッジとオレンジの対策後バッジ、大きな成果数字を並べる。
• CASE事例ボックス（case-box）: 青枠で極淡色の地。左上に青いCASEタブ、右上に事例名を置き、数値の推移を矢印と棒グラフで見せる。
• アイコン付きメリットカード（merit-card）: 白の角丸カード。上端に円形の台座を付け、細線アイコンを載せる。見出しと4行ほどの本文を入れる。
• 料金プランカード（price-card）: 上部の色帯にプラン名と白いピル型の補足を置く。下は白地に色付きの大きな価格を入れる。
• STEP円アイコン（step-circle）: 青い英字のSTEPと数字を、線画アイコン入りの正円の上に置く。円の下にラベルを入れる。
• FAQアコーディオン行（faq-row）: 白い横長の行。左に大きな青いQ、中央に青の太字の質問、右に細い＋を置く。

Do's and Don'ts

Do - 成果は必ず前後比較と大きなオレンジ数字で見せる。 - セクション見出しには青い英字サブ見出しを添える。 - 白地と淡水色地を交互に並べてリズムを作る。 - イラストは青系のフラットな人物と、オレンジの差し色で統一する。 - フォームは冒頭と最後の2か所に置き、同じデザインにする。 - CTA帯はオレンジの全幅地に白い見出しと黄色ボタンで作る。

Don't - 写真を多用しない。リアルな写真を入れると、フラットな図解のトーンが崩れる。 - オレンジを本文や装飾線に使わない。 - 濃いグラデーションや強い影を使わない。 - 見出しを明朝体にしない。 - CTAボタンを青にしない（黄色に固定する）。 - 角丸を大きくしすぎてポップに寄せない。

Page Structure

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

1. ファーストビュー（実績の数値と主張を一目で伝える。）: 青い実績バッジ、3行の太字コピー、淡水色ブロブの上に置いたフラットイラストで構成する。
2. 冒頭フォーム（すぐに問い合わせできるようにする。）: 水色の見出し帯付きの白カードに入力欄を並べ、黄色の送信ボタンを置く。
3. 悩みの提起と実績（悩みへの共感と改善効果を示す。）: 吹き出しラベルと見出しの後に、前後比較カードを3枚縦に並べる。
4. サービス解説・メリット（施策の意味とメリットを理解させる。）: 淡水色の地に解説文とイラストを置き、アイコン付きの白カードを3枚並べる。
5. 導入事例（具体的な数値で信頼を得る。）: CASEタブ付きの青枠ボックスを4つ置き、数字・矢印・棒グラフで推移を見せる。
6. 中間CTA（相談に誘導する。）: オレンジの全幅帯に白の3行見出しと黄色のピルボタンを置く。
7. 選ばれる理由（差別化のポイントを伝える。）: 淡色の大きな番号を見出しの背後に重ね、本文とイラストを交互に4つ並べる。
8. 料金プラン（価格を明示する。）: 淡水色の地に契約期間のラベルを置き、色分けした3プランのカードと注釈を並べる。
9. CTA（再び相談へ誘導する。）: 中間CTAと同じオレンジ帯を繰り返す。
10. 導入の流れ（契約までの手順を示し、不安を減らす。）: 線円アイコンの5ステップを縦に並べ、矢印でつなぐ。
11. よくある質問（疑問を解消する。）: 淡水色の地に白いアコーディオン行を5つ並べる。
12. お問い合わせ・フッター（最終的なコンバージョンにつなげる。）: ブロブ背景の上に影付きのフォームカードを置き、その下に白地の会社情報を入れる。

Imagery

• 青・水色を主にしたフラットな人物イラスト。PC・グラフ・歯車・検索窓など、ビジネス図解のモチーフを使う。
• イラストの差し色にオレンジとサーモンピンクを少量使う。
• イラストの背後に淡水色の不定形ブロブと葉っぱのシルエットを敷く。
• アイコンは青の細い線画（握手・人物群・メガホン・書類など）にする。
• 人物アイコンは正円内に描いたシンプルなイラストにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではFVを2カラムにし、左にコピーとイラスト、右にフォームを固定表示する。
• PCのヘッダーには電話番号とオレンジの問い合わせボタンを置く。
• PCでは実績カードを2＋1枚、メリットを3列、事例を2×2で並べる。
• PCでは理由セクションのテキストとイラストを左右交互に配置する。
• PCでは料金3プランとフロー5ステップを横一列に並べる。
• PCのCTA帯は1行見出しにし、背景にオレンジの濃淡の曲線を入れる。

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