DESIGN.md — モノクロ×ブロンズの法人向けDX研修 LP（Monochrome Bronze Corporate SaaS LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、上品・高級、クール・先進的、情報量多め・訴求型
• キーワード: モノクロ写真・ブロンズグラデーション・チャコール帯見出し・実績ロゴ・資料請求
• 地の質感: モノクロのビジネス写真に黒の半透明を重ね、その上にブロンズ色のグラデーションボタンを置く。ほかはフラットな面で作る。
• 形: 角丸は小〜中くらいで、全体は四角い印象。カードや帯もほぼ直線で、円形を使うのはプログラム図だけ。
• 温度感: グレー中心で少し冷たいが、ブロンズとベージュでほんのり温かみを足している。

Colors

• 地は白と#F5F5F5を交互に使い、セクションの区切りを色で示す
• 暗いモノクロ写真の帯をCTAの背景にして、ページの中に3〜4回くり返す
• ブロンズはCTA・数字・キーワードの強調・解決の帯だけに使う
• 主CTAはブロンズのグラデーション塗り、サブCTAは白地にブロンズの枠と文字
• 悩みカードや番号見出しの帯はチャコール地に白文字
• 図版の背景は生成りベージュでやわらかく見せる
• 原色は使わず、彩度を低く保つ
• button-primary は文字 #FEFAED × 背景 #B29374 のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#8C6D4E、4.56:1）を使う。
• button-secondary は文字 #B39374 × 背景 #FFFFFF のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#916F4F、4.57:1）を使う。
• solution-banner は文字 #F0F1EF × 背景 #B39374 のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#916F4F、4.51:1）を使う。

Typography

• 書体は角ゴシック1種でまとめ、明朝は使わない
• 見出しのキーワードだけをブロンズ色にするか、大きくする
• FVのサブコピーはベージュのマーカー下線で強調する
• 数字は欧文の太字で大きくし、単位は小さくする
• 本文は左揃え、行間は1.8でゆったり取る
• 大きな薄いグレーの欧文を背景の飾りに置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。事例は横スクロールのカルーセル、フォームの姓名欄だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約20pxで固定する
• 特長は番号帯→図版→小見出し→本文→区切り線の順をくり返す
• CTAはモノクロ写真の帯の中に、主・サブの順で縦に並べる
• セクション見出しは中央揃え、特長本文は左揃え
• 実績ロゴは4〜7列のグリッドで隙間なく並べる

Elevation & Depth

• 基本はフラットにして影を使わない
• 事例カードの社名ロゴは白い角丸ピルに軽い影をつけて写真に重ねる
• 端末モックの画像にだけ柔らかな落ち影をつける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの長方形。人物の写真は正方形のグリッドに並べる
• セクション境界: 直線で区切り、地の色の切り替えか細い罫線で分ける
• ボタンは角丸4〜6pxの長方形
• 悩みカードは角丸10px程度
• ステップ図は斜めに切った階段状の帯
• フロー図は矢羽根形（シェブロン）を並べる
• 円形を使うのはプログラム一覧のバブル図だけ

Components

• 主CTAボタン（button-primary）: ブロンズのグラデーション塗りに白文字、右端に矢印をつける
• サブCTAボタン（button-secondary）: 白地にブロンズの枠線とブロンズ文字、右端に矢印をつける
• 番号付き見出し帯（feature-number-bar）: 左に黒い正方形とブロンズの数字、右はチャコールの帯に白い見出し
• 悩みカード（pain-card）: チャコールの角丸カード。上に小さい状況説明、下に太字で悩みを書く
• 解決提示の帯（solution-banner）: ブロンズのグラデーションの角丸帯に白の太字を中央揃えで置く
• 導入事例カード（case-card）: 写真＋ロゴのピル、ブロンズの社名、太字タイトル、グレーの属性タグ
• FAQアコーディオン（faq-item）: 太字のQ、質問文、右端に＋。下に罫線。カテゴリ見出しの左にはブロンズの縦線
• フォーム入力欄（form-input）: 薄グレー塗りに細い枠。必須マークは赤い小さな＊
• 導入企業のロゴ一覧（logo-grid）: 白地にカラーの企業ロゴを3段のグリッドで並べ、右下に注記を入れる

Do's and Don'ts

Do - CTAの帯は暗いモノクロ写真にして、ブロンズのボタンを目立たせる - ブロンズは強調する箇所だけに使う - 実績の数字・受賞バッジ・導入企業のロゴをFVの近くに置く - 特長は番号帯で区切り、毎回同じ構成をくり返す - 図版は生成りベージュの面に載せる

Don't - 鮮やかな青や赤をアクセントに使わない - ボタンをピル型や派手な影にしない - 背景写真をカラーのまま使わない - 手書き風や丸ゴシックの書体を混ぜない - セクションの地を毎回同じ色にしない

Page Structure

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

1. ファーストビュー（サービス名と価値、実績を一度に伝える）: 暗いモノクロの都市写真の上に白の大見出しとブロンズのマーカー。主・サブCTAと受賞バッジ、端末モックを置く
2. 導入実績（利用社数と企業ロゴで信頼を示す）: ブロンズの大きな数字の下にロゴのグリッドを並べる
3. 活用事例（具体的な導入例を見せる）: 写真カードを横スクロールのカルーセルにし、矢印ボタンをつける
4. CTA帯（資料請求と無料トライアルへ誘導する）: 暗い写真の帯に資料画像と端末モック、主・サブボタンを縦に並べる
5. 悩みの提起（担当者の課題に共感する）: 中間グレーの地に線画の人物イラストを置き、チャコールのカードを3枚並べる
6. 解決提示（サービスが課題を解決すると示す）: ブロンズのグラデーション帯に白の太字。下にブロンズの強調を入れた短い一文
7. 育成ステップ（段階的な育成の流れを示す）: 左にラベル付きの箇条、右にグレー濃淡の階段図を置く
8. 特長（3つの強みを詳しく説明する）: 番号帯→ベージュ地の図版→小見出し→本文をくり返し、罫線で区切る
9. プログラム一覧（研修メニューの幅を示す）: グレー・ブロンズ・黒の円をつないだバブル図と、ベージュ地の箇条リスト
10. よくある質問（導入前の不安を解消する）: 薄グレーの地に大きな薄い欧文の飾り。カテゴリ別のアコーディオン
11. 申込フォーム（資料請求とトライアルを受け付ける）: 見出し→ロゴ一覧→縦に並ぶ入力欄→ブロンズの送信ボタン→ベージュ地の電話案内
12. フッター（認証と方針を示す）: 薄グレーの地に認証マークとテキストリンクを並べる

Imagery

• ビジネスパーソンのシルエットやPC操作の手元をモノクロにし、暗めに処理する
• サービス画面はノートPCとスマホのモックで見せる
• 事例の写真は実在の担当者が並ぶ自然光の写真
• 人物イラストは黒の線画に淡いブラウンの差し色
• 図表はベージュとグレーの濃淡でまとめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは本文の幅を約800pxに絞って中央に置く
• PCの悩みカードは3列、特長は2列のカードにする
• PCのCTA帯では主・サブボタンを横に並べる
• PCのFVは左にテキスト、右に端末モックの2カラム
• PCの事例カルーセルは4枚程度を同時に見せる

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