--- version: alpha name: Deep Navy Startup Recruit LP description: 深い紺の地に白抜きの大きな欧文見出しを置き、白い角丸パネルが画面端から張り出す採用サイト。差し色はくすんだゴールドのピル型ボタンだけに絞り、落ち着いた信頼感と先進性を両立している。 colors: primary: '#283D50' on-primary: '#EBF1F3' surface: '#FFFFFF' cta: '#B29965' on-cta: '#FFFFFF' background-alt: '#FAFAFA' text: '#1D2A36' text-body: '#494948' line: '#E2E7E7' accent-1: '#283D50' dark-section: '#010101' text-muted: '#B1C0CD' cta-accessible: '#8A7445' typography: display: fontFamily: Montserrat fontSize: 46px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 110px components: page: textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px section-title: textColor: '{colors.on-primary}' typography: '{typography.display}' height: 80px edge-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px news-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 105px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 100px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 160px link-banner: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 68px photo-carousel: backgroundColor: '{colors.primary}' rounded: '{rounded.md}' height: 480px --- # DESIGN.md — 紺×白カードのスタートアップ採用 LP（Deep Navy Startup Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル - **キーワード**: 深い紺・白抜き大型欧文見出し・片側に寄せた白パネル・ゴールドの差し色・字間を広く取った日本語 - **地の質感**: フラットな単色面。グラデーションや模様は使わず、写真と白パネルでリズムを作る - **形**: 大きな角丸パネル（片側だけ角丸で画面端まで伸ばす）と角丸の写真、ピル型ボタン - **温度感**: やや寒色寄りでクール。写真の人物と金色で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#283D50` | ページ全体の地色・ブランド紺 | 55% | 画素の実測 | | `on-primary` | `#EBF1F3` | 紺地の上の見出し・本文 | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 白いパネル・カード | 22% | 画素の実測 | | `cta` | `#B29965` | 主ボタン（面談申込） | 0% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `background-alt` | `#FAFAFA` | リンクバナー帯の薄グレー地 | 4% | 画素の実測 | | `text` | `#1D2A36` | 白パネル上の見出し・Q文 | 2% | 画素の主要色に補正 | | `text-body` | `#494948` | 白パネル上の本文 | 2% | 画素の実測 | | `line` | `#E2E7E7` | ニュース一覧の区切り線 | 0% | 画素の主要色に補正 | | `accent-1` | `#283D50` | Qバッジの丸 | 0% | 画素の主要色に補正 | | `dark-section` | `#010101` | 黒いリンクバナー | 1% | 画素の実測 | | `text-muted` | `#B1C0CD` | フッターのリンク文字 | 0% | 画素の実測 | | `cta-accessible` | `#8A7445` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ全面を紺にし、白パネルで情報の塊を区切る - ゴールドは主 CTA ボタンにだけ使い、他の装飾には使わない - 白パネル内の文字は濃い紺〜チャコールにして、真っ黒は避ける - フッター手前だけ薄グレー帯を挟み、外部リンクバナーを並べる - 写真以外に彩度の高い色は入れない - `button-primary` は文字 `#FFFFFF` × 背景 `#B29965` のコントラスト比が 2.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#8A7445`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文サンセリフ | Montserrat | 700 | 46px | 1.1 | 0.04em | | `accent` | 欧文見出しの下に添える日本語の小見出し | ゴシック | Noto Sans JP | 700 | 11px | 1.4 | 0.05em | | `headline-lg` | ミッション文・呼びかけ見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.45 | 0.1em | | `headline-sm` | パネル内の小見出し・Q文・職種名 | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.1em | | `body-md` | 本文・回答文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.1em | | `note` | ニュースの見出し・フッターリンク | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.05em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.2 | 0.05em | - セクションの見出しは英語を大きく置き、その下に日本語を小さく添える 2 段構成 - 日本語は字間を 0.1em ほど取り、ゆったり読ませる - FV のリード文は字間 0.2em 以上の太字にする - 見出しは中央揃え、本文とパネル内は左揃え - 外部リンクには文字の右に別窓アイコンを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ニュースは小サムネ＋テキストの 2 列 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算） - 白パネルは片側を画面端に付け、反対側だけ大きな角丸にして張り出させる - セクション間は 100px 以上空けて、紺地の余白を広く見せる - ギャラリーは画面端で切れる横並びにして横スクロールを感じさせる - 職種カードは縦に並べ、カードの間は約 30px 空ける - FV は画面高さいっぱいに中央寄せ。右端に縦書きの欧文を添える ## Elevation & Depth - 基本は影なしのフラット - フッター手前のリンクバナーだけ柔らかい影（0 8px 24px rgba(0,0,0,.12)）を付ける - 白パネルは紺地との明暗差だけで浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸 16px の矩形。職種カードは正方形の角丸サムネ - **セクション境界**: 直線の切り替え。白パネルの片側大角丸で境界に動きを出す - 大パネルは角丸 40px 前後で、画面端側の角は直角 - カードは角丸 16px - ボタンは完全なピル型 - Qバッジは正円 ## Components - **ゴールドのピルボタン**（`button-primary`）: 中央に置く申込ボタン。右に別窓アイコン付き - **欧文＋和文の見出し**（`section-title`）: 大きな白い欧文の下に小さな日本語。中央揃え - **端から張り出す白パネル**（`edge-panel`）: 片側を画面端に付け、反対側だけ大角丸。ニュース・FAQ・資料埋め込みに使う - **ニュース行**（`news-item`）: 左にバナー型サムネ、中央に見出し、右に別窓アイコン。上下を細線で区切る - **職種カード**（`job-card`）: 白い角丸カード。左に角丸写真、右に太字の職種名、右上に別窓アイコン - **Q&A**（`faq-item`）: 紺の丸に白い Q、横に太字の質問。下に回答本文 - **外部リンクバナー**（`link-banner`）: 2×2 の角丸バナー。黒地・白地・写真に文字を重ねたものを混ぜる - **写真ギャラリー**（`photo-carousel`）: 角丸写真を 2 段にずらして並べ、画面端で切る ## Do's and Don'ts **Do** - 紺地を広く取り、白パネルとの面の対比でセクションを分ける - 見出しは必ず大きな欧文＋小さな和文の組み合わせにする - ゴールドは主 CTA の 1 種類に限る - 外部リンクには別窓アイコンを付ける - 日本語には字間を付けて落ち着いた印象にする **Don't** - 赤やオレンジなど彩度の高い色をボタンに使わない - グラデーションや装飾的なパターン背景を入れない - 白パネルを左右対称に中央へ置かない（片側を端に付ける） - 文字に影や縁取りを付けない - 見出しを和文だけにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢と採用中であることを伝える）: 紺の全画面。短いキャッチ、大きなロゴタイプ、字間を広げたリード、SCROLL 表記、右端に縦書きの欧文 2. **ミッション**（会社の使命を伝える）: 欧文見出しの下に大きな和文の一文と、左揃えの説明文 3. **会社紹介**（資料で事業を理解してもらう）: 左端から張り出す白パネルにスライド埋め込み 4. **カジュアル面談の案内**（気軽な応募の入口）: 太字の問いかけ見出し、中央揃えの本文、ゴールドのピルボタン 5. **フォトギャラリー**（社内の雰囲気を見せる）: 角丸写真の 2 段横並び。画面端で切る 6. **ニュース**（成長性と社外活動を見せる）: 右端に張り出す白パネル。小見出しで 2 グループに分け、サムネ付きリストを並べる 7. **募集職種**（職種別の募集ページへ誘導）: 白い角丸カードを縦に並べ、写真と職種名を置く 8. **よくある質問**（選考に関する不安を解消）: 白パネルに Q バッジ付きの質問と回答を並べる。開閉はしない 9. **関連リンク**（コーポレートサイトや発信媒体へ誘導）: 薄グレー帯に影付きの角丸バナーを 2×2 で配置 10. **フッター**（サイト内外へのナビゲーション）: 紺地に白ロゴ、欧文の小見出し付きリンク群、区切り線、コピーライト ## Imagery - 社員が自然に働く・話す姿を撮ったスナップ写真。明るめで、彩度はやや抑える - 服装はカジュアル。オフィス・イベント・懇親会の場面を混ぜる - 写真はすべて角丸で切り抜き、フィルターや枠は付けない - ニュースのサムネは告知用のバナー画像をそのまま横長で使う - イラストや装飾アイコンは使わず、線画の別窓アイコンだけを置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにグローバルナビとゴールドのピルボタン 2 つを並べる - PC のニュースは 2 列グリッド、職種カードは上段 2 枚・下段 3 枚に並べる - PC の白パネルは両側に少し余白を残した幅広の角丸にする - PC のギャラリーは写真を 6 枚前後横に並べ、2 段をずらして配置する - PC の関連リンクは 4 枚を横一列に並べ、フッターのリンクも横並びにする ## 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-cbc40b14`（元 LP の URL から採番） - **元 LP**: https://recruit.mov.am/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。