--- version: alpha name: Orange and Leaf Green Manufacturing Recruit LP description: 白と生成りの地に、鮮やかな橙のボタン・見出しと黄緑の面ブロックを組み合わせた、製造業の新卒採用サイト。回路図風の線画を装飾に使い、白カードを写真や色面に少しずらして重ねるレイヤー構成。縦組みの大きな英字見出しで動きを出している。 colors: primary: '#EA6112' cta: '#EB6112' on-cta: '#FFFFFF' secondary: '#9AC34C' background: '#FFFFFE' background-alt: '#E6E7E1' surface: '#FFFFFF' text: '#333333' accent-1: '#F4AE6A' on-dark: '#FFFFFF' text-muted: '#666666' dark-section: '#1E1E26' cta-accessible: '#C7520F' primary-accessible: '#C6520F' secondary-accessible: '#63802B' typography: display: fontFamily: DotGothic16 fontSize: 34px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Roboto fontSize: 34px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.08em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Roboto fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em label-button: fontFamily: Roboto Condensed fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 28px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 38px link-viewmore: textColor: '{colors.primary}' typography: '{typography.label-button}' height: 24px news-panel: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 500px overlap-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 280px vertical-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 300px arrow-square: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' height: 48px photo-link-tile: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 240px --- # DESIGN.md — 橙×黄緑の回路線モノづくり採用 LP（Orange and Leaf Green Manufacturing Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、クール・先進的、信頼・誠実 - **キーワード**: 技術系採用・回路図モチーフ・ずらし重ね・縦書き英字・笑顔の社員写真・橙と黄緑 - **地の質感**: フラットな単色面と薄い影付きの白カード。質感はなく、細い線画で技術感を出す - **形**: 角丸なしの四角が基本。カードと色面をずらして重ね、回路図の線と円で装飾する - **温度感**: 暖かく明るい。橙で活気を、黄緑で若さと爽やかさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA6112` | ブランド橙（ロゴ・見出し・ボタン） | 3% | 画素の実測 | | `cta` | `#EB6112` | エントリー・矢印ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#9AC34C` | 黄緑の面ブロック・英字見出し | 9% | 画素の実測 | | `background` | `#FFFFFE` | 基本背景 | 30% | 画素の実測 | | `background-alt` | `#E6E7E1` | 生成りの帯背景 | 18% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード | 10% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃色 | 3% | 推定 | | `accent-1` | `#F4AE6A` | 回路図線画の淡橙 | 2% | 推定 | | `on-dark` | `#FFFFFF` | 写真上の白文字 | 0% | 画素の主要色に補正 | | `text-muted` | `#666666` | 日付・補足 | 0% | 推定 | | `dark-section` | `#1E1E26` | エントリー帯の暗い写真地 | 4% | 推定 | | `cta-accessible` | `#C7520F` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C6520F` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#63802B` | AA を満たす補正値（計算） | | 計算 | - 地は白と生成り(#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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャッチ（角ばったデザイン書体） | 装飾・ディスプレイ | DotGothic16 | 700 | 34px | 1.3 | 0.05em | | `headline-lg` | セクションの英字見出し（黄緑・縦横） | 欧文サンセリフ | Roboto | 700 | 34px | 1.1 | 0.02em | | `headline-md` | メッセージの橙見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.6 | 0.08em | | `headline-sm` | カードタイトル | ゴシック | Zen Kaku Gothic New | 500 | 19px | 1.5 | 0.05em | | `body-md` | 本文・説明 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 1.9 | 0.05em | | `accent` | 小英字ラベル（MESSAGE・NEWS） | 欧文サンセリフ | Roboto | 700 | 14px | 1.3 | 0.1em | | `label-button` | ボタン・VIEW MORE | 欧文サンセリフ | Roboto Condensed | 700 | 15px | 1.2 | 0.03em | | `note` | 日付・入社年など | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.03em | - 英字見出しは太いサンセリフで大きく、日本語見出しは控えめにする - セクション英字見出しは縦組みにし、画面端に寄せてよい - 本文は字間を少し広げ、行間は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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-4e76a9a7`（元 LP の URL から採番） - **元 LP**: https://recruit.futaba.co.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。