DESIGN.md — 深紅×斜めカットの製造業採用 LP（Crimson Diagonal Manufacturing Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、信頼・誠実、クール・先進的、情報量多め・訴求型
• キーワード: 深紅・斜めカット・欧文極太見出し・黒帯テキスト・工場写真・表組み
• 地の質感: フラットな単色面と実写写真。影はほぼ使わない。薄いピンクの平行四辺形を背景に敷いて奥行きを出す
• 形: 角丸なしの矩形が基本。写真は平行四辺形に切り抜き、斜めの赤い帯を重ねる
• 温度感: 熱い赤とニュートラルなグレーの対比。全体はやや硬派で温かみもある

Colors

• 白地とライトグレー地をセクションごとに交互に使う
• 深紅は欧文見出し、和文ラベルの帯、STEP の帯、表の見出し行、CTA、コピーライト帯に絞って使う
• 写真の上に重ねるコピーは黒帯に白文字で置く
• フォームは淡ピンクのラベル帯と淡グレーの入力欄で、赤を薄めた色にそろえる
• 必須バッジは深紅、任意バッジは青で区別する
• 黄緑の小さな四角を背景に散らし、ささやかな遊び心を足す

Typography

• セクション見出しは、深紅の極太欧文に、赤帯＋白い明朝の和文ラベルを中央そろえで縦に重ねる
• 写真に重ねるコピーは 1 行ずつ黒帯で囲み、行ごとに右か左にそろえる
• STEP 番号は細い STEP 表記と極太の 2 桁数字を組み合わせる
• 本文は行間 1.8 程度の細めのゴシックで、色は濃いグレーにする
• 募集要項とフォームの見出しは和文太字の深紅で、帯は付けない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューのみ横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• コンテンツは左右 10px ほどの余白で、ほぼ画面いっぱいに置く
• 写真と黒帯コピーは左右をずらして重ね、ジグザグに配置する
• STEP カードの間は赤い点線の縦線でつなぐ
• 募集要項は見出し行と内容行を縦に積む 1 列の表にする
• 研修の項目は写真と説明文を交互に縦へ積む

Elevation & Depth

• 影はほぼ使わない。フラットな面の重なりで階層を作る
• ボタンにだけ、ごく薄い影を付けてよい
• 写真の上には半透明の黒いオーバーレイを敷き、その上に白文字を置く

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: VISION などのブロックは写真を平行四辺形に切り抜き、研修の写真は横長の矩形にする
• セクション境界: 背景色を直線で切り替える。ファーストビューだけ斜めの赤帯で写真を切る
• 角丸は使わず、すべて直角にする
• 斜めの角度は約 60° でそろえる
• 背景に淡ピンクの平行四辺形を写真の後ろへずらして敷く
• バッジだけ 2px 程度の角丸を許す

Components

• 欧文＋和文ラベル見出し（section-heading）: 深紅の極太欧文の下に、赤帯で囲んだ白い明朝の和文を置く
• 黒帯コピー（black-band-copy）: 1 行ずつ黒い帯に白文字を載せ、写真に重ねる
• 詳しく見るボタン（button-more）: 赤い矩形に白文字と右向きの三角を付け、右寄せで置く
• インタビューカード（interview-card）: 縦長の人物写真の下半分に黒の半透明帯を敷き、ラベル・丸矢印・コピー・所属を載せる
• STEP カード（step-card）: 上に赤帯で STEP 番号、下の白面に太字の小見出しと説明文。カード間は赤い点線でつなぐ
• 黒ラベル見出し（black-label）: 左寄せの黒い矩形に白い太字で、プログラム名などの小見出しを示す
• 募集要項の表（spec-table）: 中央そろえの赤い見出し行と、白地に左寄せの内容行を交互に積む。外枠はグレーの細線
• フォームの項目（form-field）: 淡ピンクの帯に太字ラベルと必須・任意バッジ、その下に淡グレーの入力欄
• 送信 CTA（button-primary）: 幅 75% ほどの赤い矩形に白い太字の中央そろえ

Do's and Don'ts

Do - 見出しは必ず欧文と和文ラベルの 2 段で組む - 写真は斜めに切り、赤い斜めの帯か淡ピンクの図形を重ねて動きを出す - 写真の上の文字は黒帯で読みやすくする - 工程は番号付きのカードにして、線でつなぐ - 条件は赤い見出し行の表で一覧にする

Don't - 角丸やピル型のボタンを使わない - 深紅以外の強い色を主役にしない - グラデーションや強い影を使わない - 欧文見出しを細いウェイトにしない - 本文を写真の上に帯なしで直接置かない

Page Structure

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

1. ヘッダー（ロゴ、採用導線、メニューを示す）: 白地の左にロゴ、右に赤い採用アイコンボタンと黒いハンバーガーメニューを並べる
2. ファーストビュー（企業の歴史と未来志向を印象づける）: 作業中の人物写真を全面に置き、斜めの赤帯をかぶせて白い太字コピーを 2 行載せる。下にスライドのインジケーター
3. ビジョン（企業理念を伝える）: 平行四辺形の写真に黒帯コピーを 3 行重ね、赤い詳しく見るボタンを置く
4. 仕事紹介（仕事内容への興味を引く）: 欧文＋和文の見出しの下で、斜めに切った写真と黒帯コピーを左右反転させて配置する
5. 社員インタビュー（働く人の姿を見せる）: 縦長の人物写真カードを横スクロールで並べ、下部の黒い半透明帯に文字を載せる
6. 選考フロー（応募から内定までの手順を示す）: グレー地に 5 つの STEP カードを点線でつなぎ、最後のステップは赤い帯だけで締める
7. 研修制度（育成の仕組みで安心させる）: 黒ラベルで学歴別に分け、写真と説明文を交互に縦へ積む
8. 募集要項（条件を正確に示す）: 白地に赤い和文見出しを置き、赤い見出し行と白い内容行を積んだ表にする
9. お問い合わせフォーム（応募を受け付ける）: 淡ピンクのラベル帯に入力欄を重ねた項目を並べ、赤い大きな送信ボタンを置く
10. フッター（会社情報とサイト内リンク）: グレー地にロゴ・住所・連絡先を置き、赤い縦線付きの小見出しで下線リンクを分類する。最下部は赤い帯にコピーライト

Imagery

• 工場で働く若手社員を斜め横から撮った、作業に集中する表情の写真
• 溶けた金属や火花、重機など、迫力のある製造現場の写真
• 作業着姿で先輩が後輩に教える、オフィスや現場の自然なスナップ
• ファーストビューでは暖色の背景をぼかし、人物を手前に大きく写す
• 装飾は淡ピンクの平行四辺形と、黄緑の小さな四角の散らしだけにとどめる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビを横に並べ、採用だけ赤いタブで強調する
• PC のビジョンと仕事紹介は、写真と見出しを左右に並べたジグザグ配置にする
• PC のインタビューは 4 枚を横 1 列に並べる
• PC の STEP は、左に赤い番号ボックス、右に白い説明帯を置く横長の行にする
• PC の研修は写真 3 列のグリッド、募集要項とフォームは左に見出しセル・右に内容を置く 2 列の表にする
• PC は中央寄せで、本文の幅を約 70% に絞る

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