DESIGN.md — 青トーン写真×極太欧文の製造業採用 LP（Industrial Blue Condensed Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 力強い・インパクト、クール・先進的、信頼・誠実、シンプル・ミニマル
• キーワード: 青モノトーン写真・極太コンデンス欧文・白地×紺・線枠ボタン・縦書き英字ラベル・現場のリアル
• 地の質感: 写真に青〜紺のデュオトーン風の色をかぶせ、その上に白い文字をのせる。それ以外の面は白無地でフラット。
• 形: 角丸なし。直線の矩形と細い枠線、写真はスクエアな切り抜き。
• 温度感: 寒色でクール。人物写真で熱量を足す。

Colors

• 地は白にして、文字はほぼ黒に近い紺 1 色にする。
• 写真セクションは青〜紺の色をかぶせ、文字は白に統一する。
• 鮮やかな水色は英字の小ラベルとリストの丸アイコンだけに使う。
• 赤は外部の動画への誘導ボタン 1 か所だけに使う。
• グラデーションや多色使いはしない。寒色の写真で変化をつける。

Typography

• セクション見出しは、大きなコンデンス英字の下に小さな和文サブを中央揃えで付ける。
• 英字見出しは画面幅いっぱいまで大きく組む。
• 職種名だけ明朝の大きな文字にして、静かな格を出す。
• 写真の上の本文は白の太字ゴシックで、行間を 2 前後と広くとる。
• 縦書きの英字ラベルを写真セクションの右端に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は職種 2 列、情報カード 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 96px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真セクションは画面幅いっぱいの全幅にする。
• 白地のコンテンツは左右に約 20px の余白をとる。
• 職種ブロックは写真→明朝の職種名→2 行のコピー→枠ボタンの順で中央揃えにする。
• 情報カードは写真の下に、水色の英字ラベルと和文タイトル＋外部リンクアイコンを左揃えで置く。
• セクションの間は大きな白い余白で区切る。

Elevation & Depth

• 影は使わずフラットにする。
• 奥行きは写真に色をかぶせることで出す。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 矩形でそのまま切り抜く。職種の写真は縦長に近い比率、カードは横長にする。
• セクション境界: 直線で切り替える
• 角丸は一切使わない。
• ボタンは細い線の矩形の枠にする。
• 右端に三角の矢印を置く。

Components

• FV 英字見出し（hero-display）: 写真の上端に重ねた全幅の極太英字。写真の下端には和文のキャッチを重ねる。
• 紺の枠ボタン（button-outline）: 白地に紺の 2px の線で囲み、左寄せの文字と右端の黒い三角を置く。
• 白の枠ボタン（button-outline-white）: 写真の上に置く白い線の枠ボタン。応募導線に使う。
• 赤の動画ボタン（button-video）: 赤い塗りの面に動画アイコンと白文字、右端に白い丸の矢印を置く。
• 英字＋和文の見出し（section-heading）: 中央に大きなコンデンス英字を置き、その直下に小さな和文の太字を添える。
• 縦書き英字ラベル（vertical-label）: 写真セクションの右端に、縦線と縦書きの英字を置く。
• リンクカード（info-card）: 写真の下に水色の英字ラベルと和文タイトルを置き、外部リンクアイコンを付ける。
• フッターナビ（footer-nav）: 水色の丸い再生アイコン付きの項目と、ハイフン付きの子項目を並べたサイトマップ。

Do's and Don'ts

Do - 写真は青寄りの寒色に統一して色をかぶせる。 - 英字見出しはコンデンス体を大きく組む。 - ボタンは角丸なしの細い線の枠にする。 - 白地のセクションの間は余白を広くとる。 - 差し色の水色は、小さなラベルとアイコンだけに使う。

Don't - 角丸やピル型のボタンを使わない。 - 暖色や派手な塗りのボタンを多用しない。 - 影や立体的な装飾を付けない。 - 丸ゴシックや手書きの書体を使わない。 - 写真をカラフルなまま使わない。

Page Structure

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

1. ファーストビュー（企業の姿勢を一言で伝える）: 現場写真に全幅の英字を重ね、下端に和文のキャッチを置く。
2. コンセプトメッセージ（働く思いを語る）: 人物写真に灰青の色をかぶせ、白い太字の詩的な文章を組む。右端に縦書きの英字ラベルを置く。
3. 職種紹介（職種ごとに入口を作る）: 英字見出しの下に、写真→明朝の職種名→コピー→枠ボタンの順で職種を繰り返す。
4. 会社紹介への誘導（働く環境と理由を伝える）: 写真のコラージュに青をかぶせ、白い見出しと文章、白の枠ボタンを置く。右端に大きな縦書き英字。
5. 企業情報リンク（会社・歴史・理念へ送る）: 英字見出しの下に、写真付きのリンクカードを 3 つ縦に並べる。
6. エントリー（応募へ導く）: 後ろ姿の写真に紺をかぶせ、大きな英字見出し、キャッチ、区分ごとの白枠ボタン、赤の動画ボタンを置く。
7. フッター（サイト内を回遊させる）: 英字のスローガン、アイコン付きのサイトマップ、補助リンク、コピーライトを並べる。

Imagery

• 作業着とヘルメット姿の社員が真剣に作業する現場写真を使う。
• 写真の色調はシアン〜紺に寄せ、彩度を落としたデュオトーン風にする。
• コンセプト部分は人物の顔のアップを大きくトリミングする。
• 会社紹介は複数の現場写真をグリッドのコラージュにして、全体に青をかぶせる。
• 歴史の写真はモノクロの古い写真で時間の流れを出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では上部に横並びのナビと、右上に水色のエントリーボタンを固定する。
• PC の職種紹介は 2 列、情報カードは 3 列に並べる。
• PC のエントリーボタンは横並びにする。
• 英字見出しは PC でも画面幅いっぱいの大きさを保つ。
• PC のフッターは左にナビ、右に補助リンクを置く 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 行書くと起動時に読み込まれる。