DESIGN.md — 白×黒に鋭角グラデの先進系採用 LP（Monochrome Geometric Shard Recruiting LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: クール・先進的、シンプル・ミニマル、力強い・インパクト
• キーワード: 鋭角の破片・モノクロ基調・大きな欧文見出し・ピル型ボタン・フラットイラスト・斜めのセクション境界
• 地の質感: フラットな単色面が基本。Entry 帯だけノイズ入りのグラデーションを使う。
• 形: 鋭い三角の破片、斜めに切ったセクション境界、ピル型ボタン、円形の矢印アイコン。
• 温度感: クールで硬質。イラストの暖色で親しみを少し加える。

Colors

• 白地を基本にして、墨色は文字・ボタン・暗いセクションにまとめて使う。
• 色の強い要素は鋭角の破片と Entry 帯のグラデーションだけに絞る。
• 黄色は応募ボタン専用。それ以外のボタンは墨色か白にする。
• 中盤の職種紹介は墨色地に切り替え、その中のボタンは白地に墨色文字にする。
• グレー地は斜めの帯やカード群の地に使い、セクションのリズムを作る。
• イラストの暖色（黄・オレンジ・緑）は挿絵の中だけで使う。

Typography

• セクション見出しは、大きな欧文と小さな太字の和文を左揃えで縦に重ねる。
• 欧文見出しの上には、●▲■ の小さな記号を置く。
• ステートメントは 1 行ずつ墨色の帯で白抜きにし、帯どうしに隙間を空ける。
• 和文は字間を 0.05〜0.08em 空けて読みやすくする。
• 英字の小ラベルはグレーの細字で、和文見出しの上に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。制度紹介はイラストと文章の 2 カラムを左右交互に並べる。
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は約 30px。左揃えを基本にする。
• セクション同士の間は 100px 以上空ける。
• 主ボタンはセクション末尾の中央に置く。
• 職種リストはピル型の行を 8px 間隔で縦に積む。
• カード群はグレーのパネルの中に白カードを縦に並べる。

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる。
• 奥行きは色面の切り替えと斜めの帯で出す。
• カードは白地とグレー地の差だけで浮かせる。

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 人物写真は角丸 4px の矩形。補助写真は六角形や円に切り抜いて重ねる。
• セクション境界: 斜めの直線で切り替える。鋭角三角形の破片を境界付近に飛ばす。
• ボタンは完全なピル型にし、右端に白丸の矢印アイコンを置く。
• 飾りの三角形は細長い鋭角にして、画面端からはみ出させる。
• カード類の角丸は小さめ（4〜6px）にする。

Components

• 墨色のピルボタン（button-primary）: 墨色地に白文字。右端に白丸の矢印アイコンを置く。
• 応募ボタン（button-entry）: 黄色のピル型。右端に墨色丸の矢印を置く。Entry 帯でのみ使う。
• アウトラインボタン（button-outline）: 細いグレーの枠のピル型。外部リンク用のアイコンを付ける。
• 下線テキストリンク（link-underline）: 太字の文字に下線を引き、小さな丸い矢印を添える。
• 白抜きの文字帯（statement-band）: 1 行ごとに墨色の帯を敷き、白文字のステートメントを積む。
• 記号付きのセクション見出し（section-heading）: ●▲■ の記号の下に大きな欧文、その下に小さな和文を置く。
• 職種のピル行（job-row）: 暗いグレーのピルに円形イラスト、職種名、矢印を横に並べる。
• 記事カード（article-card）: 白カードに角丸の写真と 3 行の見出しを載せ、右下に外部リンクの丸アイコンを置く。
• カテゴリバッジ（category-badge）: 写真の左下に重ねる、黄緑地の小さなラベル。

Do's and Don'ts

Do - 見出しは大きな欧文と小さな和文の 2 段組みに統一する。 - セクションの境界に鋭角三角形の破片を左右交互に置く。 - ボタンはピル型で、右端に丸い矢印アイコンを付ける。 - ステートメントは 1 行ずつ墨色の帯で白抜きにする。 - 背景は白→グレー→墨色を、斜めの境界で切り替える。

Don't - 黄色を応募ボタン以外に使わない。 - ボタンやカードに強いドロップシャドウを付けない。 - 破片を丸めたり、パステル調にしたりしない。 - 見出しに明朝体や手書き風の書体を使わない。 - 全体を中央揃えにしない（左揃えが基本）。

Page Structure

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

1. ファーストビュー（スローガンで変革の印象を与える）: 白地の中央に大きな欧文と短い和文を置く。四隅から鋭角のグラデーションの破片が刺さり、下に Scroll の表示を置く。
2. メッセージ（会社の意志と求める人物像を伝える）: 墨色の帯で白抜きにした短文を 4 段落に分けて積み、最後に欧文スローガンを繰り返す。
3. 会社について（理念と会社の背景を紹介する）: 記号付きの見出しと大きなフラットイラストを置き、墨色のピルボタンと下線リンクを並べる。
4. トピックス（会社の歴史と挑戦を案内する）: 生成り色の枠の中にイラストを散らし、右下に丸い矢印を置く。
5. 社員インタビュー（社員の人柄を見せる）: 人物写真と幾何形の補助写真を重ね、下線付きの見出しを置く。下に番号付きのスライダー操作を付ける。
6. 働く環境（制度を紹介する）: イラストと文章の 2 カラムを左右交互に 3 つ並べる。各小見出しの上に英字ラベルを添える。
7. 職種紹介（職種ごとのページに誘導する）: 斜めに切った墨色セクション。上部に写真の帯を流し、その下にピル行のリストと白いボタンを置く。
8. 採用区分（中途採用と新卒採用に振り分ける）: グレー地に斜めの白帯を敷く。写真と文章の組を 2 つ、区切り線で分けて並べる。
9. エントリー（応募に誘導する）: ノイズ入りの青紫・黄のグラデーション帯に白い欧文、黄色の応募ボタン、FAQ リンク、墨色のバナーを置く。
10. ピックアップ（外部のオウンドメディアへ送客する）: グレーのパネルの中に記事カードを縦に並べ、続けて紺色のカードと白いカードを置く。
11. フッター（サイト内を案内する）: 白地にロゴ、英字の小ラベルで分けたリンク群、SNS アイコンを置き、最後に大きな欧文スローガンと破片を置く。

Imagery

• イラストは人物と幾何形を組み合わせたフラットなものにし、ざらついたグレインを少し加える。
• 人物写真は自然光のオフィスや街中で撮る。斜め前を見る半身ショットにする。
• 破片は細長い鋭角三角形にする。中身は青紫〜ピンク〜オレンジのグラデーションか墨色ベタ。
• Entry 帯は、青紫・黄・紺が流れるようなブレとノイズのある抽象グラデーションにする。
• 補助写真は六角形・円に切り抜き、メインの写真に重ねる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は見出しを左、リード文を右に置く 2 カラムにする。
• PC では働く環境を 3 カラム、職種を 3 列のグリッド、記事カードを 3 列に並べる。
• PC ではヘッダーにメニューと黄色の Entry ボタンを常に表示する。SP ではハンバーガーメニューにする。
• PC の Entry 帯は見出しとボタンを左右に分けて並べる。
• PC の最大幅は約 1100px に抑え、破片は画面端まで広げる。

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