--- version: alpha name: Deep Navy Corporate Recruit LP description: 濃紺と白のセクションを交互に並べ、曲線で区切った製造業の新卒採用 LP。ファーストビューは青空に丸く切り抜いた写真を散らして明るく見せ、それ以降は濃紺のグラデーションと白で信頼感を出す。エントリーボタンだけを鮮やかな緑にして目立たせる。 colors: primary: '#05124D' dark-section: '#060D46' on-dark: '#F8FDFF' background: '#FEFEFE' background-alt: '#E3E3E3' surface: '#E3E5F1' cta: '#32CC33' on-cta: '#05124D' text: '#1C3358' text-body: '#222222' accent-1: '#468CED' accent-2: '#DCEC84' secondary: '#150A3B' text-muted: '#E0DFE6' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 28px fontWeight: 800 lineHeight: 1.0 headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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}' rounded: '{rounded.full}' height: 44px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px ghost-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 40px photo-link-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 110px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 60px tag-location: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 26px message-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 36px entry-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 230px --- # DESIGN.md — 濃紺×白×緑ボタンの製造業新卒採用LP（Deep Navy Corporate Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、クール・先進的、清潔・爽やか - **キーワード**: 濃紺グラデーション・曲線の区切り・円形の写真切り抜き・英字のゴースト見出し・緑のエントリーボタン - **地の質感**: フラットな面に、うっすらしたグラデーションと柔らかい影。写真の上は紺色の半透明で覆う - **形**: 角丸カード、ピル型ボタン、大きな円の装飾、波のように反った曲線の区切り - **温度感**: クールで誠実。ファーストビューだけ空色で明るく爽やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#05124D` | ブランド濃紺（見出し・店舗タグ・ボタン） | 4% | 画素の主要色に補正 | | `dark-section` | `#060D46` | 濃紺セクションの地 | 30% | 画素の実測 | | `on-dark` | `#F8FDFF` | 濃紺地の上の白文字 | 2% | 画素の実測 | | `background` | `#FEFEFE` | 白セクションの地 | 28% | 画素の実測 | | `background-alt` | `#E3E3E3` | 表の項目欄のグレー | 4% | 画素の実測 | | `surface` | `#E3E5F1` | 濃紺地の上に置くカード（淡いラベンダー） | 5% | 画素の実測 | | `cta` | `#32CC33` | エントリーボタン | 1% | 画素の実測 | | `on-cta` | `#05124D` | エントリーボタンの文字 | 0% | 画素の主要色に補正 | | `text` | `#1C3358` | 白地の上の見出し（紺） | 1% | 画素の主要色に補正 | | `text-body` | `#222222` | 本文（黒に近い色） | 2% | 推定 | | `accent-1` | `#468CED` | ファーストビューの空色 | 7% | 画素の実測 | | `accent-2` | `#DCEC84` | ファーストビューのキャッチを置く黄緑の帯 | 1% | 画素の実測 | | `secondary` | `#150A3B` | サブボタン（濃紺のグラデーション） | 0% | 画素の実測 | | `text-muted` | `#E0DFE6` | 英字のゴースト見出し | 0% | 画素の主要色に補正 | - 地の色は濃紺と白を交互に入れ替え、セクションの切り替わりを強く見せる - 濃紺セクションは上から下へ、紺から黒に近い紺へ縦のグラデーションをかける - 緑はエントリーの CTA だけに使う - 濃紺地の上には淡いラベンダーのカードを置き、文字は紺にする - 写真には紺色の半透明を重ね、トーンをそろえる - ファーストビューだけは空色と黄緑で明るくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | 明朝 | Shippori Mincho | 600 | 30px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.4 | 0.02em | | `accent` | 見出しの背後に敷く英字 | 欧文サンセリフ | Montserrat | 800 | 28px | 1.0 | 0.0em | | `headline-sm` | 小見出し・カードのタイトル | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.0em | | `body-md` | 本文・表の中身 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.02em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.03em | - セクション見出しの左上か中央の背後に、淡い英字を重ねる - 小見出しは 1 文字目だけ大きくして変化をつけることがある - 明朝はファーストビューのキャッチだけに使い、他はすべてゴシック - 本文は 12px 前後と小さめにし、行間を広く取る - 表の値は太字にし、補足は小さな注釈にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。職種は横スクロールのカルーセル - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は約 18px - 見出し、リード文、写真の順に積む - 福利厚生カードは横長で縦に並べ、右下に CLICK タグを付ける - 募集要項は 2 列の表（項目欄はグレー） - 大きな写真の帯を曲線で切り抜いてセクション間に挟む ## Elevation & Depth - カードとボタンの下に、紺色の濃い影（0 4px 6px）を付ける - 表は外枠に薄い影を付ける - 写真カードは影を弱めにする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: ファーストビューは虹色の縁を付けた円形。それ以外は角丸の長方形 - **セクション境界**: 浅い弧を描く曲線。大小の濃紺の円をセクションの境界に重ねて置く - CTA とサブボタンはピル型 - CLICK タグとメッセージボタンは角丸を小さく - 装飾の円は画面の端から一部をはみ出させる ## Components - **エントリー CTA**（`button-entry`）: 横幅いっぱいの緑のピル型ボタン。紺色の影を付ける - **サブボタン**（`button-sub`）: 濃紺グラデーションのピル型ボタンに白文字 - **英字ゴースト見出し**（`ghost-heading`）: 淡い英字の上に日本語の見出しを重ねる - **写真リンクカード**（`photo-link-card`）: 紺の半透明を重ねた写真カード。中央下に白文字のタイトル、右下に濃紺の CLICK タグ - **募集要項の表**（`spec-table`）: 左がグレーの項目欄、右が白の値欄。行ごとに線で区切る - **勤務地タグ**（`tag-location`）: 濃紺地に白い太字の小さなタグ。折り返して並べる - **メッセージボタン**（`message-bar`）: 濃紺の横長バー。左に白文字、右に再生アイコン - **ラベンダーの案内カード**（`entry-card`）: 濃紺地の上に置く淡色のカード。中に見出し・説明・ボタンを入れる ## Do's and Don'ts **Do** - 濃紺と白の地を交互に並べ、境界は曲線と円で区切る - セクション見出しには必ず英字のゴーストを重ねる - 写真は作業着の若手社員が笑っているものを使う - CTA の緑はエントリーの導線だけに使う **Don't** - 暖色を強調色に使わない - 境界を直線で切りっぱなしにしない - 緑を装飾に使わない - 本文を大きくしすぎない - 写真を彩度の高いまま並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の理念と募集中であることを伝える）: 青空の背景に円形の人物写真とアイコンを散らし、中央に明朝のキャッチと黄緑の帯を置く 2. **会社紹介**（事業内容を伝える）: 濃紺地に白文字のリード文と角丸の集合写真。下にビル群の写真の帯を入れる 3. **仕事紹介**（仕事のイメージを伝える）: 白地に見出しとリード文、大きな角丸写真 4. **職種一覧**（職種の幅を見せる）: 写真カードを横スクロールで並べる 5. **募集要項**（条件を示す）: 2 列の表と勤務地タグ。最後に緑の CTA 6. **福利厚生**（安心感を与える）: 曲線で切り抜いた都市の写真の後に、中央そろえのリード文と写真リンクカードを縦に並べる 7. **研修・キャリア**（成長できる道筋を示す）: 濃紺地に研修のカード 2 枚と、キャリアフロー図を開く白カードを置く 8. **メッセージ**（保護者と学生に向けて語りかける）: 白地に濃紺のバー型ボタンを 2 本 9. **エントリー**（応募へ誘導する）: 濃紺地に淡色のカード 2 枚。緑の CTA と濃紺のサブボタン 10. **フッター**（ナビゲーションと著作権表示）: 黒に近い紺の地に、白いロゴ・ナビ・コピーライトを中央にそろえる ## Imagery - グレーの作業着を着た若手社員の、自然な笑顔の写真 - 工場・基板・溶接など現場の写真に青みのトーンをかける - 高層ビルや都市を見上げる、空の広い写真 - ファーストビューにはパステルの円の中にフラットなアイコンを置く - 装飾には濃紺の大小の円を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は会社紹介・仕事紹介を、テキストと写真の 2 カラムにする - 福利厚生カードは PC で 3 列 × 2 段のグリッド - 研修カードは PC で 2 列 - キャリアフロー図は PC だとページ内に直接表示する - 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-7e771b7a`（元 LP の URL から採番） - **元 LP**: https://hp.osusume-guide.com/nms_fv_mov01/index.php - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。