DESIGN.md — 白×墨黒に黄枠が映える新卒採用 LP（Monochrome Editorial Recruit LP with Yellow Frames）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: シンプル・ミニマル、クール・先進的、信頼・誠実
• キーワード: モノトーン・編集デザイン・大きな番号・欧文見出し・黄色の写真枠・余白多め
• 地の質感: フラットで影なし。写真の上に細い枠線を重ねて立体感を出す。
• 形: ほぼ直角。ボタンはわずかに角丸の長方形。ナビゲーションのカードだけ角丸を少し大きくする。
• 温度感: ややクール。オフィス写真の自然光で冷たくなりすぎないようにする。

Colors

• 地は白と #F6F6F6 の 2 色だけ。セクションごとに交互に切り替える。
• ボタンと強調は墨黒の塗り 1 色だけで、有彩色の CTA は使わない。
• 有彩色は写真の内枠に使う黄とブルーグレーのみ。交互に配置する。
• セクション番号は地よりわずかに濃いグレーにして、背景に溶け込ませる。
• サブボタンは白地に黒の 2px 枠線。

Typography

• 見出しは英語、補足は和文の 2 層にする。
• 欧文見出しは大きな斜体の番号の上に重ね、少し右にずらして置く。
• 和文見出しは極太、本文は細めにして強弱をはっきり付ける。
• 本文は行間を約 2.0 と広く取る。
• 特大の欧文は斜体にし、写真の下端にかかるように重ねる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。About のリンクだけ 2×2 グリッド。
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算）
• 左右の余白は 16px。
• 写真は画面の端まで寄せたり左右にずらしたりして、リズムを付ける。
• セクション見出しの前後は 64px 以上空ける。
• ストーリーは写真と 3〜4 行のタイトルを 1 組にして縦に並べる。
• リンクのグリッドは細い線だけで区切る。

Elevation & Depth

• 影は使わない。
• 奥行きは写真に重ねた内枠線と、文字の重なりで表現する。

Shapes

• 角丸: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 長方形。写真の内側 16px ほどに 4px の色付き枠を重ねる。ファーストビューの写真だけ角丸 8px。
• セクション境界: 直線で背景色を切り替える。
• ボタンはほぼ直角の長方形にする。
• ナビゲーションのカードは角丸 12px、まとめカードは黒 3px 枠で囲む。
• 写真の上の装飾に点線を使う。

Components

• 番号付きセクション見出し（section-heading-numbered）: 大きな薄グレーの斜体数字の上に、太い欧文見出しを重ねる。
• 墨黒ボタン（button-primary）: 全幅の黒塗りボタン。白い太字で、必要なら外部リンクのアイコンを付ける。
• 枠線ボタン（button-outline）: 白地に黒 2px 枠のサブボタン。
• 社員ストーリーカード（story-card）: 写真に黄またはグレーの内枠を重ね、その下に太字のタイトルを 3〜4 行置く。
• 欧文リンクグリッド（link-grid）: 2×2 のマス目に欧文名と和文の補足を置き、細線で区切る。
• サイトリンク一覧カード（nav-list-card）: 薄グレーの角丸カード。黒丸の再生アイコンを先頭に付けたリンクを縦に並べる。
• 新卒採用バナー（banner-card）: 黒枠の箱にイラストと黒いバッジ・大見出しを入れ、下段にリンクとボタンを置く。
• 斜線ラベル（slash-label）: 細い斜線の横に和文の小見出しを置く。

Do's and Don'ts

Do - 有彩色は写真の枠線だけに限る。 - 見出しは欧文と番号を組み合わせる。 - 余白をたっぷり取る。 - 社員写真は自然な笑顔のバストアップにする。 - ボタンは黒一色で統一する。

Don't - グラデーションや影を入れない。 - ピル型ボタンや派手な CTA 色を使わない。 - 背景に有彩色を敷かない。 - 装飾的なイラストを多用しない。 - 本文の行間を詰めない。

Page Structure

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

1. ファーストビュー（採用年度とメインコピーで印象付ける）: オフィス写真を左右にずらして並べ、その間に小さなラベルと極太の大見出しを中央揃えで置く。点線を添える。
2. メッセージ（会社の考え方を伝える）: 番号付き見出しのあと、長めの本文を続ける。締めの太字見出しと、高層ビルを見上げた写真を置く。
3. 社員ストーリー（先輩社員の実像を見せる）: 薄グレーの地に、枠付き写真と 3〜4 行のタイトルを 6 組ほど縦に並べる。
4. 会社について（詳細ページへ誘導する）: 欧文と和文のリンクを 2×2 のマス目に並べる。
5. サービス紹介（事業内容を見せる）: デバイスのモックアップ、ロゴ、説明文、黒ボタンの順に並べる。
6. 採用情報 CTA（職種別の応募へ導く）: 写真に特大の斜体欧文を重ね、斜線ラベル、見出し、本文、黒ボタン 2 つを続ける。
7. フッターナビ（関連コンテンツへの回遊を促す）: 角丸カードのリンク一覧と、イラスト入りの黒枠バナーを置く。最後に撮影場所の注記を入れる。

Imagery

• 明るいオフィスで自然光の中、ビジネスカジュアルの社員を撮る。
• インタビュー写真はバストアップの笑顔にし、背景をやや明るく飛ばす。
• 写真には 4px の黄またはブルーグレーの内枠を重ねる。
• 都市の高層ビルを見上げたアオリの写真を使う。
• イラストは紺・黄・白のフラットな人物にし、線は太めにする。
• 製品はデスクトップ・タブレット・スマホを並べたモックアップで見せる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは写真を横一列に並べ、帯状に流す。
• PC ではメッセージの本文と写真を 2 カラムにする。
• PC のストーリーは 3 カラムで、列ごとに上下をずらして配置する。
• PC のリンクグリッドは 4 列にする。
• PC の採用情報は文章と写真を左右に分け、背景に特大の欧文を敷く。
• PC のフッターはリンク一覧とバナーを横に並べる。

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