--- version: alpha name: Industrial Charcoal and Neon Green Recruit LP description: 濃いチャコールと明るいグレーの帯を交互に重ね、蛍光グリーンを差し色にしたメーカーの新卒採用サイト。極太の欧文見出しと、背景に薄く敷いた巨大な英字、角丸なしの四角いボタンで、工場らしい力強くクールな印象を作る。 colors: primary: '#27CE1C' cta: '#27CE1C' on-cta: '#000D00' dark-section: '#333333' background: '#E4E4E4' surface: '#FFFFFF' background-alt: '#F4F4F4' text: '#191A1A' on-dark: '#FDFEFC' accent-1: '#010101' text-muted: '#B5B5B5' line: '#88867D' text-body: '#4C4A44' primary-accessible: '#1A8813' typography: display: fontFamily: Dela Gothic One fontSize: 46px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Barlow Condensed fontSize: 44px fontWeight: 700 lineHeight: 1.05 accent: fontFamily: Barlow fontSize: 80px fontWeight: 800 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em label-button: fontFamily: Oswald fontSize: 15px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Oswald fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 74px link-view-more: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 28px heading-section: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 120px heading-bar: textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 44px card-job: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 450px tab-filter: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px slider-control: textColor: '{colors.on-dark}' height: 40px badge-label: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 20px banner-recruit: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 190px --- # DESIGN.md — チャコール×蛍光グリーンの製造業採用 LP（Industrial Charcoal and Neon Green Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、力強い・インパクト、シンプル・ミニマル - **キーワード**: インダストリアル・蛍光グリーン・極太欧文・巨大透かし文字・四角いブロック・スライダー - **地の質感**: フラットな単色面だけで作る。グラデーションや影は使わず、写真の質感と面のコントラストで見せる。 - **形**: 角丸は使わない。長方形のボタン・カード・ラベルを並べ、細い線の枠でまとめる。 - **温度感**: クールで硬派。グリーンが入ることで若々しい活気も出る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#27CE1C` | ブランドの差し色・CTA面・ラベル | 8% | 画素の実測 | | `cta` | `#27CE1C` | エントリーボタンの面 | 2% | 画素の実測 | | `on-cta` | `#000D00` | グリーンボタン上の文字 | 0% | 画素の実測 | | `dark-section` | `#333333` | 濃色セクションの地 | 29% | 画素の実測 | | `background` | `#E4E4E4` | 明色セクションの地 | 21% | 画素の実測 | | `surface` | `#FFFFFF` | カード・タブ枠の白面 | 3% | 画素の実測 | | `background-alt` | `#F4F4F4` | マガジンカードの淡いグレー地 | 7% | 画素の実測 | | `text` | `#191A1A` | 明色地の見出し文字 | 2% | 画素の主要色に補正 | | `on-dark` | `#FDFEFC` | 濃色地の見出し・本文 | 2% | 画素の実測 | | `accent-1` | `#010101` | タブ・小矢印ボタンの黒面 | 1% | 画素の実測 | | `text-muted` | `#B5B5B5` | 背景の巨大透かし英字・補助文字 | 7% | 画素の実測 | | `line` | `#88867D` | カード枠・ニュース枠の細線 | 1% | 画素の主要色に補正 | | `text-body` | `#4C4A44` | 明色地の本文 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#1A8813` | AA を満たす補正値（計算） | | 計算 | - 地の色はチャコール #333 と明るいグレー #E4E4E4 を、セクションごとに交互に切り替える。 - グリーンはボタン・見出し横のバー・和文ラベル・矢印ボタン・スライダーの進捗バーだけに使う。 - グリーンの面の上の文字は黒にする。白は使わない。 - 濃色地の背景に置く透かし英字は、地より少しだけ明るいグレーにする。明色地では地より少しだけ濃いグレーにする。 - フッター直前はグリーン一色の帯にして、キャッチを黒で大きく置く。 - 黒い面はタブや小さな矢印ボタンなど、補助的な操作要素にだけ使う。 - `banner-recruit` は文字 `#27CE1C` × 背景 `#FFFFFF` のコントラスト比が 2.11:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#1A8813`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・フッターの和文キャッチ（斜体で極太） | ゴシック | Dela Gothic One | 900 | 46px | 1.2 | 0.0em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Barlow Condensed | 700 | 44px | 1.05 | 0.0em | | `accent` | 背景に敷く巨大な透かし英字 | 欧文サンセリフ | Barlow | 800 | 80px | 1.0 | 0.0em | | `headline-md` | 記事タイトル・カード見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.02em | | `headline-sm` | グリーン帯ラベルの職種名・和文サブ見出し | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.02em | | `label-button` | VIEW ALL / VIEW MORE などの英字ボタン | 欧文サンセリフ | Oswald | 600 | 15px | 1.2 | 0.02em | | `note` | 日付・番号の分母・ナビ | 欧文サンセリフ | Oswald | 500 | 11px | 1.4 | 0.03em | - 英字見出しの下に、グリーン地に黒文字の小さな和文ラベルを付ける。 - セクション見出しの背景に、同じ英単語をはみ出すほど大きく薄く敷く。 - キャッチは極太の斜体ゴシックで、画面幅いっぱいに置く。 - 濃色カードの左端には、英字の職種名を縦書きで薄く入れる。 - 番号は「大きなグリーンの数字 / 小さなグレーの分母」の形にする。 - 本文は 12〜13px で小さめにして、見出しとの大小差をはっきりつける。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは横スクロールのスライダーにする。 - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約 24px にそろえる。 - 見出しは左寄せにする。 - スライダーの下には「左右の矢印＋進捗バー」を中央に置く。 - セクションの末尾にはグリーンの VIEW ALL ボタンを中央に置く。 - カードは次の 1 枚が右端に少し見えるようにする。 - セクションの境目は帯の色の切り替えだけで作る。 ## Elevation & Depth - 影は使わない。完全にフラットにする。 - 奥行きは、濃色と明色の面のコントラストと細い線の枠で出す。 - 注目させたい写真はグリーンの太い枠で囲んで強調する。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形のまま切り抜く。人物写真は正方形〜4:3。 - **セクション境界**: 直線で背景色を切り替える。 - 角丸は一切使わない。 - ボタンは右端に黒い正方形の矢印アイコンを付けた長方形にする。 - カードは細い線の枠か、単色の面で作る。 - フッターの帯には歯車の線画を薄く配置する。 ## Components - **VIEW ALL ボタン**（`button-primary`）: グリーンの長方形に黒い英字を中央に置き、右端に黒い正方形の矢印を付ける。 - **エントリーボタン**（`button-entry`）: 幅いっぱいのグリーンの大きなブロック。中央に和文、右下に外部リンクのアイコンを置く。 - **テキストリンク**（`link-view-more`）: 英字の横に細い矢印を付け、下にグリーンの下線を引く。 - **セクション見出し**（`heading-section`）: 背景に巨大な透かし英字を敷き、その上に太い英字見出しとグリーン地の和文ラベルを重ねる。 - **グリーンバー見出し**（`heading-bar`）: 左にグリーンの縦バーを置き、白い英字見出しを並べる。 - **職種カード**（`card-job`）: チャコールの面に写真を置き、グリーン帯の職種名と白の本文を続ける。左端に縦書きの英字、右下にグリーンの矢印を置く。 - **カテゴリタブ**（`tab-filter`）: 白い枠の中に、グリーンの「すべて」と黒いタブを 2 列で並べる。 - **スライダー操作**（`slider-control`）: 細い山型の左右矢印の間に、グレーの線とグリーンの進捗バーを置く。 - **和文ラベル**（`badge-label`）: グリーンの小さな長方形に黒の和文を置く。白い線の枠に入れた入社年タグもある。 - **募集要項バナー**（`banner-recruit`）: 白い面に透かし英字と線画イラストを置き、黒帯に乗せたグリーン文字の見出しを重ねる。 ## Do's and Don'ts **Do** - 濃色と明色の帯を交互に積み、リズムを作る。 - グリーンは操作要素とラベルに絞って使う。 - 見出しの背景には、毎回巨大な透かし英字を敷く。 - ボタンやカードは角を立てた四角にする。 - 作業中の社員を写したドキュメンタリー調の写真を大きく使う。 **Don't** - 角丸やピル型のボタンを使わない。 - 影やグラデーションを付けない。 - グリーンの上に白文字を置かない。 - グリーン以外の差し色を足さない。 - 明朝体や丸ゴシックを使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（働く姿で第一印象を作る）: 作業中の社員の写真を全面に置き、残像のようなずらし効果を付ける。下端に極太斜体の白いキャッチを重ねる。 2. **ピックアップ記事**（注目のコンテンツへ誘導する）: チャコールの地にグリーンバーの見出しを置く。写真・タイトル・本文の記事スライダーと VIEW MORE を並べる。 3. **お知らせ**（新着情報を見せる）: 線の枠の小さなカードを横スクロールで並べる。日付とグリーンの矢印を入れ、VIEW ALL ボタンで締める。 4. **マガジン**（社内記事を一覧で見せる）: 明るいグレーの地にカテゴリタブと記事カードのスライダーを置く。サムネイルには英字タグを付ける。 5. **職種紹介**（職種ごとの仕事内容を伝える）: 明色の地に、チャコールの職種カードを縦に 2 枚並べる。 6. **社員紹介**（先輩社員の人柄を伝える）: チャコールの地に、グリーン枠の人物写真・番号・タイトル・入社年タグを置いたスライダーにする。 7. **募集要項バナー**（採用情報へ誘導する）: 白いバナーに線画を入れ、黒帯にグリーン文字の見出しを重ねる。 8. **エントリー**（応募の窓口を示す）: チャコールの地に、幅いっぱいのグリーンの大きなボタンを 2 つ並べる。 9. **フッター**（ナビゲーションとブランドを締めくくる）: グレーの地にロゴとリンクを中央にそろえる。その後にグリーンの帯と歯車の線画、黒い極太キャッチを置く。 ## Imagery - 作業服の社員が機械に向かって集中している姿を、自然光の寄りで撮る。 - カメラ目線の笑顔のポートレートも混ぜ、親しみを出す。 - 全体に彩度をやや抑え、クールなトーンにする。 - FV は写真をスライスして横にずらし、グリッチ風の効果を付ける。 - 装飾は歯車・人物・吹き出しのモノクロ線画アイコンにする。 - 記事のサムネイルには、グリーンの英字タグと白い帯のキャプションを重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文幅を約 75% に収めて中央に置き、透かし英字は横に繰り返す。 - PC のマガジンは 3 列のグリッドで記事を 6 件見せる。 - PC の職種カードは 2 列に並べる。 - PC の社員紹介は、左にテキスト、右に写真スライダーを置く横並びにする。 - PC のエントリーは、左に見出し、右にボタン 2 つを横並びにする。 - PC のフッターは、ロゴとナビを 1 行に並べる。 ## 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-d0ac6b63`（元 LP の URL から採番） - **元 LP**: https://www.kyotoss.co.jp/saiyo/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。