DESIGN.md — 若葉グリーン×オレンジCTAの介護職採用LP（Fresh Green Care Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、信頼・誠実、やさしい・柔らかい、情報量多め・訴求型
• キーワード: 若葉グリーン・オレンジCTA・数字訴求・笑顔の人物写真・黄色マーカー・番号付き特長
• 地の質感: 白と淡い黄緑の地を交互に敷くフラットな面。ボタンだけに立体感のある影をつける
• 形: 角丸カード、ピル型ボタン、円形の番号バッジと数字バッジ
• 温度感: 明るく暖かい。緑で落ち着きを、オレンジと黄で元気さを出す

Colors

• 地は白と淡い若葉色を交互に敷き、セクションの区切りにする
• 見出しと帯は緑で統一し、オレンジは申込CTAと数字の強調だけに使う
• 強調語には黄色の半透明マーカーを下に引く
• FAQや会社概要は淡いミントの面にまとめる
• ステップの枠は黄色ヘッダーとクリーム地で暖かく見せる
• グラフは緑系の濃淡だけで塗り分ける
• button-primary は文字 #FEFBEA × 背景 #F49502 のコントラスト比が 2.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A66501、4.51:1）を使う。
• number-badge は文字 #2BA363 × 背景 #FEFEFE のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#238551、4.58:1）を使う。
• sticky-footer は文字 #FEFBEA × 背景 #EC7643 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#C74A14、4.57:1）を使う。

Typography

• FVと情緒的な見出しは明朝、情報系はゴシックで分ける
• 数字は本文の2〜3倍に大きくし、単位は小さくする
• 見出しは中央揃え、本文は左揃え
• 強調語は太字と緑かオレンジ、またはマーカーで目立たせる
• CTA文字は極太で2行に分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、数字バッジのみ 3 列
• 本文ブロックの幅: 画面幅の約 72%
• 余白: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左右に約14%の余白をとり、中央に細く置く
• CTAはセクション2〜3個ごとに同じ形で繰り返す
• CTAの上に『今なら〜』を斜線ではさんだ一言を置く
• 特長は番号バッジ→見出し→区切り線→本文→図の順に並べる
• 理由カードと募集要項表は横スクロールにする

Elevation & Depth

• CTAボタンは下に濃いオレンジの縁と柔らかい影をつけ、押せるように見せる
• 番号バッジは白い円に淡い緑のぼかし影をつける
• カード類は影なしで、緑か淡い色の線で囲む
• 口コミ枠は太い緑の枠線で囲む

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 職種写真は大きめの角丸の長方形。FVは人物を切り抜いて淡い緑のぼかし背景に合成
• セクション境界: 基本は直線で地色を切り替える。FVの下端だけ緑の曲線リボン
• CTAと評価の帯はピル型
• 番号と数字バッジは正円
• ステップはタイムライン状の点線と黄色の丸でつなぐ

Components

• エントリーCTA（button-primary）: オレンジのピル型。2行の極太文字に右端の丸い再生アイコン。上に特典の一言
• 特長番号バッジ（number-badge）: 白い正円に明朝体の緑の2桁番号。写真の境目に半分重ねる
• 実績数字バッジ（stat-circle）: 緑の正円に白文字で項目と数値を3つ並べる
• 緑帯見出し（band-heading）: 全幅の緑帯に白文字。数字部分は黄色にする
• 社員の声スライダー（voice-card）: 緑がかった写真の上に白い角丸カード。線画のアバターと左右矢印、ドットのページ送り
• 採用ステップ（step-list）: 黄色見出しとクリーム地の枠。白い角丸の行にアイコン付きで手順を縦に並べ、左に点線と黄色の丸
• FAQアコーディオン（faq-item）: ミントの枠の中に白い角丸の行。左に緑の明朝Q、右に＋
• 募集要項表（spec-table）: 緑のヘッダー、グレーの項目列、細い罫線の表。横スクロールで、下に緑のスクロールバー
• 祝い金バナー（campaign-banner）: 黄色の地に点線の枠、大きな金額、上下に緑とオリーブのラベル帯
• 固定応募バー（sticky-footer）: 画面下に固定。左は朱色の電話ボタン、右は淡いオレンジのWEB応募ボタン

Do's and Don'ts

Do - 地色を白と淡い若葉色で交互に切り替える - 数字は大きく、出典の注釈を小さく添える - CTAは同じデザインでページ全体に5〜6回繰り返す - 強調語に黄色マーカーを引く - 人物は笑顔の写真を使い、明るく自然光の雰囲気にする

Don't - オレンジをCTAと数字以外に広く使わない - 濃い色や黒の地のセクションを作らない - カードに強いドロップシャドウをつけない - 明朝を本文や表に使わない - 緑系以外の多色をグラフに使わない

Page Structure

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

1. ファーストビュー（実績と待遇を数字で一気に伝える）: 若葉のぼかし背景に笑顔の人物を切り抜いて配置。左に明朝の数字訴求を縦に積み、黄色マーカーを引く。下端に緑の曲線とCTA
2. 第三者評価（口コミサイトの評価で信頼を補う）: 太い緑枠のカード。上に緑の見出し帯、ロゴの下に星評価のピル帯
3. キャンペーン告知（応募特典を知らせる）: 黄色地に点線枠のバナー。大きな金額と、緑とオリーブの帯
4. 特長（会社の強みを番号付きで4つ説明する）: 写真に明朝の問いかけ見出し。番号バッジ、緑見出し、区切り線、本文、棒・円グラフやデバイス画像の順
5. 選ばれる理由（働き方別のメリットを示す）: 緑帯見出しの下に、番号付きの緑枠カードを横スクロールで並べる
6. 社員の声（入社の決め手を実体験で伝える）: 緑がかった写真背景に吹き出し見出しと白いカードのスライダー
7. 収入モデル（昇給と年収アップを見せる）: 緑ヘッダーの年収ボックスを矢印でつなぐ。黄色の段階棒グラフでモデルケースを示す
8. 採用ステップ（応募から入社までの不安をなくす）: 黄色ヘッダーとクリーム枠のタイムライン。イラストの人物を添える
9. 応募職種（職種ごとの対象者を示す）: 左に緑の縦線を付けた見出し、角丸写真、短い説明を緑の点線で区切る
10. よくある質問（不安を解消する）: ミント枠のアコーディオン
11. 募集要項（条件を詳しく示す）: 横スクロールの表と、勤務・福利厚生の表
12. 会社概要・固定応募バー（所在地を示し、応募につなげる）: ミント地に拠点を罫線で区切って列挙。画面下に電話とWEB応募の固定バー

Imagery

• 自然光で撮った、白い制服とエプロン姿の笑顔の女性・男性介護職
• 高齢者と介護職が向き合って笑う、柔らかい逆光の写真
• 背景は若葉や緑の木々を大きくぼかす
• シンプルな線画の人物アバターや案内役の女性イラスト
• 写真の脇に淡い黄緑の円をふわっと重ねて飾る
• グラフ・アイコンは緑と黄色だけのフラットな描き方
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約900pxに抑え、地色だけ全幅に敷く
• PCの特長は図と文章を左右2カラムにし、左右を交互に入れ替える
• PCの理由カードと募集要項表は3列で全部見せ、横スクロールをやめる
• PCの職種は写真を左、説明を右に置く横並びにする
• PCでは固定応募ボタンを画面右端の縦長タブにする
• CTAボタンの幅はPCでも約360pxのまま

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