--- version: alpha name: Greige Neon Green Playful Recruit LP description: 生成りグレージュの地に、チャコールのピル型ボタンとネオングリーンの線や面を差した新卒採用サイト。幅広の欧文見出しと、カラフルなフラットイラスト、角丸カードで、軽やかでクリエイティブな印象にまとめている。 colors: background: '#F4F3EF' background-alt: '#EBE8E3' surface: '#F4F3EF' primary: '#01FD68' secondary: '#00C537' cta: '#292929' on-cta: '#DEDDDC' dark-section: '#42454A' on-dark: '#F7F8F6' text: '#181817' accent-1: '#ED543C' accent-2: '#7976C5' accent-3: '#3391D2' line: '#2F4A7A' accent-1-accessible: '#BA2811' typography: display: fontFamily: Syne fontSize: 52px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.01em headline-lg: fontFamily: Unbounded fontSize: 60px fontWeight: 500 lineHeight: 1.1 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.1em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em accent: fontFamily: Syne fontSize: 17px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 8px md: 16px lg: 40px full: 999px spacing: unit: 8px card: 24px 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: 52px button-circle-more: backgroundColor: '{colors.cta}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 56px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 70px badge-hiring: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px card-job-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 600px tile-benefit: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 84px card-white: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 500px card-sns: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 104px cta-band: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 560px --- # DESIGN.md — 生成り×ネオングリーンの新卒採用 LP（Greige Neon Green Playful Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、ポップ・元気、シンプル・ミニマル - **キーワード**: 生成り地・ネオングリーン・幅広欧文見出し・角丸カード・フラットイラスト・ピル型ボタン - **地の質感**: フラットでマットな面。グラデーションはイラストのパズルピースだけに使う - **形**: 大きな角丸のセクション面、アーチ型の窓、ピル型ボタン、細い線の円や楕円の装飾 - **温度感**: やや温かいニュートラル地に、ネオングリーンで冷たく明るいアクセントを加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F4F3EF` | ページ全体の生成り地 | 36% | 画素の実測 | | `background-alt` | `#EBE8E3` | Job セクションのグレージュ面 | 8% | 画素の実測 | | `surface` | `#F4F3EF` | ニュース・メンバー・動画の白カード | 10% | 画素の実測 | | `primary` | `#01FD68` | ブランドのネオングリーン（線・バッジ・アイコン） | 3% | 画素の実測 | | `secondary` | `#00C537` | 最終 CTA 帯の濃いグリーン | 6% | 画素の実測 | | `cta` | `#292929` | ピル型ボタン・丸矢印ボタンのチャコール | 4% | 画素の実測 | | `on-cta` | `#DEDDDC` | ボタン上の白文字 | 0% | 画素の実測 | | `dark-section` | `#42454A` | 職種紹介カードのダークグレー面 | 10% | 画素の実測 | | `on-dark` | `#F7F8F6` | ダーク面の上の白文字 | 0% | 画素の実測 | | `text` | `#181817` | 見出し・本文のほぼ黒 | 3% | 画素の実測 | | `accent-1` | `#ED543C` | 制度タイルの朱赤 | 1% | 画素の実測 | | `accent-2` | `#7976C5` | 制度タイルの紫 | 1% | 画素の実測 | | `accent-3` | `#3391D2` | 制度タイルの青 | 1% | 画素の実測 | | `line` | `#2F4A7A` | SNS カードの紺の細枠 | 0% | 推定 | | `accent-1-accessible` | `#BA2811` | AA を満たす補正値（計算） | | 計算 | - 地の色は生成り。セクションの切り替えはグレージュ面、白カード、ダークグレー面の 3 段階で行う - ボタンは全部チャコールにし、矢印だけをネオングリーンにする - ネオングリーンは線の円、バッジ、小さなアイコン、最終 CTA 帯に限って使う - 制度タイルだけは朱・緑・紫・青・黄・グレーの多色にして、ポップに見せる - 本文はほぼ黒にする。薄いグレーの文字は補足だけに使う - `tile-benefit` は文字 `#DEDDDC` × 背景 `#ED543C` のコントラスト比が 2.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#BA2811`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション名の大きな欧文見出し | 欧文サンセリフ | Syne | 500 | 52px | 1.1 | 0.01em | | `headline-lg` | FV のロゴ風の欧文 | 欧文サンセリフ | Unbounded | 500 | 60px | 1.1 | 0.0em | | `headline-md` | 和文のキャッチ・CTA 見出し | ゴシック | Zen Kaku Gothic New | 500 | 22px | 1.6 | 0.1em | | `headline-sm` | 職種名などのカード見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.05em | | `body-md` | 本文・リード文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 2.2 | 0.1em | | `note` | 見出し横の和文ラベル・タグ・注釈 | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.6 | 0.08em | | `accent` | View more や番号などの欧文 | 欧文サンセリフ | Syne | 600 | 17px | 1.3 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 500 | 12px | 1.4 | 0.1em | - セクション名は幅広の欧文を大きく置き、横か下に小さな和文ラベルを添える - 本文は中央揃えにし、行間を広く（2 以上）取って、詩のように短い行で区切る - 和文には全体的に 0.1em 前後の字間を空ける - 欧文見出しは白カードの上端にまたがるように重ねて配置する - 極太の書体は使わず、中くらいの太さで統一する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。制度タイルだけ 2 カラムのグリッドにする - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - セクションは画面幅いっぱいの大きな角丸面で区切る - 白カードは左右 16px の余白で浮かせて置く - コンセプト文は中央揃えにし、段落の間を 1 行分ほど空ける - メンバー記事は横スクロールのカルーセルにし、下にスクロールバーを付ける - 写真帯の上に欧文のマーキーを流して、セクションをつなぐ ## Elevation & Depth - 影はほぼ使わず、面の色の差で階層を表す - 白カードは生成り地に影なしで置く - ダーク面をグレージュ面に重ね、奥行きを出す ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 角丸 16〜24px の長方形。イラストはアーチ型（上が半円）の枠に入れる - **セクション境界**: 上の角を大きく丸めた面を重ねて区切る。直線では区切らない - ボタンはピル型、または 56px の円形の矢印ボタンにする - 制度タイルは角丸 16px にし、左上に黒い番号タブを付ける - 背景にはネオングリーンの細い円・楕円・崩した文字形の線をちりばめる - SNS カードは細い枠線の角丸 24px にする ## Components - **ピル型ボタン**（`button-primary`）: チャコールのピル型。白文字の右にグリーンの細い矢印を置く - **View more 丸ボタン**（`button-circle-more`）: 欧文テキストと、チャコールの円にグリーン矢印を入れたボタンを横に並べる - **欧文セクション見出し**（`section-heading`）: 幅広の欧文を大きく置き、横に小さな和文ラベルを付ける - **募集中バッジ**（`badge-hiring`）: ネオングリーン地に黒文字の小さな角丸ラベル - **職種紹介カード**（`card-job-dark`）: ダークグレーの大きな角丸面。チェック付きの魅力リストを半透明のバーで並べる - **制度タイル**（`tile-benefit`）: 多色の角丸タイル。中央に白文字、左上に黒の番号タブを置く - **白コンテンツカード**（`card-white`）: メンバー記事・動画・ニュースを載せる白い大きな角丸カード - **SNS アカウントカード**（`card-sns`）: 細枠の角丸カード。左に丸いアバター、右にアカウント名と SNS アイコンを並べる - **最終 CTA 帯**（`cta-band`）: 上の角が丸いグリーンの面。中央に見出しと大きなピル型ボタンを置き、下に欧文マーキーを流す ## Do's and Don'ts **Do** - 生成り地を広く残して、余白で見せる - ボタンの矢印、背景の装飾線、バッジにネオングリーンを差す - セクション名は必ず欧文の大見出しにし、小さな和文ラベルを添える - セクション面とカードは大きな角丸にそろえる - 写真は自然光のオフィス、または社員の笑顔のスナップにする **Don't** - ネオングリーンを本文の文字色に使わない - 強い影やベベルなどの立体表現を入れない - 明朝体や極太のゴシック体を混ぜない - 角が尖った四角いボタンにしない - 制度タイル以外で多色を乱用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（多様な人が集まる会社だと一目で伝える）: アーチ枠のフラットイラストを 3×2 で並べ、下に和文キャッチ、大きな欧文ロゴ、採用年度を置く。背景には薄い白で大きな欧文を敷く 2. **お知らせ**（最新の採用情報を知らせる）: 白の角丸カードに、日付（グリーン）、タイトル、View all の丸ボタンを入れる 3. **コンセプト**（社名の由来とビジョンを伝える）: グリーンのアーチ型の面と楕円の線を背景に置き、短い行の中央揃え本文を広い行間で流す 4. **仕事紹介**（事業と職種を伝える）: グレージュの角丸面に欧文見出し、リード文、ピル型ボタン、角丸写真を置き、写真にコラージュ画像を重ねる 5. **職種詳細**（職種の魅力を箇条で示す）: ダークの角丸カードに、職種名、募集中バッジ、チェック付きの魅力リスト、ボタンを入れる 6. **写真帯**（チームの雰囲気を見せる）: 全幅のオフィス写真の上に、白い欧文マーキーを流す 7. **働き方・制度**（福利厚生の数字を示す）: 番号付きの多色タイルを 2 列×3 段に並べ、下に View more を置く 8. **社員紹介**（働く人の人柄を伝える）: 白カードに、タグ・写真・記事タイトルの横スクロールカルーセルを入れ、右上に回転する円形の欧文スタンプを置く 9. **対談**（本音のストーリーへ誘導する）: 角丸の写真バナーの中央に白の欧文見出しと和文を置き、大きな引用符の装飾を付ける 10. **SNS**（社員の日常発信へ誘導する）: 細枠の角丸カードに、アバターとアカウント名を縦に並べる 11. **技術発信**（技術力を動画で見せる）: 白カードに動画サムネイルを縦に 3 本並べ、View more を置く 12. **エントリー CTA**（応募へ導く）: グリーンの角丸の面に 2 行の和文見出しと大きなチャコールのピル型ボタンを置き、欧文マーキーで締める ## Imagery - 人物はフラットなベクターイラストにし、パズルピースを虹色のグラデーションで描く - イラストは細い虹色の線で描いたアーチ型の窓に収める - 写真は自然光のオフィスで、社員の会話や作業をスナップ風に撮る - 背景にはネオングリーンの細い線で描いた円・楕円・文字の断片を散らす - ネオングリーン地にスマホや写真を重ねたコラージュをアクセントに使う - アイコンは犬のシルエットのような単色のマスコット記号にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 75% に絞って中央に置く - PC の仕事紹介は、左にテキスト、右に写真の 2 カラムにする - PC の制度タイルは 3 列×2 段のピル型に近い形にする - PC の職種詳細の魅力リストは 2 列にする - PC の SNS カードと動画は横に並べる（2〜3 列） - PC の FV はイラストを 5 体横 1 列にし、ロゴと年度を横に並べる ## 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-79bfa663`（元 LP の URL から採番） - **元 LP**: https://docodoor.com/graduate/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。