DESIGN.md — オレンジ×クリームの介護人材マッチング LP（Bright Orange Care Staffing BtoB LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、信頼・誠実、情報量多め・訴求型、親しみ・手作り感
• キーワード: ビタミンオレンジ・クリーム地・グラデーションCTA・マスコット・大きな数字・白カード
• 地の質感: フラットな面に、淡いドットや放射状のグラデーションを薄く重ねる。白カードには柔らかい影を付ける
• 形: 角丸カード、ピル型ボタン、円形のアイコンと人物の切り抜き
• 温度感: 暖色が中心。CTA だけ青〜紫の寒色グラデにして目立たせる

Colors

• 地は白とクリーム／ピーチのグラデーションを交互に使い、間にオレンジの CTA 帯をはさむ
• 主 CTA は青→紫のグラデーションのピル型。オレンジの地の上でも目立つ補色にする
• サブ CTA は白〜淡い紫のピル型に濃い文字で、主 CTA と差をつける
• 訴求したい数字はピンク→紫のグラデ、またはオレンジで大きく見せる
• 見出しは濃いグレー。重要なキーワードだけオレンジに
• 比較表では自社の列だけオレンジ枠で囲み、他社の列はグレーにする
• button-primary は文字 #FFFFFF × 背景 #327DDC のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#2575DA、4.53:1）を使う。
• stat-card は文字 #C766D8 × 背景 #FFFFFE のコントラスト比が 3.32:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#B83DCE、4.57:1）を使う。
• step-row は文字 #EB8934 × 背景 #FFFFFF のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B65E12、4.57:1）を使う。

Typography

• 見出しは中央揃えにし、下に短いオレンジのグラデ線を引く
• 数字は本文の2〜3倍の大きさにし、単位は小さく添える
• 強調したい語だけ文字を大きくし、オレンジにする
• CTAの上には小さな吹き出しラベルで補足を付ける
• 本文は14px前後、行間は1.8でゆったり組む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メリット・仕事の種類・担当者は PC で 3〜4 列、SP では縦積みか 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに見出し→リード文→カード群の順で組む
• CTA帯はセクション2〜3個ごとに入れる。右側に人物の切り抜き写真を置く
• カードは白地に影を付け、グリッドに等幅で並べる
• 流れのSTEPは番号・名前・説明を横に並べ、行の間に線を引く
• フォームは白地に1カラムで組み、入力欄は全幅にする

Elevation & Depth

• 白カードには薄い影（0 2px 8px rgba(0,0,0,0.08)）を付ける
• CTAボタンには少し強めの影を付けて浮かせる
• FAQの各行は白カードにして、薄い影で区切る
• 人物の切り抜き写真は、帯からはみ出すように重ねる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 人物は背景を抜いて切り抜く。スタッフは円形、事例写真は角丸の長方形にする
• セクション境界: 直線で区切り、地の色を切り替える（白・クリーム・オレンジ）
• ボタンは全てピル型にし、右端に丸い矢印アイコンを付ける
• ラベルや吹き出しは角丸、またはピル型にする
• 比較表で自社の列は角丸の太いオレンジ枠にする
• 円形のイラスト台座で図解をまとめる

Components

• 主CTAボタン（button-primary）: 青→紫グラデのピル型ボタンに白文字と丸い矢印を付け、上に小さな吹き出しラベルを載せる
• 資料請求サブボタン（button-secondary）: 白〜淡い紫のピル型ボタンに濃い文字を置き、主CTAと横に並べる
• オレンジCTA帯（cta-band）: オレンジの全幅帯にCTAを置き、右に人物の切り抜きを配置する
• 下線付きセクション見出し（section-heading）: 中央揃えの太字見出しの下に、短いオレンジのグラデ線を引く
• 数字訴求カード（stat-card）: 白カードにイラストと大きなグラデ数字を置く
• 比較表（comparison-table）: 自社の列をオレンジの見出しと枠で強調する。◎は自社、△×は他社に使う
• STEP行（step-row）: オレンジのSTEP番号・太字の名前・説明文を横に並べ、行の間に線を引く
• FAQアコーディオン（faq-item）: 白カードの左に紫のQ、右に紫の丸い＋アイコンを置く
• 悩みの吹き出し（speech-bubble）: 淡いピンクの角丸吹き出しに短い悩みを書き、線画の人物の上に置く
• 資料請求フォーム（contact-form）: 上にオレンジのヘッダー帯を置く。淡いグレーの入力欄を並べ、ティールの送信ボタンを付ける

Do's and Don'ts

Do - オレンジ帯とクリーム地を交互に使い、リズムを出す - CTAは青紫のグラデにして、暖色の中で目立たせる - 数字や実績を大きく見せ、短い注釈を添える - マスコットのイラストを図解・見出し脇・吹き出しに繰り返し出す - カードは白地・角丸・薄い影でそろえる

Don't - 暗い色や黒の地は使わない - CTAをオレンジにしない（地に埋もれてしまう） - 見出しを明朝体にしない - 角ばったボタンや枠線だけのボタンを主CTAにしない - 本文を詰めて組まない

Page Structure

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

1. ファーストビュー（実績の数字とNo.1で信頼を得て、すぐ申込へ誘導する）: オレンジの全面地に大きな白い数字を置き、右に笑顔の人物を3名。下にCTAを2つ並べる
2. 導入企業ロゴ・受賞歴（社会的証明）: 白地にロゴを横一列に並べ、その下に受賞歴をピル型ラベルで並べる
3. 対応エリア・実績（規模と全国対応を示す）: クリーム地に数字カードを2つと日本地図のカードを置く
4. CTA帯（問い合わせを促す）: オレンジ帯にグラデのボタンと人物の切り抜きを置く
5. サービス概要（仕組みを図解する）: 円形のイラスト2つの間にマスコットを置き、矢印でつなぐ
6. メリット3つ（導入の利点を伝える）: 番号付きの3列。円形のイラストに短い説明を添える
7. 依頼できる仕事（対応職種の幅を示す）: 写真付きの白カードを3列並べ、人物を円形に切り抜いて添える
8. 料金（低コストを訴求する）: グラデの巨大な0円と料金の内訳ボックスを並べる
9. 比較表（競合との差を示す）: 3列の表で自社の列だけオレンジで強調する
10. 利用の流れ（手軽さを伝える）: オレンジのバーとSTEP01〜04の行を並べる
11. 担当者のサポート（不安を解消する）: 悩みの吹き出しを付けた線画イラストの下にスタッフカードを4枚並べる
12. 導入事例（実例で信頼を得る）: 写真付きカードを3列並べ、右下に続きを読むリンクを置く
13. よくある質問（疑問を解消する）: 白カードのアコーディオンを10件縦に並べる
14. 資料請求フォーム・フッター（コンバージョンを得る）: オレンジのヘッダーの下に1カラムのフォーム。最後にグレーの注釈帯とフッターを置く

Imagery

• 人物は明るいオレンジのポロシャツを着た笑顔の切り抜き。ピースなど親しみのあるポーズにする
• 介護現場の写真は自然光で明るく、利用者とスタッフが関わる場面を撮る
• マスコットは丸みのあるクマのキャラクター。オレンジと黄色で描く
• 図解はフラットなパステル調のイラスト。円形の台座に載せる
• 悩みは線画の人物と淡いピンクの吹き出しで表す
• 背景には淡いドットや光のグラデーションを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは幅約800pxの中央寄せで、カードを3〜4列に並べる。SPは1〜2列に落とす
• FVの人物写真は、SPでは見出しの下か背景に回す
• CTAの2つ並びは、SPでは縦積みの全幅ボタンにする
• 比較表はSPで項目列を細くするか、横スクロールにする
• CTA帯の人物は、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 行書くと起動時に読み込まれる。