DESIGN.md — 白×鮮やかグリーンの法人向け動画ソリューション LP（Clean Green Corporate BtoB Video Solution Site）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、シンプル・ミニマル
• キーワード: 白地・鮮やかグリーン・アイコンカード・実績数字・ピル型アウトラインボタン・コーポレート
• 地の質感: フラットな単色面。影はごく薄く、写真はFVの背景にだけ淡く敷く
• 形: 角丸4〜8pxのカード、ピル型ボタン、円形のアイコン背景
• 温度感: 明るく爽やか。白基調でやや涼しい

Colors

• 白とごく薄いグレーのセクションを交互に置いてリズムを作る
• グレー地には白パネルを置き、その中にカードを並べる
• 緑はブランド色。見出し下の短い線、ニーズカード、実績の数字、アウトラインボタンに使う
• オレンジは問い合わせCTAにだけ使う
• 最終CTAは緑の面で囲み、中に白とオレンジのボタンを並べる
• 文字は濃グレーを基本にし、強調したい語句だけ緑にする
• button-outline は文字 #2CBD2B × 背景 #FDFDFD のコントラスト比が 2.45:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F871F、4.54:1）を使う。
• button-cta は文字 #FFFFFF × 背景 #FE7500 のコントラスト比が 2.71:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5800、4.58:1）を使う。
• button-primary-green は文字 #FFFFFF × 背景 #2CBD2B のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F871F、4.51:1）を使う。
• need-card は文字 #FFFFFF × 背景 #2CBD2B のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F871F、4.51:1）を使う。
• stat-block は文字 #2CBD2B × 背景 #FFFFFF のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1F871F、4.51:1）を使う。

Typography

• 見出しは中央揃えにし、下に幅32px・太さ3pxの緑線を置く
• 実績の数字は縦長の太い欧文書体を緑で大きく見せ、単位は小さく添える
• 本文は13px前後に抑え、行間は1.8でゆとりを持たせる
• 特長の番号は2桁の緑の欧文数字にする
• ボタンの文字は末尾に「›」を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（ニーズカードは2列）、PC は 3 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの上に見出しと緑線、下にピル型の「一覧を見る」ボタンを置く
• グレー地には白パネルを角丸で置き、中にカードを並べる
• ニーズカードは上にはみ出す円形アイコン＋緑の面＋右下の「詳しく見る」で構成する
• セミナーカードは左に画像、右に情報表、下に説明と緑ボタンを置く
• ニュースは日付・カテゴリバッジ・タイトル・矢印を1行に並べ、細線で区切る

Elevation & Depth

• カードはごく薄い影（0 2px 8px rgba(0,0,0,0.06)）か、1pxのグレー枠にする
• 白パネルは影なしで、グレー地とのコントラストで浮かせる
• ニーズカードの円アイコンには白地と薄い影を付ける

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 10px。ボタンはピル型。
• 写真の切り抜き: サムネイルは角丸の横長長方形、業界写真は円形に切り抜く
• セクション境界: 直線で背景色を切り替える
• サブボタンは白地に緑の1px枠と緑文字のピル型
• 主ボタンは緑かオレンジで塗った角丸の長方形かピル型
• アイコンは円形の背景にのせる
• カテゴリバッジは細い緑枠の小さな長方形

Components

• 緑枠のピルボタン（button-outline）: 白地に緑の枠と緑文字。一覧へ誘導するときに使う
• 問い合わせCTA（button-cta）: オレンジで塗った角丸ボタン。ヘッダーと最終CTAに置く
• 緑の申込ボタン（button-primary-green）: セミナー申込やメルマガ登録用。緑で塗ったピル型
• 緑線付き見出し（heading-underline）: 中央揃えの太字見出しの下に短い緑線を置く
• ニーズカード（need-card）: 緑の面の上端に円形アイコンをはみ出させ、白文字で悩みを2行で書く。右下に「詳しく見る」
• 実績数字ブロック（stat-block）: サービス名・大きな緑の数字・単位・注釈を縦に積み、右上に円形イラストを置く
• 番号付き特長（feature-number）: 淡いグレーの円アイコンの下に緑の2桁番号、太字タイトル、短い説明を置く
• セミナーカード（seminar-card）: 白いカードに画像・カテゴリ・タイトル・日時の表・説明文・申込ボタンをまとめる
• ニュース行（news-row）: 日付・緑枠のカテゴリバッジ・2行タイトル・右矢印を1行に並べ、細線で区切る
• 問い合わせ案内枠（contact-notice）: 赤い細線の枠に、ラベル・案内文・フリーダイヤルをまとめる

Do's and Don'ts

Do - セクションの頭は必ず「中央揃えの見出し＋緑の短い線」にする - 白地と薄グレー地を交互に置き、グレー地の上は白パネルにまとめる - 実績は大きな緑の数字で見せる - アイコンは緑と黒の線画で統一する - 各セクションの最後に緑枠のピルボタンで一覧へ誘導する

Don't - オレンジを問い合わせ以外のボタンに使わない - 濃い色や黒の背景セクションを入れない - 強いドロップシャドウやグラデーションボタンを使わない - 見出しを左揃えにしてセクションごとにばらつかせない - 緑の色味を何種類も混ぜない

Page Structure

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

1. ヘッダー（ナビゲーションと問い合わせ導線）: 白地。ロゴ・電話番号・オレンジの問い合わせボタン・グローバルナビを横に並べる
2. ファーストビュー（提供価値を一言で伝える）: 淡いグレーの写真背景に、太字の2行コピーとキーワードの緑強調、説明文、緑枠ボタン。右にお知らせのカードスライダー
3. 問い合わせ案内（電話とフォームの窓口を示す）: 赤い細枠の白ボックスにラベル・案内文・電話番号を入れる
4. ソリューション（ニーズ別）（悩みから入口を選ばせる）: グレー地の白パネルに、緑のアイコンカードを3列で8個並べる
5. ソリューション（業界別）（業界から入口を選ばせる）: 円形の写真＋緑文字のタイトルを入れた白カードを4列で並べる
6. 取引実績（信頼を示す）: ロゴを4列のグリッドで並べ、下に3つの実績数字ブロックを置く
7. 導入事例（具体的な成果を見せる）: 画面キャプチャのサムネイル付きカードを3列で並べる
8. 選ばれる理由（強みを3つにまとめる）: 円アイコン・緑の番号・太字タイトル・説明を3列で並べ、背景に大きな薄い欧文ロゴを敷く
9. セミナー（見込み客を獲得する）: グレー地に横長のセミナーカードを縦に3つ並べ、それぞれに緑の申込ボタンを付ける
10. ニュース（更新情報で鮮度を見せる）: 日付とバッジを並べたリスト。下にカテゴリリンクと一覧ボタンを置く
11. 最終CTA（問い合わせ・資料請求へ誘導する）: 緑の大きな面に白い2行見出しを置き、オレンジと白枠のボタン2つ、電話番号の帯、メルマガ登録の白帯を続ける

Imagery

• アイコンは黒の線画に緑を差したシンプルなもの（配信・人物・画面など）
• FVは業務シーンの写真を白っぽく淡くして背景に敷く
• 業界別の写真は円形に切り抜き、現場の様子が伝わるものを選ぶ
• 事例のサムネイルはノートPCの画面モックアップで見せる
• セミナーのバナーは登壇者の写真と大きな日付文字を組み合わせる
• 背景に大きな薄いグレーの欧文ロゴを透かしで入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではニーズカードを2列、業界カード・事例カードを1〜2列にする
• SP の FV はコピーを上、スライダーを下に縦に積む
• SP ではヘッダーナビをハンバーガーメニューにし、問い合わせボタンを固定する
• 実績数字の3ブロックは SP で縦に積む
• セミナーカードは SP で画像を上・情報を下にし、ボタンは横幅いっぱいにする
• PC の本文幅は約800pxで中央に置き、左右は背景色にする

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