DESIGN.md — 黄×青のカラフルカプセル型採用 LP（Pop Multicolor Capsule Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、親しみ・手作り感、清潔・爽やか
• キーワード: カプセル型写真・多色ピル帯・数字カード・黒ピルボタン・英字小見出し・黄色ドット地
• 地の質感: 白と薄グレーのフラットな地に、黄色面だけ縦長ドットの淡いパターンを敷く
• 形: 大きな角丸カード、カプセル・楕円の写真枠、斜めに飛ぶピル状の帯と丸
• 温度感: 明るく暖かい。原色寄りの多色でも、白の余白で清潔に保つ

Colors

• 地は白と薄グレーを交互に使う。数字セクションと職種セクションだけ黄色、応募セクションだけ青の大きな面にする
• ピンク・緑・青・オレンジの4色を、項目を順番に色分けするために使う
• ボタンは黒地に白文字で統一する。右端に白丸と黒い矢印を付ける
• 赤は吹き出し見出しとラベルの強調だけに使う
• 大事なフレーズの一部だけを水色の文字にする
• フッターは濃グレーに白文字

Typography

• セクション見出しは、薄グレーの斜体英字を上に置き、その下に太い和文ゴシックを2段で組む
• 数値は極太の斜体欧文で大きくし、単位は小さく添える
• ヒーロー写真の上に手書き風の英字スクリプトを重ねる
• 本文は行間を2.0前後とって短い行で改行する
• 吹き出し型の小見出しは「\ 〇〇 /」のように斜線で挟む
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は数字と理由を 2〜3 カラムのカード並べにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約22pxの余白をとって幅いっぱいに置く
• カードとカードの間は12〜16px
• 色付きの面は上の角を大きく丸めて、白地から浮かせる
• 写真の右下に、色付きピル型のラベルを重ねる

Elevation & Depth

• 影はほとんど付けない。白カードは色面の上に置いて浮かせる
• 写真の下にごく薄い影を付ける程度にとどめる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: カプセル型・横長の楕円で切り抜く。色の太枠を付けた角丸写真を重ねて置く
• セクション境界: 上の角を大きく丸めた色面で切り替える。吹き出しの三角を付けることもある
• 装飾は斜め約20度のピル帯と小さな丸。4色で画面の端に置く
• アイコンは色付きの丸の中に白いピクトを置く
• ボタンとラベルは完全なピル型にする

Components

• 黒ピル導線ボタン（button-primary）: 黒地に白文字、右端に白丸と矢印を付ける
• カプセル写真＋ラベル（capsule-photo-label）: 楕円に切り抜いた写真の下端に、色付きのピル型ラベルを重ねる。願望や魅力を順番に色分けする
• 数字カード（stat-card）: 白い角丸カード。左上に項目名と色の短い下線、右上に丸アイコン、中央に巨大な斜体数字を置く
• 理由カード（reason-card）: 上部が色の帯で、帯に「番号＋細い斜体の数字」を入れる。その下に写真と2行のコピーを置く
• アイコン付きリンクカード（icon-link-card）: 白カードの左に色丸アイコン、中央に項目名、右に黒丸矢印を置く
• 吹き出し見出し（speech-heading）: 赤い角丸の帯に白文字を入れ、下向きの三角を付ける
• 英字小見出し（section-eyebrow）: 淡いグレーの斜体の大文字英字を、和文見出しの上に置く
• 写真付きバナーカード（photo-banner-card）: 色地の角丸カードの上に写真をはみ出させる。下部に白い太文字と白丸矢印を置く

Do's and Don'ts

Do - 写真には笑顔の社員が自然に働く姿を使う - 項目はピンク・緑・青・オレンジの順に色分けする - 白い余白を大きくとり、色面は2〜3か所に絞る - 数字は大きく斜体で見せ、補足は1行にまとめる - セクションの区切りには黒ピルボタンで次の導線を置く

Don't - くすんだ色や中間色を加えない - 写真を四角いまま並べない - グラデーションや強い影を使わない - 明朝体を使わない - 本文を長い段落にしない

Page Structure

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

1. ファーストビュー（仕事の印象を伝える）: 青い太枠のカプセル型写真に、白帯の2行コピーと英字スクリプトを重ねる。周りにピル帯を置く
2. 会社紹介（事業内容を伝える）: 色枠の写真2枚をずらして重ねる。薄グレー地に見出しと本文を置く
3. 求職者の願望（共感をつくる）: 色地のカプセル写真3枚にラベルを重ね、最後に一部を水色にした締めの一文を置く
4. 数字で見る会社（働きやすさを客観的に示す）: 黄色ドット地に社員の切り抜き写真と吹き出しを置き、数字カードを縦に並べる
5. 選ばれる理由（魅力を4つ示す）: 色帯付きの理由カード4枚を並べ、最後に黒ピルボタンを置く
6. 認定実績（信頼性を示す）: 水色の太枠の中に白カード2枚。それぞれ認定画像・名称・説明文を載せる
7. 社員の写真（雰囲気を伝える）: 角丸の写真を2段で横に流し、ボタンを置く
8. 募集職種（職種ページへ送る）: 黄色地にアイコン付きリンクカード4枚
9. 未経験の不安への回答（応募の不安を消す）: 赤い吹き出しの問い、水色の大きな答え、人物写真、黒ボタンの順に置く
10. 関連ページ導線（回遊させる）: 薄グレー地に写真付きバナーカード2枚
11. 働く魅力の再提示（最後にもう一度訴求する）: カプセル写真4枚にラベルを付け、締めのメッセージを添える
12. 応募 CTA（応募させる）: 上の角が丸い青地に、白いリンクカード2枚
13. フッター（サイトマップと会社情報）: 濃グレー地にリンクを線で区切って並べ、白いエントリーボタン、ロゴ、住所を置く

Imagery

• 職場での自然な笑顔や会話を、明るい自然光で撮る
• 人物は切り抜いて、ベタ色の背景に載せることもある
• 電球やキラキラなど、手描き線のちょい足し装飾を加える
• アイコンは色丸に白い線画ピクトで描く
• 装飾は斜めのピル帯と小さな丸を、画面の端に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はカード類を中央約60%幅で2〜3カラムに並べる
• 数字カードは PC では3列×2段にする
• ヒーローは PC で左右にもカプセル写真を覗かせる
• 未経験セクションは PC で写真とテキストを左右に分ける
• フッターは PC でリンクを2列、ロゴ・住所を左に置く

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