DESIGN.md — 青×紺の斜めカット製造業採用 LP（Bold Blue Industrial Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、信頼・誠実、クール・先進的
• キーワード: 斜めカット・青のグラデーション層・イタリック欧文・ドキュメンタリー写真・動画訴求・製造業の現場
• 地の質感: ベタ塗りの青面とシネマ調の実写。グラデーションや紙の質感は使わない
• 形: 平行四辺形の写真枠、V字のセクション境界、角丸なしのカード、円形の矢印ボタン
• 温度感: クールで硬派。人物写真の自然光で少しだけ温かみを足す

Colors

• 面は青（#0067B2）と濃紺（#1B2A6C）を交互に置き、セクションの切り替わりを色で見せる
• 明るい面は社員紹介のグレー地とカードの白だけに使う
• 青面の上の文字は白だけ。強調するときは濃紺の太字ロゴを重ねる
• エントリーボタンは白地に緑とオレンジの細い枠。年度ごとに色を分ける
• 濃紺の円形矢印ボタンはグレー地で、白の円形矢印ボタンは紺地で使う
• コピーライト帯だけ黒にしてページを締める
• button-entry は文字 #C45E2A × 背景 #FEFEFF のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BA5928、4.58:1）を使う。

Typography

• 欧文の大見出しは太いイタリックで、画面幅いっぱいか、はみ出すくらいに置く
• ブランドワードの一部を青、残りを白か濃紺にして 2 色で組む
• 英字ラベルは大文字にし、字間を 0.2em ほど広げる
• 和文本文は字間を広めに取り、中央揃えか少しずつ字下げして斜めのリズムを付ける
• 写真の上の文字はすべて白の太字にする
• 縦書き明朝は動画の横の白い余白だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは 1 枚ずつ表示
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードとサムネイルは左右に 16〜28px の余白を取る
• セクション見出しは中央に置き、上下に 40px 以上空ける
• 番号付きの項目は、番号→横長写真の組を縦に 5 つ積む
• カルーセルの下には左右の円形矢印と中央のページ番号を置く
• フッターメニューは全幅のアコーディオン行を線で区切る

Elevation & Depth

• 社員カードだけに薄い影を付ける（0 4px 10px rgba(0,0,0,.15)）
• その他の面は影なしのフラットにする
• 写真の上の文字は暗いオーバーレイで読みやすくし、文字に影は付けない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 平行四辺形に斜めカットしてコラージュにする。番号付き項目とカードは角丸なしの長方形
• セクション境界: V 字の斜め境界や、大きな欧文ロゴをセクションの端にかぶせて切り替える
• 矢印ボタンは直径 40px の正円
• エントリーボタンは角丸 2px の細枠
• 斜めの角度は約 15° にそろえる
• ハンバーガーボタンは斜めに切った台形にする

Components

• エントリーボタン（button-entry）: 白地に色枠。上に年度の小ラベル、下に太字の欧文と区切り線とサブ文言、右に矢印。2 つを横に並べる
• 斜めカット写真コラージュ（slanted-photo-collage）: 現場の人物写真を平行四辺形に切り、ずらして重ねる
• 巨大イタリック欧文（giant-italic-wordmark）: セクション境界に白と青の 2 色で敷く太い斜体ロゴ
• 動画サムネイル（video-card）: 中央に半透明の再生ボタン。下か横にキャプションを添え、縦書きのコピーと組み合わせる
• 円形矢印＋ページ番号（carousel-arrows）: 左右に正円の矢印、中央に「3/5」形式の番号を置く
• 社員カード（staff-card）: 上に写真と白い斜体コピー、下の白地に職種・水色の短い下線・入社年と所属
• 番号付き写真バナー（numbered-photo-banner）: 白い 2 桁番号の下に横長写真を置き、中央に白い 3 行コピーを重ねる
• 線付きリンク見出し（heading-with-rule）: 中央の大見出しの下に、左の細い横線とリンク文字を並べる
• フッターアコーディオン（footer-accordion）: 青地に白の英字メニューを並べ、右に＋アイコン、行間に細線を引く

Do's and Don'ts

Do - 青と濃紺の面を交互に使って、セクションを色でつなぐ - 写真は斜めに切り、動きと前進の感じを出す - 人物は真剣な表情の現場写真を大きく使う - 大きな欧文ロゴを繰り返し出して、ブランドの印象を残す - カルーセルには矢印とページ番号を必ず付ける

Don't - パステル色や暖色を面に使わない（暖色はエントリー枠だけ） - ボタンをピル型や立体的なグラデーションにしない - 丸ゴシックや手書き書体を使わない - 写真を丸く切り抜かない - 青面の上に黒文字を置かない

Page Structure

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

1. ヘッダー（ブランドの表示とメニュー）: 青帯の左に小さな英字ラベル、中央にロゴ、右に斜めカットのハンバーガー
2. エントリー導線（年度別の応募へすぐ誘導する）: グレー帯に色枠ボタンを 2 つ横に並べる
3. ファーストビュー（スローガンと動画で引き込む）: 全面の人物動画に斜体の和文ロゴを重ね、下端に巨大な欧文ロゴを敷く
4. 理念メッセージ（求める人物像を伝える）: 青地に和文ロゴと白い詩のような本文を斜めに組み、続けて斜めカットの写真コラージュ
5. 動画紹介（実話の映像で共感を生む）: V 字境界の青地に英字ラベルと大きな欧文タイトル、動画と縦書きコピー
6. CM カルーセル（複数の映像を見せる）: 濃紺地に動画カードとキャプション、円形矢印とページ番号
7. 社員紹介（働く人を具体的に見せる）: グレー地に斜体の和文見出し、影付きの社員カードをカルーセルで
8. 事業紹介（社会への貢献の広さを示す）: 濃紺地に番号付きの写真バナーを 5 つ縦に積む
9. フッター（サイト内の回遊と SNS への誘導）: 青地にロゴとページトップへのリンク、アコーディオンメニュー、SNS アイコン、最後に黒のコピーライト帯

Imagery

• 作業服やヘルメット姿の社員を、浅い被写界深度でシネマ調に撮る
• 横顔や目線を外したカットで、真剣さと自然さを出す
• 事業写真は工場、街、船、地球などの俯瞰で、夕景の暖色を少し入れる
• 写真の上に白文字を置くときは、写真を 30〜40% 暗くする
• 装飾は斜めの帯と巨大な欧文ロゴだけにし、イラストは使わない
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーを白地にし、横並びのグローバルメニューとエントリーボタンを置く
• PC の理念セクションは、左に文章、右に斜めカットのコラージュの 2 カラム
• PC の動画カルーセルは 3 枚を横に並べて、両端を見切れさせる
• PC の社員カードは 5 枚前後を横に並べ、端を見切れさせる
• PC の事業紹介は 5 つの写真を横 1 列に並べる
• PC のフッターは 5 列のリンクリストに展開する

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