DESIGN.md — 赤×銀×黒の特撮ヒーロー風採用キャンペーンLP（Tokusatsu Hero Red Silver Recruitment Campaign LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、ポップ・元気、情報量多め・訴求型
• キーワード: 特撮ヒーロー・赤とシルバー・斜めカット・帯見出し・集中線・採用キャンペーン
• 地の質感: メタリックな銀グラデ、薄いグリッド地、集中線、暗い車庫写真の上に黒を半透明で重ねた面
• 形: 斜めに切った多角形の写真、角丸の小さいカード、角丸4px前後の横長ボタン、斜めのセクション境界
• 温度感: 熱い（赤が主役）で、銀と黒が締める

Colors

• 地色は「白・シルバーグラデ」「赤」「黒（写真に黒を重ねる）」の3つを交互に使い、セクションごとに温度差を出す
• 見出し帯は、白地なら赤帯か黒帯に白文字、赤地なら黒帯に白文字にする
• 英字の大見出しは頭文字だけ赤にし、残りは地に合わせて黒か白にする
• 主CTAは赤地に白文字。赤い地の上や一覧への導線には黒いボタンを使う
• 黄色は「限定」「特別」の丸いバッジだけに使う
• ニュースカードの枠は赤い細線で囲み、ブランド色をくり返す

Typography

• 英字の大見出しの下に、日本語の小さな訳語を太字で置く
• 帯見出しは1行ずつ別の帯に分けて縦に積み、行ごとに帯の長さが変わるようにする
• 本文は行間を2.0前後と広めにとり、左揃えにする
• 見出しは太さ700〜900だけを使い、細い書体は使わない
• サブ見出しは「＼ ／」の記号や両側の横線で挟んで中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。ニュース・インタビュー・SNSのカードは2列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 8px（375px 幅換算）
• 左右の余白は12〜16px
• ボタンは中央に置き、幅は画面の約半分（180px前後）
• カードは写真の下に日付とタイトルを置く
• 大きな写真は斜めに切り、画面の端まで広げて置く
• セクション見出しは中央揃え。本文ブロックは左揃え

Elevation & Depth

• 影はほとんど使わず、面の色の切り替えで奥行きを出す
• ヒーローの立像などの切り抜き画像を、セクションの角に重ねて立体感を出す
• 追従バナーは黒地に角丸で、画面下側に浮かせる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 大きな写真は多角形（斜めカット）で切り抜く。カードの写真は角丸8pxで、赤い枠をつける
• セクション境界: 赤い面は斜めの線で区切る。それ以外は直線で地色を切り替える
• ボタンは角丸4pxの長方形で、右端に矢印か外部リンクのアイコンを置く
• バッジはギザギザの円形（星形の丸）
• 見出し帯は角丸なしの長方形
• PCの募集導線だけ、白い枠線のピル型ボタンにする

Components

• 赤い主ボタン（button-primary）: 赤地に白い太字、右端に矢印。一覧ページへ誘導する
• 黒いサブボタン（button-secondary）: 黒地に白文字、右端に矢印か外部リンクのアイコン
• 帯見出し（heading-band）: 1行ずつ赤か黒の帯を敷き、白い太字を乗せて縦に積む
• 英字の大見出し（heading-en）: 頭文字が赤の極太英字。下に日本語の小さな訳語を置く
• 横線つきサブ見出し（sub-heading-line）: 中央の文字の両側に細い横線を引く。文字は赤か黒
• ニュースカード（card-news）: 赤い枠と角丸の写真、その下に日付と2行のタイトル
• 職種タグつき写真カード（card-interview）: 写真の左上に赤い職種ラベルを重ね、下に白文字のタイトルを置く
• 限定バッジ（badge-special）: 黄色のギザギザ円に黒い太字の英字
• 追従する募集バナー（floating-banner）: 黒い角丸の帯に人物写真と募集要項への誘導。右に黄色のバッジ

Do's and Don'ts

Do - 赤・銀・黒の地色をセクションごとに交互に使う - 大きな写真は斜めの多角形に切り、勢いを出す - 見出しは帯や英字の大見出しで、くっきり目立たせる - キャラクターや人物の切り抜きを、セクションの角に重ねる - 赤い面には線路や鉄骨の写真を薄く重ね、質感を出す

Don't - パステルカラーや淡い色を主役にしない - 細い明朝体や繊細な装飾を使わない - ボタンを大きなピル型や丸いボタンにしない（PCの募集導線だけは例外） - 白い余白だけのフラットなページにしない - 黄色をバッジ以外に使わない

Page Structure

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

1. ファーストビュー（キャンペーンの世界観を一目で伝える）: キャラクターと社員の写真をコラージュし、極太の題字とサブタイトルの赤帯を重ねる
2. 導入（会社とコラボの関係を説明する）: シルバーグラデ地に黒の大きなコピーを置き、赤帯の見出し、本文、斜めカットの写真と続ける
3. 社員＝ヒーローの提起（働く人の価値を訴える）: 赤地を斜めに切り替え、黒帯の見出しを3行積む。白い本文と斜めカットの社員写真を置く
4. 募集メッセージと動画（共感を集め、動画へ誘導する）: 赤地に鉄骨の写真を重ね、中央揃えのコピーと飛ぶキャラクターを置く。動画を埋め込み、黒いボタンで誘導する
5. お知らせ（説明会などの最新情報を見せる）: グリッド地に英字見出しを置き、2列のニュースカードと赤いボタンで一覧へ誘導する
6. 特典ダウンロード（限定の配布物で応募を促す）: シルバーグラデ地に黄色バッジ、配布物の画像、赤帯見出し、黒いボタンを置く
7. 入社特典（入社後の特典を伝える）: 集中線の地に赤帯の見出し、横線で区切った対象者情報、特典の画像、注記を置く
8. 先輩インタビュー（仕事を具体的にイメージさせる）: 暗い写真の地に、職種タグつきの2列カードと赤いボタンを置く
9. SNS（SNSのフォローへ誘導する）: 暗い地に2列の投稿サムネイルを並べ、赤いボタンで外部リンクへ誘導する
10. フッター（関連サイトと会社情報を載せる）: 写真の帯の下、グレー地に題字ロゴ、枠つきバナーの2列、会社情報、黒い著作権の帯を置く

Imagery

• 現場で働く制服姿の社員を、凛としたポーズで撮る
• 車両や線路、鉄骨など現場の写真は、彩度を少し落としたリアルな質感にする
• 赤い地には現場の写真を赤く染めて薄く重ねる
• 銀と赤のメタリックなヒーローを切り抜き、ポーズをつけて配置する
• 集中線や白〜銀のグラデで、特撮・漫画らしい勢いを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは固定ヘッダーにナビを横並びにし、右端に黒い募集ボタンを置く
• PCの導入は写真と文章を左右交互の2カラムにし、斜めの赤い面を背景にする
• PCのカードはニュース・インタビューが4列、SNSが5列
• PCではセクションの間に、赤地の募集要項CTA帯（白い枠線のピル型ボタン）を入れる
• PCの本文幅は約80%で中央に寄せる

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