DESIGN.md — ミント緑×白の親しみ系採用サイト LP（Fresh Mint Recruiting LP with Playful Personality Types）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、ポップ・元気、親しみ・手作り感、信頼・誠実
• キーワード: ミントグリーン・切り抜き社員写真・タイプ診断・ネオン図形・ピル型ボタン・白カード
• 地の質感: 淡いミント地に細線アイコンの薄い地紋パターン。フラットで影は控えめ。
• 形: 角丸カード・ピル型ボタン・大きな円弧のセクション境界・斜めの帯。
• 温度感: やや涼しげで明るく、人の写真で温かみを足す。

Colors

• 地は淡いミント、カードは白で層を分ける。
• 強調語は本文中で緑文字にし、太字で目立たせる。
• ボタンはくすみ緑のピル型で統一する。
• タイプ別に青・ピンク・黄緑を割り当て、図形とバッジだけに使う。
• 最後のエントリー帯だけ鮮やかな青のグラデーションで締める。
• 外部求人ボタンは白、自社エントリーだけオレンジにする。
• button-primary は文字 #FFFFFF × 背景 #4EB29A のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#398271、4.56:1）を使う。
• button-entry は文字 #FFFFFF × 背景 #FD943B のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BE5802、4.58:1）を使う。
• type-badge は文字 #FFFFFF × 背景 #3D8BE8 のコントラスト比が 3.47:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#1A74DF、4.56:1）を使う。

Typography

• 見出しは太ゴシックで、一部の文字だけ緑や色付きにする。
• 縦書き見出しをセクション左に置く演出を使う。
• 見出しの背後に薄い欧文の透かし文字を重ねる。
• 本文は中央揃えの短い行を3〜4行重ねる。
• 強調語は緑文字＋太字で、下線は使わない。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種・採用の流れカードは横スクロールか 2 列。
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは白で角丸、写真と文字を左右に分ける。
• 社員の切り抜き写真をカードの外側にはみ出させる。
• セクション境界は大きな円弧や斜め帯にする。
• ボタンはカード右下に右寄せで置く。
• ステップは大きな番号＋線画イラストの4枚カード。

Elevation & Depth

• カードはごく薄い影か影なし。
• 吹き出しはドット風の細い緑枠で浮かせる。
• 写真は影なしで角丸のみ。

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形写真と、背景を抜いた社員の切り抜き写真を併用。
• セクション境界: 大きな円弧・斜めの帯・吹き出し形の切り込み。
• ボタンは右に矢印付きのピル型。
• タイプ図形は青の四角枠・ピンクの三角・黄緑の楕円。
• 番号は太い緑の数字を大きく置く。
• 吹き出しは角ばったドット風の枠。

Components

• 緑ピルボタン（button-primary）: 右端に矢印付きのくすみ緑ボタン。各セクション末尾に置く。
• エントリーボタン（button-entry）: 白地の求人サイトボタンと並べるオレンジの自社応募ボタン。
• タイプ紹介カード（type-card）: アイコン＋タイプ名、緑のキャッチ、チェックリスト3項目、右に切り抜き写真と色図形を組む。
• ドット風吹き出し（pixel-balloon）: 写真に添える社員の一言。細い緑枠の角ばった吹き出し。
• イニシャルバッジ（type-badge）: タイプ色の小さな角丸四角にイニシャルを白抜きで入れる。
• 選考ステップカード（step-card）: 大きな緑数字、ステップ名、線画イラスト、説明文を縦に並べ、矢印でつなぐ。
• キャリア階段図（career-stairs）: 緑→黄→オレンジの帯を階段状に置き、右上がりの矢印と年次・等級を添える。
• お知らせバー（news-bar）: NEW ラベル＋日付＋タイトル＋右端の矢印ボックスを1行に並べる白い帯。

Do's and Don'ts

Do - 淡いミント地と白カードの2層を保つ。 - 社員の切り抜き写真をカードからはみ出して配置する。 - タイプごとに色と図形を固定して繰り返す。 - 強調語は緑文字で短く区切る。 - ボタンは矢印付きの緑ピル型にそろえる。 - 締めは青グラデーションの帯でエントリー導線をまとめる。

Don't - 濃い色の地を多用しない。 - タイプ色以外の派手な色を追加しない。 - 影の強い立体的なカードにしない。 - 長文を詰め込まず、1段落は3〜4行に収める。 - 明朝体や手書き風書体を混ぜない。 - 写真に強いフィルターをかけない。

Page Structure

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

1. ファーストビュー（明るい社風と多様な働き方を一目で伝える）: 太字ロゴ風コピー、ネオン図形付きの社員切り抜き3名、薄い欧文透かし、お知らせバー。
2. コンセプト導入（自分らしい働き方への共感を作る）: 中央見出しの左右に社員の全身写真、下に角丸の社員写真と吹き出しを並べる。
3. タイプ別紹介（3タイプの働き方で自分ごと化させる）: 地紋入りの地に白カードを3枚縦に重ね、左に縦書きの導入文。
4. 会社紹介（事業内容と取引構造を伝える）: 大きなはてなマーク、中央寄せの説明文、仕入先・顧客をつなぐ円形図解。
5. 職種紹介（仕事内容をイメージさせる）: 縦書き見出し＋角丸写真3枚と職種名・説明文。
6. キャリアパス（成長の道筋を示す）: 背景に欧文透かし、色付きの階段図と右上がりの矢印、等級ラベル。
7. 社内制度・社風（働きやすさを伝える）: 全幅写真のあと、絵文字アイコンとアプリ画面のモックで社内制度を紹介。
8. 社内報・記事一覧（リアルな情報発信を見せる）: 縦書き見出し、PICK UP 記事、カード型のスライダー。
9. 採用情報・選考の流れ（求める人物像と選考ステップを示す）: 社屋写真に円弧で白地を重ね、人物カード4枚、番号付きステップ4枚。
10. 募集要項リンク（新卒・中途に振り分ける）: 緑と黒の斜め帯の上に白い大きなボタンを2つ。
11. タイプ振り返り（説明会へ誘導する）: 3色の図形を並べ、3タイプの社員切り抜きを四隅から登場させる。
12. エントリーCTA・フッター（応募先へ送客する）: 吹き出し形の見出し、青グラデーション地に白カード、求人サイトボタンとサイトマップ。

Imagery

• 社員は作業着やスーツ姿でガッツポーズなど明るいポーズ。背景を抜いて使う。
• 切り抜きの背後に青・ピンク・黄緑のグラデーション図形を重ねる。
• 職場写真は明るく自然光、角丸で切る。
• 選考ステップは細線のシンプルな人物イラスト。
• 絵文字のような黄色い笑顔アイコンや小さなドット装飾を散らす。
• 地紋は業務に関係する道具の細線アイコンを薄く敷き詰める。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のタイプカードは写真を右に配置し、SP では写真をキャッチの上に縦積みにする。
• 職種3列・人物4列・ステップ4列は SP で 1〜2 列か横スクロールにする。
• 縦書き見出しは SP では横書きの見出しに置き換える。
• キャリア階段図は SP で縦のタイムラインに組み直す。
• エントリーのボタン群は SP で 1 列に並べる。

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