DESIGN.md — オレンジ×クリームの波形介護採用 LP（Warm Orange Wave Care Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: やさしい・柔らかい、信頼・誠実、ポップ・元気
• キーワード: 暖色オレンジ・クリーム地・波形の境界・帯見出し・細字の大きな数字・手書き強調
• 地の質感: フラットな単色面で構成する。写真は明るく自然光寄り。グラデーションはボタンと年代バーだけに使う
• 形: 有機的な波形と大きな円を装飾に使う。カードは角丸 16px 前後で、見出しは角のない矩形の帯
• 温度感: 暖かい。オレンジとクリームで親しみを出し、グレーの本文で落ち着きを保つ

Colors

• 地はクリーム・白・オレンジの 3 色を交互に使い、セクションの切り替えをはっきり見せる
• 大見出しはオレンジの帯に白文字を乗せる
• 本文はグレー。強調したい語だけオレンジの太字にする
• 主 CTA は黄→オレンジのグラデーションのピル型ボタン
• 数値はオレンジ系の細字で大きく出し、年代別のバーなどは黄→赤橙の濃淡で並べる
• オレンジ地の上に置く白カードには影をつけず、色面の差で浮かせる
• heading-band は文字 #FFFFFF × 背景 #FE9900 のコントラスト比が 2.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#AA6600、4.56:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #FE8213 のコントラスト比が 2.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BC5901、4.6:1）を使う。
• stat-card は文字 #E39B2A × 背景 #FFF9E6 のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9D6815、4.51:1）を使う。
• skill-tag は文字 #E39B2A × 背景 #FFFFFE のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#9D6815、4.53:1）を使う。

Typography

• 見出しは 1 行ごとに帯を分け、帯を段違いに積む
• キーワードは手書き風（Yomogi など）のオレンジ文字に下線を添える
• 数字は極細で大きく、単位は小さめにする
• 本文は行間 2 前後と広めにし、短い改行でリズムを作る
• 中央揃えはリード文とメッセージのみ。説明文は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。データカードと設備は一部 2 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算）
• 見出しは左端に寄せた帯で始める
• オレンジ地の特徴セクションでは白カードを縦に積み、右下に大きな細字番号を薄く置く
• データはカード 1 枚に 1 指標を置き、ラベルは左上、数値は中央に大きく
• 写真は左右にずらして重ね、セクションの境界をまたいで配置する
• カルーセルの左右には丸い矢印ボタンを置く

Elevation & Depth

• 基本はフラットで、影なし
• 施設カードのみ薄い影（0 2px 6px rgba(0,0,0,.15)）
• ページトップボタンはグレーの円に軽い影

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 12px の矩形。代表者は円形。人物は切り抜きで枠からはみ出させる
• セクション境界: 有機的な波形のカーブと、大きな半円の装飾
• 見出しの帯は角丸なしの矩形
• 職種アイコンは六角形
• タグはオレンジ線のピル型

Components

• 帯見出し（heading-band）: オレンジの矩形に白太字。1 行ずつ段違いに積む
• 応募ボタン（button-primary）: 黄→オレンジのグラデーションのピル型
• 下線矢印リンク（text-link-arrow）: 文字の下に、右端が斜めに跳ねる細い矢印線
• データカード（stat-card）: 淡いクリームの角丸カード。下線付きのラベルとオレンジの細字の大きな数値
• 番号付き特徴カード（feature-card）: 白カード。左にはみ出す濃グレー帯の見出しと、右下の薄い大きな番号
• 濃グレー見出しラベル（dark-label）: 白文字のグレー帯。左端に茶色の小さな四角を添える
• 専門性タグ（skill-tag）: 六角形アイコンの周りに配置する、オレンジ線の白いピル
• 吹き出し小見出し（speech-label）: オレンジ文字の下に、中央が尖る細い線
• 職種別応募カード（job-apply-card）: 左半分がグレー、右に人物写真。職種名と英字、応募ボタン

Do's and Don'ts

Do - オレンジの帯見出しで各セクションを始める - クリーム・白・オレンジの地をリズムよく切り替える - 数値は細字で大きく見せ、アイコンを添える - 強調語はオレンジの太字か手書き風の文字で示す - 人物写真は笑顔の職員を自然光で使う

Don't - 寒色を主役にしない - 見出しを全部中央揃えの太文字にしない（帯を使う） - 影の強いカードや立体ボタンを多用しない - 本文を黒にしない（グレーを使う） - 境界を直線だけで区切り続けない

Page Structure

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

1. ファーストビュー（理念を印象づける）: 山吹色の波形と円の上に人物の切り抜き写真を置き、白太字のコピー・説明文・矢印リンクを重ねる
2. 理念（大切にしている価値観を伝える）: 吹き出しラベルと、手書き強調入りの中央見出し。下に角丸写真を横スクロールで並べる
3. メッセージ本文（問題提起と解決の姿勢を伝える）: 白地を波形で囲み、余白を広くとった左揃えの本文
4. 代表メッセージ（トップの想いを伝える）: オレンジ地に白線の枠。白帯の見出しと円形の顔写真
5. 数字で見る職場（データで安心感を出す）: クリームのデータカードを積み、細字の大きな数値とピクトアイコンを置く
6. 6 つの特徴（働き方の利点を示す）: 写真の上に帯見出し。オレンジ地に番号付きの白カードを 6 枚
7. 協働体制（職種間の連携を図で示す）: 六角形アイコン 3 つを矢印で循環させた図と、専門性タグの図解
8. 透明性（職場の文化を伝える）: 左右に半円の装飾を置き、中央揃えの見出しと本文
9. 設備環境（最新設備を紹介する）: クリーム地に写真・オレンジ見出し・説明を縦に繰り返す
10. 職種紹介（職種別の働き方へ誘導する）: 人物写真のカルーセル。職種ラベルと丸い矢印ボタン
11. インタビュー（スタッフの物語へ誘導する）: 写真の上にグレー帯の見出しと下線リンク
12. 施設紹介（勤務地を示す）: 施設名のリンクと、影付きの施設カードのカルーセル。グラデーションボタンを 2 つ
13. 応募 CTA（面談応募を促す）: オレンジ地に白い下線付きの見出し。職種別の応募カードを 3 枚
14. フッター（会社情報とナビゲーション）: クリーム地に中央ロゴ、ピル型ボタン、2 列のオレンジ文字リンク

Imagery

• 職員の笑顔を明るい自然光で撮る。制服は青・ピンク・えんじ
• FV の人物は切り抜きにして波形の上に重ねる
• 応募カードはグレー背景の横顔ポートレート
• 設備は白背景の物撮りか、明るい室内の写真
• アイコンはオレンジのフラットなピクトグラムと六角形
• 装飾は大きな円と波形の単色シェイプ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビと求人ボタンを横並びにする
• PC の FV は人物を左、コピーを右に置く
• PC の特徴カードは 2 カラムで左右交互にずらす
• PC の設備は 3 カラムのグリッドにする
• PC のデータは 3 カラムのカードグリッドにする
• PC の職種カード・応募カードは 3 枚を横並びにする

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