--- version: alpha name: Corporate Navy and Magenta Recruitment SaaS LP description: 濃紺の面と淡い青紫の地を交互に置き、白カードで情報をまとめる BtoB 求人サービス LP。主 CTA はマゼンタ、副 CTA は青で、見出しには橙茶を差し色に使う。実績数値・ステップ・機能図解・導入事例・FAQ を順に並べ、誠実で情報量の多い構成にしている。 colors: primary: '#174081' dark-section: '#0D2D5E' background: '#FFFFFF' background-alt: '#EDF1FD' cta: '#9C2C6B' on-cta: '#FFFFFF' secondary: '#2459A4' accent-1: '#9B5D38' accent-2: '#9C2A68' text: '#272727' text-body: '#595959' line: '#C9CCCF' surface: '#F3F2F0' tint-1: '#EEF2FE' typography: display: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 19px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px cta-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 230px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 190px step-timeline: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 40px pill-heading: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 32px case-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 410px industry-tag: backgroundColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 18px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 70px number-badge: backgroundColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px --- # DESIGN.md — 紺×マゼンタの信頼感ある求人掲載サービス LP（Corporate Navy and Magenta Recruitment SaaS LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、情報量多め・訴求型、シンプル・ミニマル - **キーワード**: 濃紺の面・白カード・マゼンタCTA・UIモック図解・数値実績・事例カード - **地の質感**: フラットな単色の面。紺の面の隅に、少し明るい紺の大きな円弧を薄く重ねる。 - **形**: 角丸は小さめ（4〜8px）のカード、ピル型の見出しラベル、円形のアイコンバッジ。 - **温度感**: やや寒色。紺と青が主役で、マゼンタと橙茶で温度を少し足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#174081` | ブランド紺・濃色セクションの地 | 22% | 画素の実測 | | `dark-section` | `#0D2D5E` | ファーストビューの濃紺地 | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 38% | 画素の実測 | | `background-alt` | `#EDF1FD` | 淡い青紫のセクション地 | 15% | 画素の実測 | | `cta` | `#9C2C6B` | 主 CTA ボタン（アカウント作成） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#2459A4` | 副 CTA・ステップ番号・リンクの青 | 2% | 画素の実測 | | `accent-1` | `#9B5D38` | セクション見出しの橙茶 | 0% | 画素の実測 | | `accent-2` | `#9C2A68` | 事例見出しのマゼンタ文字・アイコン円 | 1% | 推定 | | `text` | `#272727` | 見出しの濃いグレー | 1% | 画素の実測 | | `text-body` | `#595959` | 本文のグレー | 2% | 推定 | | `line` | `#C9CCCF` | カードの枠線・FAQ の区切り線 | 1% | 画素の主要色に補正 | | `surface` | `#F3F2F0` | 図版背景・フッターの淡いグレー | 5% | 画素の実測 | | `tint-1` | `#EEF2FE` | 機能図解の淡い青背景 | 2% | 画素の実測 | - セクションの地は 白 → 淡い青紫 → 濃紺 を交互に切り替え、リズムをつける。 - 濃紺の地の上には白カードを置き、カードの中は白地に濃い文字で書く。 - 主 CTA はマゼンタだけにする。副 CTA は青にして、2 つを縦に並べる。 - セクション見出しは、淡い地や白地の上では橙茶、濃紺の地の上では白にする。 - マゼンタはアイコン円、事例の引用見出し、強調バッジに限って使う。 - 業種タグは紺・紫・深緑の小さな塗りに白文字で付ける。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメインコピー（数字は特大） | ゴシック | Noto Sans JP | 700 | 26px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（中央揃え） | ゴシック | Noto Sans JP | 700 | 19px | 1.4 | 0.03em | | `headline-md` | カード見出し・ステップ名・事例の引用 | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `accent` | 実績数値（紺の大きな数字） | 欧文サンセリフ | Noto Sans JP | 700 | 24px | 1.2 | 0.0em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 11px | 1.8 | 0.02em | | `note` | 注釈・出典 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.03em | - 書体はすべてゴシック 1 種類にし、太さとサイズで階層をつける。 - 実績数値は紺の太字で大きくし、単位は小さく添える。 - 注番号は上付きの小さな文字にし、出典はページ下部にまとめる。 - セクション見出しとリード文は中央揃え、カードの中は左揃えにする。 - 本文は 11px 前後のグレーにして、行間を広めにとる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦に積む。 - **本文ブロックの幅**: 画面幅の約 93% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - カードは画面の左右に約 12px の余白をとって配置する。 - セクションの上下にはおよそ 48〜64px の余白をとる。 - 利用の流れは、左に縦線と番号丸、右に画面モックと説明を置く。 - CTA ボックスは、ページの冒頭と末尾に同じ構成で置く。 - 事例カードは タグ → 引用見出し → 企業名 → 写真 の順に並べる。 ## Elevation & Depth - 影はほとんど使わず、細いグレーの枠線でカードを区切る。 - 濃紺の地の上の白カードは、影なしの面のコントラストだけで浮かせる。 - 右下の固定バナーにだけ軽い影をつける。 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸 0〜4px の横長の長方形に切り抜く。アイコンは円の中に入れる。 - **セクション境界**: 境界はまっすぐな水平線。濃紺の面には、隅に大きな半透明の円弧を飾る。 - 主 CTA・副 CTA は角丸 4px の長方形にする。 - 詳細リンクのボタンだけはピル型にする。 - 見出しラベルは、白地に紺の枠線のピル型を、左右に伸びる水平線の中央に置く。 - 番号と実績アイコンは円形にする。 ## Components - **主 CTA ボタン**（`button-primary`）: マゼンタの塗りに白い太字。上にマゼンタ文字で対象者を示す短いラベルを添える。 - **副 CTA ボタン**（`button-secondary`）: 青の塗りに白文字。上に青文字のラベルを添え、主 CTA の下に並べる。 - **CTA ボックス**（`cta-box`）: 白いボックスの中に 2 種類のボタンと資料ダウンロードのリンクを縦に並べる。 - **実績数値カード**（`stat-card`）: マゼンタの円アイコンをカードの上端に半分はみ出させ、ラベル・紺の大きな数値・説明を順に置く。 - **ステップの縦線**（`step-timeline`）: 紺の縦線上に、STEP と番号を入れた紺の丸を置く。最後のステップの前には三角の矢印を入れる。 - **ピル型の見出しラベル**（`pill-heading`）: 水平線の中央に、白地・紺の枠線・紺の太字のピル型ラベルを置く。 - **導入事例カード**（`case-card`）: 濃紺の地に白カードを置き、業種タグ・マゼンタの引用見出し・企業名・人物写真の順に並べる。 - **業種タグ**（`industry-tag`）: 紺・紫・深緑の小さな角丸の塗りに、白い小さな文字を入れる。 - **FAQ アコーディオン**（`faq-item`）: Q アイコン・紺の太字の質問・右端の下向き矢印を並べ、下にグレーの区切り線を引く。カテゴリごとに白カードにまとめる。 - **特徴の番号丸**（`number-badge`）: 白いカードの上端中央に青い丸を置き、白い数字を入れる。最後の項目だけはマゼンタの丸に星を入れる。 ## Do's and Don'ts **Do** - 濃紺・白・淡い青紫の地を交互に使い、セクションの区切りをはっきりさせる。 - 数値やサービスの説明は、UI モックやフラットなアイコン図解で見せる。 - 主 CTA はマゼンタに統一し、ページの冒頭と末尾に置く。 - 根拠となる数値には注番号を付け、出典を下部にまとめて書く。 - カードは細い枠線と小さな角丸で、すっきり見せる。 **Don't** - グラデーションや強い影でカードを装飾しない。 - マゼンタを広い面の地に使わない。 - 手書き風や丸すぎる書体を使わない。 - 濃紺の地の上に本文を直接長く書かない。白カードの中に入れる。 - 原色の赤や黄を足して、配色をにぎやかにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（No.1 などの実績と新機能への対応を、ひと目で伝える。）: 濃紺の地に、白い大きな見出しと特大の数字を置く。下にノート PC とスマホの UI モックを重ねる。 2. **CTA ボックス**（すぐ始めたい人と、サポートを希望する人を振り分ける。）: 白いボックスにマゼンタと青のボタンを縦に並べ、その下に資料ダウンロードのリンクを置く。 3. **実績数値**（規模の大きさで信頼を得る。）: 橙茶の見出しの下に、マゼンタ円アイコン付きの数値カードを 3 枚縦に並べる。 4. **利用の流れ**（始めやすさを、3 ステップで示す。）: 淡い青紫の地に縦線と番号丸を置き、フォームのモックと説明文を組み合わせる。 5. **機能紹介**（サポート機能の価値を伝える。）: ピル型の見出しラベルの下に、青い線画アイコンの図解を入れた白カードを並べる。 6. **料金の仕組み**（無料で始められることと、有料オプションの違いを説明する。）: 濃紺の地に白い見出しとリード文を置き、UI モック入りの白カードを 2 枚並べる。 7. **新サービス紹介**（新しい配信の仕組みと、その特徴を訴える。）: 白地に青い大見出しとロゴを置き、淡い青紫のボックスに番号丸付きの特徴カードを 4 つ並べる。最後にピル型のボタンを置く。 8. **導入事例**（業種ごとの成功例で、自社でも使えると感じてもらう。）: 濃紺の地に事例カードを 6 枚縦に並べる。カードは タグ・マゼンタの引用・企業名・人物写真 で構成する。 9. **よくある質問**（導入前の不安を解消する。）: 淡い青紫の地に、カテゴリ別の白カードを置き、Q アイコン付きのアコーディオンを並べる。 10. **注釈**（数値の出典を明示する。）: 白地に小さなグレーの文字で、注番号順に並べる。 11. **クロージング CTA**（最後にもう一度行動を促す。）: 濃紺の地に白い 2 行の見出しを置き、冒頭と同じ CTA ボックスを再び配置する。 12. **フッター**（問い合わせ先と関連リンクへ案内する。）: 淡いグレーの地に、白いピル型のリンクボタンとアコーディオン式のリンク一覧、認証マークを置く。 ## Imagery - サービス画面はグレーの棒線でぼかした UI モックで表し、PC とスマホの端末フレームに入れる。 - 機能図解は青い単色の線画アイコンを淡い青の背景に置き、矢印で流れを示す。 - 実績アイコンはマゼンタの円の中に白い線画で描き、背後に薄い月桂樹の模様を添える。 - 事例写真は、オフィスで話す担当者のバストアップを自然光で撮り、横長に切り抜く。 - 濃紺の面の背景には、少し明るい紺の大きな円弧を半透明で重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文幅を約 70% に絞り、中央に寄せる。 - PC のファーストビューは、左にコピー、右に端末モックを置く 2 カラムにする。CTA ボックスでは 2 つのボタンを横に並べる。 - 実績数値カードと機能カードは、PC では 2〜3 列の横並びにする。 - PC の利用の流れは、中央の縦線を挟んで左にモック、右に説明を置く。 - PC の事例カードは、左にテキスト、右に小さな写真を置く横長のカードにする。 - PC のフッターは、リンクを多列に並べる。 ## 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-ea5f1fa9`（元 LP の URL から採番） - **元 LP**: https://jp.indeed.com/%E6%B1%82%E4%BA%BA%E5%BA%83%E5%91%8A/lp/jp-ad-landingpage - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。