DESIGN.md — 白×墨黒×深紅の編集系新卒採用 LP（Monochrome Editorial Recruit LP with Crimson Accent）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: シンプル・ミニマル、クール・先進的、信頼・誠実
• キーワード: 編集デザイン・大きな欧文見出し・細い罫線・深紅のアクセント・ポートレート・手書きコピー
• 地の質感: フラットな白とライトグレーの面。影なしで、1px の黒い罫線と枠で区切る
• 形: 角丸なしの四角。枠線ボックスと全幅の水平罫線
• 温度感: クールで端正。手書き文字と人物の笑顔で温度を足す

Colors

• 地の色は白とライトグレーを交互にしてセクションを分ける
• 深紅は MENU ボタン・CTA の帯・ENTRY ボタン・通し番号・手書きアクセントだけに使う
• 文字は墨黒に統一し、補足情報だけグレーに落とす
• グラデーションは ENTRY ボタンのごく弱い赤の陰影だけにする
• 区切りは色を変えず、黒の細い罫線で行う

Typography

• セクション見出しは英字だけの大文字にし、1〜2 語で改行して左揃えにする
• 和文見出しは太字で字間を広くとる
• 本文は行間 2.0 と広めにして余白を見せる
• カードは欧文タイトルの下に、和文の小見出しを太字で添える
• 手書き文字は FV と人物写真の上だけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。社員一覧は 3 列グリッド、対談は 2 人並び
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 30px（375px 幅換算）
• 見出しの下に画面端まで届く 1px 罫線を引き、本文と分ける
• 左右の余白は約 20px
• 写真グリッドは余白なしで全幅に敷き詰める
• 写真の直下に枠線ボックスを置き、上下に積む
• ボタンは中央に置き、幅は約 80%

Elevation & Depth

• 影は使わない。奥行きは罫線と面色の差だけで出す
• カードは白地に 1px の黒枠を付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。人物は縦長ポートレートか横長のシーン写真
• セクション境界: 直線。全幅の細い罫線と、背景色の切り替え
• 角丸は一切使わない
• ボタンは四角い枠線ボタンにし、右端に細い矢印を付ける
• ENTRY ボタンは赤い面の内側に白い細枠を入れる
• トップメッセージの背景には、薄い線画で幾何学モチーフを置く

Components

• 欧文大見出し＋全幅罫線（section-heading）: 大文字の欧文見出しを左揃えに置き、下に全幅の 1px 罫線を引く
• 枠線ボタン（button-outline）: 白地に黒の 1px 枠。文字の右に細い矢印を付ける
• 赤帯の白枠ボタン（band-cta）: 深紅の全幅帯に、白い線の枠ボタンを置く
• ENTRY ボタン（button-entry）: 赤い面に白の内枠。大きな欧文の下に和文の補足 2 行、右に矢印
• 社員カード（member-card）: 左上に赤い番号、縦長写真に赤い手書きの一言。下に名前・ローマ字・部署を並べる
• 対談カード（crosstalk-card）: 2 枚の写真を並べ、赤い × 印・小さな英字・大きな赤い番号を重ねる。下に 2 人の名前とテーマを置く
• 枠線リンクボックス（link-box）: 写真の下に白地の黒枠ボックス。欧文タイトル・和文の小見出し・本文を入れ、右下に矢印
• 赤い MENU ボタン（menu-button）: ヘッダー右端の赤い正方形。三本線と英字の MENU

Do's and Don'ts

Do - 見出しは英字の大文字で大きく置き、全幅の罫線で区切る - 赤は要所に絞って使い、面積を 5% 前後にとどめる - 人物写真は自然光で落ち着いたトーンにそろえる - 余白を広くとり、本文は行間 2.0 にする - リンクにはすべて細い矢印を付ける

Don't - 角丸・ドロップシャドウ・ピル型ボタンを使わない - 赤を本文や広い背景に多用しない - ポップなイラストや派手なグラデーションを入れない - 見出しを中央揃えにしない - 複数の色のアクセントを足さない

Page Structure

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

1. ヘッダー（ロゴとメニューへの導線）: 白地の左にロゴとサイト名、右端に赤い正方形の MENU ボタン
2. ファーストビュー（世界観と理念を伝える）: 人物写真 3 枚を縦に積み、白い手書きコピーを大きく重ねる
3. 採用メッセージ（会社の理念と目標を伝える）: グレー地に欧文見出しと罫線を置き、太字の和文見出しと長めの本文を続ける
4. 写真グリッド（働く人の雰囲気を見せる）: 社員の屋外ポートレートを余白なしのモザイク状に並べる
5. 代表メッセージ（代表の言葉で信頼を得る）: 淡グレー地に幾何学の線画、太字の見出しと肩書き・名前。代表写真を置き、赤帯の中に枠線ボタン
6. 社員インタビュー（社員を紹介して共感を得る）: 3 列の社員カードに、番号と手書きの一言を添える。下に一覧ボタン
7. 対談（社員同士の対話で社風を伝える）: 2 人の写真に赤い × 印と番号を重ね、下に名前とテーマを置く
8. 会社を知る（理念・事業・会社概要への導線）: グレー地に、写真と枠線リンクボックスの組を 3 つ積む
9. エントリー CTA（応募へ誘導する）: 白地の中央に、白い内枠付きの赤い ENTRY ボタン

Imagery

• 社員本人をモデルにし、オフィスや街の緑を背景に自然光で撮る
• ポートレートは無表情か穏やかな表情で、視線を外して横顔気味にする
• インタビュー写真は明るいグレーの無地背景に、胸から上を収める
• 対談写真は笑顔で、2 人を左右に分割して見せる
• 写真の上に、赤や白のサインペン風の手書き文字を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はヘッダーにグローバルナビを横並びにし、右端に赤い ENTRY ボタンを置く
• PC の FV は人物写真 3 枚を横に並べ、手書きコピーを横断させる
• PC の本文は中央寄りの約 60% 幅に収める
• PC の代表メッセージは左にテキスト、右に写真の 2 カラム
• PC の会社を知るは写真とボックスを重ねてずらし、左右交互に配置する
• PC の ENTRY は横長の帯にし、右側に手書きコピーを入れる

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