DESIGN.md — 白×赤アクセントの BtoB 記事広告サービス LP（Clean Red Accent BtoB Media Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、清潔・爽やか、情報量多め・訴求型
• キーワード: 白基調・赤アクセント・線画アイコン・白カード・2段CTA・BtoB
• 地の質感: フラットで質感は付けない。FV だけ淡いピンク〜クリームのグラデーションをかける
• 形: 角丸カード（12px 前後）とピル型ボタン。見出しの頭に赤い半円ドットを置く
• 温度感: やや暖かいニュートラル。赤とベージュで温度を足す

Colors

• 地は白とライトグレー(#F5F5F5)をセクションごとに交互に切り替える
• 赤は CTA・見出しのドット・番号丸・強調語・リストの点だけに使う
• 主CTAは赤塗り＋白文字、副CTAは白地＋赤枠＋赤文字で必ずペアにする
• FV のみ淡いピンク〜クリームのグラデーション地にする
• 最終CTA帯だけベージュ地にして締める
• 料金表は見出しセルを濃灰、推奨列を赤ヘッダー＋淡赤セルにする
• FV見出しの要所に黄色の下線マーカーを引く

Typography

• すべてゴシック体で、見出しは太字、本文は細めのグレーにする
• 見出しは中央揃え、本文は左揃えか中央揃えにする
• 強調語だけ赤文字にし、FV では黄色の下線を引く
• 本文は 12px 前後で行間 1.8 を目安にする
• 金額は太字で大きくし、税別表記は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリットとステップは縦積み
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクション上下に 56〜72px の余白をとる
• カードは画面端から 12px 内側に置き、縦に 16px 間隔で並べる
• CTA は塗りボタンと枠ボタンを縦に 12px 間隔で 2 段に並べる
• 見出しの下に 24px あけて本文を置く
• ステップカードは番号丸をカード上端に重ね、カード間に小さな三角を置く

Elevation & Depth

• カードは薄い影(0 2px 8px rgba(0,0,0,.08))で浮かせる
• ボタンには影を付けない
• FAQ の行は影なしの白い面だけでグレー地から浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 14px。ボタンはピル型。
• 写真の切り抜き: 事例写真は角丸の長方形にし、下辺に赤い線を引く。アイコンは淡いグレーの円の中に置く
• セクション境界: 直線で地の色を切り替えるだけにする
• ボタンはすべてピル型にする
• カードの角丸は 10〜14px
• タグは角丸 4px かピル型
• 表は角丸なしの直線罫線にする

Components

• 主CTAボタン（button-primary）: 赤塗りのピル型で、右端に白い三角矢印を付ける
• 資料請求ボタン（button-secondary）: 白地に赤枠・赤文字のピル型で、右に赤い矢印を付ける
• 赤ドット見出し（heading-dot）: 中央揃えの太字見出しの左に赤い半円ドットを置く
• 悩みカード（pain-card）: 上端にクリップの線画、中央に 2〜3 行の悩み、下に円形アイコンを置く白カード
• ステップカード（step-card）: 赤丸の白数字を上端に重ねた横長の白カード。太字の工程名と短い説明を入れる
• 番号付き構成カード（numbered-row）: 左に赤丸の番号、右に太字タイトルと 1 行説明を置く横長カード
• 事例カード（case-card）: 業種タグ（淡赤）、写真、タイトル、濃色ラベル付きの取材形式、赤枠ボタンを縦に並べる
• 料金比較表（pricing-table）: 左列は濃灰の見出しセル、推奨列は赤ヘッダー＋淡赤セル。SPでは横スクロールさせる
• FAQアコーディオン（faq-item）: 赤い Q と太字の質問、右端にグレーの＋を置く白い行
• 特長タグ（feature-tag）: FVで特長を短く並べる、グレー枠の小さなピル型タグ

Do's and Don'ts

Do - 赤は CTA と小さなアクセントに絞り、面積を少なく保つ - CTA は塗りと枠の 2 段セットで各セクションの後に繰り返す - アイコンは黒の線画に赤を少し差すスタイルで統一する - 白とライトグレーの地を交互に切り替えてセクションを区切る - カードは白・角丸・薄い影でそろえる

Don't - 赤の広い面や赤いセクション背景は作らない - 写真に強いフィルターや装飾フレームは付けない - 明朝体や手書きフォントは混ぜない - 濃い影や立体的なボタンにしない - 赤以外の彩度の高い色を足さない

Page Structure

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

1. ヘッダー（ロゴと常設の相談導線）: 白地の左にロゴ、右に赤のピル型ボタンを置く
2. ファーストビュー（対象者の呼びかけと価値の提示）: 淡いグラデーション地に対象者の一文、黄マーカー付きの大見出し、特長タグ 3 つ、CTA 2 段、デバイスのモックアップ、月桂樹の実績バッジ 3 つを並べる
3. 悩みの提起（見込み客の課題に共感する）: グレー地に赤の強調語入りの問いかけ見出しと悩む人物のイラストを置き、白カード 3 枚を縦に並べる
4. 解決策の提示（サービス概要の説明）: 白地に人物イラスト、小さなリード、大見出し、グレー本文、CTA 2 段を置く
5. メリット（導入効果を 6 つ示す）: 円の中の線画アイコン、太字の見出し、2 行の説明を中央揃えで縦に積む
6. 導入の流れ（手順をわかりやすく見せる）: グレー地に番号丸付きのステップカード 5 枚を三角でつなぐ
7. 成果物イメージ・構成例（完成形を具体的に見せる）: デバイスのモックアップと、番号付きの構成カード 6 枚、注釈を置く
8. 事例紹介（実績で信頼を得る）: グレー地に業種タグ付きの事例カードを縦に並べる
9. 料金プラン（価格を比較させる）: 3 プランの比較表で推奨列を赤で目立たせ、後に CTA 2 段を置く
10. 対応範囲（対象業種を網羅して見せる）: カテゴリ名の下に赤線を引き、赤い点のリストを入れた白カードを並べる
11. よくある質問（不安を解消する）: グレー地に Q 付きのアコーディオンを 3 行置く
12. 最終CTA（最後のひと押し）: ベージュ帯に集中線の装飾付きの問いかけ見出しと CTA 2 段を置く
13. フッター（会社情報とリンク）: 白地にロゴ、グレーの小さなリンク群、右寄せのコピーライトを置く

Imagery

• 人物イラストは太い黒線のフラットなもので、赤のスーツやシャツを差し色にする
• アイコンは黒の線画に赤をワンポイント入れ、淡いグレーの円の上に置く
• FV ではノートPCとスマホのモックアップに記事画面を表示し、周りに円形に切り抜いた商談写真とリボン状の曲線装飾を添える
• 事例写真は明るいオフィスで笑顔の人物を写し、白帯のテロップを重ねる
• 実績バッジは月桂樹で囲んだグレーの数字にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左右 2 カラム（左に見出しと CTA、右にモックアップ）にする
• PC では悩みカードを 3 列、メリットを 3 列×2 段に並べる
• PC ではステップを横 5 列に並べる
• PC では事例を 4 列、対応業種を 3 列×2 段にする
• PC では CTA 2 つを横並びにし、料金表は横スクロールなしで全列を表示する
• PC のコンテンツ幅は約 1000px で中央に寄せる

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