DESIGN.md — 黄×黒の線画イラスト人材マッチングLP（Bold Yellow Black Staffing SaaS LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、信頼・誠実
• キーワード: 黄×黒・太枠カード・ピル型・線画イラスト・マーカー下線・数字訴求
• 地の質感: ベタ塗りのフラットな面。ファーストビューだけ黄色の斜めストライプ柄
• 形: 角丸の大きいカードと完全ピル型のバー・ボタン。黒い 2px 程度の枠線
• 温度感: 明るく元気で温かい。青の CTA が締め色になる

Colors

• 地は黄（訴求の中心）→薄グレー（料金・事例）→白（FAQ）→黒（フッター）の順に切り替える
• 黄色の地の上には、黒枠の白カードを必ず置く
• 黒いピル型バーの中では、強調したい語だけを黄色の文字にする
• 主 CTA は青に統一する。黄色のボタンは料金シミュレーションなどのサブ動作だけに使う
• 資料請求ボタンは白地に青の枠と青文字にする
• 本文中の強調は、太字か青文字で行う

Typography

• 見出しはすべて太いゴシックにする
• 数字は本文より 2〜3 倍大きくし、「円」「万人」などの単位は小さく添える
• 要点の語には、黄色のマーカー下線を引く
• 「全部、〜」のような短い言い切りは、左右を「\ /」で挟んで強調する
• 注釈は 10px のグレー文字で、該当するブロックの直下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードとボタンは 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 黄色の地の中に、左右 20px の余白をとって黒枠の白カードを置く
• 各カードの上辺には「理由N」のラベルを、枠線をまたぐ位置に載せる
• カード内の機能説明は、黒バー＋クリーム色のパネルの縦積みにする
• 申込の流れは、白カードの間を黄色の下向き三角でつなぐ
• CTA はファーストビュー直下・職種一覧の後・ページ末尾に置く

Elevation & Depth

• 影は基本的に使わず、黒い枠線で立体感を出す
• CTA ボタンの下辺には、濃い色の帯を 3px ほど付けて押せる印象を出す
• 料金ボックスには、グレーのずらし影を付ける

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸の小さい長方形。職種写真はカード上部いっぱいに配置する
• セクション境界: 直線で背景色を切り替える
• カードの枠線は黒の 2px
• 黒の見出しバーは完全ピル型にし、左に黄色の丸アイコンを置く
• バッジとタブもピル型にする
• CTA の上には、白地に青枠の小さなピル型ラベルを重ねる

Components

• 主 CTA ボタン（button-primary）: 青のピル型。上に、短い補足を書いた白い小ラベルを重ねる
• 資料請求ボタン（button-secondary）: 白地に青枠・青文字のピル型。上に青枠の小ラベルを付ける
• 理由カード（reason-card）: 黒枠の白い大きなカード。上辺に「黒地のラベル＋見出し」のバーを重ねる
• 黒ピル見出しバー（pill-bar）: 黒いピル型。左に黄色の丸い矢印、中央上に白い番号ラベル、見出しの一部を黄色にする
• マーカー下線見出し（marker-heading）: 中央揃えの太字見出しの下に、黄色の太い下線を引く
• 料金ボックス（price-box）: 黄色の地を黒枠で囲み、0 円を特大で表示する。費用内訳は行で並べる
• カテゴリタブ（tab-pill）: 選択中は黒地に白文字、未選択はグレー地に黒枠
• FAQ 行（faq-row）: 黄色の丸に「?」のアイコン、太字の質問、右端に＋。下に区切り線を引く
• ステップカード（step-card）: 白い角丸カードに線画アイコンと番号付きの見出しを載せる。カードの間を黄色の三角でつなぐ
• チェックリスト（check-list）: 青い丸のチェックアイコン＋太字の青文字で項目を並べる

Do's and Don'ts

Do - 黄色の地には、黒枠の白カードを組み合わせる - 数字の実績は、大きな太字に黄色の下線を付けて見せる - 主 CTA は青のピル型にし、上に補足ラベルを付ける - イラストは黒の線画に黄色のベタ塗りで統一する - 注釈は該当箇所のすぐ下に小さく入れる

Don't - グラデーションや強い影を多用しない - 黄色の地に、黄色のボタンを直接置かない - 明朝体や細い書体を見出しに使わない - 青を CTA と強調語以外に広げない - 角の立った四角いボタンにしない

Page Structure

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

1. ファーストビュー（サービスの価値と無料であることを伝える）: 黄色の斜めストライプの地に、人物イラストと白い円形バッジ（数字）を配置する
2. 導入企業ロゴ（信頼性を示す）: 白地にロゴを横一列で並べる
3. CTA（早い段階で申込を促す）: 青の主ボタンと白枠のサブボタンを 2 つ並べる
4. サービス概要（仕組みを図で説明する）: 短い本文と、2 人の人物と端末を矢印で結ぶ線画。下に動画を置く
5. 選ばれる理由（3 つのメリットを訴求する）: 黄色の地に、黒枠の理由カードを 3 枚並べる。中には黒ピルバー・数字・スライダーを入れる
6. 機能紹介（細かな機能の安心感を伝える）: 黒ピルバーの下にクリーム色のパネルを置き、図とチェックリストを入れる
7. 募集できる仕事（対応する職種を見せる）: 写真付きの白カードを 2 列で並べ、最後に CTA を置く
8. 料金（成果報酬型であることと計算例を示す）: 薄グレーの地に白カードを置き、黄色の料金ボックスと計算式を入れる。最後に黄色のボタン
9. 導入事例（実績と顧客の声を示す）: 黒帯の大きな数字見出しとタブを置き、写真付きカードをスライダーで見せる
10. よくある質問（不安を解消する）: 白地のアコーディオンを、区切り線で並べる
11. 申込の流れ（手順を明確にする）: 7 つのステップカードを、黄色の三角でつないで縦に並べる
12. 固定 CTA とフッター（最終的なコンバージョン）: 2 つのボタンを並べ、その下に黒いフッター

Imagery

• 黒い太めの線画に、黄色のベタ塗りだけを使った人物・手・端末のイラスト
• 職種写真は、明るい職場で働く人を自然光で撮ったスナップ
• 画面のモックアップはスマホの実機フレームで見せる
• ファーストビューは黄色の斜めストライプの背景に、笑顔のキャラクターを置く
• アイコンは黄色の丸の中に黒い記号を入れる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の約 50% 幅のコンテナに、同じカード構成を置く
• PC では実績数字を 3×2 のグリッドで追加表示する
• PC では概要の本文と動画を横に並べる
• 職種カードは PC で 3 列にする
• 事例スライダーは PC で 3 枚同時に表示する
• ページ末尾の CTA は、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 行書くと起動時に読み込まれる。