--- version: alpha name: Pop Geometric Blue Yellow Recruit LP description: 青・水色・黄の立体的な幾何学オブジェと切り抜き社員写真を組み合わせた、明るく躍動感のある新卒採用LP。白地に青のお知らせカードを置き、下部は青→黄のグラデーション面に円形写真リンクを散らす。 colors: primary: '#2951C3' background: '#FFFFFF' accent-1: '#FFFF4C' secondary: '#3CBDD0' accent-2: '#0E8EE4' cta: '#FEF902' on-cta: '#242F4B' text: '#292D37' on-primary: '#FFFFFF' dark-section: '#4F5C72' line: '#3CBDD0' accent-3: '#EEF73D' typography: display: fontFamily: Jost fontSize: 40px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.06em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em note: fontFamily: Jost fontSize: 10px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.06em label-button: fontFamily: Montserrat fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em accent: fontFamily: Jost fontSize: 19px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 6px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' info-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body-lg}' rounded: '{rounded.sm}' height: 98px circle-link: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 150px sphere-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 150px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 48px button-mypage: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.lg}' height: 48px hero-copy: textColor: '{colors.accent-1}' typography: '{typography.display}' height: 260px divider-line: textColor: '{colors.line}' height: 60px --- # DESIGN.md — 青×黄の立体幾何ポップな新卒採用 LP（Pop Geometric Blue Yellow Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、クール・先進的、清潔・爽やか - **キーワード**: 立体幾何学・切り抜き人物・青と黄・円形モチーフ・グラデーション・躍動感 - **地の質感**: 光沢のある3Dオブジェ風の球・半円・四分円。面はフラットでノイズなし。 - **形**: 円・半円・四分円・三角の組み合わせ。カードは小さめ角丸、リンクは正円。 - **温度感**: 爽やかで明るい寒色ベースに黄で温度を足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2951C3` | ブランド青・お知らせカード面 | 10% | 画素の実測 | | `background` | `#FFFFFF` | ページ地の白 | 40% | 画素の実測 | | `accent-1` | `#FFFF4C` | 英字コピー・球体の黄 | 8% | 画素の実測 | | `secondary` | `#3CBDD0` | 水色の幾何オブジェ・グラデ中間 | 7% | 画素の主要色に補正 | | `accent-2` | `#0E8EE4` | グラデ上端の鮮やかな青 | 6% | 画素の実測 | | `cta` | `#FEF902` | エントリーボタン | 1% | 画素の実測 | | `on-cta` | `#242F4B` | エントリーボタン文字 | 0% | 画素の主要色に補正 | | `text` | `#292D37` | 見出し・本文の濃紺黒 | 2% | 画素の実測 | | `on-primary` | `#FFFFFF` | 青面上の白文字 | 1% | 画素の主要色に補正 | | `dark-section` | `#4F5C72` | 円形写真のダークオーバーレイ | 8% | 画素の主要色に補正 | | `line` | `#3CBDD0` | 縦の区切り細線 | 0% | 画素の主要色に補正 | | `accent-3` | `#EEF73D` | 矢印・アクセント黄 | 0% | 画素の実測 | - 地は白、情報カードはブランド青ベタに白文字。 - 黄はコピーの英字・CTA・球体など目立たせたい点だけに使う。 - 下部セクションは青→水色→黄の縦グラデーションで面を切り替える。 - 写真円は暗めのオーバーレイを敷き白文字を載せる。 - 赤やピンクなど暖色系は使わず、青系＋黄の2系統に限定。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字コピー・セクション英字見出し | 欧文サンセリフ | Jost | 600 | 40px | 1.1 | 0.06em | | `headline-lg` | 和文キャッチ（細身の幾何文字と組み合わせ） | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.5 | 0.05em | | `headline-sm` | 円形リンクのラベル | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.02em | | `body-lg` | お知らせカード本文 | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.04em | | `note` | カード上部の英字ラベル・リード文 | 欧文サンセリフ | Jost | 500 | 10px | 1.4 | 0.06em | | `label-button` | 固定CTAボタン | 欧文サンセリフ | Montserrat | 800 | 13px | 1.2 | 0.04em | | `accent` | 球体内の英字ラベル | 欧文サンセリフ | Jost | 500 | 19px | 1.2 | 0.02em | - 英字は幾何学的サンセリフで大きく、和文は控えめなゴシックで添える。 - キャッチの一部の漢字・かなは線画風に太い青の幾何ブロック文字で装飾。 - 英字見出しは白か黄、グラデ面の上では白。 - 本文は短く2行以内に収める。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、円形リンクはジグザグ配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - FVは人物と幾何オブジェをグリッド状に敷き詰めたコラージュ。 - コピーはFV下部に左寄せで重ねる。 - FVとお知らせの間に縦の細線を置いて視線を下へ誘導。 - お知らせカードは幅いっぱいに縦積み、間隔8px。 - 円形リンクは左右交互にずらして浮遊感を出す。 - 右下にCTAボタンを縦に2つ固定。 ## Elevation & Depth - カードは影なしのフラット。 - 幾何オブジェは3Dレンダ風の陰影で立体感を出す。 - 固定CTAは左側だけ角丸のタブ型で画面右端に密着。 ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 人物は背景を抜いた切り抜き、建物・シーン写真は正円トリミング - **セクション境界**: 大きな円弧（ドーム状）でグラデ面が立ち上がる - 円と四分円を基本モチーフにする。 - カードは小さい角丸の長方形。 - CTAは左上下のみ角丸で右端にくっつける。 ## Components - **お知らせカード**（`info-card`）: 青ベタに英字小ラベル＋白文字2行、右に黄の矢印。 - **円形写真リンク**（`circle-link`）: 直径約150pxの正円写真に暗いオーバーレイと白の太字ラベル。 - **黄色の球体見出し**（`sphere-label`）: 光沢のある黄色の球に濃紺の英字を載せたメッセージ導線。 - **固定エントリーボタン**（`button-entry`）: 右下固定の黄色タブ。太い英字と外部リンクアイコン。 - **固定マイページボタン**（`button-mypage`）: エントリー下に重ねる青タブ、白文字。 - **英字＋和文の重ねコピー**（`hero-copy`）: 黄の大英字の上に幾何ブロック文字の和文キャッチを重ねる。 - **縦の誘導線**（`divider-line`）: 中央に水色の細い縦線を60px程度。 ## Do's and Don'ts **Do** - 青・水色・黄の3色で幾何オブジェを構成する。 - 社員は全身切り抜きで、ジャンプやポーズなど動きのある姿にする。 - 英字見出しは大きく、和文リードは小さく添える。 - 円形モチーフをFVから下部まで繰り返す。 - CTAは右下固定で常に見えるようにする。 **Don't** - 暖色系や彩度の低い色を主役にしない。 - カードに強いドロップシャドウを付けない。 - 写真を四角いまま大きく並べない。 - 長文の本文ブロックを置かない。 - 明朝体や手書き書体を使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（個性と未来を打ち出す世界観提示）: 幾何オブジェと切り抜き社員のコラージュ＋英字と和文の重ねコピー、下に年度入りロゴ表記。 2. **誘導線**（視線を下へ流す）: 白地中央に水色の縦細線。 3. **お知らせ**（イベント・更新情報の告知）: 青ベタのカードを2枚縦積み。 4. **メッセージ導線**（トップメッセージへの入口）: 黄色の球体に英字ラベル、背後に青い円弧が立ち上がる。 5. **コンテンツ一覧**（企業理解コンテンツへの導線）: 青→黄グラデ面に白の大英字見出しとリード、円形写真リンクをジグザグ配置、背景に社屋写真を透過。 6. **固定CTA**（エントリー・マイページへの誘導）: 右下に黄と青のタブ型ボタンを縦に並べ固定。 ## Imagery - 社員はスーツ・オフィスカジュアルで全身を撮り、背景を切り抜く。 - ジャンプ・指差し・PCを持つなど一人ずつ違うポーズ。 - 3Dレンダ風の光沢ある球・半円・四分円・アスタリスク形を配置。 - 社屋や商談シーンは寒色寄りに補正し正円で切り抜く。 - グラデ面の背景に建物写真を半透明で重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCはFVを左にコピー、右に幾何コラージュの2分割にする。 - PCではお知らせカードを1行の横長バーにし中央に細く並べる。 - PCでは大きなドーム状の円弧にグラデ面を収め、円形リンクを右側に縦に散らす。 - 英字見出しは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-f3f91628`（元 LP の URL から採番） - **元 LP**: https://www.kiyobank-recruit.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。