DESIGN.md — 白グリッド×青黄グラデの放送局採用 LP（Holographic Gradient Grid Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、ポップ・元気、清潔・爽やか
• キーワード: ホログラム・グラデーション帯・方眼グリッド・黒枠ボタン・太字欧文見出し・写真カード
• 地の質感: 白地に薄いグレーの歪んだ方眼線を敷き、虹色ホログラムのぼかし図形を半透明で重ねる
• 形: 角丸なしの矩形が基本。ボタンは黒枠の矩形に黄色の影をずらして重ねる。装飾は三角形や楕円のホログラム
• 温度感: 白と水色が中心の涼しい色に、黄色で明るさを足した軽やかな温度感

Colors

• 地は白と薄い方眼線のみ。セクションごとに地色は変えない
• 強調は水色→黄緑→黄色の横グラデーション帯で行う
• 見出しと枠線は黒で締め、色は帯や装飾に任せる
• ボタンは白地・黒枠・黄色影で統一する
• 主CTAだけ紫の塗りにして他と区別する
• ピンクはNEWバッジなど極小の面だけに使う
• ホログラム装飾は半透明にして文字に重ねない
• button-entry は文字 #FFFCFE × 背景 #AB96FE のコントラスト比が 2.42:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#7654FD、4.62:1）を使う。
• slider-arrow は文字 #FFFCFE × 背景 #27A0D6 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#1E7DA7、4.53:1）を使う。

Typography

• セクション見出しは黒の太字欧文1語にする
• 欧文見出しの下にグラデーション帯を重ねて敷く
• 和文の小見出しは水色の太字にする
• 本文は行間を約2倍にとって余裕を持たせる
• FVの和文コピーは白文字に白い下線を引く
• ボタンのラベルは短い英単語1〜2語にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メンバー紹介は1枚ずつのスライダー
• 本文ブロックの幅: 画面幅の約 87%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真カード、見出し、本文、ボタンを縦に積んだ単位を繰り返す
• ボタンは中央に置き、幅は画面の約60%
• 写真の下端にグラデーション帯を敷き、そこに欧文見出しを重ねる
• NEWSは黒枠の箱に日付とタイトルを2件並べる
• スライダーは写真の左右に丸い矢印ボタンを置く

Elevation & Depth

• ボタンは黒枠に黄色の塗りを右下へ約5pxずらして重ねる
• メンバー写真には淡い青のぼかし影を付ける
• それ以外のカードは影なしのフラット

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 横長の矩形で角丸なし。メンバー写真は縦長の矩形
• セクション境界: 区切り線は使わない。方眼の地と余白で切り替える
• 角丸は使わない。矢印ボタンとバッジだけ丸くする
• 枠線は黒の2px
• 装飾は三角形や楕円のホログラムを画面端からはみ出させる

Components

• 黄色影付き黒枠ボタン（button-check）: 白地に黒2px枠、右下に黄色の影をずらした矩形ボタン
• エントリーボタン（button-entry）: 画面下に置く紫の横長ボタン。黒枠で、キラ星アイコンと白文字を載せる
• グラデ帯付き欧文見出し（heading-gradient-bar）: 水色から黄色への帯の上に、黒い太字の欧文を半分重ねて置く
• 写真カード（photo-card-label）: 写真の下端にグラデ帯を敷き、左下に欧文見出しを載せる
• お知らせ枠（news-box）: 黒枠の白い箱に日付、NEWバッジ、1行に省略したタイトルを並べ、黒線で区切る
• NEWバッジ（badge-new）: ピンクのピル型に黒の小さな文字とキラ星を入れる
• 丸矢印ボタン（slider-arrow）: 水色の円に白い矢印を入れ、写真の左右に置く
• 所属ラベル（member-caption）: 写真の左下に重ねる白い矩形。黒の太字で所属や職種を書く
• ホロ職種ステッカー（holo-sticker）: ホログラムのグラデ地に斜めの和欧文を並べたシール

Do's and Don'ts

Do - 地には方眼線を必ず敷き、白を広く残す - 見出しは欧文1語とグラデ帯をセットで使う - ボタンは全部同じ黄色影付き黒枠にする - ホログラム装飾は画面端に半透明で浮かべる - 人物写真は笑顔や動きのあるポーズを選ぶ

Don't - 角丸のカードや柔らかい影は使わない - 地色を濃い色の帯で区切らない - グラデーションに水色・黄緑・黄色以外の色を混ぜない - 明朝体や手書き書体を使わない - 主CTA以外のボタンを塗りつぶさない

Page Structure

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

1. ファーストビュー（現場の熱気とビジョンを伝える）: 撮影現場の全面写真に、白い太字の欧文キャッチと下線付きの和文コピーを左下へ置く
2. お知らせ（最新情報を知らせる）: グラデ帯の上に欧文見出しを置き、黒枠の箱に2件を並べる
3. イベント案内（説明会やインターンへ誘導する）: 写真カード、和文ラベル、本文、黒枠ボタンの順に縦へ積む
4. よくある質問案内（学生の疑問を解消する）: イベント案内と同じ構成の写真カード
5. グループ会社（関連会社の採用情報へ誘導する）: イベント案内と同じ構成の写真カード
6. 報告書（企業の取り組みを示す）: 表紙画像の写真カードと説明、ボタン
7. 社員紹介（新人）（若手の人柄を見せる）: グラデ帯見出しの下に水色の小見出しを置き、縦長写真のスライダーと所属ラベルを付ける
8. 社員紹介（職種）（職種ごとの働き方を見せる）: 縦長写真にホロステッカーと職種ラベルを重ね、一言とView allボタンを添える
9. CTA（エントリーへ導く）: 紫の横長ボタンを置き、ページ最下部にグラデ帯を敷く

Imagery

• 撮影スタジオや機材の前で働く社員を、自然光の中で撮ったドキュメンタリー風の写真
• 社員のポートレートは屋外の緑や水色の背景で全身を撮り、笑顔や動きのあるポーズにする
• 装飾は虹色ホログラムの三角形や楕円を、ぼかして半透明に重ねる
• 背景は波打つように歪めた細い方眼線にする
• 写真の下端には水色から黄色への帯を敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約65%にして中央に寄せる
• PCでは写真カードを2カラムにし、写真とテキストを左右交互に配置する
• PCの見出しは欧文の横に和文の補足を小さく添える
• PCのお知らせは波形の円形バッジと横長の箱で横並びにする
• PCの社員紹介はスライダーをやめ、4列のグリッドにする
• FVは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 行書くと起動時に読み込まれる。