DESIGN.md — 紺×黄×オレンジの人材派遣訴求 LP（Corporate Blue Staffing Dispatch LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、情報量多め・訴求型、力強い・インパクト
• キーワード: 法人向け・紺と黄の対比・オレンジのボタン・人物の切り抜き・図解・チェックリスト
• 地の質感: 薄い方眼の背景、斜線ストライプ、グレーのテクスチャ写真の背景
• 形: 角丸が小さめのカード、ピル型のラベル、斜めのリボン帯、下向き矢印
• 温度感: 寒色が主体。暖色の黄とオレンジで熱量を足す

Colors

• 地の色は白・方眼グレー・黄・濃紺の4種を、セクションごとに交互に切り替える
• 見出しの文字は紺。キーワードだけ黄色の地や黄色の文字で目立たせる
• CTA だけにオレンジのグラデーションを使い、ほかの要素には使わない
• 悩みのセクションはグレーのモノトーンの地に、紺のヘッダーを付けたカードを置く
• 本文中の強調は赤い太字に限る
• カテゴリラベルは紺・オレンジ・緑で色分けする
• button-primary は文字 #FFFFFF × 背景 #FD8302 のコントラスト比が 2.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B65E01、4.57:1）を使う。

Typography

• 見出しは極太のゴシックで組み、キーワードだけ文字を大きくして強弱を付ける
• 数字はほかの文字の1.5〜2倍に拡大して目立たせる
• 見出しをかぎ括弧型の線で囲む装飾を使う
• 本文は細めのウェイトで行間を広めにとる
• 悩みのセクションではキーワードを赤い太字にし、下線を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは SP で 1 列、PC で 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• CTA ブロック（ボタンと電話番号）は2〜3セクションおきに繰り返し置く
• カードは白地にして、背景の色面の上に浮かせる
• 人物の切り抜き写真は左右の端に寄せ、本文に少し重ねる
• 表は左に項目名・右に内容を並べた2列で組み、横罫線で区切る

Elevation & Depth

• 特長カードには薄いドロップシャドウを付ける
• CTA ボタンには下方向の影を付けて立体感を出す
• 悩みカードは影を付けず、紺のヘッダーで区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は背景を切り抜く。現場写真は角丸の四角か、斜めに傾けた台形に切る
• セクション境界: 基本は直線。解決への転換部分だけ大きな下向き三角の矢印にする
• CTA は角丸8px程度の横長の長方形にし、右端に三角の矢印を付ける
• ラベルはピル型にする
• 斜めの帯やストライプで動きを出す

Components

• 問い合わせ CTA（button-primary）: オレンジのグラデーションに白い文字と右向きの三角を載せた横長のボタン
• 電話番号ブロック（tel-block）: 小さな案内文に、受話器アイコンと紺の大きな番号を添える
• 特長カード（feature-card）: 白いカードに紺の線画アイコン・紺の見出し・本文を入れる。黄色の地の上に並べる
• チェックリスト（check-list）: 紺の半透明の帯に、チェックアイコンと白い太字を載せて縦に並べる
• 悩みのカード（trouble-card）: 紺のヘッダー（ピル型ラベルと悩みの一文）の下に、白地の解決文と写真3枚を斜めに並べる
• 色分けラベル（category-label）: ピル型の色帯に白い文字を載せて、職種の分類を示す
• お客様の声カード（voice-card）: 濃紺のストライプ地に白いカードを置く。角に黄色の三角を付け、右下に業種を入れる
• サービス切替タブ（tab-nav）: 青い地に、水色のグラデーションのピル型ボタンを格子状に並べる

Do's and Don'ts

Do - CTA と電話番号は必ずセットで繰り返し置く - 数字（拠点数・人数など）は大きく強調する - 業界ごとに悩みと解決を対にして見せる - 図解やグラフを使い、メリットを視覚的に伝える - ビジネススーツの人物の切り抜きで信頼感を出す

Don't - パステル調だけで組まない - オレンジを CTA 以外に多用しない - 細い明朝体の見出しにしない - 装飾のない白地を長く続けない - 写真に濃いフィルターをかけない

Page Structure

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

1. ファーストビュー（サービスの価値を一言で伝える）: 都市の写真の上に女性スタッフの切り抜きと巨大な紺の見出しを置き、黄色の帯のコピーと丸いバッジを添える
2. サービス概要（強みを要約する）: 青の地にパズルのイラストを置き、かぎ括弧で囲んだ見出しとチェックリスト5項目を並べる
3. CTA（問い合わせへ誘導する）: 方眼グレーの地にオレンジのボタンと電話番号を置く
4. 特長（選ばれる理由を6つ示す）: 黄色の地に、アイコン付きの白いカードを2列×3段で並べる
5. 訴求帯（サービス名を印象づける）: 濃紺の帯に黄色の巨大な文字を載せる
6. 対応職種（対応範囲を見せる）: 白いパネルに色分けラベルと職種のリストを並べ、男性の切り抜きを添える
7. 業種別の詳細（業種ごとの内容を説明する）: 青のグラデーションの地にタブを並べ、写真付きの白いパネルと水色の小見出しを置く
8. 悩みの提起（顧客の課題に共感する）: グレーの写真の地に吹き出しを置き、紺のヘッダー付きカードで悩みと解決を繰り返す
9. コストメリット（費用面の利点を図で示す）: オレンジの矢印で転換し、波形のグラフ・チェックリスト・人物の切り抜きを配置する
10. お客様の声（実績の安心感を伝える）: 濃紺のストライプ地に、白いカードを2列で並べる
11. 拠点紹介（全国対応を示す）: ドットで描いた日本地図に、地域ごとの拠点リストを引き出し線で結ぶ
12. 会社概要（信頼性を補強する）: メディア掲載のバナー、動画、横罫線の表で組む
13. 社会貢献（企業姿勢を伝える）: スライダー形式で写真付きのカードを並べる
14. フッター（コピーライトを表示する）: 紺の細い帯に白い文字を載せる

Imagery

• スーツ姿の男女を笑顔で撮り、白背景で切り抜く
• 倉庫・飲食・イベントなど、働く現場の明るい写真を使う
• 紺1色の線画アイコンにオレンジのアクセントを入れる
• パズルピースや人型のシルエットで、人材のマッチングを表現する
• 背景はグレーのモノトーンの写真や、群衆のシルエットにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では特長カード・声カードを1列に積む
• タブは SP で2列にするか、横スクロールにする
• 人物の切り抜きは SP で縮小し、見出しの下に回す
• 電話番号は 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 行書くと起動時に読み込まれる。