DESIGN.md — 青グラデと白地の誠実な採用サイト LP（Blue Gradient Team Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型
• キーワード: 紺×青グラデ・頭文字だけ赤い英字見出し・社員の笑顔写真・数字タイル・幾何学ポリゴン背景・ピル型ボタン
• 地の質感: 白地に淡い水色の三角形ポリゴン模様。ファーストビューとインタビューは青〜紫〜ピンクのグラデ地。
• 形: 写真カードは角なし。ボタンはピル型。クロストークの帯はX字に交差する斜めの面で切る。
• 温度感: やや寒色。青の爽やかさに、写真の人肌と赤のアクセントが温かみを足す。

Colors

• 地は白か淡い水色のポリゴン模様にして、青はタイルやボタンなどの面で見せる。
• 主なボタン・FAQ・カテゴリバッジは紺の単色でそろえる。
• 赤は英字見出しの頭文字1文字だけに使う。
• 数字タイルは紺・青・シアンを市松状に交互に並べ、文字は白にする。
• ファーストビューとインタビューの地は水色〜紫〜ピンクの淡いグラデにする。
• グラデ地の上に置くボタンは白地に紺文字にする。

Typography

• セクション見出しは英字の大文字で、頭文字だけ赤、残りは淡いグレーにする。
• 英字見出しのすぐ下に、日本語訳を小さな太字で中央にそろえて置く。
• 統計の数字は極太にして、単位は数字の半分ほどの大きさにする。
• 本文は字間を広めにし、行間を2倍前後にとる。
• インタビューのコピーは白い帯の上に縦書きで載せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。統計は 2 列のタイル、Instagram は 3 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約22pxで統一する。
• 写真カードは全幅のカードを約16px間隔で縦に積む。
• 各セクションの最後に、中央にそろえたピル型ボタンを1つ置く。
• インタビューとギャラリーは画面の端からはみ出す横スライダーにする。
• 統計タイルは隙間なく敷き詰める。

Elevation & Depth

• 影はほとんど使わず、面の色と写真で奥行きを出す。
• インタビューカードは角丸のカードをグラデ地の上に浮かせて見せる。
• FAQとボタンも影なしのフラットな面にする。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は角なしの長方形。インタビューだけ角丸8px。
• セクション境界: インタビューの上端は大きな弧で切る。クロストークはX字に斜めに交差する帯で区切る。
• カード上のラベルは、右端を斜めに切った白い台形のプレートにする。
• バッジは角丸の小さな紺の長方形にする。
• FAQは角丸8pxの紺の帯にする。

Components

• 紺のピル型ボタン（button-primary）: 中央に置き、文字の右に「>」を添える。
• 白いピル型ボタン（button-light）: グラデ地の上に置き、紺文字の右端に矢印を付ける。
• 頭文字が赤い英字見出し（section-heading）: 英字の大文字の頭文字だけ赤、残りは淡いグレー。下に日本語訳を添える。
• 写真リンクカード（photo-link-card）: 全幅の写真の左下に、斜めに切った白いプレートを置く。プレートには英字ラベルと日本語タイトルを入れる。
• 数字タイル（stat-tile）: 青系の正方形に、項目名・極太の数字・線画アイコンを白で載せる。
• カテゴリバッジ（category-badge）: お知らせや動画に付ける紺の小さなラベル。
• FAQのアコーディオン（faq-accordion）: 紺の帯の左にQ、右に＋を置いて開閉する。
• インタビューカード（interview-card）: グレー背景で撮った全身写真に、縦書きコピーの白帯を重ねる。下にイニシャルと入社年を入れる。

Do's and Don'ts

Do - 見出しは必ず英字＋日本語訳の2段にし、頭文字を赤くする。 - 会社データは数字を主役にして、青系タイルで敷き詰める。 - 社員は笑顔の正面写真を使い、人の多さを見せる。 - ボタンは紺のピル型1種類にそろえる。 - 地の背景に淡いポリゴン模様を入れて、清潔感を出す。

Don't - 赤を面やボタンに使わない。 - 青以外の濃い色をタイルに混ぜない。 - ボタンに影やグラデをかけない。 - 本文を詰めた行間で組まない。 - 写真カードに装飾の枠を付けない。

Page Structure

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

1. ファーストビュー（チームの姿勢を伝える）: 青〜紫のグラデ地に大きな英字コピーを置く。下にパネルを持った社員の写真を横に並べる。
2. お知らせ（最新情報を示す）: 日付と紺のバッジに見出しを添えた行を3件並べ、一覧へのリンクに下線を引く。
3. ミッション（企業理念を伝える）: 極太の大コピーを置き、中央にそろえたリードと本文を続ける。下に集合写真を淡く重ねる。
4. メッセージ・会社概要の導線（代表と会社の情報へ誘導する）: 写真カード2枚を並べ、1枚は紺を半透明で重ねる。
5. ムービー（動画で社風を見せる）: 16:9のサムネに再生アイコンを置き、バッジとタイトルを付ける。
6. 社員インタビュー（個人の声を伝える）: 弧で切ったグラデ地に、縦書きコピー付きのカードを横スライダーで並べる。
7. クロストーク（座談会へ誘導する）: X字に交差する青い帯の中央に、英字タイトルを白抜きで置く。
8. 制度紹介カード（職種・研修・キャリア・福利厚生を案内する）: 斜めに切ったプレート付きの写真カードを縦に積む。
9. ギャラリー（イベントの雰囲気を見せる）: 巨大なグラデ英字の上に写真を散らした横スライダーを重ねる。
10. 数字で見る会社（定量的な魅力を伝える）: 青系タイルを市松状に並べ、数字・アイコン・円グラフで見せる。
11. SNS（日常の発信を見せる）: 3列×2行の正方形サムネを並べる。
12. よくある質問（不安を解消する）: 紺の帯のアコーディオンを4件並べ、下に「もっと見る」ボタンを置く。

Imagery

• スーツやオフィスカジュアルの社員を、明るいオフィスか白背景で自然な笑顔に撮る。
• 人物の背景は水色〜紫のグラデにする。
• アイコンは白い線画にして、建物・地図ピン・人物などで数字の意味を示す。
• 背景には淡い水色の三角形ポリゴン模様を入れる。
• 集合写真は大人数のイベントを広角で撮る。
• 社屋の写真には紺を半透明で重ねて、文字を読みやすくする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでは本文を幅約60%の中央にそろえ、左右に白い余白を広くとる。
• お知らせはPCで左に見出し、右に一覧の2カラムにする。
• 制度紹介カードとメッセージのカードはPCで2列に並べる。
• 統計タイルはPCで4列にし、項目によって2マス分の大きさに広げる。
• インタビューはPCで5〜6枚を同時に見せ、ページ数も表示する。

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