DESIGN.md — 橙×黄緑の回路線モノづくり採用 LP（Orange and Leaf Green Manufacturing Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、クール・先進的、信頼・誠実
• キーワード: 技術系採用・回路図モチーフ・ずらし重ね・縦書き英字・笑顔の社員写真・橙と黄緑
• 地の質感: フラットな単色面と薄い影付きの白カード。質感はなく、細い線画で技術感を出す
• 形: 角丸なしの四角が基本。カードと色面をずらして重ね、回路図の線と円で装飾する
• 温度感: 暖かく明るい。橙で活気を、黄緑で若さと爽やかさを出す

Colors

• 地は白と生成り(#F7F6F2)を交互に、画面端から片側に寄せた帯で敷く
• 橙はボタン・矢印・ロゴ・小見出し・VIEW MOREリンクに限定する
• 黄緑はお知らせ面と大きな英字見出し、カード背後の色面に使う
• 本文は濃灰。純黒は使わない
• 回路図の線は淡い橙で、背景装飾としてのみ使う
• 写真上の文字は白にし、写真を少し暗くする
• button-entry は文字 #FFFFFF × 背景 #EB6112 のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C7520F、4.52:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #EA6112 のコントラスト比が 3.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C6520F、4.55:1）を使う。
• news-panel は文字 #FFFFFF × 背景 #9AC34C のコントラスト比が 2.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#63802B、4.51:1）を使う。
• arrow-square は文字 #FFFFFF × 背景 #EB6112 のコントラスト比が 3.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C7520F、4.52:1）を使う。

Typography

• 英字見出しは太いサンセリフで大きく、日本語見出しは控えめにする
• セクション英字見出しは縦組みにし、画面端に寄せてよい
• 本文は字間を少し広げ、行間は1.9前後にする
• メッセージ本文は短い行で改行し、詩のように並べる
• リンクは英字VIEW MOREと右向きの細い矢印線を組み合わせる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。インタビューは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 28px（375px 幅換算）
• 白カードは写真や色面に半分ほど重ね、左右どちらかへずらす
• 生成りの帯は画面の片側を残して敷き、非対称にする
• 英字見出しの位置は左右交互に置く
• 回路図の線画をカードの外側の余白に配置する
• カードには薄い影を付けて浮かせる

Elevation & Depth

• 白カードはぼかしの大きい薄い影（0 10px 30px rgba(0,0,0,.08)）
• ボタン・色面には影を付けない
• 重なり順は 写真 → 色面 → 白カード とする

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸のない長方形。写真を画面端まで裁ち落とすか、カードの背後に置く
• セクション境界: 直線。色帯を左右にずらして段差のように切り替える
• 角丸は使わない
• 矢印ボタンは橙の正方形に白い細シェブロン
• 回路線は細線と小さな円の端点で描く

Components

• ヘッダーエントリーボタン（button-entry）: 右上に固定。橙の四角に白い太字英字
• 橙の長方形ボタン（button-primary）: 白文字＋右端に白シェブロン。カード内の中央に置く
• VIEW MOREリンク（link-viewmore）: 橙の英字と右向きの長い矢印線
• 黄緑のお知らせ面（news-panel）: FV写真の下に重ねる黄緑の面。日付と白文字タイトルを並べる
• ずらし重ねの白カード（overlap-card）: 写真や黄緑の面に重ねる。見出し、説明、VIEW MOREの順に置く
• 縦書き英字見出し（vertical-heading）: 黄緑の大きな英字を90度回転させ、写真の横に置く
• 四角の矢印ボタン（arrow-square）: カルーセル送りや写真リンクの角に置く橙の正方形
• 写真リンクタイル（photo-link-tile）: 暗くした写真の中央に小さな英字ラベルと日本語名を白で置き、右下に矢印を付ける

Do's and Don'ts

Do - 橙と黄緑の役割を分け、橙は操作できる要素に使う - 白カードを写真や色面にずらして重ね、奥行きを出す - 余白に回路図の線画を散らし、技術感を出す - 社員の笑顔の写真を大きく使う - 英字見出しは大きく太くし、縦組みも使う

Don't - 角丸やピル型のボタンにしない - 要素を全部中央揃えの対称レイアウトにしない - 橙と黄緑を同じ面積で隣り合わせない - グラデーションや派手な影を使わない - 本文を大きな文字で詰め込まない

Page Structure

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

1. ファーストビュー（活気ある職場の第一印象）: 社員2人の写真を左右に分けて全画面に置き、中央に白い英字と角ばったキャッチを重ねる。縦書きSCROLLも置く
2. お知らせ（説明会などの最新情報）: 黄緑の面に白文字で日付と件名を5件並べ、右下にVIEW MOREを置く
3. メッセージ（採用の想いを伝える）: 白カードに小英字ラベル、橙の見出し、詩のように改行した本文、橙ボタン。背後に黄緑の面をずらして置く
4. 会社紹介（事業と技術力の入口）: 製品写真に白カードを重ね、縦書きの黄緑英字見出しを添える
5. 仕事紹介（職種・業務の入口）: 作業写真と白カードを重ね、反対側に縦書き英字見出しを置く
6. 社員インタビュー（先輩社員の紹介）: 大きな英字見出し、橙の送りボタン、写真・イニシャル・入社年・部署を載せたカードの横スクロール
7. 働く環境（制度・職種一覧への導線）: 右揃えの英字見出しと説明文の下に、暗くした写真リンクタイルを2枚縦に並べる
8. エントリー（応募サイトへの誘導）: 暗い機材写真の帯に白い見出しと、応募媒体の白いバナーを並べる

Imagery

• 作業着姿の若手社員の自然な笑顔を、明るく浅い被写界深度で撮る
• 顕微鏡や工具を扱う作業風景を、手元に寄った構図で撮る
• 製品（ドローン等）は白背景に切り抜いて写真からはみ出させる
• 回路図記号（抵抗・IC・ダイオード）を淡い橙の細線で描いて装飾にする
• リンク用の写真は暗くして白文字を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長にし、お知らせ面は FV 下の左半分に横長で重ねる
• PC のメッセージカードは中央寄せで幅約60%にし、本文を中央揃えにする
• PC は写真とカードを左右に並べ、縦書き英字見出しを反対側に置く
• PC はインタビューを3枚横並びにする
• PC の働く環境は2枚の写真タイルを段違いで横に並べる
• 回路図装飾は 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 行書くと起動時に読み込まれる。