DESIGN.md — 水色×オレンジの線画イラスト BtoB サービス LP（Teal and Orange Corporate Illustration BtoB Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: データ訴求・線画イラスト・青緑基調・オレンジ強調・STEP 構成・法人向け
• 地の質感: フラットな単色面が中心。CTA 帯だけ淡い斜めストライプを敷く
• 形: 角丸が小さめの白カード、帯状のラベル、下向きの山形矢印、逆三角形の訴求ボックス
• 温度感: 青緑が多くやや涼しいが、オレンジの差し色で親しみも出している

Colors

• 白地と淡い水色地を交互に置いてセクションを分ける
• 見出しの装飾、STEP ラベル、帯は青緑で揃える
• オレンジは数値の強調、主 CTA、マーカー下線に限って使う
• 問い合わせボタンは青緑、資料ダウンロードはオレンジにして役割を分ける
• グラフはオレンジと水色の 2 色で組む
• 濃い色の帯の上は白文字にする
• button-primary は文字 #FFFFFF × 背景 #F39A1E のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA6709、4.51:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #6CB2C3 のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3A7E8F、4.6:1）を使う。
• worry-card は文字 #6CB2C3 × 背景 #FFFFFF のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#3A7E8F、4.6:1）を使う。
• number-badge は文字 #FFFFFF × 背景 #F39A1E のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#AA6709、4.51:1）を使う。
• lead-form は文字 #858585 × 背景 #FAFAFA のコントラスト比が 3.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#737373、4.54:1）を使う。

Typography

• 数値と割合は欧文書体で大きくし、オレンジにする
• 見出しのキーワードはオレンジ文字か、オレンジの下線で強調する
• 小見出しは青緑の太字にする
• 本文は 14px・行間 1.8 で読みやすくする
• 出典は必ずグラフのすぐ下に小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 3〜4 カラムのカード、またはテキストと画像の 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは中央揃えにして、上に余白を大きく取る
• STEP カードの間には山形の下向き矢印を挟む
• 悩みや流れのカードは同じ幅で並べる
• CTA 帯は複数のセクションの後に繰り返し置く
• データは 1 Evidence ごとに見出し帯とグラフをセットにする

Elevation & Depth

• カードはほぼフラットにし、薄い影か細い枠線だけにする
• 画面キャプチャには淡い影を付けて浮かせる
• ボタンに影は付けない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 画面キャプチャは角丸の小さい矩形にする。人物は切り抜いた線画にする
• セクション境界: 基本は直線で切り替える。訴求ボックスは下端を逆三角形にする
• CTA ボタンはピル型
• STEP ラベルは左上に付ける角帯
• 数値バッジは角丸の四角か吹き出し
• Evidence 見出しは横線の中央に置くピル型ラベル

Components

• 資料DLボタン（button-primary）: アイコン付きでオレンジのピル型
• 問い合わせボタン（button-secondary）: メールアイコン付きで青緑のピル型
• Evidence 見出し（evidence-label）: 青緑の横線の中央に欧文と番号のピルを置く
• STEP カード（step-card）: 白カードの左上に青緑の STEP 帯。左に文章、右に画面キャプチャ
• 悩みカード（worry-card）: 青緑の見出しと線画アイコンを入れた白カード。3 枚並べる
• 実績数値バッジ（number-badge）: オレンジの四角に白い大きな数値
• 相談 CTA 帯（cta-band）: 淡いストライプ地に 2 つのボタンと電話番号を並べ、両脇に人物を置く
• 入力フォーム（lead-form）: 薄灰パネルの中に枠線の入力欄を縦に並べ、小さな青緑ボタンを置く
• 事例カード（case-card）: 青緑のヘッダー帯の下に、吹き出しでの成果、比較グラフ、お客様の声を入れる

Do's and Don'ts

Do - 主張にはグラフと出典を添える - オレンジは要所だけに絞って使う - 人物イラストは青緑のスーツの線画で統一する - CTA 帯は同じデザインで繰り返す - 淡い水色地と白地を交互に使う

Don't - 暗い背景や黒を主体にしない - 写真を全面に敷き詰めない - オレンジを本文に多用しない - 丸ゴシックや手書き書体を使わない - 角丸を大きくしすぎない

Page Structure

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

1. ファーストビュー（サービス名・価値・実績を伝え、資料請求を促す）: 青緑地に白パネルでロゴとキャッチを置く。中央に人物イラスト、右に資料請求フォームを置く
2. 導入実績（信頼性を示す）: ロゴを格子状に並べ、導入社数の推移を棒グラフと上昇矢印で見せる
3. 悩みの提起（担当者の課題に共感する）: 青緑の写真地に白カードを 3 枚置き、両脇に悩む人物を置く
4. 根拠データ（課題の深刻さを数値で示す）: Evidence 番号の帯と、オレンジと水色の円グラフ
5. 問題提起と解決（サービスを解決策として示す）: 青緑ボックスで問題を述べ、ロゴを大きく出して両脇に人物を置く
6. 無料診断フォーム（最初のリードを獲得する）: 薄灰パネルの中に入力欄を並べる
7. サービスの流れ（提供内容を説明する）: STEP カードを 5 枚と追加メニューのカードを 1 枚並べ、間に矢印を置く
8. CTA（相談と資料請求を促す）: ストライプ地に 2 つのボタンと電話番号
9. 導入事例（成果を具体的に示す）: 事例カードに前後比較のグラフと声を入れる
10. ご利用までの流れ（契約までの手順を示す）: STEP 番号の丸を付けた白カードを 4 枚横に並べる
11. スケジュール例（導入の時期感を伝える）: 色分けしたバーのガント表
12. リスク提示（放置した場合の損失を訴えて急がせる）: 逆三角形の青緑ボックスにアイコン 4 つと下線付きの箇条を入れる
13. お役立ち資料（まだ検討段階の層を拾う）: 資料カードを 3 枚並べ、青緑枠のピル型ボタンを付ける
14. フッター（会社情報を載せる）: 白地に小さな文字でリンクを多列に並べる

Imagery

• スーツ姿のビジネスパーソンを紺の線と青緑の塗りでフラットに描く
• 人物は指差し・OK サイン・悩むポーズで場面ごとに使い分ける
• アイコンは青緑の単色線画で、書類・人・矢印を組み合わせる
• サービスの画面キャプチャは白カードに入れて見せる
• グラフはオレンジ系と水色の 2 色にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では 3〜4 列のカードを 1 列、または 2 列にする
• STEP カードは文章を上、キャプチャを下に積む
• FV のフォームはキャッチの下に移す
• ガント表は横スクロールにする
• CTA 帯の人物は小さくするか非表示にする
• PC の本文幅は約 900px で中央に置く

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