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

• セクションの地は 白 → 淡い青紫 → 濃紺 を交互に切り替え、リズムをつける。
• 濃紺の地の上には白カードを置き、カードの中は白地に濃い文字で書く。
• 主 CTA はマゼンタだけにする。副 CTA は青にして、2 つを縦に並べる。
• セクション見出しは、淡い地や白地の上では橙茶、濃紺の地の上では白にする。
• マゼンタはアイコン円、事例の引用見出し、強調バッジに限って使う。
• 業種タグは紺・紫・深緑の小さな塗りに白文字で付ける。

Typography

• 書体はすべてゴシック 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。