DESIGN.md — ミント×白の斜め切替ファッション採用 LP（Mint Gradient Fashion Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、シンプル・ミニマル、ポップ・元気
• キーワード: ミントグラデーション・斜め切替・人物写真のコラージュ・細い欧文・丸矢印ボタン・余白多め
• 地の質感: 白からミントへの柔らかいグラデーション。うっすら粒子のノイズ感がある
• 形: 四角い写真に丸いボタン。背景は斜めの面で切り替える
• 温度感: 涼しく明るい。若い女性向けの軽さがある

Colors

• 地は白。ミントのグラデーションを斜めの帯にして、セクションの境目をつなぐ
• 強調はミントだけにする。見出しの中の 1 語をミントにする
• 文字は黒に近いダークグリーンとグレーの 2 段階にする
• 黒い面はフッターのブランド導線カードだけに使う
• 動画・エントリー帯は全幅の写真に白文字を載せる
• 赤や黄色などの強い有彩色は写真以外で使わない

Typography

• 見出しの上に、ミント色の小さな英字ラベルを先頭のダッシュ付きで置く
• セクションの裏に巨大な細い欧文を敷き、写真と重ねる
• 日本語は細めから中くらいの太さに抑える。極太は使わない
• 説明文はグレーの小さめの文字で、行間を広く取る
• FV の筆記体の欧文は装飾として写真に重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 1〜2 列で横スクロールも可
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 0px（375px 幅換算）
• 見出しと説明文は左揃えにする
• 写真はサイズの違う四角を散らしたコラージュにする
• カードは写真の下にラベルと丸矢印ボタンを横並びで置く
• インタビューのカードは上下にずらして並べる
• 余白は大きく取り、詰め込まない

Elevation & Depth

• 影はほぼ使わない。平面的に作る
• 写真やカードの重なりで奥行きを出す
• 丸ボタンにはごく薄い影を付けてもよい

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角（角丸なし）。人物の切り抜きや白背景の全身写真を使う
• セクション境界: 斜めの直線で切り替えたミントのグラデーション面
• ボタンは正円かピル型にする
• 写真は角丸にしない
• 背景の形は斜めの面にする
• ブランド導線カードだけ角丸を大きくする

Components

• 丸矢印ボタン（button-circle-arrow）: ミントの正円に白い矢印。カードやリンクの右端に置く
• エントリー帯（entry-banner）: 全幅の人物写真に細い巨大欧文 ENTRY と大きな丸矢印を載せる
• 英字ラベル付き見出し（section-label）: ミントの小さい英字ラベルの下に日本語の見出しとグレーの説明文を置く
• 写真リンクカード（link-card）: 横長の写真の下に英字の小見出しと日本語のタイトル、右に丸矢印を置く
• インタビューカード（interview-card）: 白背景の全身写真に、大きな番号とイニシャルを縦書きで重ねる
• ヘッダーのエントリーボタン（header-entry）: 黒い細枠のピル型ボタン。横にハンバーガーメニューを置く
• ブランドサイト導線カード（brand-card-dark）: フッターに置く黒い角丸カード。白いロゴを 2 つ並べる
• 一覧ボタン（pill-all-view）: 黒い丸矢印と一覧ラベルのテキストを横に並べる

Do's and Don'ts

Do - ミントのグラデーションを斜めに入れて軽さを出す - 人物写真は明るく自然光で撮り、コラージュ状に重ねる - 英字ラベルと日本語見出しを必ずセットにする - リンクには丸矢印ボタンを統一して使う - 余白を広く取り、文字は細めにする

Don't - ミント以外の強い色をボタンや見出しに使わない - 写真に角丸や太い枠を付けない - 太字の見出しや装飾の多いバッジを使わない - 背景を濃い色で塗りつぶさない（写真帯は除く） - 影を強くしない

Page Structure

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

1. ファーストビュー（個性を歓迎する社風を一目で伝える）: 左に大きなコピーを置き、1 語をミントにする。右にカラーとモノクロの人物の切り抜きを重ね、筆記体の欧文を添える
2. 会社紹介（事業と働く雰囲気を伝える）: 斜めのミントグラデーションの上に、見出し・本文・テキストリンクを置く。オフィスや人物の写真を散らして配置する
3. オフィス紹介動画（職場の空気感を動画で見せる）: 全幅のオフィス写真に白い見出しを載せ、回転する文字に囲まれた再生ボタンを置く
4. ロゴの帯（ブランドの印象づけ）: 巨大なロゴと欧文を横いっぱいにはみ出させて配置する
5. 仕事を知る（業務内容への導線）: 英字ラベル付きの見出しの下に、写真リンクカードを 3 枚並べる
6. 仲間を知る（インタビュー）（社員の人柄を見せる）: 巨大な欧文の上に、番号付きの全身写真カードをずらして並べ、一覧ボタンを置く
7. 環境を知る（制度や数字への導線）: 白地に写真リンクカードを 2 枚並べる
8. エントリー（応募への誘導）: 全幅の人物写真に、細い巨大欧文と大きなミントの丸矢印を載せる
9. フッター（サイト内の導線と関連サイトへの案内）: カテゴリごとのリンク列、黒い角丸のブランドカード、ロゴと SNS アイコンを置く

Imagery

• 若い女性社員を明るく自然な表情で撮る
• 白背景の全身写真をインタビューに使う
• カラーとモノクロの人物を重ねて対比を作る
• オフィスは広角で明るく清潔に撮る
• 背景にうっすら粒子の入ったミントのグラデーションを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真リンクカードを 3 列や 2 列で並べる。SP では 1 列にするか横スクロールにする
• FV は PC が左右分割。SP ではコピーを上、人物写真を下に重ねる
• 巨大欧文は SP でも画面からはみ出させて迫力を残す
• コラージュ写真は SP では 2〜3 枚に減らして重ねる
• フッターのリンク列は SP で 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 行書くと起動時に読み込まれる。