DESIGN.md — ピンク×紺の幾何学ポップなBtoB支援LP（Pop Geometric Pink Navy BtoB Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、クール・先進的、情報量多め・訴求型
• キーワード: ビビッドピンク・濃紺カード・グラデーション流体・幾何学紙吹雪・図解・フラットアイコン
• 地の質感: フラットな塗りに、パステルのグラデーション流体シェイプ・三角形・ドットパターンを重ねる。影は控えめ。
• 形: 角丸小さめのカード、矢印、六角形アイコン、円形バッジ。セクション境界は直線。
• 温度感: 明るく賑やかだが、紺で引き締めて信頼感も持たせる

Colors

• 白とラベンダーの地にピンクの全幅帯を3〜4回挟み、リズムを作る
• 悩みや根拠など重い情報は濃紺カードで囲み、白文字とピンク強調
• 強調語はピンク文字か、ピンク地白抜きラベルにする
• サービス分類は水色・紫・ピンク・黄緑の4色でカード上部を色分け
• ピンク帯の中のCTAは濃紺のピル型にして色を反転させる
• 装飾シェイプはピンク〜紫〜水色〜オレンジのグラデーション
• button-header は文字 #FFFFFF × 背景 #F065A9 のコントラスト比が 2.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E3167A、4.5:1）を使う。

Typography

• 見出しの上に淡色の英字ラベルを小さく置く
• 見出しは太字ゴシックで中央揃え、下にピンクの細い下線
• 強調語だけ一回り大きくするかピンクにする
• 番号は英字の大きい数字（01〜03）で示す
• 本文は短文の箇条書き中心にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は 2〜5 カラムのカード並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 見出しは英字ラベル＋和文見出しの2段で中央揃え
• 悩みは紺カードを縦に3枚積む
• 根拠は左に紺の図解、右にピンク見出し＋白の説明を並べる2分割カード
• サービス・理由はカードを横並び（SPは縦積み）
• 工程は矢印でつなぐ横並びの角丸カード

Elevation & Depth

• カードに薄い影（0 2px 8px rgba(0,0,0,0.08)）
• 紺カードは影なしのフラット
• 装飾シェイプはカードの背面に配置

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は最小限。図解・アイコンはフラットに描き、写真は四角の切り抜き
• セクション境界: 直線で背景色を切り替える
• ボタンはピル型
• カードは角丸4〜8px
• ラベルは角丸小の帯
• 番号は円形バッジ
• 流体シェイプや三角形を角に散らす

Components

• 主CTAボタン（button-primary）: ピンク帯内に置く濃紺のピル型ボタン。上に斜線で挟んだ誘導文を添える
• ヘッダー問い合わせボタン（button-header）: ピンクのピル型の小さいボタン
• 英字ラベル付き見出し（section-heading）: 淡色の英字小ラベルの下に太字の和文見出し、ピンク下線
• 悩みカード（problem-card）: 紺地に白ラベル＝ピンクラベルの等式、チェック付き箇条書き、ピンク矢印の結果文
• ポイント2分割カード（point-card）: 左は紺地にPoint番号と図解、右上はピンク地の白見出し、右下は白地の説明
• 色分けサービスカード（service-card）: 上部に色付き見出しバー、白地に四角マーカーの箇条書き
• 理由カード（reason-card）: 円形番号バッジ、色付き上部に結論、紺帯ラベル、番号付き理由リスト
• 工程カード（flow-step）: 紺の円アイコンと見出し、矢印でつなぐ白い角丸カード
• 吹き出しタグ（speech-bubble）: 紺枠線の白い吹き出しに短い強調語

Do's and Don'ts

Do - ピンク帯と白・ラベンダー地を交互にしてリズムを出す - 情報は図解とアイコン付き箇条書きで見せる - 強調語はピンクで統一する - 装飾シェイプは余白の角に置き、本文にかぶせない - カテゴリはパステル4色で色分けする

Don't - 人物写真を大きく多用しない - 明朝体や手書き書体を使わない - ピンクと紺以外の濃い色を面で使わない - 装飾を本文の上に重ねて読みにくくしない - 長い段落の文章を置かない

Page Structure

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

1. ファーストビュー（サービス名と価値を伝える）: 白地にグラデーション流体と三角を散らし、左にロゴ表記とキャッチ、右にBefore/After/得られるものの縦フロー図
2. サービス紹介（対応範囲を一目で示す）: ピンク帯に5つの工程カードを矢印でつなぎ、下に強調を混ぜた3行の要約
3. 悩みの提起（課題に共感させる）: 白地に紺カード3枚。課題ラベル＝結果ラベル、チェック項目、ピンク矢印の箇条
4. 解決の提示（サービスで解決できると示す）: ピンク帯に下向き矢印とサービス名、白い角丸パネルに導入前後の六角形アイコン図
5. 根拠・強み（解決できる理由を示す）: ラベンダー地に3つのPoint番号付き2分割カード
6. サービス概要（対応業務を整理して見せる）: 色分け見出しの4カードを横並び、吹き出しタグを添える
7. CTA（限定感で問い合わせを促す）: ピンク帯に限定訴求と注釈、右に紺ピル型ボタン
8. 選ばれる理由（比較優位を示す）: 番号バッジ付き3カード。結論、理由帯、番号リスト
9. 会社紹介フッター（運営会社と連絡先）: 左に写真、右に紺地の会社名とオレンジボタン、QRコード

Imagery

• ピンク・紫・水色・オレンジのグラデーション流体ブロブ
• 三角形・ジグザグ線・ドット模様・円弧を紙吹雪のように散らす
• 紺の円に白抜きの線画アイコン
• パステルの六角形やサイクル図などのフラット図解
• 写真は運営会社紹介のオペレーター写真程度に絞る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPはカード横並びをすべて縦積みにする
• ポイントの2分割カードはSPで図解→見出し→説明の縦順
• 工程カードはSPで2列か縦並びにし、矢印は下向きに
• 装飾シェイプはSPで数と大きさを減らす
• ヘッダーナビは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 行書くと起動時に読み込まれる。