--- version: alpha name: Bold Urban Pop Recruiting LP description: 明るいグレー地に濃い赤紫と紺の大きな面を交互に敷き、蛍光イエローを差し色にした新卒採用サイト。太い丸みのある欧文ディスプレイ見出し、黒い細枠＋オフセット影のカード、斜めに重ねた写真コラージュで、ポップで若々しく、それでいて誠実な印象を作る。 colors: primary: '#910E54' secondary: '#02447E' background: '#E7E7E7' surface: '#FFFFFE' accent-1: '#E4FE74' tint-1: '#D8BFCB' text: '#2F2C2A' text-muted: '#717171' line: '#1A1A1A' on-primary: '#FCFDFD' cta: '#FFFEFE' on-cta: '#6D0C3A' accent-2: '#05396B' tint-2: '#EFD2AC' typography: display: fontFamily: Fredoka fontSize: 38px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 2.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Fredoka fontSize: 10px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Fredoka fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 10px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 16px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' 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: 44px section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px photo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 330px news-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 96px marker-underline: textColor: '{colors.accent-1}' height: 6px tab-chip: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px index-list: textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 96px video-thumb: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 250px marquee-text: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 50px --- # DESIGN.md — 赤紫×紺×蛍光黄の都市系新卒採用 LP（Bold Urban Pop Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、クール・先進的、信頼・誠実、力強い・インパクト - **キーワード**: 都市・ポップ・コラージュ・太い欧文・蛍光差し色・オフセット影 - **地の質感**: フラットな単色面。写真の上に線画の建物イラストや大きな曲線リボンを重ねる - **形**: 黒1px枠の角丸カード、ピル型ボタンに右下ベタ影、楕円・アーチ型のセクション境界 - **温度感**: やや温かいニュートラル（グレー地に濃い赤紫） ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#910E54` | ブランド赤紫、見出し・大面セクション | 17% | 画素の実測 | | `secondary` | `#02447E` | 紺、先輩Q&A・仕事紹介セクションの地 | 11% | 画素の実測 | | `background` | `#E7E7E7` | ページ基本の明るいグレー地 | 32% | 画素の実測 | | `surface` | `#FFFFFE` | ニュース枠・カードラベルの白 | 4% | 画素の実測 | | `accent-1` | `#E4FE74` | 蛍光イエロー、見出し頭のドット・下線マーカー・大見出し文字 | 1% | 画素の実測 | | `tint-1` | `#D8BFCB` | 背景の曲線リボン（淡い赤紫） | 5% | 推定 | | `text` | `#2F2C2A` | 本文・見出しの黒 | 3% | 画素の実測 | | `text-muted` | `#717171` | 英字サブラベルのグレー | 0% | 画素の実測 | | `line` | `#1A1A1A` | カード枠・リスト区切りの黒線 | 0% | 推定 | | `on-primary` | `#FCFDFD` | 赤紫・紺地の上の白文字 | 1% | 画素の実測 | | `cta` | `#FFFEFE` | 主ボタンの白地 | 1% | 画素の実測 | | `on-cta` | `#6D0C3A` | ボタン上の赤紫文字 | 0% | 画素の実測 | | `accent-2` | `#05396B` | 仕事紹介見出し・リスト項目の紺文字 | 0% | 画素の実測 | | `tint-2` | `#EFD2AC` | 動画サムネのリング線（淡い黄） | 0% | 画素の主要色に補正 | - 地はグレー→紺→グレー→赤紫の順に大きな面で切り替え、リズムを作る - 赤紫はブランド色として見出し文字とページ後半の大面に使う - 蛍光イエローは見出し頭の丸ドット、本文キーワードの波線マーカー、紺地の大見出しのみに限定 - ボタンは白地に黒枠と黒のベタ影、文字は地のセクション色 - 背景に淡い赤紫の太い曲線リボンを敷き、動きを足す - 濃色地の上の文字は白、小さな注記も白で統一 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英字大見出し | 装飾・ディスプレイ | Fredoka | 700 | 38px | 1.1 | 0.0em | | `headline-lg` | FVの斜体キャッチ・紺地の和文大見出し | ゴシック | Dela Gothic One | 400 | 30px | 1.3 | 0.02em | | `headline-sm` | 英字見出し下の和文サブ見出し・カードラベル | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.5 | 0.04em | | `body-lg` | コンセプト文の一行ずつ並ぶ本文 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 2.5 | 0.04em | | `body-md` | 説明文・ニュース本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.03em | | `accent` | カード上の英字小ラベル・人名 | 欧文サンセリフ | Fredoka | 600 | 10px | 1.3 | 0.02em | | `label-button` | ボタン文字 | 欧文サンセリフ | Fredoka | 700 | 14px | 1.0 | 0.02em | | `note` | 日付・リストの英字補足 | 欧文サンセリフ | Montserrat | 600 | 10px | 1.4 | 0.02em | - 見出しは丸く太い欧文＋下に小さな和文の二段構成 - 英字見出しの左に蛍光イエローの丸ドットを置く - 本文は短い句ごとに改行し、行間を広くとる - 本文中に小さな角丸写真を文字サイズで挿し込む - キーワードに蛍光イエローの手描き風波線を引く - FVキャッチは斜体の太ゴシックで蛍光イエロー＋黒縁取り - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カードは縦積み、インタビューは横スライダー - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算） - 左右余白は約16px - 見出しは左寄せ、コンセプトとインタビューのみ中央 - カードは幅84%で中央に置き、画像下端にラベルを半分重ねる - リストは番号＋項目名＋英字補足を黒線で区切る - 各セクション末に中央のピル型ボタン ## Elevation & Depth - ぼかし影は使わない - ボタン・ラベルは右下へ4px程度ずらした黒のベタ影 - カードや写真は黒の細枠でフラットに縁取る ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 黒枠の角丸長方形。仕事紹介は楕円カプセル型、FVは傾けて重ねる - **セクション境界**: 大きな円弧・アーチ型で次のセクションへつなぐ - 写真には必ず黒1pxの枠を付ける - ラベル・ボタンは完全なピル型 - FV写真は少し回転させて重ね、裏に色ブロックを置く - 動画サムネは対角に4分円の色面を置く ## Components - **ピル型ボタン**（`button-primary`）: 白地・黒枠・右下に黒ベタ影。文字は欧文太字 - **ドット付き英字見出し**（`section-heading`）: 蛍光丸ドット＋大きな丸い欧文＋下に小さな和文 - **ラベル重ね写真カード**（`photo-card`）: 黒枠角丸の写真の下端に、英字小ラベル＋和文タイトルのピル型白ラベルを重ねる - **お知らせ枠**（`news-box`）: 白地黒枠の角丸大きめボックス。赤紫の日付と本文、右に開閉矢印 - **波線マーカー**（`marker-underline`）: 本文キーワードの下に蛍光イエローの手描き風波線 - **職種切替タブ**（`tab-chip`）: 赤紫・紺のピル型チップにベタ影。左右に細い線を伸ばす - **番号付きリスト**（`index-list`）: （01）形式の番号、紺の項目名、灰の英字補足、黒線で区切る - **動画サムネイル**（`video-thumb`）: 赤紫地の対角に紺の4分円、中央に細いリングと蛍光再生マーク - **流れる英字帯**（`marquee-text`）: 楕円写真の上を横切る蛍光イエローの大きな英字 ## Do's and Don'ts **Do** - 見出しは必ず欧文ディスプレイ＋和文サブの組みにする - 写真・ボタンに黒枠とベタ影を付け、手作りポップ感を統一する - セクションの地色は大きな面で切り替え、円弧でつなぐ - 蛍光イエローは小さな面積の差し色にとどめる - 人物写真はスーツ姿の自然な笑顔で統一する **Don't** - ぼかし影やグラデーションを使わない - 蛍光イエローを白地の本文色に使わない - 角の尖った枠なし写真を並べない - 明朝体や細いフォントで見出しを組まない - 赤紫・紺以外の濃色で大面を作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（問いかけで就活生を引き込む）: 傾けた人物写真のコラージュに色ブロックと線画の都市イラストを重ね、斜体の蛍光キャッチを置く 2. **お知らせ**（最新の採用情報を伝える）: ドット付き小見出し＋白い角丸ボックス1件 3. **コンセプトメッセージ**（組織の想いを語る）: 中央の英字大見出しと紙飛行機アイコン。短い行の本文に小さな写真と波線マーカーを挿す 4. **紹介動画**（雰囲気を動画で伝える）: 赤紫×紺の幾何サムネ。下を大きな円弧で区切る 5. **組織紹介**（魅力・事業・データへ導く）: 曲線リボン背景の上に、ラベル付き写真カードを4枚縦積み 6. **先輩Q&A**（社員の声で不安を解消）: 紺地に縦長の動画カードスライダー、蛍光の和文大見出し 7. **仕事紹介**（職種・業務の入り口）: 紺地に楕円写真、流れる英字帯、白いピルボタン 8. **働く環境**（制度・福利厚生を一覧）: グレー地に番号付きの線区切りリスト3項目 9. **社員インタビュー**（人を通じて共感を得る）: アーチ型の赤紫地。職種タブ、角丸写真の横スライダー、職種チップと欧文の人名 10. **座談会**（複数社員の対話を紹介）: 重なった写真コラージュとドット付き見出し、ボタン 11. **採用情報**（募集要項・FAQへ誘導）: 赤紫地に英字小ラベル＋和文項目＋右のテキストリンクを白線で区切る ## Imagery - 若手社員のスーツ姿を、屋外の街や明るいオフィスで自然光で撮る - 都市の空撮、緑の公園、木の内装など明るく彩度高めの風景 - 赤紫・紺・黄・緑の太い線で描いたアイソメ風の建物線画 - 淡い赤紫の太い手描き風の曲線リボンを背景に敷く - 紙飛行機などシンプルな線のアイコンを見出しに添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは左上ロゴ、右上にピル型マイページボタンと丸いメニューボタン - PCのFVは写真コラージュを横に広げ、お知らせを1行のピルにする - 組織紹介はPCで大1枚＋小3枚のグリッドにする - 先輩Q&AはPCで扇状に並べたカードにする - インタビューはPCで3枚見せのスライダー、座談会は写真と見出しを左右に並べる - 採用情報のリンクはPCで2カラムにする ## 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-2bf8910c`（元 LP の URL から採番） - **元 LP**: https://www.ur-net.go.jp/jinji/newgraduate/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。