--- version: alpha name: Monochrome Factory Documentary Recruit LP description: 工場で働く人のドキュメンタリー写真を大きく使い、墨色の帯とライトグレーの地を交互に置いた製造業の採用サイトです。太いゴシックの大見出しに英字の小ラベルを添え、矢印付きのテキストリンクで各ページへ誘導します。装飾は控えめで、写真と余白で誠実さを伝えます。 colors: primary: '#333333' background: '#F6F6F6' text: '#0E0F11' on-dark: '#DFDFDF' text-muted: '#D4D4D3' dark-section: '#1F2024' secondary: '#1E2A44' accent-1: '#CD3434' surface: '#FEFFFE' line: '#D4D4D3' cta: '#FEFEFE' on-cta: '#333333' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 44px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.12em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.04em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em rounded: sm: 2px md: 6px lg: 8px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' link-arrow: textColor: '{colors.text}' typography: '{typography.label-button}' height: 36px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-outline: textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px section-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 80px photo-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' rounded: '{rounded.md}' height: 280px corner-frame: textColor: '{colors.on-dark}' height: 24px header-contact: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 44px --- # DESIGN.md — 墨色×ライトグレーの製造業採用LP（Monochrome Factory Documentary Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、シンプル・ミニマル、力強い・インパクト - **キーワード**: ドキュメンタリー写真・墨色・ライトグレー・太ゴシック・英字ラベル・矢印リンク - **地の質感**: フラットな単色面。写真には暗めのオーバーレイをかけ、白文字を乗せる - **形**: ほぼ直角。写真ブロックはずらして重ね、帯状バナーだけ小さな角丸 - **温度感**: やや冷たいニュートラルグレーに、作業着や肌色の自然な暖かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#333333` | メインの墨色。導入文の帯に使う | 12% | 画素の実測 | | `background` | `#F6F6F6` | ページの地色（ライトグレー） | 33% | 画素の実測 | | `text` | `#0E0F11` | 見出しと本文の文字色 | 3% | 画素の実測 | | `on-dark` | `#DFDFDF` | 暗い面に乗せる白文字 | 2% | 画素の実測 | | `text-muted` | `#D4D4D3` | 英字ラベルの薄いグレー | 0% | 画素の主要色に補正 | | `dark-section` | `#1F2024` | フッター下部の帯 | 2% | 画素の実測 | | `secondary` | `#1E2A44` | ヘッダーにある問い合わせボタンの濃紺 | 0% | 推定 | | `accent-1` | `#CD3434` | ロゴの赤（コーポレートアクセント） | 0% | 画素の実測 | | `surface` | `#FEFFFE` | 写真上に置く白抜きボタン | 0% | 画素の実測 | | `line` | `#D4D4D3` | リンク下の細い区切り線 | 0% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | 主CTA（白地ボタン） | 0% | 画素の実測 | | `on-cta` | `#333333` | CTAボタンの文字 | 0% | 画素の主要色に補正 | - 地はライトグレーを基本にし、導入文・フッター下部だけ墨色の帯にする - 写真の上には黒の半透明オーバーレイをかけ、白文字を乗せる - 有彩色はロゴの赤とヘッダーの濃紺だけ。本文には使わない - ボタンは白地に墨文字、または透明地に白枠の2種類にする - 英字ラベルは薄いグレーにして、和文見出しより目立たせない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと最後のCTAに置く大コピー（ルビ付き） | ゴシック | Zen Kaku Gothic New | 900 | 44px | 1.3 | 0.02em | | `headline-lg` | セクションの和文見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.35 | 0.04em | | `accent` | 見出しの上に置く英字小ラベル | 欧文サンセリフ | Montserrat | 600 | 11px | 1.4 | 0.12em | | `body-md` | 導入文・セクションの説明文 | ゴシック | Noto Sans JP | 700 | 14px | 2.0 | 0.04em | | `label-button` | 矢印リンクとボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `note` | フッターのリンクとコピーライト | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | - 見出しは極太のゴシックで、短く2行以内にする - 大コピーには難読字にルビを振り、最初の1文字を大きくする - 英字ラベルは小さく字間を広げ、和文見出しの真上に置く - 本文は太めのゴシックで、行間を広めの2.0にする - 文字の色は墨か白の2色に限る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。PCは文字と写真の2カラムで、左右を交互に入れ替える - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - セクションは英字ラベル→和文見出し→説明文→矢印リンクの順に並べる - 写真は2枚をずらして重ね、奥行きを出す - 写真を全幅に敷いたバナーを途中とページ末に入れる - 余白を広く取り、1画面に置く要素を少なくする ## Elevation & Depth - 影は基本的に使わず、フラットに仕上げる - 奥行きは写真の重ね配置で作る - 写真上の文字は暗いオーバーレイでコントラストを確保する ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形の写真をそのまま使う。全幅バナーだけ小さい角丸にし、四隅にカギ括弧状のフレーム線を添える - **セクション境界**: 直線で背景色を切り替える - ボタンは角丸なしの長方形 - 矢印リンクの矢印は細線の小さい円で囲む - 斜めの線や波形などの装飾は使わない ## Components - **矢印付きテキストリンク**（`link-arrow`）: 左にラベル、右に円で囲んだ矢印を置き、下に細い線を引く。縦に並べて使う - **白地の主CTAボタン**（`button-primary`）: 暗い写真の上に置く横長の白いボタン。文字は中央揃えの墨色 - **白枠のゴーストボタン**（`button-outline`）: 写真バナーの上に置く。透明地に白い枠線と白文字、右端に矢印 - **英字ラベル付きの見出し**（`section-heading`）: 薄いグレーの英字小ラベルの下に極太の和文見出しを置く - **全幅の写真バナー**（`photo-banner`）: 集合写真を暗くし、右側に見出し・説明文・ボタンを白で重ねる - **四隅のカギ型フレーム**（`corner-frame`）: 最後のCTA写真の四隅に置く白いL字の線 - **ヘッダーの問い合わせボタン**（`header-contact`）: 右上に置く濃紺の小さな四角ボタン。アイコン付き ## Do's and Don'ts **Do** - 現場で働く人物の自然な写真を主役にする - 見出しは極太のゴシックで短くまとめる - 英字ラベルと和文見出しをセットで使う - セクションの導線は矢印リンクを縦に並べて作る - 余白を広く取り、墨・白・グレーの3色を基本にする **Don't** - 彩度の高い色をボタンや背景に使わない - ピル型のボタンやポップな装飾を入れない - イラストやアイコンを多用しない - 写真の上で暗いオーバーレイなしに白文字を置かない - 細い明朝体で見出しを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢をひとことで伝える）: 工場で働く人の写真を全面に敷き、左側にルビ付きの極太大コピーを白で置く。ヘッダーは透明 2. **メッセージ**（求める人物像と価値観を語る）: 墨色の帯に、白の太めゴシックで短い段落を3つ並べる。右下に写真をはみ出させる 3. **仕事紹介**（事業内容と仕事の流れへ誘導する）: 左に英字ラベル・見出し・説明・矢印リンク3本、右にずらして重ねた写真2枚を置く 4. **社員インタビュー**（働く人のリアルな声へ誘導する）: 集合写真を全幅バナーにし、右側に白文字の見出しと白枠のボタンを置く 5. **募集要項・福利厚生**（条件や制度のページへ誘導する）: 左に見出しと矢印リンク2本、右に大きな人物写真を置く 6. **クロージングCTA**（エントリーを促す）: 暗くした人物写真に、四隅のフレームと大コピーを置く。右に白いボタン2つを縦に並べる 7. **フッター**（サイトマップと会社情報を載せる）: ライトグレーの地に、ロゴ・所在地・認証マークと、小さな文字のリンクを5列で並べる。最下部に黒い帯 ## Imagery - 作業着と帽子姿の社員を、工場の中で自然光に近い光で撮る - 笑顔の集合写真や、作業中の手元写真を組み合わせる - 背景の機械はぼかし、全体を少し低い彩度に整える - FVやCTAの写真には黒の30〜50%のオーバーレイをかける - イラストは使わず、装飾は細い線のフレームだけにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは文字と写真の2カラムで、左右を交互に入れ替える。SPでは見出し→写真→リンクの1カラムに積む - 大コピーはPC約80px、SPでは40〜44pxにする - 重ねた写真はSPでも少しずらしを残し、幅は画面の80〜90%にする - グローバルナビはSPではハンバーガーにし、問い合わせボタンだけ右上に残す - フッターのリンク5列は、SPでは折りたたみか2列にする ## 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-1436eb80`（元 LP の URL から採番） - **元 LP**: https://sanyo-ss.co.jp/recruit/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。