DESIGN.md — 黒地×オレンジマーカーの新卒採用 LP（Dark Charcoal Orange Marker Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、力強い・インパクト、シンプル・ミニマル
• キーワード: チャコール地・オレンジ帯マーカー・斜め写真コラージュ・切り欠き角丸カード・グリッチドット・丸矢印ボタン
• 地の質感: フラットな黒地に、細かい白ドットやノイズ線を散らしたデジタルなざらつき。カードは半透明グレーのすりガラス風。
• 形: 大きめ角丸のカードが段差状に組み合わさり、ボタン部分だけ外にはみ出す切り欠き形。ボタンはピルと正円。
• 温度感: 暗めで落ち着いた地に、暖色オレンジでエネルギーを添える。

Colors

• 地はチャコール1色で通し、セクションの切替は色ではなくカードで行う。
• オレンジは帯マーカー・丸矢印ボタン・英字見出し・本文中リンクに限定する。
• 強調したいコピーはオレンジ帯を敷き、上に黒の極太文字を載せる。
• 白本文中の一文だけをオレンジ帯で抜き、白文字のまま強調する。
• 最後のエントリー枠だけオレンジ全面塗りにして、内側の矢印ボタンを黒に反転する。
• カードは明度違いのグレー2〜3段階で奥行きを出す。

Typography

• 和文は太めのゴシックで統一し、本文も700で白抜きの視認性を確保する。
• 英字見出しは細いウェイトで大きく、和文見出しは太く小さくして対比させる。
• 和文小見出しは英字見出しの右下に重ね、下半分にオレンジ帯を敷く。
• キャッチは短い句で改行し、1行ずつオレンジ帯を敷く。
• 本文は短い文節で頻繁に改行し、行間を2倍前後に取る。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。FV のみ写真コラージュを右側に重ねる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 90px、基本単位 8px、カード内 28px（375px 幅換算）
• 左右の余白は約20pxで、カードはほぼ全幅に置く。
• カードの右下は切り欠いて、丸矢印ボタンをはみ出させる。
• 写真カードと説明カードは少しずつずらして重ね、段差をつける。
• MOREボタンは横長ピル＋右にオレンジ正円の矢印をセットで置く。
• 背景に小さな白四角や細線を散らし、余白を間延びさせない。

Elevation & Depth

• 影はほぼ使わず、グレーの明度差で重なりを表す。
• 情報カードは半透明グレーにうっすらグラデをかけた、すりガラス風にする。
• 写真の上に重ねるカードは不透明に近い暗グレーにして、文字を読みやすく保つ。

Shapes

• 角丸: 小 12px ／ 中 20px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形に切り抜く。FV では写真を約20°傾けてタイル状に並べる。
• セクション境界: 区切り線は使わず、余白と浮かせたカードで区切る。
• カードは大きい角丸にし、ボタンの部分だけ逆角丸で切り欠く。
• 矢印ボタンは直径約52pxの正円。
• 見出しの帯マーカーは角丸なしの長方形。
• 写真同士は狭い間隔で重ね気味に配置する。

Components

• オレンジ帯見出し（marker-headline）: 1行ずつオレンジ帯を敷き、黒の極太文字を載せたキャッチ。
• MOREボタンセット（button-more）: グレーの横長ピルに白の英字、右にオレンジ正円の矢印ボタンを並べる。
• 丸矢印ボタン（button-arrow）: オレンジの正円に黒の細い矢印。外部リンクのときは外部リンクアイコンにする。
• 英字＋和文見出し（section-title）: 細身のオレンジ英字を大きく置き、右下に下線帯付きの白い和文を重ねる。
• 切り欠き情報カード（notch-card）: 大きな角丸のグレーカード。右下を切り欠いて丸矢印ボタンを収める。
• 斜め社員写真コラージュ（photo-collage）: 角丸の社員写真を斜めのグリッドに並べ、画面右側からはみ出させる。
• エントリー誘導ブロック（entry-block）: オレンジ全面の角丸ブロック。薄い英字の上に黒い太字コピーを重ね、黒い丸矢印ボタンを置く。
• 本文中オレンジリンク（inline-link）: 白本文の中で、リンク部分だけオレンジ文字にする。
• SNS丸ボタン（sns-circle）: 暗グレーの正円に白のSNSアイコン。エントリーブロックの下辺に食い込ませる。

Do's and Don'ts

Do - 地はチャコール1色で通し、オレンジは要所だけに絞る。 - 主要な導線には必ずオレンジの丸矢印ボタンを添える。 - 写真は角丸にして傾けたり重ねたりし、動きを出す。 - 見出しは細い英字と太い和文をセットで使う。 - 背景に小さな白四角やノイズ線を散らす。

Don't - 白や淡色の地のセクションを挟まない。 - オレンジ以外の有彩色をアクセントに足さない。 - ボタンを角ばった四角にしない。 - ドロップシャドウや立体的な装飾を多用しない。 - 本文を細いウェイトにして読みにくくしない。

Page Structure

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

1. ヘッダー（ロゴとメニューへの導線）: 左にロゴと採用サイト表記、右に白い角丸の正方形ハンバーガーを置く。
2. ファーストビュー（メッセージで共感を得る）: オレンジ帯付きの極太キャッチを3行、右側に斜めに並べた社員写真コラージュ。
3. メッセージ（企業の姿勢を伝える）: 白の太字を短く改行して縦に並べ、2か所だけオレンジ帯で強調する。最後にMOREボタン。
4. 社員インタビュー（働く人を見せる）: 角丸写真の上に切り欠き説明カードを重ね、英字＋和文の見出しとMOREボタンを置く。
5. 事業紹介（仕事内容をイメージさせる）: 全幅の角丸写真に英字見出しを食い込ませ、下部に暗いカードを重ねて説明を入れる。
6. 採用情報（募集要項へ誘導する）: 暗グレーの切り欠きカードに見出し・本文・オレンジリンク・丸矢印ボタン。
7. 会社概要（企業情報へ誘導する）: 明るめのグレーの切り欠きカードに外部リンクアイコンのボタン。
8. エントリーCTA（応募を促す）: オレンジ全面の角丸ブロックに、薄い英字と黒の太字コピー、黒の丸矢印。下辺にSNS丸ボタンを置く。

Imagery

• 社員写真は自然光のオフィスで撮った素の表情のスナップ。スーツと私服を混ぜる。
• 写真は角丸の縦長にトリミングし、斜めのグリッドで重ねる。
• 事業写真は現場を暗めのセピア調で撮り、ノイズ感を残す。
• 装飾は白やグレーの小さな正方形・細い横線・点線を散らしたグリッチ風にする。
• アイコンは線の細いシンプルな矢印とSNSロゴだけにする。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左にキャッチと本文、右に斜めの写真コラージュを置く2分割のFVにする。
• PC のキャッチは2行に詰め、文字サイズを相対的に小さくする。
• インタビューは PC で左に写真、右に説明カードの横並びにする。
• 採用情報と会社概要のカードは PC で2カラムに並べる。
• エントリーブロックは PC で横長にし、ボタンを右下に置く。
• コンテンツ幅は PC で約70%に収め、中央に寄せる。

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