--- version: alpha name: Navy and Gold Corporate Recruitment LP description: 濃紺の面と淡い青灰の地を交互に重ね、金色の手書き風英字と下線で上品なアクセントを付けた士業グループの採用サイト。写真をずらして重ねるコラージュ構成で、誠実さと先進性を両立させている。 colors: primary: '#2C3A7A' background: '#FFFFFF' background-alt: '#EEF0FC' tint-1: '#CBD6DA' tint-2: '#E6EFFF' accent-1: '#C98F2C' text: '#21285E' text-body: '#3A3B63' on-dark: '#FDFFFE' line: '#29346E' cta: '#2E3979' on-cta: '#F7FDFF' accent-2: '#E0543E' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-lg: fontFamily: Roboto fontSize: 38px fontWeight: 900 lineHeight: 1.1 headline-md: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Caveat Brush fontSize: 36px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em label-button: fontFamily: Roboto fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px lg: 16px 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-outline: textColor: '{colors.text}' typography: '{typography.label-button}' height: 50px entry-band: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' height: 110px requirement-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 78px section-heading: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px underline-lead: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 60px voice-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 360px news-bar: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 56px hub-diagram: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 420px --- # DESIGN.md — 紺×金の手書き英字が映える士業採用 LP（Navy and Gold Corporate Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、クール・先進的、上品・高級 - **キーワード**: 濃紺・金の手書き英字・写真コラージュ・斜めの区切り・線枠ボタン・淡い青灰 - **地の質感**: 空や街並みの写真を淡く透かした背景と、濃紺地に半透明の四角・丸を散らした抽象パターン。 - **形**: 角丸はほぼ使わず直角が基本。セクション境界は斜めカット、ボタンは細い線の長方形。 - **温度感**: 寒色が中心。金色で少しだけ温度を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2C3A7A` | ブランドの濃紺・コンセプト面・エントリー帯 | 20% | 画素の実測 | | `background` | `#FFFFFF` | 本文セクションの白い地 | 12% | 画素の実測 | | `background-alt` | `#EEF0FC` | 仕事紹介パネルの淡いラベンダー地 | 10% | 画素の実測 | | `tint-1` | `#CBD6DA` | 社員の声などの青灰の地 | 9% | 画素の実測 | | `tint-2` | `#E6EFFF` | 募集要項エリアの淡い水色地 | 5% | 画素の実測 | | `accent-1` | `#C98F2C` | 手書き英字・下線・中途向けカードの金色 | 3% | 画素の実測 | | `text` | `#21285E` | 見出し・本文の紺文字 | 3% | 画素の実測 | | `text-body` | `#3A3B63` | 本文テキストの灰紺 | 2% | 画素の主要色に補正 | | `on-dark` | `#FDFFFE` | 濃紺の上の白文字 | 2% | 画素の実測 | | `line` | `#29346E` | 線枠ボタンの枠線 | 1% | 画素の主要色に補正 | | `cta` | `#2E3979` | エントリー帯の濃紺 | 3% | 画素の実測 | | `on-cta` | `#F7FDFF` | エントリー帯の白文字 | 1% | 画素の実測 | | `accent-2` | `#E0543E` | グラデーション帯の朱色 | 1% | 推定 | - 地は白・淡いラベンダー・青灰を順に切り替える。濃紺の面はコンセプトとエントリーに限る。 - 金色は手書き英字・テキスト下線・サブカードだけに使う。面積は 5% 以下に抑える。 - 見出しと本文は黒ではなく紺系にする。 - 濃紺の面には半透明の白い四角と丸を散らして奥行きを出す。 - 斜めの区切りに水色から朱色へのグラデーションを一度だけ入れる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー（斜体の太字） | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.4 | 0.02em | | `headline-lg` | 英字の大見出し（斜体） | 欧文サンセリフ | Roboto | 900 | 38px | 1.1 | 0.0em | | `headline-md` | セクション見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.5 | 0.03em | | `headline-sm` | 下線付きのリード文 | ゴシック | Noto Sans JP | 700 | 17px | 1.7 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `accent` | 金色の手書き風英字 | 欧文スクリプト | Caveat Brush | 400 | 36px | 1.0 | 0.0em | | `note` | 「— 日本語ラベル」の小見出し・英字ラベル | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.08em | | `label-button` | VIEW MORE ボタン | 欧文サンセリフ | Roboto | 700 | 13px | 1.0 | 0.02em | - 各セクションの見出しは「金の手書き英字 → 線＋日本語ラベル → 太字見出し」の 3 段で組む。 - 手書き英字は写真の角に重ね、少し傾けて置く。 - リード文には金色の太い下線を引く。 - 英字の大見出しは斜体の極太サンセリフにする。 - 大きな英字を薄くして背景の透かしに使う。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は 2〜3 枚をずらして重ねる - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は左右どちらかの端に寄せ、反対側に余白を残す。 - テキストは左揃えで、左右の余白は 24〜30px。 - 各セクションの最後に線枠の VIEW MORE ボタンを置く。 - 社員インタビューは横スクロールのカルーセルにし、下に進捗バーを付ける。 - ページ末に濃紺のエントリー帯と、2 色の募集要項カードを置く。 ## Elevation & Depth - 影はほとんど使わず、面の色と写真の重なりで奥行きを出す。 - 仕事紹介の円形図だけ、うっすらと拡散する影を付ける。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 直角の長方形。円形図の法人バッジだけ正円にする - **セクション境界**: 濃紺の面の下端を斜めにカットし、グラデーション帯をはさむ。淡いパネルの上端だけ大きな角丸にする - ボタン・カードは角丸なしの長方形にする。 - ボタンは 1px の紺の枠線にし、両端に小さな四角を付ける。 - 写真は互いに 20〜40px ずらして重ねる。 ## Components - **VIEW MORE 線枠ボタン**（`button-outline`）: 幅 80% の長方形。1px の紺の枠線で、左右端に小さな四角を置き、文字は中央 - **エントリー帯**（`entry-band`）: 濃紺の全幅帯。英字ラベル・太字見出し・補足文を左に、右に白枠の矢印ボックスを置く - **募集要項カード**（`requirement-card`）: 左にサムネイル写真、右に英字ラベルと見出しと矢印。新卒向けは紺、中途向けは金にする - **3 段見出し**（`section-heading`）: 金の手書き英字＋「— 」付きの小さな日本語ラベル＋太字の見出し - **金下線のリード文**（`underline-lead`）: 太字のリード文の下に、金色の 3px の下線を行ごとに引く - **社員インタビューカード**（`voice-card`）: 縦長の人物写真の下部に紺のグラデーションを敷き、VOICE 番号・見出し・所属を白文字で載せる。PREV/NEXT ボタンと進捗バー付き - **お知らせバー**（`news-bar`）: 白い長方形に日付・スラッシュ・お知らせ見出しを並べ、右端に矢印を置く - **円形の法人相関図**（`hub-diagram`）: 中央のロゴの周りに、色違いの円形バッジ 6 つを点線でつなぐ。各バッジに番号・名称・英字名を入れる ## Do's and Don'ts **Do** - 濃紺と淡い寒色の地を交互にしてリズムを作る。 - セクションごとに金の手書き英字を写真の角に重ねる。 - 写真はビジネスパーソンの自然な笑顔と都市の風景を使う。 - ボタンは線枠の長方形で統一する。 - 英字ラベルと日本語見出しをセットで使う。 **Don't** - ピル型ボタンや大きな角丸カードは使わない。 - 金色を面に多用しない（使ってよいのは中途向けカードのみ）。 - 暖色のポップなイラストは入れない。 - 黒の本文テキストは使わない。 - 写真を等間隔のグリッドで並べるだけにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を印象づける）: 空の街並みを透かした水色の背景に、オフィス写真 2 枚をずらして配置。間に斜体の太字コピーを置き、金の下線を引く 2. **お知らせ**（最新の採用情報を知らせる）: 白い長方形のバーに日付と見出しを並べる 3. **スローガン**（英文スローガンでブランドを伝える）: 濃紺地に金の手書き英字と白の極太斜体英字を置き、SCROLL の縦線を添える 4. **コンセプト**（理念を語る）: 濃紺地に写真コラージュ、3 段見出し、白の本文、金下線のリード文、線枠ボタンを並べる。下端は斜めにカット 5. **私たちについて**（グループの規模と領域を紹介する）: 白地で、左寄せの写真に手書き英字を重ね、見出し・本文・ボタンを続ける 6. **仕事について**（ワンストップの体制を示す）: 都市の写真の上に淡いラベンダーのパネルを重ね、円形の法人相関図を置く 7. **社員インタビュー**（働く人のリアルを伝える）: 青灰の地に薄い英字の透かし、横スクロールの人物カード、進捗バー 8. **キャリアについて**（成長の幅を示す）: ビルや握手の写真 3 枚のコラージュに手書き英字を重ね、大きな見出しと下線リードを続ける 9. **エントリー CTA**（応募へ誘導する）: 濃紺の全幅帯に右矢印ボックスを置く 10. **募集要項**（新卒・中途の入口に分ける）: 淡い水色の地に、紺と金のサムネイル付きカードを 2 枚並べる ## Imagery - スーツ姿の男女が会話するオフィス写真。明るく自然光で撮る。 - 高層ビルや都市の夕景に、ネットワークの線を重ねた先進的な写真。 - PC 作業や書類の手元など、業務を感じさせる寄りのカット。 - 濃紺の背景に半透明の四角や丸のボケを散らす。 - 金色の筆記体英字を装飾として写真の端に重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は写真とテキストを 2 カラムで左右に配置し、セクションごとに左右を入れ替える。 - PC のヘッダーは横並びのナビにし、右上に紺と金のエントリーボタンを置く。 - PC では英字スローガンを画面幅いっぱいに大きく置く。 - PC の社員インタビューは横に 4 枚並べ、見出しは縦書きにする。 - PC のフッター前は、エントリー・募集要項・カード 2 枚を横 3 分割にする。 ## 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-e39cd862`（元 LP の URL から採番） - **元 LP**: https://j-creas.com/recruit/ - **解析に使った画像**: 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/）からご連絡ください。