DESIGN.md — 白地×多色グラデ帯のミニマル採用 LP（Colorful Gradient Bar Minimal Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: シンプル・ミニマル、クール・先進的、ポップ・元気
• キーワード: 多色グラデ帯・オフホワイト・縦書きラベル・大余白・細線枠・太ゴシック
• 地の質感: フラットな面。グラデは横方向のにじみで、影や質感はほぼ無い
• 形: 直角の帯・矩形ブロックが主役。ボタンだけピル型、写真カードは小さめの角丸
• 温度感: 白地でニュートラル。差し色は鮮やかで明るく、温度はやや暖かい

Colors

• 地はオフホワイト一色。セクションごとに色面を敷き分けない
• 差し色は 10 色前後の鮮色を横グラデで隣り合わせにし、帯やブロックとして使う
• テキストは基本黒。色文字は使わず、色は装飾の帯とグラフにだけ使う
• グラフ・インフォグラフィックは差し色パレットから流用する
• 最終CTAエリアだけ全面を多色グラデにして、黒ピルボタンを置く
• 罫線は黒の 1px で、カードの枠や下線に使う

Typography

• FVは画面幅いっぱいの極太コピーに、色帯を重ねて一部を隠す
• 本文は短い行で改行し、行間 2.4 前後と広く取る
• 字間は 0.05〜0.2em と広めに取る
• セクションラベルは左レールに縦書きで置き、頭に黒丸を付ける
• 数字だけ欧文の極太にして大きく見せ、単位は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左 33px を縦書きラベル用レールにする
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 120px、基本単位 8px、カード内 16px（375px 幅換算）
• 本文ブロックは左レールの右側に左揃えで置く
• セクション間に多色帯を左右どちらかへ寄せて置き、余白のリズムを作る
• インフォグラフィックは黒細線のグリッド枠で区切る
• 写真カードは縦に並べ、下にキャプションを 1〜2 行付ける
• 余白は詰めず、セクション間を 100px 以上空ける

Elevation & Depth

• 影は基本使わず、フラットにする
• 動画サムネのみ白カードにごく薄い影を付ける
• 再生アイコンは半透明の白円にする

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 横長の矩形で角丸 8〜10px。社員動画は縦長の角丸カード
• セクション境界: 直線。境界は余白と浮かべた色帯で示す
• 色帯は角丸にしない
• ボタンは黒 1px 枠の白ピルか、黒塗りのピル
• インフォ枠は直角の黒罫線で組む

Components

• 多色グラデ帯（color-gradient-bar）: 2〜4 色が横ににじむ細い帯やブロック。見出し周りや余白に浮かべる
• 縦書きセクションラベル（side-rail-label）: 左端の白いレールに、黒丸と縦書きのセクション名を置く
• 詳しくみるボタン（button-outline-pill）: 白地に黒 1px 枠のピル型。左に文字、右端に小さな矢印
• 外部エントリーCTA（button-primary）: グラデ背景の上に置く黒塗りの大きなピル。白文字 2 行と外部リンクアイコン
• 開く／もっとみるトグル（accordion-underline）: 下線 1 本と右端の山形矢印だけのシンプルな展開部品
• 数字インフォグラフィック（stat-grid）: 黒罫線のグリッドに、大きな数字・人型アイコン・円グラフを配置する
• 社員記事カード（photo-card）: 角丸の横長写真と、その下の太字キャプション
• 斜めスラッシュ見出し（tilted-caption）: 短い見出しを斜めに置き、左右を細い斜線で挟む

Do's and Don'ts

Do - オフホワイトの地と黒文字を基本に、色は帯とブロックに限定する - グラデ帯は鮮色同士を横方向ににじませ、角は直角にする - セクションごとに左レールの縦書きラベルを付ける - 余白をたっぷり取り、帯を左右非対称に浮かべる - ボタンは白×黒枠のピルで統一し、最終CTAだけ黒塗りにする

Don't - 見出しや本文に色文字を使わない - ドロップシャドウや立体的な装飾を入れない - 背景をセクションごとに色分けしない - 帯に角丸を付けたり、斜めに傾けたりしない - パステルにくすませず、鮮色の彩度を保つ

Page Structure

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

1. ファーストビュー（スローガンで強く印象付ける）: 極太の黒コピーを縦に並べ、多色グラデ帯を横に重ねる。右端に縦書きの欧文ラベルを置く
2. お知らせ（募集状況を伝える）: 黒罫線の表組みに日付と短文を入れる
3. ステートメント（会社の想いを伝える）: 短い行の太字本文を広い行間で積み、周りに色ブロックを散らす
4. リクルート映像（動画で世界観を伝える）: 白い角丸カードに再生アイコンを重ねる
5. トップメッセージ（代表の言葉を伝える）: 大見出し 2 行と開閉トグル、右下に肩書きと手書き署名
6. 仕事紹介（事業領域を見せる）: 問いかけ見出しの下に 3 列×4 段の写真タイル、リードと詳しくみるボタン
7. 社員インタビュー（社員のリアルな声を伝える）: 角丸写真カードを縦に並べ、もっとみるで展開する
8. ワークスタイル動画（社員の1日を見せる）: 斜めの見出しと、縦長の動画カード 2 枚を横スクロールで並べる
9. 数字で見る会社（データで実態を示す）: 黒罫線グリッドに大数字・円グラフ・アイコンを配置する
10. 福利厚生（働く環境を案内する）: 見出しの上に色帯を並べ、写真・リード・ボタンを続ける
11. Q&A（よくある質問へ誘導する）: 多色の横線を数本並べ、写真・リード・ボタンを続ける
12. 採用チームメッセージ（応募の背中を押す）: 長めの太字本文と集合写真
13. CTA（外部エントリーへ送る）: 全面の多色グラデにスローガンと黒ピルボタンを置く

Imagery

• 社員写真は明るいオフィスで自然光を使い、笑顔の集合・並び立ちで撮る
• イベント写真は夜景・照明・LEDなど、鮮やかで暗めの現場カットを使う
• 装飾は多色グラデの矩形・帯だけにし、イラストは使わない
• グラフ用のアイコンは黒い太線のフラットな人型・電球・カレンダー
• 署名は手書き風の毛筆線で添える
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも左に縦書きラベルのレールを残す
• PCのFVは極太コピーを横組みにし、大きな色ブロックで一部を隠す
• PCは見出し・リードとボタンを左、写真タイルやグラフィックを右に置く 2 カラム
• 記事カードはPCで 2 列グリッドにする
• 数字インフォグラフィックはPCで横長グリッドに再配置する
• 最終CTAのグラデはPCでは赤→黄→青の虹色帯を全幅に敷く

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