--- version: alpha name: Vivid Card Blue Tech Recruit LP description: 明るいグレー地に鮮やかな青を主役にした採用サイト。マゼンタ・グリーン・イエローの角丸カードを傾けて散らし、遊び心と先進性を出す。英字の小見出しと大きな透かし英字で章を区切り、写真は自然光のオフィスの人物を使う。 colors: primary: '#0179F3' secondary: '#009EFF' background: '#F0F1F3' surface: '#FEFEFE' text: '#05070C' text-body: '#555555' accent-1: '#F11F8C' accent-2: '#47BA14' accent-3: '#FAB824' tint-1: '#E0E8EA' line: '#E0E8EA' on-primary: '#FFFFFF' cta: '#FFFFFF' on-cta: '#2572CF' primary-accessible: '#0173E6' secondary-accessible: '#007BC7' accent-1-accessible: '#E30E7D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 14px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 34px fontWeight: 400 lineHeight: 1.2 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' tilted-card-cluster: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 180px section-label: textColor: '{colors.primary}' typography: '{typography.accent}' height: 120px value-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 170px interview-card: textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 290px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 48px accordion: textColor: '{colors.text}' typography: '{typography.body-md}' height: 60px job-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 240px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 88px feature-box: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 170px --- # DESIGN.md — 青基調と多色カードのEdTech採用LP（Vivid Card Blue Tech Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、ポップ・元気、シンプル・ミニマル、信頼・誠実 - **キーワード**: 鮮やかな青・多色カード・透かし英字・余白多め・オフィス写真・フラット - **地の質感**: 影のほぼないフラットな面。グラデーションは使わず単色の面を重ねる - **形**: 小さめの角丸の矩形カード。カードを斜めに傾けて重ねる - **温度感**: クールな青に暖色アクセントを足した、明るく親しみのある温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0179F3` | ブランドの青。行動指針カード・フッター地 | 14% | 画素の実測 | | `secondary` | `#009EFF` | 明るいシアン系の青。成長セクションの地 | 12% | 画素の実測 | | `background` | `#F0F1F3` | ページの基本地。ライトグレー | 30% | 画素の実測 | | `surface` | `#FEFEFE` | 白いカード・ミッション地 | 14% | 画素の実測 | | `text` | `#05070C` | 見出しの黒文字 | 2% | 画素の実測 | | `text-body` | `#555555` | 本文のグレー文字 | 3% | 推定 | | `accent-1` | `#F11F8C` | マゼンタのカード | 2% | 画素の実測 | | `accent-2` | `#47BA14` | グリーンのカード・職種バッジ | 2% | 画素の実測 | | `accent-3` | `#FAB824` | イエローのカード・バッジ | 2% | 画素の実測 | | `tint-1` | `#E0E8EA` | 背景の透かし英字 | 2% | 画素の主要色に補正 | | `line` | `#E0E8EA` | FAQ・アコーディオンの区切り線 | 0% | 画素の主要色に補正 | | `on-primary` | `#FFFFFF` | 青地上の白文字 | 2% | 画素の主要色に補正 | | `cta` | `#FFFFFF` | 白地の応募ボタン（フッター） | 1% | 画素の実測 | | `on-cta` | `#2572CF` | 応募ボタン上の青文字と矢印 | 0% | 画素の実測 | | `primary-accessible` | `#0173E6` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#007BC7` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#E30E7D` | AA を満たす補正値（計算） | | 計算 | - 基本はライトグレー地。物語を語るミッションは白地にする - 数字・特徴の章は青を全幅に敷き、白文字で反転させる - マゼンタ・グリーン・イエローはカードやバッジの面だけに使い、文字色には使わない - 英字の小見出しは primary の青で小さく入れる - 透かし英字は地色よりわずかに濃い淡い青で大きく置く - CTA は青地の上に置いた白カードと青文字の矢印で作る - `tilted-card-cluster` は文字 `#FFFFFF` × 背景 `#0179F3` のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#0173E6`、4.57:1）を使う。 - `value-card` は文字 `#FFFFFF` × 背景 `#009EFF` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#007BC7`、4.51:1）を使う。 - `feature-box` は文字 `#FFFFFF` × 背景 `#F11F8C` のコントラスト比が 3.95:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#E30E7D`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 36px | 1.5 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.06em | | `headline-md` | カード見出し・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.04em | | `accent` | セクション上の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 14px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.04em | | `note` | 名前・肩書き・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `headline-sm` | 成長の大きな数字 | 欧文サンセリフ | Montserrat | 400 | 34px | 1.2 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.04em | - 見出しは字間を広めにした太いゴシックにする - 見出しの上に、青い英字ラベルを小さく 1 行入れる - 背景には同じ英字を 100px 前後の透かしで大きく置く - 本文は行間 2.0 前後で、ゆったり読ませる - 数字は欧文の細めのサンセリフで大きく、単位は小さく添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。インタビュー一覧のみ 2 カラム - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は約 28px にそろえる - 見出しブロックは左揃えにする - 経営陣インタビューとカルチャー写真は全幅で配置する - 成長の章は年表と横棒グラフを縦に並べる - 大きな青い面の中に白カードや青カードを入れ子にする ## Elevation & Depth - 基本は影なしのフラット - 白カードはグレー地との明度差だけで浮かせる - 写真の上の文字は暗いオーバーレイで読みやすくする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸 8px の矩形。一覧の写真は正方形に近い比率。章の写真は全幅の横長 - **セクション境界**: 直線で地色を切り替える。白カードを青とグレーの境界にまたがせて置く - ボタンは角丸 8px の矩形にし、ピル型は使わない - 装飾カードは 10〜20° 傾けて重ねる - タブ切替だけはピル型を使う ## Components - **傾いた多色カード群**（`tilted-card-cluster`）: 青・マゼンタ・緑・黄の角丸カードに白い英字と線画を入れ、ランダムに傾けて重ねる - **英字ラベル＋透かし見出し**（`section-label`）: 青い英字の小ラベル、黒の和文見出し、背景の大きな淡い英字で構成する - **番号付き行動指針カード**（`value-card`）: 青の面に、白の見出し・右上の番号・箇条書きを置く。2 色の青を交互に使う - **社員インタビューカード**（`interview-card`）: 角丸の写真の右下に職種色のバッジを置き、下に太字の見出しと名前を入れる - **アウトラインボタン**（`button-outline`）: 黒枠・白地の全幅ボタンで、もっと見る用 - **アコーディオン**（`accordion`）: 細い区切り線と右端の青い＋で開閉する。FAQ と制度で使う - **求人カード**（`job-card`）: 白の角丸カードに太字の職種名と概要を入れ、右下に青い斜め矢印を置く - **応募 CTA カード**（`button-primary`）: 青地の上の白カード。小さい英字、青太字の文言、右端の→で構成する - **色付き特徴ボックス**（`feature-box`）: マゼンタ・緑・黄の面に、英字ラベル・番号・白の太字見出しを入れる ## Do's and Don'ts **Do** - ライトグレー地を基調にし、青の面は章単位で大きく使う - 多色カードの装飾は FV・Entry・フッターで繰り返す - セクションごとに英字ラベルと透かし英字を必ず入れる - 数字は大きな欧文で見せ、グラフは線と単色の棒で描く - 人物写真は自然光で明るく、笑顔と作業風景を混ぜる **Don't** - グラデーションや強いドロップシャドウを使わない - アクセント 3 色を本文の文字色に使わない - 明朝体や手書き書体を混ぜない - ボタンをピル型や派手な色にしない - 余白を詰めて情報を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（挑戦する領域と仲間募集を宣言する）: グレー地に傾いた多色カードを散らし、下に大見出しと短い導入文を置く 2. **ミッション**（企業の使命を語る）: 白地に引用符付きの見出しを置き、長文の本文を続ける。背景に淡いカードと透かし英字を敷く 3. **行動指針**（価値観を 4 つ示す）: 人物写真の上に右寄せの見出し、下に番号付きの青カードを縦に並べる 4. **サービス紹介**（事業内容を伝える）: 端末のモックアップを青の傾いた四角に重ね、下に本文を置く 5. **社員インタビュー**（働く人を見せる）: 2 カラムの写真カードに職種バッジを付け、もっと見るボタンを添える 6. **経営陣インタビュー**（経営陣の想いを伝える）: 全幅の人物写真に、肩書き・名前・白の太字見出しと斜め矢印を重ねる 7. **カルチャー**（社風を具体例で伝える）: 全幅の写真、青い番号、太字の小見出し、本文の順で 4 項目を並べる 8. **福利厚生**（制度を提示する）: グレーと青の境界にまたがる白カードに、アコーディオンを入れる 9. **成長の数字**（成長性を数値で示す）: 青地に年表と横棒グラフ、タブ切替の折れ線グラフ、大きな数字を置く 10. **特徴**（入社の魅力を 3 つ示す）: 濃い青のパネルの中に、多色の特徴ボックスと白文字の本文を交互に置く 11. **募集職種**（応募先を選ばせる）: カテゴリをテキストリストで示し、白い求人カードを縦に並べる 12. **カジュアル面談 CTA**（応募前の接点を作る）: 暗くした全幅写真の上に白い見出しと枠線ボタンを置く 13. **よくある質問**（不安を解消する）: Q 番号付きのアコーディオンを罫線で区切る 14. **フッター**（回遊させ、応募へ導く）: 青地に資料スライド、2 列のナビ、白い CTA カード、SNS カード、流れる多色カードを置く ## Imagery - オフィスでの自然光の人物写真。明るく、やや寒色寄りに補正する - 会議・雑談・ボードゲームなど、チームの和やかな場面を入れる - 装飾カードは単色面に、白の手描き風の線画（グラフ・星・波線）と英語の標語を入れる - サービスは PC やタブレットのモックアップを斜めに重ねて見せる - グラフは白の細い線と単色の棒だけで描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 70% 幅にコンテンツを収める - PC の行動指針カードは 4 列を互い違いに配置する - PC のインタビューは 3 列、経営陣は 3 列で並べる - 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-fc625ccb`（元 LP の URL から採番） - **元 LP**: https://careers.monoxer.com/ - **解析に使った画像**: 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/）からご連絡ください。