DESIGN.md — 橙×紺の建設業向け採用支援 LP（Orange Construction Recruiting BtoB LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 情報量多め・訴求型、信頼・誠実、ポップ・元気、力強い・インパクト
• キーワード: オレンジ帯・紺の強調ボックス・作業員イラスト・チェックリスト・白カード・繰り返し CTA
• 地の質感: フラットな単色面。ファーストビューだけ黄色〜オレンジのグラデーションと斜めの面、セクションの一部に薄い方眼の地模様を敷く
• 形: 角丸 8px 前後のカード、ピル型ボタン、下向き三角の区切り、左右の斜線（＼／）で挟むサブ見出し
• 温度感: 暖色寄り。オレンジとクリームの温かさを紺で引き締める

Colors

• 地は白・クリーム・ライトグレーの順に交互に変えて、セクションの切れ目を見せる
• CTA を置く帯はオレンジ一色で塗り、中に白カードを 2 枚並べる
• 結論や問いかけの一文は紺のボックスに白文字で入れる
• 本文中の強調語はオレンジ文字か黄マーカーにして、1 行に 1〜2 箇所までに抑える
• チェックアイコン・番号バッジ・FAQ の Q はオレンジで揃える
• FV とフォームは黄→オレンジのグラデーション地にする
• button-primary は文字 #FFFFFF × 背景 #ED7D02 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B56002、4.53:1）を使う。
• cta-band は文字 #FFFFFF × 背景 #F18104 のコントラスト比が 2.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#B25F03、4.63:1）を使う。

Typography

• 見出しは中央揃えの太ゴシックで組む。キーワードはオレンジにするかマーカーを引く
• サブ見出しは「＼ ／」の斜線で左右を挟む
• 強調したい語には上に傍点（オレンジの点）を打つ
• 数字は大きく、単位は小さくして差をはっきりつける
• 本文は 13px 前後で 1 行を短めに組み、中央揃えのリード文も使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム（PC はカード 2〜4 列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地の色を全幅で切り替える
• カードはグリッドで均等に並べる（PC は 2〜4 列、SP は 1〜2 列）
• CTA 帯はページ中で 3 回以上繰り返す
• 人物イラストはテキストボックスの横にはみ出させて置く
• FAQ は Q 行と回答の下にオレンジの細線を引いて区切る

Elevation & Depth

• カードの基本はフラット。白カードを色地の上に置いて浮かせる
• フォームパネルには弱いドロップシャドウ（0 4px 12px 程度）をつける
• 解決策のボックスは白地に細い枠線と影を組み合わせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは白抜きで置くか、白い円の中に収める。ロゴは矩形のまま並べる
• セクション境界: 直線で区切るのが基本。悩み提起の後だけ紺の下向き三角を置き、FV の下端は斜めにカットする
• ボタンはすべてピル型にする
• 番号バッジとアイコンは円形にする
• 料金カードは角丸大＋太いオレンジまたは黄の枠線にする
• 紺の強調ボックスは角丸を小さくする

Components

• 主 CTA ボタン（button-primary）: オレンジのピル型ボタンに白い太字。フォームの送信と無料相談に使う
• 資料 DL ボタン（button-secondary）: 紺のピル型ボタンに白文字と丸いダウンロードアイコン
• CTA 帯（cta-band）: オレンジの全幅帯に斜線つきの見出しと太字の見出しを置き、イラスト入りの白カード 2 枚を並べる
• 悩みカード（problem-card）: グレーの角丸カードに悩みを短く書き、キーワードだけ太字にする。3 列×2 段で並べる
• チェックリスト（check-list）: オレンジのチェックアイコンと短い文。強調語はオレンジ文字にする
• 紺の結論ボックス（navy-callout）: 紺の帯に白文字の一文。カギ括弧の見出しと黄マーカーを組み合わせる
• POINT カード（point-card）: 黒の細枠の白カード。上辺に「POINT」と大きなオレンジの数字を重ね、イラストと説明を入れる
• 料金カード（pricing-card）: 黄またはオレンジの見出しヘッダーの下に、大きな月額の数字、初期費用の丸バッジ、稼働時間の帯を入れる
• FAQ 項目（faq-item）: オレンジの「Q.」と質問、その下に回答。下にオレンジの細線を引く
• リードフォーム（lead-form）: オレンジのヘッダーとクリームのパネル。項目ラベルの横にオレンジの必須バッジ、入力欄は白、最後に同意チェックとピル型の送信ボタン

Do's and Don'ts

Do - ヘルメットや作業着の人物イラストを各セクションに添えて、業界らしさを出す - CTA 帯を課題・解決策・事例の後ごとに繰り返す - 強調語はオレンジ文字・黄マーカー・傍点で目立たせる - 実績は大きな数字＋短い単位で見せる - 地の色を交互に変えて、長いページにリズムを作る

Don't - オレンジと紺以外の強い色を足さない - 写真を全面に敷いて重い印象にしない - 角のとがったボタンを使わない - 本文を長い段落のまま詰めて並べない - 強調色を 1 文に何箇所も使わない

Page Structure

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

1. ファーストビュー（対象職種と価値を示し、資料請求を促す）: 黄→オレンジのグラデーション地。箱抜き文字のコピー、対応範囲のチェックリスト、人物イラスト、実績の丸バッジ、右側のフォーム
2. 悩みの提起（採用の悩みに共感する）: 方眼の白地にマーカー付きの見出し。グレーの悩みカードを 6 枚並べ、最後に紺の下向き三角を置く
3. 原因の再定義（問題は手法にあると気づかせる）: クリーム地に人物イラストと白いチェックリストのボックス、紺の結論帯
4. 課題と改善例（業界の壁と解決策を示す）: グレー地に円形イラスト＋課題見出しを 4 列。下に吹き出し状の白ボックスで改善例のチェックリスト
5. 支援内容（サービスの範囲を伝える）: クリーム地に紺のボックス。続けてオレンジ帯にアイコン付きの白カードを 2×2 で並べる
6. ノウハウ蓄積・支援例（継続的な価値を示す）: オレンジのヘッダー付きカードを 3 列。下部の線を 1 本に束ねて結論の一文へつなぐ
7. CTA（相談と資料 DL へ誘導する）: オレンジ帯に白カードを 2 枚並べ、オレンジと紺のボタンを置く
8. 3 つのポイント（強みを整理する）: クリーム地に POINT 番号付きの枠カードを 3 列
9. 料金プラン（価格を明示する）: 黄枠とオレンジ枠の料金カードを 2 つ並べ、大きな数字で見せる
10. 媒体ラインナップ（対応範囲の広さを示す）: 白地にロゴを 4 列のグリッドで並べ、月桂冠の飾りで媒体数を強調する
11. 成功事例（実績で信頼を得る）: グレーの角丸パネルに番号バッジ、イラスト、白い数値カードを入れる
12. よくある質問（不安を解消する）: 白地に Q 行とオレンジの下線
13. フォーム・フッター（問い合わせを獲得する）: 黄グラデーション地にフォームパネルと人物イラスト・吹き出し。下に濃灰のフッター

Imagery

• ヘルメット・反射ベスト・作業着の人物をフラットイラストで描く（オレンジ・紺・肌色・グレー）
• 課題イラストは白い円の中にシーンとして収める
• アイコンは線とオレンジ・黄の面で描く簡素なスタイルにする
• 資料の表紙モックアップを斜めに重ねて置く
• 工事コーンやヘルメットの小物を飾りとして散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP ではカード 3〜4 列を 1〜2 列に落とす
• FV のフォームはコピーの下に回す
• CTA 帯の白カード 2 枚は縦に積む
• 料金カードは縦に並べ、数字は 40px 程度に抑える
• 媒体ロゴは 3 列に減らす

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