DESIGN.md — 青・緑・橙の3色で職種を分ける採用 LP（Vivid Tri-Color Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、清潔・爽やか、信頼・誠実
• キーワード: 職種別3色コード・社員の切り抜き写真・幾何学的なポップ背景・白地で広い余白・斜体の極太キャッチ
• 地の質感: フラットな単色の面に、集中線・正方形・円のグラフィックを重ねる。グラデーションは淡い空色程度にとどめる
• 形: 角丸4〜10pxの長方形カード、細い枠線のボタン、台形のタブ見出し
• 温度感: 明るく前向き。白地で清潔感を出し、職種カラーで元気さを足す

Colors

• 地は白一色にする。色は写真カードと職種グラフィックの中だけで使う
• 職種ごとに青・黄緑・橙を固定し、タブ線、ボタン、カード背景の色をそろえる
• 英字ラベルは紺、日本語見出しは黒にして、2色で役割を分ける
• ボタンは白地に黒の枠と黒文字。塗りつぶしの強い CTA 色は使わない
• テーマ色のカード上の文字は白、白いボタン上の文字・矢印は黒にする
• fv-job-button は文字 #017AF5 × 背景 #FEFEFE のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0172E6、4.58:1）を使う。
• job-tab は文字 #017AF5 × 背景 #FFFFFF のコントラスト比が 4.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#0172E6、4.5:1）を使う。

Typography

• キャッチは極太の斜体ゴシックにし、文字の脇に色付きの斜めの棒を添える
• 見出しは英字ラベル1行のあとに日本語の太字を置く2段構成にする
• 理念を語る文章は中央揃えで、短く改行し、行間は2.0
• 通常の本文は左揃えで、行間は1.9〜2.0
• 職種タブの文字はその職種のテーマ色にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右に互い違いでずらして配置する
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約15px
• 写真コラージュは2枚を左右にずらし、一部を重ねる
• 職種カードは横幅いっぱいで、縦横比はおよそ5:2
• カード同士の間隔は16px前後
• ボタンは左寄せで、幅は画面の約半分

Elevation & Depth

• 影はほとんど使わない
• ファーストビューの職種ボタンだけ、ごく弱い影をつける
• 写真を重ねるときは白い縁取りで前後を分ける

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸の長方形で切る。社員は背景を抜いた切り抜き写真
• セクション境界: 境界線は引かず、余白だけで区切る。ファーストビューの下端は街並み写真を白へフェードさせる
• ボタンは角丸8pxで、黒の1px枠
• 矢印ボタンは白い角丸の小さな四角
• タブ見出しは右肩が斜めの台形で、下線が右へ伸びる

Components

• FV職種ボタン（fv-job-button）: 白い横長のボタンにテーマ色の職種名を入れ、右下にテーマ色の矢印ブロックをはみ出させる
• 英字＋日本語見出し（section-heading）: 紺の英字ラベルの下に黒の太字見出しを置く
• 職種タブ見出し（job-tab）: テーマ色の細い線で描いた台形タブ。下線がそのまま右へ伸びる
• 職種カード（job-card）: テーマ色の地に幾何学模様と社員の切り抜き写真を置く。左上に白文字の職名、右下に白い矢印ボタン
• 詳しく見るボタン（button-outline）: 白地に黒枠。左に文字、右に長い横矢印
• 写真リンクカード（photo-link-card）: 写真の左上に白いラベルで紺の見出しを載せ、右下に白い詳しく見るボタンを重ねる
• 矢印チップ（arrow-chip）: 白い角丸の四角に黒い横矢印を入れる

Do's and Don'ts

Do - 職種ごとのテーマ色をページ全体で統一して使う - 人物は笑顔か自信のある表情で、切り抜いて使う - 白地の余白を広く取り、色面はカードの中に収める - 英字ラベルと日本語見出しの2段構成をくり返す - 写真は左右にずらして配置し、動きを出す

Don't - 背景全体をテーマ色で塗りつぶさない - ボタンを派手な塗りつぶしにしない - 職種のテーマ色を入れ替えたり混ぜたりしない - 明朝体や手書き風の書体は使わない - 強い影やグラデーションは多用しない

Page Structure

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

1. ファーストビュー（職種と人物で会社の印象を伝え、各職種へ誘導する）: 3色に分けた背景に3人の社員を並べ、職種ボタンを3段重ねる。下に斜体の極太キャッチを置く
2. 理念メッセージ（仕事の意義を情緒的に伝える）: 中央揃えの短い文を4〜5段落、行間を広く並べる
3. 写真コラージュ（現場の雰囲気を見せる）: 角丸の写真を左右に互い違いでずらして配置する
4. 職種紹介（職種を選ばせる）: テーマ色のタブ見出しの下に、テーマ色の職種カードを縦に並べる
5. 会社紹介（事業内容を短時間で理解させる）: 英字＋日本語の見出し、本文、アウトラインボタン、重ねたビル写真の順に並べる
6. 理念・カルチャー（価値観を伝える）: 会社紹介と同じ構成。写真は少しずらして2枚置く
7. コンテンツリンク（働く環境やアンケートへの回遊を促す）: 写真リンクカードを縦に3枚並べる

Imagery

• 社員を白背景で撮って切り抜き、全身から腰上で使う。服装は職種ごとの制服やスーツ
• 背景グラフィックは職種ごとに変える。営業は集中線、技術は正方形の散らし、事務は円の玉ボケ
• 設備・ビル・街並みは青空の下で明るく撮る
• オフィスの写真は自然光で、柔らかく少しハイキーに仕上げる
• アンケート系は手元の写真に、チェックリストの線画を薄く重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCではファーストビューで3人を横並びにし、職種ボタンを各人物の上に重ね、キャッチは1行にする
• PCの理念文は中央に置き、まわりに写真を散らして配置する
• PCの職種カードは5枚を横1列に並べ、その上にタブを3つ横並びにする
• PCの会社紹介とカルチャーは写真とテキストの2カラムにし、左右を交互に入れ替える
• PCのコンテンツリンクは3カラムで横に並べる

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