--- version: alpha name: Bold Navy Geometric Recruitment LP description: 濃紺とロイヤルブルーを主役にした新卒採用LP。斜めの帯・矢羽根・円弧などの大きな幾何学図形を写真に重ね、白地と紺地のセクションを交互に置く。欧文の大きな英字見出しと太いゴシックの和文見出しで、勢いと信頼感を両立させている。 colors: primary: '#003C85' secondary: '#025FAD' background: '#FFFFFF' dark-section: '#012F6A' tint-1: '#BFDAEB' accent-1: '#0083CE' text: '#000000' text-body: '#333333' accent-2: '#1A325D' on-dark: '#FBFEFE' surface: '#000000' text-muted: '#979798' typography: display: fontFamily: Barlow fontSize: 64px fontWeight: 500 lineHeight: 1.0 headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 36px fontWeight: 400 lineHeight: 1.1 headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 11px fontWeight: 600 lineHeight: 1.2 body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em 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-outline: textColor: '{colors.accent-2}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 34px button-entry: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 72px section-label: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 16px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 580px interview-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 260px tag-role: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 14px job-item: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 140px geo-shape: backgroundColor: '{colors.secondary}' height: 200px --- # DESIGN.md — 紺と青の幾何学図形で魅せる新卒採用LP（Bold Navy Geometric Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、力強い・インパクト、信頼・誠実 - **キーワード**: 濃紺・幾何学図形・斜めの動き・大きな英字・人物写真・白と紺の交互配置 - **地の質感**: グラデーションなしのフラットな単色の面に、明るく自然光の写真を組み合わせる - **形**: 平行四辺形の帯、矢羽根（シェブロン）、四分円・同心円の弧、直角三角形。カードは角丸なし - **温度感**: クールで前向き。青系一色の中に、写真の肌色が温かみを添える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#003C85` | ブランドの濃紺・紺地セクション | 20% | 画素の実測 | | `secondary` | `#025FAD` | ロイヤルブルーの図形・締めのセクション | 9% | 画素の実測 | | `background` | `#FFFFFF` | 白地のセクション | 25% | 画素の実測 | | `dark-section` | `#012F6A` | 求人エリアの深い紺 | 8% | 画素の実測 | | `tint-1` | `#BFDAEB` | 淡い水色の矢羽根・三角 | 4% | 画素の実測 | | `accent-1` | `#0083CE` | 明るいブルーの円弧 | 4% | 画素の実測 | | `text` | `#000000` | 見出しの黒 | 2% | 画素の実測 | | `text-body` | `#333333` | 本文のダークグレー | 3% | 推定 | | `accent-2` | `#1A325D` | 白地上の英字ラベル・線ボタンの紺 | 1% | 画素の実測 | | `on-dark` | `#FBFEFE` | 紺地の上の白文字 | 2% | 画素の実測 | | `surface` | `#000000` | フッターの黒 | 4% | 画素の実測 | | `text-muted` | `#979798` | フッターの補足とコピーライト | 0% | 画素の実測 | - 地の色は白と濃紺を交互に切り替え、リズムを作る - 図形は濃紺・ロイヤルブルー・明るいブルー・淡い水色の4段階で重ねる - 暖色やアクセントの差し色は使わない。強調は青の濃淡とサイズの差だけで出す - 紺地の上の文字・枠線ボタンはすべて白にする - 白地の英字ラベルと線ボタンは紺にし、見出しは黒にする - タグは紺の塗りに白文字で小さく使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと締めに置く巨大な英字コピー | 欧文サンセリフ | Barlow | 500 | 64px | 1.0 | 0.0em | | `headline-lg` | 各セクションの和文見出し（3〜4行） | ゴシック | Noto Sans JP | 700 | 28px | 1.45 | 0.02em | | `headline-md` | 求人エリアの大きな英字見出し | 欧文サンセリフ | Montserrat | 400 | 36px | 1.1 | 0.0em | | `headline-sm` | 職種名・カードの見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.02em | | `accent` | セクション上の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 11px | 1.2 | 0.0em | | `body-md` | 本文・リード文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.03em | | `note` | 氏名・入社年・フッターの補足 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.02em | | `label-button` | 線ボタンの文字 | ゴシック | Noto Sans JP | 500 | 11px | 1.2 | 0.05em | - 見出しは英字ラベル→和文見出し→本文→線ボタンの順で縦に積む - 和文見出しは短い文節で改行し、3〜4行で積み上げる - 英字は大文字で書き、和文と組み合わせてバイリンガルにする - 本文は小さめの文字で、行間は広めにとる - 巨大英字の上には写真が重なってもよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。インタビューのカードだけは 2 列で、左右を上下にずらして互い違いに置く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約15px - テキストはすべて左揃え - 写真は画面の端まで広げるか、片側だけ余白を残して配置する - 写真の上に小さな写真を重ねて奥行きを出す - 図形は写真の背後やセクションの境目からはみ出させる ## Elevation & Depth - 影はほぼ使わず、フラットに作る - 奥行きは写真・図形・面を重ねて出す - 注目カードは濃紺の太い枠で囲み、浮いて見せる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの長方形。人物は明るいスタジオ風で切り抜かない - **セクション境界**: 直線で切り替える。境目には矢羽根・斜めの帯・円弧の図形をまたがせる - 写真とカードは角を立てたシャープな長方形にする - ボタンとタグだけはピル型にする - 図形は45〜60度の斜めの帯と、大きな円弧を基本にする - アイコンは細い白の線画にする ## Components - **矢印つき線ボタン**（`button-outline`）: 細い枠線のピル型ボタン。左に文字、右に横向きの矢印を置く。白地では紺、紺地では白にする - **エントリーボタン**（`button-entry`）: 紺地の上に置く、幅いっぱいの大きな白枠ピル型ボタン。2行の文言と外部リンクのアイコンを入れる - **英字ラベル**（`section-label`）: 見出しの上に置く、小さな大文字の英字 - **注目プログラムカード**（`feature-card`）: 濃紺の太い枠で囲んだ白いカード。上に写真と英字の帯ラベル、下にロゴ風の英字・見出し・本文・丸いリンクアイコンを置く - **社員インタビューカード**（`interview-card`）: 縦長の人物写真の下に、一言・氏名と入社年・役職タグ・右矢印を置く - **役職タグ**（`tag-role`）: 紺の塗りに白文字の小さなピル型タグ - **職種リスト項目**（`job-item`）: 左に白い線画アイコン、右に職種名と説明文を並べる - **幾何学装飾**（`geo-shape`）: 斜めの帯・矢羽根・円弧・三角を青の濃淡で重ね、セクションの境目に配置する ## Do's and Don'ts **Do** - 青の濃淡4段階と白・黒だけで画面を作る - 大きな幾何学図形で、斜めの動きや前に進む勢いを表現する - 英字ラベル・和文見出し・本文・線ボタンの型をセクションごとに繰り返す - 写真を重ねたりずらしたりして、雑誌のように配置する - 人物写真は自然光で明るく、笑顔や議論中の場面を選ぶ **Don't** - 暖色の差し色やグラデーションを入れない - 写真やカードに角丸や強い影をつけない - 見出しを中央揃えにしない - 手書き風やかわいい装飾を加えない - 白地のセクションと紺地のセクションを連続させすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を印象づける）: 全面の人物写真に短い和文コピーを2行置き、左下に巨大な白い英字コピーを重ねる 2. **メッセージ**（会社の現在地と求める人物像を伝える）: 白地に3行の大きな見出しと長めの本文を置き、下端から斜めの帯をのぞかせる 3. **注目インターン**（インターンへのエントリーを促す）: 斜めの帯の背景の上に、紺枠の写真つきカードを置く 4. **事業戦略**（事業の方向性を紹介する）: 紺地に円弧の図形を重ね、白文字の見出しと線ボタンを置く。下に都市写真と小さな写真を重ねる 5. **理念**（大切にしている価値観を伝える）: 矢羽根の図形のあとに白地のテキストを置き、端まで広げた写真を続ける 6. **働く環境**（制度や社内の様子へ誘導する）: 紺地に三角形の装飾を置き、白文字・線ボタン・オフィス写真を並べる。写真の下に円弧を敷く 7. **代表メッセージ**（トップの考えを伝える）: 白地にテキストを置き、代表の写真に小さな写真を重ねる。下に矢羽根の帯を入れる 8. **社員インタビュー**（先輩社員のキャリアを見せる）: 2列のカードを上下にずらして互い違いに並べ、役職タグと矢印をつける 9. **職種とエントリー**（職種を説明し、応募へ導く）: 深い紺地に大きな円を敷き、英字見出しと職種リストを置く。各職種の下に大きな枠線ボタンを置く 10. **締めのビジュアル**（最後にもう一度印象を残す）: ロイヤルブルーの地に、散らばった写真と巨大な英字コピーを重ねる 11. **フッター**（ページ内の各セクションへのナビゲーション）: 黒地に英字のメニューと和文の補足を並べ、ロゴを置く。その下に白い帯でポリシーリンクを並べる ## Imagery - 若手社員が議論したりPCで作業したりする、自然な瞬間を撮った写真 - 白いカーテンや明るい窓辺を背景にした、上半身のポートレート - 青空と高層ビル群の都市写真で、成長や未来を象徴する - 大小の写真を重ねたりずらしたりしてコラージュ風に配置する - フラットな単色の幾何学図形（斜めの帯・矢羽根・円弧・三角） - 職種アイコンは白の細い線画 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは見出しと本文を左右に分け、本文を右側に置く - PCでは写真とテキストを左右交互に並べる2カラムにする - 注目カードはPCで横長にし、写真を左、テキストを右に置く - インタビューはPCでも2列の互い違いを保ち、見出しの右に一覧ボタンを置く - PCの職種エリアは、左に写真、右に紺地のリストを置く - フッターのメニューはPCで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-9d01a6cb`（元 LP の URL から採番） - **元 LP**: https://cuebic.co.jp/recruit/newgrads/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。