DESIGN.md — 鮮やかな青×オレンジの不動産採用 LP（Vivid Blue Corporate Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 清潔・爽やか、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: ロイヤルブルー・幾何学の三角形・細身の欧文見出し・角丸カード・人物写真・オレンジのアクセント
• 地の質感: ベタ塗りの平面が主体。FV と最後の CTA にだけ、半透明の三角形と光のグラデーションを重ねる
• 形: 角丸 12〜20px のカードとピル型ボタン。斜めの三角形を背景の装飾に使う
• 温度感: やや寒色寄り。オレンジのボタンで温かみを足す

Colors

• 地の色はライトグレー → 白 → 鮮やかな青 → 紺の順に切り替えて、セクションのまとまりを示す
• オレンジは MORE ボタンとスライダーの矢印だけに使い、ほかでは使わない
• 青い地の上の文字・線・アイコンはすべて白にする
• 白い地の上の日付やローマ字表記は、小さな青い文字で添える
• 座談会のブロックは濃い青のカードにし、写真をうっすら透かす
• FV と最後の CTA には、水色〜青の半透明の三角形を重ねる
• button-more は文字 #FFFFFF × 背景 #FE6925 のコントラスト比が 2.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D34301、4.59:1）を使う。

Typography

• 見出しは「小さな和文 + 大きな細身の欧文」を 2 段で組み、中央か左に揃える
• 青い地の欧文見出しは、前半を極太、後半を細字にする
• 本文は行間 2.0 程度でゆったり組む
• FV の大コピーだけ手書き風の太字にして、斜めのリズムを出す
• 人名は太字、ローマ字名は小さな青い文字で横に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。社員紹介だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 22px（375px 幅換算）
• 左右の余白は約 19px にそろえる
• 写真の帯は画面の端まで広げて置く
• カードは写真の帯に一部重ねて、奥行きを出す
• リンクカードは縦に並べ、間隔は約 15px
• 青い地の中のブロックは細い白線（半透明）で区切る

Elevation & Depth

• 白いカードには、ごく薄いぼかし影（0 4px 16px rgba(0,0,0,.06)）をつける
• 濃い青のカードには、軽い影をつけて地から浮かせる
• ボタンは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 角丸 8〜20px の長方形。人物は胸から上で、頭が少し枠からはみ出すように切り抜く
• セクション境界: 直線で背景色を切り替える。一部に斜めの三角形を装飾として置く
• MORE ボタンは完全なピル型にし、右端に丸囲みの矢印アイコンを置く
• 生活情報のカードは大きな角丸の写真カード
• フッター CTA は白い細線で囲んだ角丸の枠ボタン
• FV のコピー下に、白いベタ帯の上に青い文字を置いたラベルを 2 段重ねる

Components

• MORE ボタン（button-more）: オレンジのピル型。左に欧文ラベル、右に丸囲みの矢印
• 2 段見出し（section-heading）: 和文の小見出しの下に、細身の欧文の大見出しを置く
• 特集カード（feature-card）: 白い角丸カード。写真の帯に重ねて、見出し・リード文・MORE ボタンを入れる
• 番号付きリストのカード（talk-list-card）: 濃い青のカード。「01 / テーマ名」を白線で区切って並べ、各行の右端に矢印を置く
• お知らせ一覧（news-list）: 青い日付と本文を 1 件ずつ点線で区切る。見出しの下に青い線を引く
• 社員カード（staff-card）: 角丸の人物写真の下に、入社年・所属・名前・青いローマ字名を置く
• 写真のリンクカード（photo-link-card）: 全面写真に白い見出しを中央に置き、右下に丸囲みの矢印を入れる
• 白いリンクタイル（link-tile）: 青い地の上の白い角丸ボタン。青い太字のラベルを置き、外部リンクには右に外部アイコンを付ける
• エントリーの枠ボタン（button-outline-entry）: 紺の地の上に、白い細線で囲んだ角丸の枠ボタンを置く。白い太字のラベルと矢印を入れる

Do's and Don'ts

Do - 青の面積を広く取り、オレンジは CTA だけに絞る - 欧文見出しは細身で大きく、和文はその上に小さく置く - 写真は角丸で切り抜き、余白を広めに取る - 人物写真は自然光の笑顔のものを使う - 青い地の上の要素は白で統一する

Don't - オレンジを見出しや背景に広く使わない - 欧文見出しを極太のセリフ体にしない（細身のサンセリフを使う） - 派手な立体感の強い影やグラデーションのボタンを使わない - 角ばった四角い写真を多用しない - 暖色の背景を使わない

Page Structure

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

1. ファーストビュー（前向きな企業像を印象づける）: 人物の全身写真に半透明の青い三角形を重ね、手書き風の白い大コピーを斜め気味に置く。上部に小さな写真を 4 枚並べる
2. コンセプト文（仕事の価値観を語る）: 明るい青の地に白い本文を長めに組む。最後に白い帯ラベルを 2 段置く
3. お知らせ（最新情報を伝える）: グレーの地に、欧文見出し・青線・日付入りのリストを点線区切りで並べる
4. 特集（風土）（社風を紹介する）: 角丸写真のグリッドに白いカードを重ね、MORE ボタンを置く
5. 座談会（社員の生の声へ誘導する）: 濃い青のカードに、番号付きのテーマを 4 行並べる
6. 社員紹介（働く人を見せる）: 白い地に、角丸の人物写真の 2 カラムグリッドを置く
7. プロジェクト紹介（実績を見せる）: リード文の下に建物写真をモザイク状に組み、MORE ボタンを置く
8. 働き方・制度（データや福利厚生へ誘導する）: 鮮やかな青の地に、大きな写真のリンクカードを縦に並べる
9. 採用情報・会社情報（詳細ページへ案内する）: 青い地に太字と細字の欧文見出しを置き、白いリンクタイルを 3 つずつ並べる
10. 最終 CTA（エントリーを促す）: 紺の地に光の三角形を重ね、白いコピーの下に枠線ボタンを 2 つ置く

Imagery

• 自然光のもとで、オフィスや屋外の笑顔の社員を撮る。スーツやジャケットなどのオフィスカジュアル
• 背景をぼかした浅い被写界深度にし、青みのある爽やかな色調にする
• 建物は青空を背景に、外観をパースで撮る
• 半透明の青い三角形を、光の筋のように重ねる装飾
• データは青い立体の棒グラフのイメージで見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を横長にし、右側に写真のコラージュを斜めに並べる
• PC のお知らせは、見出しを左、リストを右に置く 2 カラム
• PC の特集は、カードの左右に写真のグリッドを並べる
• PC の社員紹介は横スクロールのスライダーにし、オレンジの丸い矢印で送る
• PC の生活情報は 3 カラム、採用・会社情報は見出しを左に置き、タイルを右に 3 つ並べる
• PC の最終 CTA は枠ボタンを 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 行書くと起動時に読み込まれる。