DESIGN.md — 生成り×ネオングリーンの新卒採用 LP（Greige Neon Green Playful Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、シンプル・ミニマル
• キーワード: 生成り地・ネオングリーン・幅広欧文見出し・角丸カード・フラットイラスト・ピル型ボタン
• 地の質感: フラットでマットな面。グラデーションはイラストのパズルピースだけに使う
• 形: 大きな角丸のセクション面、アーチ型の窓、ピル型ボタン、細い線の円や楕円の装飾
• 温度感: やや温かいニュートラル地に、ネオングリーンで冷たく明るいアクセントを加える

Colors

• 地の色は生成り。セクションの切り替えはグレージュ面、白カード、ダークグレー面の 3 段階で行う
• ボタンは全部チャコールにし、矢印だけをネオングリーンにする
• ネオングリーンは線の円、バッジ、小さなアイコン、最終 CTA 帯に限って使う
• 制度タイルだけは朱・緑・紫・青・黄・グレーの多色にして、ポップに見せる
• 本文はほぼ黒にする。薄いグレーの文字は補足だけに使う
• tile-benefit は文字 #DEDDDC × 背景 #ED543C のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BA2811、4.55:1）を使う。

Typography

• セクション名は幅広の欧文を大きく置き、横か下に小さな和文ラベルを添える
• 本文は中央揃えにし、行間を広く（2 以上）取って、詩のように短い行で区切る
• 和文には全体的に 0.1em 前後の字間を空ける
• 欧文見出しは白カードの上端にまたがるように重ねて配置する
• 極太の書体は使わず、中くらいの太さで統一する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。制度タイルだけ 2 カラムのグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは画面幅いっぱいの大きな角丸面で区切る
• 白カードは左右 16px の余白で浮かせて置く
• コンセプト文は中央揃えにし、段落の間を 1 行分ほど空ける
• メンバー記事は横スクロールのカルーセルにし、下にスクロールバーを付ける
• 写真帯の上に欧文のマーキーを流して、セクションをつなぐ

Elevation & Depth

• 影はほぼ使わず、面の色の差で階層を表す
• 白カードは生成り地に影なしで置く
• ダーク面をグレージュ面に重ね、奥行きを出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 角丸 16〜24px の長方形。イラストはアーチ型（上が半円）の枠に入れる
• セクション境界: 上の角を大きく丸めた面を重ねて区切る。直線では区切らない
• ボタンはピル型、または 56px の円形の矢印ボタンにする
• 制度タイルは角丸 16px にし、左上に黒い番号タブを付ける
• 背景にはネオングリーンの細い円・楕円・崩した文字形の線をちりばめる
• SNS カードは細い枠線の角丸 24px にする

Components

• ピル型ボタン（button-primary）: チャコールのピル型。白文字の右にグリーンの細い矢印を置く
• View more 丸ボタン（button-circle-more）: 欧文テキストと、チャコールの円にグリーン矢印を入れたボタンを横に並べる
• 欧文セクション見出し（section-heading）: 幅広の欧文を大きく置き、横に小さな和文ラベルを付ける
• 募集中バッジ（badge-hiring）: ネオングリーン地に黒文字の小さな角丸ラベル
• 職種紹介カード（card-job-dark）: ダークグレーの大きな角丸面。チェック付きの魅力リストを半透明のバーで並べる
• 制度タイル（tile-benefit）: 多色の角丸タイル。中央に白文字、左上に黒の番号タブを置く
• 白コンテンツカード（card-white）: メンバー記事・動画・ニュースを載せる白い大きな角丸カード
• SNS アカウントカード（card-sns）: 細枠の角丸カード。左に丸いアバター、右にアカウント名と SNS アイコンを並べる
• 最終 CTA 帯（cta-band）: 上の角が丸いグリーンの面。中央に見出しと大きなピル型ボタンを置き、下に欧文マーキーを流す

Do's and Don'ts

Do - 生成り地を広く残して、余白で見せる - ボタンの矢印、背景の装飾線、バッジにネオングリーンを差す - セクション名は必ず欧文の大見出しにし、小さな和文ラベルを添える - セクション面とカードは大きな角丸にそろえる - 写真は自然光のオフィス、または社員の笑顔のスナップにする

Don't - ネオングリーンを本文の文字色に使わない - 強い影やベベルなどの立体表現を入れない - 明朝体や極太のゴシック体を混ぜない - 角が尖った四角いボタンにしない - 制度タイル以外で多色を乱用しない

Page Structure

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

1. ファーストビュー（多様な人が集まる会社だと一目で伝える）: アーチ枠のフラットイラストを 3×2 で並べ、下に和文キャッチ、大きな欧文ロゴ、採用年度を置く。背景には薄い白で大きな欧文を敷く
2. お知らせ（最新の採用情報を知らせる）: 白の角丸カードに、日付（グリーン）、タイトル、View all の丸ボタンを入れる
3. コンセプト（社名の由来とビジョンを伝える）: グリーンのアーチ型の面と楕円の線を背景に置き、短い行の中央揃え本文を広い行間で流す
4. 仕事紹介（事業と職種を伝える）: グレージュの角丸面に欧文見出し、リード文、ピル型ボタン、角丸写真を置き、写真にコラージュ画像を重ねる
5. 職種詳細（職種の魅力を箇条で示す）: ダークの角丸カードに、職種名、募集中バッジ、チェック付きの魅力リスト、ボタンを入れる
6. 写真帯（チームの雰囲気を見せる）: 全幅のオフィス写真の上に、白い欧文マーキーを流す
7. 働き方・制度（福利厚生の数字を示す）: 番号付きの多色タイルを 2 列×3 段に並べ、下に View more を置く
8. 社員紹介（働く人の人柄を伝える）: 白カードに、タグ・写真・記事タイトルの横スクロールカルーセルを入れ、右上に回転する円形の欧文スタンプを置く
9. 対談（本音のストーリーへ誘導する）: 角丸の写真バナーの中央に白の欧文見出しと和文を置き、大きな引用符の装飾を付ける
10. SNS（社員の日常発信へ誘導する）: 細枠の角丸カードに、アバターとアカウント名を縦に並べる
11. 技術発信（技術力を動画で見せる）: 白カードに動画サムネイルを縦に 3 本並べ、View more を置く
12. エントリー CTA（応募へ導く）: グリーンの角丸の面に 2 行の和文見出しと大きなチャコールのピル型ボタンを置き、欧文マーキーで締める

Imagery

• 人物はフラットなベクターイラストにし、パズルピースを虹色のグラデーションで描く
• イラストは細い虹色の線で描いたアーチ型の窓に収める
• 写真は自然光のオフィスで、社員の会話や作業をスナップ風に撮る
• 背景にはネオングリーンの細い線で描いた円・楕円・文字の断片を散らす
• ネオングリーン地にスマホや写真を重ねたコラージュをアクセントに使う
• アイコンは犬のシルエットのような単色のマスコット記号にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 75% に絞って中央に置く
• PC の仕事紹介は、左にテキスト、右に写真の 2 カラムにする
• PC の制度タイルは 3 列×2 段のピル型に近い形にする
• PC の職種詳細の魅力リストは 2 列にする
• PC の SNS カードと動画は横に並べる（2〜3 列）
• PC の FV はイラストを 5 体横 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 行書くと起動時に読み込まれる。