DESIGN.md — 墨色×ライトグレーの製造業採用LP（Monochrome Factory Documentary Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、シンプル・ミニマル、力強い・インパクト
• キーワード: ドキュメンタリー写真・墨色・ライトグレー・太ゴシック・英字ラベル・矢印リンク
• 地の質感: フラットな単色面。写真には暗めのオーバーレイをかけ、白文字を乗せる
• 形: ほぼ直角。写真ブロックはずらして重ね、帯状バナーだけ小さな角丸
• 温度感: やや冷たいニュートラルグレーに、作業着や肌色の自然な暖かみを足す

Colors

• 地はライトグレーを基本にし、導入文・フッター下部だけ墨色の帯にする
• 写真の上には黒の半透明オーバーレイをかけ、白文字を乗せる
• 有彩色はロゴの赤とヘッダーの濃紺だけ。本文には使わない
• ボタンは白地に墨文字、または透明地に白枠の2種類にする
• 英字ラベルは薄いグレーにして、和文見出しより目立たせない

Typography

• 見出しは極太のゴシックで、短く2行以内にする
• 大コピーには難読字にルビを振り、最初の1文字を大きくする
• 英字ラベルは小さく字間を広げ、和文見出しの真上に置く
• 本文は太めのゴシックで、行間を広めの2.0にする
• 文字の色は墨か白の2色に限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは文字と写真の2カラムで、左右を交互に入れ替える
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションは英字ラベル→和文見出し→説明文→矢印リンクの順に並べる
• 写真は2枚をずらして重ね、奥行きを出す
• 写真を全幅に敷いたバナーを途中とページ末に入れる
• 余白を広く取り、1画面に置く要素を少なくする

Elevation & Depth

• 影は基本的に使わず、フラットに仕上げる
• 奥行きは写真の重ね配置で作る
• 写真上の文字は暗いオーバーレイでコントラストを確保する

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形の写真をそのまま使う。全幅バナーだけ小さい角丸にし、四隅にカギ括弧状のフレーム線を添える
• セクション境界: 直線で背景色を切り替える
• ボタンは角丸なしの長方形
• 矢印リンクの矢印は細線の小さい円で囲む
• 斜めの線や波形などの装飾は使わない

Components

• 矢印付きテキストリンク（link-arrow）: 左にラベル、右に円で囲んだ矢印を置き、下に細い線を引く。縦に並べて使う
• 白地の主CTAボタン（button-primary）: 暗い写真の上に置く横長の白いボタン。文字は中央揃えの墨色
• 白枠のゴーストボタン（button-outline）: 写真バナーの上に置く。透明地に白い枠線と白文字、右端に矢印
• 英字ラベル付きの見出し（section-heading）: 薄いグレーの英字小ラベルの下に極太の和文見出しを置く
• 全幅の写真バナー（photo-banner）: 集合写真を暗くし、右側に見出し・説明文・ボタンを白で重ねる
• 四隅のカギ型フレーム（corner-frame）: 最後のCTA写真の四隅に置く白いL字の線
• ヘッダーの問い合わせボタン（header-contact）: 右上に置く濃紺の小さな四角ボタン。アイコン付き

Do's and Don'ts

Do - 現場で働く人物の自然な写真を主役にする - 見出しは極太のゴシックで短くまとめる - 英字ラベルと和文見出しをセットで使う - セクションの導線は矢印リンクを縦に並べて作る - 余白を広く取り、墨・白・グレーの3色を基本にする

Don't - 彩度の高い色をボタンや背景に使わない - ピル型のボタンやポップな装飾を入れない - イラストやアイコンを多用しない - 写真の上で暗いオーバーレイなしに白文字を置かない - 細い明朝体で見出しを組まない

Page Structure

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

1. ファーストビュー（企業の姿勢をひとことで伝える）: 工場で働く人の写真を全面に敷き、左側にルビ付きの極太大コピーを白で置く。ヘッダーは透明
2. メッセージ（求める人物像と価値観を語る）: 墨色の帯に、白の太めゴシックで短い段落を3つ並べる。右下に写真をはみ出させる
3. 仕事紹介（事業内容と仕事の流れへ誘導する）: 左に英字ラベル・見出し・説明・矢印リンク3本、右にずらして重ねた写真2枚を置く
4. 社員インタビュー（働く人のリアルな声へ誘導する）: 集合写真を全幅バナーにし、右側に白文字の見出しと白枠のボタンを置く
5. 募集要項・福利厚生（条件や制度のページへ誘導する）: 左に見出しと矢印リンク2本、右に大きな人物写真を置く
6. クロージングCTA（エントリーを促す）: 暗くした人物写真に、四隅のフレームと大コピーを置く。右に白いボタン2つを縦に並べる
7. フッター（サイトマップと会社情報を載せる）: ライトグレーの地に、ロゴ・所在地・認証マークと、小さな文字のリンクを5列で並べる。最下部に黒い帯

Imagery

• 作業着と帽子姿の社員を、工場の中で自然光に近い光で撮る
• 笑顔の集合写真や、作業中の手元写真を組み合わせる
• 背景の機械はぼかし、全体を少し低い彩度に整える
• FVやCTAの写真には黒の30〜50%のオーバーレイをかける
• イラストは使わず、装飾は細い線のフレームだけにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは文字と写真の2カラムで、左右を交互に入れ替える。SPでは見出し→写真→リンクの1カラムに積む
• 大コピーはPC約80px、SPでは40〜44pxにする
• 重ねた写真はSPでも少しずらしを残し、幅は画面の80〜90%にする
• グローバルナビはSPではハンバーガーにし、問い合わせボタンだけ右上に残す
• フッターのリンク5列は、SPでは折りたたみか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 行書くと起動時に読み込まれる。