DESIGN.md — 赤×黒の幾何学グラフィックBtoB代行 LP（Bold Red Geometric BtoB Outsourcing LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、クール・先進的、信頼・誠実、情報量多め・訴求型
• キーワード: 深紅グラデーション・黒帯見出し・六角形・大きな数字・白カード・斜めストライプ
• 地の質感: 赤地に斜めの光の帯と細い円の線、黒地に立体的な六角形タイルを重ねる。グレー地には薄い世界地図を敷く
• 形: 角丸は小さめのカード、六角形の写真枠と数字枠、平行四辺形のラベル、下向き三角の区切り
• 温度感: 熱く力強いが、白とグレーの面で落ち着きも保つ

Colors

• 赤のセクションと白・グレーのセクションを交互に置き、リズムを作る
• 黒は帯状の見出しラベル、手順のセクション、丸いラベルに限って使う
• 赤の地では、白カードを浮かせて情報を載せる
• 白地の本文では、キーワードだけを赤い文字にする
• 黄色は細い線や「＋」「×」の小さな装飾にだけ使う
• フッターは暗い赤で締める

Typography

• 見出しは極太のゴシックで、中央に揃える
• 数値は欧文の極太書体で大きく組み、単位は小さく添える
• 本文は13px前後、行間は1.8でゆったり組む
• 強調は太字と赤文字で行い、下線は使わない
• 見出しの両側に「／」や「////」を飾りとして置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1 列（媒体アイコンだけ 2〜3 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を全幅で切り替える
• 本文ブロックは中央寄せで、最大幅は約800px
• 見出しの下に24px前後の余白を取る
• 比較カードや料金カードは等幅で並べる
• 事例は横スライドのカルーセルにする

Elevation & Depth

• 白カードには、ぼかし12px程度の薄い影を付ける
• 写真付きのボタンには、暗いオーバーレイと小さな影を付ける
• 黒地の六角形タイルは、立体感のある陰影にする

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物写真は六角形に切り抜く。カード内の写真は四角で、角に赤い斜めの帯を添える
• セクション境界: セクションの境目に下向きの三角を付けるか、斜めに切る
• ラベルは平行四辺形や吹き出し付きの黒・赤の帯にする
• 手順は白い線の円とシェブロン矢印でつなぐ
• 数値の囲みは六角形にする
• 小さなボタンはピル型、主なボタンは角丸8px

Components

• 問い合わせボタン（button-primary）: 赤の地に白文字。右端に丸い矢印アイコンを付ける
• 写真付きのサブボタン（photo-cta-card）: 暗くした写真の上に白い見出しと小さなピル型ボタンを載せる。資料請求と会議予約の2つを並べる
• 黒帯の見出しラベル（label-band）: 黒い平行四辺形に白文字を入れ、下に吹き出しの尻尾を付ける
• 六角形の数値枠（hex-stat）: 白い六角形の中に、大きな数値と注釈を入れる
• 悩みのチェックリスト（check-list）: チェックマークの後に悩みを1行で書き、キーワードを赤にする。4項目並べる
• 写真付きの特長カード（feature-card）: 上に写真、下に太字の見出しと短い説明を置いた白カード
• 対応媒体のチップ（media-chip）: 黒丸のチェックと媒体名を入れた白い小カード。グリッドで並べる
• FAQのQ&A（faq-item）: 赤い四角にQ、黒い四角にAを入れる。質問はグレーの帯の上に置く
• 手順の円（step-circle）: 黒地に白い線の円を描き、中に手順名を入れる。円どうしを三角矢印でつなぐ

Do's and Don'ts

Do - 赤のセクションに斜めの光の帯と細い円の線を重ね、勢いを出す - 成果は大きな数字で見せ、単位と注釈を必ず添える - 白とグレーのセクションを挟み、赤の圧迫感を和らげる - 問い合わせ導線（電話・資料・予約）をページの上部と下部に置く

Don't - パステルカラーや丸く柔らかい書体を使わない - 赤い地の上に細い本文を直接長く書かない - 装飾の黄色を面の色として使わない - 角丸を大きくしすぎず、シャープさを保つ

Page Structure

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

1. ファーストビュー（対象者・サービス・価格を一目で伝える）: 深紅の幾何学的な背景に、太字のコピーを置く。白い吹き出しに価格を大きく入れ、月桂樹のマーク付き実績バッジを3つ並べる
2. 導線ボタン（資料請求と会議予約へすぐ誘導する）: グレーの地に写真付きのカードを2枚並べる
3. 悩みの提起（ターゲットの課題に共感する）: 赤い帯に見出しを置く。白地に六角形の人物写真と、4項目のチェックリストを並べる
4. できること（サービスの内容を示す）: 赤の地に写真付きの白カードを2枚置く
5. 数値の訴求（コスト削減の効果を強調する）: 白地に巨大な割合の数字を置き、隣に赤い帯のラベルを添える
6. 仕組み（低価格を実現できる理由を説明する）: 黒帯の見出しの下に、六角形のアイコンを矢印でつないだ図を置く
7. 品質・安心（ミスへの不安をなくす）: 赤と黒の吹き出し帯を置く。六角形の中にエラー率、横に3つの仕組みのリストを並べる
8. 導入事例（実績を見せて信頼を得る）: グレーの地に白カードのカルーセルを置く。写真、課題、施策、成果を載せる
9. サービス内容（対応範囲を示す）: 赤の地に黒丸のラベル、媒体チップのグリッド、作業例の表を並べる
10. 料金プラン（価格を比較させる）: 見出しの両側を「////」で飾る。黒と赤の見出し帯付きのカードを3つ並べる
11. 契約までの流れ（導入の手順を示す）: 黒い六角形タイルの背景に、白い線の円と矢印を3ステップ並べる
12. CTA（問い合わせを促す）: 赤の地に電話番号と写真付きのボタンを置く。続く白い帯に赤い問い合わせボタンを置く
13. よくある質問（不安を解消する）: 白地にQ&Aのリストを置く
14. フッター（会社情報を載せる）: 暗い赤の地に、白抜きロゴと住所を入れる

Imagery

• スーツ姿のビジネスパーソンを使う。悩む姿や握手など、感情が分かる写真にする
• PCや資料のデスク写真は、青みや寒色に寄せたトーンにする
• 背景は、赤の放射状の光、斜めの帯、細い円の線、点のグリッドで作る
• 黒地には、立体的な六角形のパターンを使う
• アイコンは単色の線画か塗りで、白い円や六角形の中に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの2〜3列のカードは、SPでは1列に縦積みする
• 媒体チップはPCでは3列、SPでは2列にする
• 手順の3ステップは、SPでは縦に並べ、矢印を下向きにする
• 巨大な数字はSPでは56px程度に縮める
• 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 行書くと起動時に読み込まれる。