DESIGN.md — 赤×白の曲線ウェーブ採用支援サービス LP（Bold Red Wave Recruitment SaaS LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 赤ベタ面・曲線ウェーブ・グラデーションCTA・データ可視化・線画イラスト・大きな角丸パネル
• 地の質感: フラットな単色面が中心。赤面には大きな欧文の透かし文字を淡く敷く。
• 形: 大きな角丸パネルとピル型ボタンを使い、セクションの境界は S 字の曲線にする。
• 温度感: 赤で熱量を出しつつ、白とグレーの余白でビジネスらしく冷静に見せる。

Colors

• 地は白と薄グレーを交互に使い、赤ベタ面はコンセプト紹介と最終 CTA の 2 か所だけに置く。
• 主 CTA は必ずオレンジ→赤の横グラデーションにし、白文字を乗せる。
• サブボタンは白地に細いグレー枠と黒文字にする。
• 英字の小見出し・数値・Q マークは赤の文字色で強調する。
• 赤面に置くカードは淡いピンクにし、赤とのコントラストを保つ。
• グラフは赤の棒・ドーナツに、背景としてグレーや淡いオレンジを添える。

Typography

• 見出しは太字ゴシックで大きく、改行を詰めて塊として見せる。
• 見出しの上に、赤の英字ラベルを 1 語だけ添える。
• 数値は大きくし、単位を小さくする。
• 赤面には大きな欧文を極薄の透かしとして敷く。
• 本文は行間 1.9 前後でゆったり組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカードを 2 カラム、データを 2 列に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 24px（375px 幅換算）
• 薄グレーの大きな角丸パネルの中に白カードを重ねる。
• データ項目同士は赤の点線で区切る。
• CTA は主ボタンとサブボタンを縦に 2 つ並べ、数セクションごとに繰り返す。
• 見出しは左揃えにする。最終 CTA とよくある質問の見出しだけ中央揃え。
• 比較表は 3 列にし、角丸の枠で囲む。

Elevation & Depth

• 白カードはごく薄い大きめの影で浮かせる。
• ボタンには影を付けず、フラットにする。
• 比較表は細い枠と淡い影で囲む。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: イラストは白い正円の中に配置する
• セクション境界: 白と赤の境界は大きな S 字の曲線ウェーブ
• パネルは上の角を 32px 程度の大きな角丸にする。
• ボタンはすべてピル型にする。
• 番号は手書き風の楕円の線で囲む。
• NEW バッジは赤いギザギザの円形にする。

Components

• グラデーション CTA（button-primary）: オレンジ→赤のピル型ボタンに白い太字を乗せる
• 資料請求ボタン（button-secondary）: 白地に細いグレー枠を付けたピル型ボタン
• 詳細リンクボタン（button-link）: 赤ベタのピル型ボタン。文字の前に矢印を付ける
• 番号付き特長カード（feature-card）: 楕円で囲んだ番号、線画イラスト、赤の英字ラベル、見出し、本文、ボタンの順に並べる
• データ可視化ブロック（data-block）: 赤い小見出し、結論の見出し、本文の下に、棒グラフかドーナツチャートを置く
• NEW バッジ（badge-new）: カードの右上角に重ねる赤いギザギザの円
• 比較表（compare-table）: ヘッダーはチャコール地に白文字。行は白とグレーを交互にする
• FAQ アコーディオン（faq-item）: 左に赤い Q.、右に＋を置き、項目間を罫線で区切る
• 最終 CTA カード（cta-card）: 赤面の上に置く淡いピンクのカード。見出し、説明、ボタンを中央揃えで並べる

Do's and Don'ts

Do - 赤ベタ面は曲線で白地から切り替える。 - 主 CTA は必ずグラデーションのピル型にする。 - 実績は数値とグラフで見せる。 - イラストは黒の線画に赤を差し色として入れる。 - 余白は広くとり、要素を詰め込まない。

Don't - 赤以外の強い色をブランド色として足さない。 - 角張ったボタンや影の強いボタンを使わない。 - 写真を背景いっぱいに敷かない。 - 明朝体や装飾書体を使わない。 - 赤面を連続させない。

Page Structure

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

1. ファーストビュー（価値を一言で伝え、問い合わせへ誘導する）: 白地に太字の大見出し 3 行、サブコピー、CTA 2 つを置く。右下から赤のウェーブを差し込む
2. サービス概要（運営元と仕組みを説明する）: 赤ベタ面に白文字を置き、欧文の透かしを敷く。2 者の関係は白丸のイラストと矢印で図にする
3. 導入企業ロゴ（信頼を示す）: 白地にロゴを横一列に並べ、横スクロールさせる
4. 特長（支援内容と料金の柔軟さを伝える）: 薄グレーのパネルに、番号付きの白カードを 2 枚置く
5. データ実績（登録者の規模と質を数値で示す）: 大きな赤い欧文見出しと赤線で始め、棒グラフとドーナツチャート 2 つを点線で区切る
6. 中間 CTA（行動を促す）: グレー地にグラデーションボタンと白ボタンを縦に並べる
7. サービス紹介（2 つのサービスを紹介する）: 白カードに、英字ラベル、中央揃えの見出し、本文を入れる。新サービスには NEW バッジを付ける
8. 比較表（サービスの違いを整理する）: 3 列の表にし、チャコールのヘッダーと縞模様の行で組む
9. よくある質問（不安を解消する）: 角丸パネルにアコーディオンを 4 項目並べる。パネルの背後は赤ウェーブに切り替わる
10. 最終 CTA（資料請求か問い合わせに誘導する）: 赤ベタ面に白い見出しを中央揃えで置き、その下にピンクのカードを 2 枚並べる
11. フッター（運営者情報を載せる）: 白地にロゴ、社名、許可番号を小さく置く

Imagery

• 人物や手は黒の細い線画イラストで描き、服などに赤を差し色として入れる。
• 人物のイラストはフラットな描き方で、白い正円の中に収める。
• 英語のサービス名は手書き風の楕円の線で囲む。
• グラフはフラットな赤の棒にし、背景に淡いオレンジの右上がり面を入れる。
• 写真は使わない。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC ではヘッダー右に白ボタンと CTA を並べる。
• PC ではサービス概要を左テキスト・右図の 2 カラムにする。
• PC では特長カードとデータを 2 列に並べる。
• PC では CTA 2 つを横並びにし、最終 CTA のカードも横並びにする。
• PC ではロゴを一列に並べて表示する。

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