--- version: alpha name: Prismatic Cross Gradient Recruit LP description: 白地にネオングラデーションの交差する立体バーを大胆に配した、技術系企業の新卒採用サイト。セクションごとに英字見出しの色が変わり、角丸の淡グレーパネルとグラデーションの矩形ボタンでリズムを作る。終盤は蛍光グリーンのエントリー帯と深緑のフッターで締める。 colors: primary: '#006511' background: '#FFFFFF' background-alt: '#F1F5F6' cta: '#23EC6B' on-cta: '#FFFFFF' secondary: '#14955C' text: '#080909' tint-1: '#5BFE65' accent-1: '#0A7AED' accent-2: '#F0458E' accent-3: '#FF6A14' line: '#F1F5F9' on-dark: '#FFFFFF' accent-1-accessible: '#0A75E3' secondary-accessible: '#128552' on-cta-accessible: '#575757' typography: display: fontFamily: Rajdhani fontSize: 44px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.01em headline-lg: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em body-lg: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-gradient: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px section-title: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 80px panel-soft: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 320px people-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 220px cross-label: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px recruit-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 90px news-row: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px play-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 72px --- # DESIGN.md — 虹色クロス×深緑の技術者採用 LP（Prismatic Cross Gradient Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、ポップ・元気、力強い・インパクト - **キーワード**: 交差・プリズム・ネオングラデーション・英字極太見出し・モノクロ写真・余白多め - **地の質感**: フラットな白と淡グレー面に、半透明で重なる立体的なグラデーションバーを乗せる - **形**: 角丸の大型パネル、六角形の写真切り抜き、角のない矩形グラデーションボタン - **温度感**: クールだが彩度の高い多色で若々しい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#006511` | ブランド深緑（採用情報・フッター） | 9% | 画素の実測 | | `background` | `#FFFFFF` | ページ地色 | 46% | 画素の実測 | | `background-alt` | `#F1F5F6` | 角丸パネル淡グレー | 12% | 画素の実測 | | `cta` | `#23EC6B` | エントリー帯・ボタン蛍光グリーン | 6% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | グラデーションボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#14955C` | 採用カードの緑 | 4% | 画素の主要色に補正 | | `text` | `#080909` | 見出し・本文の墨色 | 2% | 画素の実測 | | `tint-1` | `#5BFE65` | フッター内パンフレット面のライトグリーン | 3% | 画素の実測 | | `accent-1` | `#0A7AED` | ABOUT・CULTURE見出しのシアン〜青 | 1% | 画素の実測 | | `accent-2` | `#F0458E` | NEWS見出し・ボタンのマゼンタピンク | 1% | 推定 | | `accent-3` | `#FF6A14` | PEOPLE見出し・ボタンのオレンジ | 1% | 推定 | | `line` | `#F1F5F9` | 区切り線グレー | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 深緑上の白文字 | 0% | 画素の主要色に補正 | | `accent-1-accessible` | `#0A75E3` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#128552` | AA を満たす補正値（計算） | | 計算 | | `on-cta-accessible` | `#575757` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡グレーパネルの2色で静かに保つ - セクション英字見出しは毎回違うグラデーション（シアン→青、ピンク、緑、オレンジ）を当てる - 各セクションのボタン色は見出しのグラデーションと揃える - 多色のネオンは装飾バーと見出しに限り、本文は墨色のみ - ページ終盤は蛍光グリーン→深緑へ切り替えて締める - 人物写真はモノクロ寄りかグレー調で多色装飾と衝突させない - `button-gradient` は文字 `#FFFFFF` × 背景 `#0A7AED` のコントラスト比が 4.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#0A75E3`、4.5:1）を使う。 - `recruit-card` は文字 `#FFFFFF` × 背景 `#14955C` のコントラスト比が 3.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#128552`、4.66:1）を使う。 - `play-badge` は文字 `#FFFFFF` × 背景 `#23EC6B` のコントラスト比が 1.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#575757`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション英字見出し | 欧文サンセリフ | Rajdhani | 700 | 44px | 1.0 | 0.01em | | `headline-lg` | FVキャッチ | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.05em | | `headline-md` | セクションリード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.05em | | `headline-sm` | 英字見出し下の日本語サブ見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | | `body-md` | 本文・カード説明 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.04em | | `body-lg` | 冒頭メッセージ文 | 明朝 | Noto Serif JP | 400 | 14px | 2.2 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.08em | | `note` | 日付・タグ・注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.5 | 0.04em | - 英字見出しは極太のスクエア系サンセリフにグラデーションの文字塗り - 英字見出しの下に斜線アイコン＋日本語サブ見出しを添える - FVと冒頭メッセージのみ明朝で詩的に - 本文は小さめ・行間広めで余白を活かす - 数字ラベルは英字と同じ書体で太く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、カードは横スクロール - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - 英字見出しとパネルを左右交互に配置して動きを出す - 淡グレーパネルは画面端に寄せ片側だけ余白を残す - 見出しはパネルからはみ出して重なる - カード群の下に区切り線と前後ボタンを置く - CTAボタンは本文ブロックの下に左寄せで置く ## Elevation & Depth - 影はほぼ使わず面の色差で階層をつける - 装飾バーは半透明の重なりで奥行きを出す - 採用カードはグラデーション塗りのみで影なし ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は六角形や矩形で切り抜き、プロジェクト写真は横長矩形 - **セクション境界**: 直線。パネルの角丸で区切り、終盤は全幅のグラデーション帯 - ボタンは角のない横長矩形に右外側へ細い矢印 - パネルは大きな角丸 - 前後送りボタンは小さなピル型の深緑 - 交差するX字の立体バーをFVとエントリー帯に配置 ## Components - **グラデーション矩形ボタン**（`button-gradient`）: セクション色の横グラデーション矩形に白文字、外側右に細矢印 - **英字グラデ見出し**（`section-title`）: 極太英字に縦グラデーション、下に斜線＋日本語サブ見出し - **淡グレー角丸パネル**（`panel-soft`）: 画面端に寄せたコンテンツ背景面 - **社員カード**（`people-card`）: 上部に色帯の職種タグ、白背景の人物写真、下にネオン枠の掛け合わせラベル2段 - **掛け合わせ枠ラベル**（`cross-label`）: ピンク枠と緑枠の2つの矩形を斜線で結び掛け算を表す - **採用情報カード**（`recruit-card`）: 緑グラデの角丸カードに英小見出し・日本語見出し・説明・右矢印 - **ニュース行**（`news-row`）: 日付を大きな数字で、NEWバッジ、タイトル、右矢印、下線区切り - **再生円バッジ**（`play-badge`）: 動画サムネに重ねる緑の円形PLAYボタン ## Do's and Don'ts **Do** - 英字見出しはセクションごとに色を変える - 装飾バーは交差・重なりで立体感を出す - 白とグレーの余白を広くとり多色を引き立てる - 掛け合わせを表す2連枠ラベルを繰り返す - 終盤はグリーン系で統一して締める **Don't** - 本文に多色を使わない - ボタンを丸いピル型にしない - ドロップシャドウを多用しない - 暖色ベタ地の背景セクションを作らない - 写真に強いフィルターや多色加工をかけない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コンセプトを印象づける）: 左に明朝の2行キャッチ、右に交差するネオン立体バーとモノクロ人物写真の合成 2. **メッセージ**（企業の思いを語る）: 中央寄せの短い明朝文を10行ほど並べ、最後にロゴ 3. **会社紹介**（会社概要へ誘導）: 左に六角形写真コラージュ、右に淡グレーパネルと英字見出し・リード・ボタン 4. **ニュース**（最新情報）: 左にピンク英字見出し、右にニュース行1件とピンクボタン 5. **イベント**（イベント案内）: 緑英字見出しと右寄せパネル、ネオンバーの装飾 6. **社員紹介**（人を知る）: オレンジ英字見出し、横並び社員カードのカルーセル 7. **プロジェクト紹介**（仕事内容を伝える）: 番号付き写真カードのカルーセルと対談動画サムネ 8. **働く環境**（制度・環境紹介）: アイソメトリックイラスト、写真付き2カラムカード 9. **採用情報**（募集要項・FAQ・エントリー）: 淡グレーパネル内に緑グラデカードを縦積み、FAQは番号付き行 10. **CTA**（エントリーを促す）: 蛍光グリーン全幅帯に巨大英字とロゴ、交差バー装飾 11. **フッター**（導線とパンフレット）: 深緑地にライトグリーンのボタン、パンフレット告知面、4列サイトマップ ## Imagery - 透明感のある四角柱バーをX字に交差させ、虹色グラデで描く - 人物写真はモノクロや低彩度で清潔感ある背景 - 社員は白背景の上半身ポートレートで笑顔 - 職場・技術はドローンやサーバー室など先端的な被写体 - 働く環境は淡色アイソメトリックイラスト - 動画サムネは2人並びの対談写真に斜めの帯 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SPは英字見出しを40〜48pxに縮め左寄せ - 左右交互配置はSPで縦積みにし、写真を上に - カード群はSPで横スクロール1.2枚表示 - パネルは画面端まで広げ片側の角丸を残す - フッターの4列はSPで2列 - FVの交差バーはSPで写真の背面に縮小配置 ## 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-0e44421a`（元 LP の URL から採番） - **元 LP**: https://persol-xtech.co.jp/recruit/newgraduate/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。