DESIGN.md — 白黒×差し色Oの採用サイト LP（Monochrome Bold Typography Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、シンプル・ミニマル、力強い・インパクト
• キーワード: 巨大欧文見出し・1文字だけの差し色・モノクロ写真・明暗セクションの交互配置・クリエイティブ企業
• 地の質感: フラットな単色面に、モノクロ写真と少しぼかした制作実績ビジュアルを重ねる
• 形: 四角い写真と小さな角丸ボタン。矢印アイコンは色付きの小さな四角で囲む
• 温度感: 無彩色ベースのクールな印象。差し色のビビッドさで遊び心を出す

Colors

• 地は #F5F5F5 と #2F2F2F の 2 色だけを使い、セクションごとに明暗を交互に切り替える
• 差し色は欧文見出しの O の 1 文字と、ボタンの矢印アイコンだけに使う
• セクションごとに O の色を変え、同じセクションのボタン矢印も同じ色でそろえる
• 写真はモノクロかそれに近い彩度にし、差し色が目立つようにする
• 制作実績のビジュアルだけはフルカラーで、背景にぼかして敷く
• 本文は墨色か白だけにし、色付きの本文は使わない

Typography

• 見出しは英字を主役にし、日本語は下に小さく添える
• 英字見出しの O を 1 文字だけ差し色にする
• 日本語のキャッチは字間を 0.2em 程度まで広げる
• 本文は 13px 前後の短い行にして 2〜4 行で終わらせる
• メインコピーは単語ごとに改行して、左端いっぱいに積む
• ボタン文字はすべて英大文字にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。部門カードは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは英字見出し、日本語見出し、ラベルと区切り線、説明文、ボタンの順で並べる
• 見出しと写真は左右に互い違いに置く（SP では縦に積む）
• 写真グリッドは隙間なく端から端まで並べる
• 制作実績は全幅の帯にし、背景はぼかしたビジュアル、上にサムネイルと案件名を載せる
• 社員紹介は横スクロールのカルーセルにし、ドットのページ送りを付ける
• 余白は大きめに取り、要素の数は少なく保つ

Elevation & Depth

• 影はほぼ使わずフラットに作る
• 写真を少しずらして重ね、奥行きを出す
• 人物の切り抜きの後ろにグレーの影を置き、立体感を出す
• 制作実績の帯では背景をぼかし、手前のサムネイルを際立たせる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。人物は切り抜いて背景に影を付ける
• セクション境界: 直線で地色を切り替える（斜めや波は使わない）
• ボタンは角丸 2〜4px の小さな長方形にし、右端に色付きの四角い矢印を付ける
• ヘッダーの ENTRY ボタンだけはピル型にする
• 写真の角は丸めない
• 装飾の図形は使わず、文字と写真で構成する

Components

• 詳しく見るボタン（button-view-more）: 黒か白の小さな長方形。英大文字のラベルの右に、セクションの差し色で塗った矢印の四角を付ける
• エントリーボタン（button-entry）: ヘッダーに置くピル型の黒ボタン。締めの CTA では矢印をシアンにする
• O だけ色を変えた英字見出し（heading-en-accent-o）: 太めのサンセリフ英字。O を 1 文字だけ差し色にし、下に日本語見出しを添える
• 区切り線つきラベル（label-with-rule）: 小さな太字ラベルを置き、その下に細い線を引いて、続けて説明文を置く
• 部門写真カード（dept-photo-card）: モノクロの人物写真を全面に敷き、中央に部門名と緑の小さな矢印を置く
• 制作実績の帯（project-band）: ぼかしたフルカラーのビジュアルを背景に、細い番号、案件名、サムネイル、橙の矢印を重ねる
• 社員カード（people-card）: モノクロ写真に、色付きの帯で傾けたキャッチを重ねる。上に入社年と所属、イニシャルを置く
• 固定ヘッダー（site-header）: 白地に左からロゴ、英字のナビ、ENTRY ボタン、メニューボタンを並べる

Do's and Don'ts

Do - 英字見出しの O は必ず 1 文字だけ差し色にする - セクションごとに差し色を変え、ボタンの矢印の色もそろえる - 人物写真はモノクロか低い彩度でそろえる - 明るい地と暗い地を交互に置いて、リズムを作る - 見出しは大胆に大きくし、余白も十分に取る

Don't - 差し色を面の塗りや本文に使わない - グラデーションや装飾の図形、イラストを加えない - 写真やボタンに大きな角丸を付けない - 明朝体や丸ゴシックを混ぜない - 1 つのセクションに説明文を長く書かない

Page Structure

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

1. ファーストビュー（社員の顔ぶれとスローガンで第一印象をつくる）: 明るい地に 6 人ほどの切り抜き人物を横一列に並べ、背後に薄い巨大英字を敷き、上に日本語のキャッチを置く
2. メッセージ（会社の使命を伝える）: 中央寄せの短い文章の下に、巨大英字を 3 行に積み、O をシアンにする
3. 会社紹介（想いと未来を知ってもらう入口）: 左に O が赤の英字見出しと説明、右に赤く色を重ねたオフィス写真を置く
4. 仕事内容（部門ごとの働き方を見せる）: O が緑の見出しを中央に置き、その下にモノクロの部門写真カードを 4 枚、全幅で並べる
5. プロジェクト紹介（実際の制作実績で仕事の面白さを伝える）: 暗い地に O が橙の見出しと縦長の写真 3 枚、その下にぼかし背景の実績帯を 3 本重ねる
6. 社員紹介（社員の人柄や想いを伝える）: 暗い地に O が黄緑の見出しを置き、色帯のキャッチ付き社員カードを横スクロールで見せる
7. 働く環境（オフィスと福利厚生を紹介する）: 写真グリッドの上に、O がマゼンタの白い巨大見出しを重ねる
8. よくある質問（応募の前の不安を解消する）: 明るい地に O が青の見出しを置き、周りにモノクロ写真を散らす
9. 集合写真と締めの CTA（応募を後押しする）: オフィスでの全幅の集合写真の下、暗い地に巨大英字のスローガンと ENTRY ボタンを置く
10. フッター（サイト内を回遊させる）: 暗い地に英字ナビと日本語の補足を 2 段で並べ、ロゴとコピーライトを置く

Imagery

• 人物は白地のスタジオで全身か上半身を撮って切り抜き、柔らかい影を付ける
• 社員写真はオフィスで自然な表情を撮り、モノクロにする
• 写真の一部に、半透明の差し色を重ねて印象を付ける
• 制作実績はフルカラーのビジュアルをぼかし、背景の帯にする
• 社員カードには、少し傾けた色付きの帯にキャッチを載せてアクセントにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は見出しと写真を左右に並べるが、SP では見出し、文章、写真の順で縦に積む
• 巨大英字は SP では 56〜64px 程度に縮め、単語ごとに改行する
• 部門カードは PC の 4 列から SP では 2 列にする
• プロジェクト帯は SP ではサムネイルを上に、文字を下に配置する
• ヘッダーのナビは SP ではメニューボタンにまとめ、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 行書くと起動時に読み込まれる。