--- version: alpha name: Warm Orange Wave Care Recruitment LP description: 濃いオレンジとクリームの地を交互に重ねた介護・看護職の採用 LP です。波形の境界と大きな円の装飾で柔らかさを出しています。見出しは白抜き文字を帯状のオレンジ地に乗せ、細字の大きな数字でデータを見せ、手書き風の強調語を添えます。温かさと誠実さを両立させるトンマナです。 colors: primary: '#FE9900' secondary: '#FEBD01' background: '#FFF9E6' surface: '#FFFFFE' background-alt: '#FFF9E6' text-body: '#6B6B6B' accent-1: '#E39B2A' dark-section: '#727272' on-primary: '#FFFFFF' cta: '#FE8213' on-cta: '#FFFFFF' accent-2: '#FE6B02' line: '#E0DBD7' accent-3: '#896C56' primary-accessible: '#AA6600' cta-accessible: '#BC5901' accent-1-accessible: '#9D6815' typography: display: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Josefin Sans fontSize: 56px fontWeight: 200 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px text-link-arrow: textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 30px stat-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 160px feature-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 280px dark-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 30px skill-tag: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 26px speech-label: textColor: '{colors.accent-1}' typography: '{typography.body-md}' height: 30px job-apply-card: textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 186px --- # DESIGN.md — オレンジ×クリームの波形介護採用 LP（Warm Orange Wave Care Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: やさしい・柔らかい、信頼・誠実、ポップ・元気 - **キーワード**: 暖色オレンジ・クリーム地・波形の境界・帯見出し・細字の大きな数字・手書き強調 - **地の質感**: フラットな単色面で構成する。写真は明るく自然光寄り。グラデーションはボタンと年代バーだけに使う - **形**: 有機的な波形と大きな円を装飾に使う。カードは角丸 16px 前後で、見出しは角のない矩形の帯 - **温度感**: 暖かい。オレンジとクリームで親しみを出し、グレーの本文で落ち着きを保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FE9900` | ブランドオレンジ（帯見出し・大面積セクション） | 14% | 画素の実測 | | `secondary` | `#FEBD01` | FV・装飾円の山吹色 | 4% | 画素の実測 | | `background` | `#FFF9E6` | クリーム地 | 23% | 画素の実測 | | `surface` | `#FFFFFE` | 白カード・白セクション | 27% | 画素の実測 | | `background-alt` | `#FFF9E6` | データカードの淡いクリーム | 5% | 画素の実測 | | `text-body` | `#6B6B6B` | 本文グレー | 2% | 推定 | | `accent-1` | `#E39B2A` | 本文内強調・小見出しのオレンジ文字 | 1% | 画素の実測 | | `dark-section` | `#727272` | 特徴カード見出しの濃グレー帯 | 1% | 画素の実測 | | `on-primary` | `#FFFFFF` | オレンジ地上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#FE8213` | 応募ボタン（オレンジグラデーション） | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FE6B02` | 濃い赤橙（数値・リハ職アイコン） | 0% | 画素の実測 | | `line` | `#E0DBD7` | 点線区切り・細線 | 0% | 画素の主要色に補正 | | `accent-3` | `#896C56` | 代表メッセージ枠などの茶系アクセント | 0% | 画素の主要色に補正 | | `primary-accessible` | `#AA6600` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#BC5901` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#9D6815` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム・白・オレンジの 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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー | ゴシック | Noto Sans JP | 900 | 28px | 1.4 | 0.05em | | `headline-lg` | オレンジ帯のセクション見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.9 | 0.08em | | `headline-md` | 中央揃えのリード見出し（オレンジ文字） | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.05em | | `headline-sm` | 設備名・カード見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.1 | 0.05em | | `note` | 注釈・データの補足 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 大きな数字・番号（細字） | 欧文サンセリフ | Josefin Sans | 200 | 56px | 1.0 | 0.0em | | `label-button` | ボタン・テキストリンク | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - 見出しは 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-c6e29274`（元 LP の URL から採番） - **元 LP**: https://www.manypeople-k.com/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。