DESIGN.md — 緑×黄×黒の建設業向けウェビナーLP（Green and Yellow Construction Webinar LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 力強い・インパクト、信頼・誠実、シンプル・ミニマル、情報量多め・訴求型
• キーワード: 建設業・ウェビナー・黒帯見出し・緑ヘッダーカード・黄色CTA・フォーム完結
• 地の質感: FVだけ斜めストライプと線画イラストを使い、以降はフラットな白カードと薄灰の地で組む
• 形: 角はほぼ直角。カードは浅い影付きの四角。ボタンは小さい角丸
• 温度感: 緑と黄のやや明るい寒暖ミックス。黒が引き締め役

Colors

• 緑は地として使う。FV全面とカードヘッダーに限る
• 黄は申込CTA、チェックアイコン、点線の下線、上部の告知帯に絞る
• 黒は大見出しの帯、ヘッダー、フッター、補助ボタンに使う
• 本文エリアは薄灰の地に白カードを重ねて層を作る
• フォームの必須マークは黄色の小さな*で付ける

Typography

• FVの見出しは黒帯に白の極太文字。帯を少し傾けて段違いに積む
• 強調したい語は白帯に黒文字のかぎ括弧付きで最大級にする
• カードヘッダーは中央揃えの白太字
• 本文は左揃えで小さめ、行間を広く取る
• 時刻やラベルは灰色の太字、値は黒の太字で上下に並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央の細いカラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 28px、基本単位 8px、カード内 14px（375px 幅換算）
• カードは画面幅の約92%で中央に置き、影は浅くする
• カードの上部は緑ヘッダー、下は白い本文の2段構成
• カード同士の間隔は約28px
• フォームはカードにせず、薄灰の地に直接置く
• スケジュールは時刻と内容を細線で区切る

Elevation & Depth

• カードに薄い影（0 2px 6px rgba(0,0,0,.06)）
• CTAボタンには軽いドロップシャドウ
• フォームの入力欄は影なし、灰色の枠線だけ

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 線画イラストは切り抜きで使い、FVの左右端に配置
• セクション境界: 直線。FV下は濃緑の帯で区切る
• カードとヘッダーは角丸なし
• 入力欄とボタンは4〜8pxの角丸
• 見出しの帯は平行四辺形ぎみに傾けてもよい

Components

• 黒帯見出し（hero-black-band-title）: 黒帯に白い極太文字を置いた帯を段違いに積む。強調語だけ白帯に黒文字にする
• 黄色グラデCTA（button-primary）: 上段に小さな補足、下段に申込文言、右端に»を置く。横いっぱいの黄色ボタン
• 緑ヘッダー情報カード（card-green-header）: 緑の帯に白い中央見出しを置き、その下に白い本文エリアを続ける
• チェックリスト（check-list-item）: 黄枠のチェックアイコンと、黄色の点線下線を引いた文言の組
• タイムスケジュール行（timeline-row）: 灰色太字の時刻、細線、内容の順に並べる。登壇者名は灰色のラベル帯に入れる
• フォーム入力欄（form-input）: 白地に灰色枠の入力欄。ラベルの横に黄色の必須*を付ける
• 送信ボタン（button-submit）: フォーム下に置く、黄色の平たい横長ボタン
• 黒の詳細ボタン（button-secondary）: 企業紹介カード内に置く黒い四角ボタン。白文字で、右に>を付ける

Do's and Don'ts

Do - FVは緑地、斜めストライプ、黒帯見出しの3点セットで組む - 情報はすべて緑ヘッダーの白カードに区切って入れる - 申込の導線は黄色に統一する - 作業服のビジネスパーソンを線画イラストで左右に置く - ラベルは灰色、値は黒太字にして読み分けをはっきりさせる

Don't - 黄色をCTA以外の大きな面に使わない - カードに大きな角丸を付けない - 写真を多用しない（イラストとフラット面が基本） - フォームに装飾を足しすぎない - 緑以外の色をヘッダーに混ぜない

Page Structure

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

1. ヘッダー・告知帯（対象業種と無料であることを示す）: 黒ヘッダーにロゴ。その下に黄色帯を敷き、黒文字と黒地白抜きの『無料』バッジを入れる
2. ファーストビュー（2つのテーマを強く打ち出す）: 緑の斜めストライプ地に共催ロゴを置き、黒帯見出しを2組、×でつなぐ。左右に人物イラスト、下に濃緑帯と白い配信形態の文言
3. CTA（すぐ申込へ誘導する）: 黄色グラデーションの横長ボタンに、補足の小文字と»を付ける
4. 概要（内容と対象を説明する）: 緑ヘッダーカードに本文を2段落と注記を入れる
5. おすすめ対象（自分ごと化させる）: チェックアイコンと黄色点線下線の3項目。PCでは横3列
6. タイムスケジュール（進行を見せる）: 時刻、区切り線、内容を縦に並べ、登壇者名は灰色ラベル帯に入れる
7. 配信詳細（時間・方法・主催を伝える）: 灰色のラベルと黒太字の値を縦に積む
8. 申込フォーム（コンバージョンを取る）: 中央に太字の見出しと説明。入力欄、セレクト、同意チェックを縦に並べ、黄色の送信ボタンで締める
9. 主催企業紹介（信頼性を補う）: 白カードに大きなロゴ、太字タイトル、中央揃えの説明、黒の詳細ボタン
10. フッター（規約などへのリンク）: 黒地に白の下線付きリンクを横に並べ、その下にコピーライト

Imagery

• 作業服とスーツ姿の人物を、黒線と緑系の淡い塗りでフラットに描いた線画イラストにする
• 人物はヘルメットやバインダーなどの小物を持ち、ガッツポーズで前向きな印象にする
• FVの背景は緑地に、半透明の明るい緑の斜めストライプを重ねる
• ロゴは白い角丸ボックスに入れて共催表記にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCのFVは横長にし、2つの見出しを×で左右に並べ、人物は両端に置く
• PCの本文カードは幅約60%で中央に置く
• おすすめ項目はPCで3列
• スケジュールはPCで時刻を左列、登壇者ラベルを右側に置く
• 配信詳細はPCでラベルと値を横並びにする
• 企業紹介はPCでロゴを左、説明を右の2カラムにする

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