--- version: alpha name: Clean Navy Science Recruitment LP description: 白地に紺のグラデーション帯と淡い水色の面を重ね、黄色をアクセントに使った研究職向けの求人 LP。細い欧文の見出し、六角形のモチーフ、線画アイコンのカードで、理系らしい清潔さと信頼感を出している。ページ中盤にエントリーフォームを置き、募集要項を細かく載せる情報量の多い構成。 colors: primary: '#263E8A' secondary: '#1F7FA8' background: '#FFFFFF' background-alt: '#E4E8F3' tint-1: '#EEFAFE' tint-2: '#D0EDFF' cta: '#005EB9' on-cta: '#F1FDFE' accent-1: '#FBCA01' accent-2: '#EDCB42' accent-3: '#F18222' text: '#333333' line: '#B7C8D5' marker: '#B7C8D5' accent-3-accessible: '#B85C0C' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.35 letterSpacing: 0.05em headline-lg: fontFamily: Josefin Sans fontSize: 36px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 accent: fontFamily: Noto Serif JP fontSize: 36px fontWeight: 700 lineHeight: 1.2 note: fontFamily: Shippori Mincho fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 2px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' point-card: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 120px section-title-en: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 80px entry-form: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' height: 1700px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 72px plan-box: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 68px recommend-box: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 130px icon-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' height: 112px badge-gold: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 50px salary-card: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 70px sticky-nav: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 60px --- # DESIGN.md — 紺×水色×黄の研究職採用 LP（Clean Navy Science Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、清潔・爽やか、クール・先進的、情報量多め・訴求型 - **キーワード**: 研究職・紺グラデーション・六角形モチーフ・細い欧文見出し・黄色アクセント・線画アイコン - **地の質感**: フラットな単色の面と、紺〜青の斜めグラデーション。影はほとんど使わない - **形**: 四角いカード、細い枠線、六角形の写真と装飾、角丸は小さめ - **温度感**: 寒色が中心でクール。黄色とオレンジでほどよく温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#263E8A` | ブランドの紺。ポイント帯のグラデーションや見出し文字 | 6% | 画素の実測 | | `secondary` | `#1F7FA8` | 青緑寄りの青。欧文見出しや採用区分の文字 | 2% | 推定 | | `background` | `#FFFFFF` | ページの地の色 | 53% | 画素の実測 | | `background-alt` | `#E4E8F3` | フォームや取引先帯の薄い青灰色の面 | 9% | 画素の実測 | | `tint-1` | `#EEFAFE` | おすすめボックスやフッターの淡い水色 | 5% | 画素の実測 | | `tint-2` | `#D0EDFF` | 手当を案内するボックスの水色 | 3% | 画素の実測 | | `cta` | `#005EB9` | フォームの送信ボタンの青 | 1% | 画素の実測 | | `on-cta` | `#F1FDFE` | 送信ボタン上の文字 | 0% | 画素の実測 | | `accent-1` | `#FBCA01` | 黄色。バッジ、六角形の装飾、見出しの縦線 | 2% | 画素の実測 | | `accent-2` | `#EDCB42` | 黄みのオレンジ。サブ見出しの文字 | 0% | 画素の実測 | | `accent-3` | `#F18222` | オレンジ。年収の数字 | 0% | 画素の実測 | | `text` | `#333333` | 見出しと本文の文字 | 3% | 推定 | | `line` | `#B7C8D5` | カードの枠や区切りの細い灰青の線 | 0% | 画素の主要色に補正 | | `marker` | `#B7C8D5` | 強調語の下に引く薄い青のマーカー | 0% | 画素の主要色に補正 | | `accent-3-accessible` | `#B85C0C` | AA を満たす補正値（計算） | | 計算 | - 地は白にする。フォームと取引先の帯は薄い青灰色、補足のボックスは淡い水色に分ける - 紺は、見出しの文字か、ポイント部分の斜めグラデーション帯（青→紺）に使う - 黄色は、バッジ・六角形・見出しの縦線など小さな面だけに使う - 金額などの数字はオレンジ、または紺の太字で目立たせる - 送信ボタンは鮮やかな青のベタ塗りにし、他の要素と競わせない - 強調語の下には薄い青のマーカーを引く - `salary-card` は文字 `#F18222` × 背景 `#FFFFFF` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#B85C0C`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのキャッチ | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.35 | 0.05em | | `headline-lg` | セクションの欧文見出し（細字） | 欧文サンセリフ | Josefin Sans | 300 | 36px | 1.2 | 0.02em | | `headline-md` | ポイントカードやセクションの和文見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.5 | 0.08em | | `headline-sm` | 黄色のサブ見出し、ボックスの見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文と募集要項 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `accent` | 年収などの数字や明朝の数値表記 | 明朝 | Noto Serif JP | 700 | 36px | 1.2 | 0.0em | | `note` | 欧文見出しの下の和文ラベルや注釈 | 明朝 | Shippori Mincho | 400 | 11px | 1.6 | 0.1em | | `label-button` | 送信ボタンと固定バーのラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - セクション見出しは、大きく細い欧文と、その下の小さな和文の2段で組む - 和文見出しは字間を広めにとった太いゴシックにする - 強調したい語だけ文字を大きくし、下にマーカーを引く - 数字は単位よりかなり大きくして目立たせる - サブ見出しの前後に斜線を置く「＼ ／」の装飾を使う - 募集要項は小さめの本文にし、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。WORK STYLE のカードは 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - ポイント部分は全幅のグラデーション帯にし、その上に白カードを縦に並べる - フォームは薄い青灰色のパネルに入れ、パネルの中では入力欄を白にする - 採用区分は、枠線の箱に大きな細い番号を重ねて縦に並べる - 募集要項は、黄色い縦線つきの小見出しと本文を区切り線で区切った一覧にする - 画面下に固定のナビバーを置き、3 つのボタンを並べる ## Elevation & Depth - 基本はフラットにし、影を付けない - 年収カードはごく薄い影と細い枠で浮かせる - 画面下の固定バーには上向きの軽い影を付ける ## Shapes - **角丸**: 小 2px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物写真は六角形に切り抜く。インタビューの写真は白背景の切り抜きにする - **セクション境界**: 直線で切り替える。色の帯の境界ははっきり分ける - カードとボタンはほぼ角なしの四角にする - 六角形を写真・装飾・アイコンバッジに繰り返し使う - 年収カードだけ角丸 8〜12px にする ## Components - **番号付きポイントカード**（`point-card`）: グラデーション帯の上に置く白カード。左上に水色の大きな斜体数字を重ね、中に太字の見出しとマーカー強調を入れる - **欧文＋和文の見出し**（`section-title-en`）: 細い欧文を青緑寄りの青で大きく置き、下に小さな明朝の和文を添える - **エントリーフォーム**（`entry-form`）: 薄い青灰色のパネルに白い入力欄を並べる。ラジオは枠線の箱にし、選んだものは青枠と青文字にする - **送信ボタン**（`button-primary`）: 青のベタ塗りの四角いボタン。白い太字を入れ、右端に横線を添える - **採用区分ボックス**（`plan-box`）: 細い灰青の枠の箱に、左下で欠けた大きな細い番号を重ねる。上には黄色の斜線で挟んだラベルを置く - **こんな方におすすめ**（`recommend-box`）: 淡い水色の面に、チェックアイコン付きの箇条書きを入れる - **線画アイコンカード**（`icon-card`）: 紺の細い枠の正方形カード。左上に黄色い六角形、右下に黄色い六角形の＋／→ボタンを置く - **金のメダルバッジ**（`badge-gold`）: 六角形の写真の右上に重ねる、金色の円形バッジ - **年収例カード**（`salary-card`）: 薄い枠の角丸カード。左にオレンジの大きな金額、縦の区切り線の右に人物アイコンと年齢を置く - **下部の固定ナビ**（`sticky-nav`）: 白い2マス（写真付き・アイコン付き）と、オレンジのグラデーションの相談ボタンを横に並べる ## Do's and Don'ts **Do** - 見出しは細い欧文と小さな和文の2段で統一する - 六角形を写真・装飾・バッジに繰り返し使う - 黄色は小さな面のアクセントに限る - 数字は大きく、単位は小さく組む - フォームは中盤に置き、要件を先に短く伝える **Don't** - 暖色の大きな背景面を使わない - ボタンを丸いピル型にしない - 影を強く付けない - 見出しに丸ゴシックや手書き風の書体を使わない - 写真に派手な加工や色付けをしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（職場のイメージと年収を一度に伝える）: 白みがかった研究室の写真に紺の太字キャッチを重ね、一語は紺のベタ地に白抜きにする。明朝で平均年収を添え、下に「詳細を見る」の矢印を置く 2. **相談への誘導と告知帯**（気軽な相談と手当の拡充を知らせる）: 斜線で挟んだコピーの次に、黄色のグラデーション帯の告知を置き、紺のピル型 MORE ボタンを添える 3. **配属先のロゴ**（信頼感を出す）: 薄い青灰色の帯に、白い正方形のロゴ枠を 4 つ並べる 4. **4つのポイント**（主な魅力を伝える）: 青から紺へのグラデーション帯に、番号付きの白カードを縦に 4 枚並べる 5. **先輩インタビュー**（働く姿を想像してもらう）: 切り抜きの人物写真を左右の矢印でスライドさせ、黄色の学位バッジと短い引用を添える 6. **エントリーフォーム**（相談の申し込みを受け付ける）: 斜線つきの見出しと説明文の下に、薄い青灰色のパネルでフォームを置き、青い送信ボタンを付ける 7. **採用方法**（働き方の選び方を示す）: 六角形の装飾と番号付きの区分ボックス 3 つで概要を見せ、区分ごとに六角形の写真・黄色の見出し・おすすめボックスで詳しく説明する 8. **手当の案内**（経済面の支援を伝える）: 水色のボックスに紺の箇条書きと本文を入れる 9. **働く環境**（支援・福利厚生・キャリアの制度を見せる）: 線つきの小見出しの下に、線画アイコンカードを 3 列で並べる 10. **募集要項**（条件を細かく伝える）: 黄色い縦線つきの小見出しで一覧にし、年収はカードと太い数字で見せる 11. **雇用の仕組み**（契約の関係を図で説明する）: 青い太枠の円 3 つを矢印でつなぎ、関係のラベルを付ける 12. **フッター**（会社情報を載せる）: 淡い水色の地に、ロゴ・SNS・認証マーク・コピーライトを中央揃えで置く ## Imagery - 白衣の研究者が顕微鏡を使う、明るく白っぽい写真 - 人物は白背景や明るいオフィスで撮った笑顔の上半身 - 六角形のマスクと、黄色い線の六角形の装飾 - アイコンは紺〜青の線画に黄色を差す - 金色のメダル型バッジで金額を強調する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 1000px 幅で組み、ファーストビューのキャッチは 1 行にする - PC ではポイントカードを 4 列に並べ、アイコンを付ける - PC ではインタビューを 4 人横並びで見せる - PC のフォームはラベルを左、入力欄を右に置き、ラジオを横に並べる - 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-05c446a8`（元 LP の URL から採番） - **元 LP**: https://witc-rd.jp/lp05/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。