--- version: alpha name: Electric Blue Geometric Recruit LP description: 白地に鮮烈な青紫を一色で効かせた採用サイト型 LP。斜線・ジグザグ・ドットの幾何学パターンと、ピンク赤の鳥モチーフを散らす。見出しは青ベタ帯に白抜き文字。カードは細い青枠で角丸はなし。誠実さの中に先進性と躍動感を出す。 colors: primary: '#3800FF' on-primary: '#FEFAFE' background: '#FFFFFF' background-alt: '#F4F3FC' cta: '#FE3263' on-cta: '#FFF1F7' accent-1: '#E63061' text: '#27245E' line: '#C8CADC' tint-1: '#8573BF' tint-2: '#F2F2F4' dark-section: '#3800FE' cta-accessible: '#E00137' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em accent: fontFamily: Space Mono fontSize: 11px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Space Mono fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 40px link-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 50px icon-feature-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 90px photo-thumb-link: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 50px carousel-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 400px photo-banner: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 180px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 110px button-entry: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 42px footer-white-card: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 36px --- # DESIGN.md — 電光ブルー×幾何学線の金融系採用 LP（Electric Blue Geometric Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: クール・先進的、信頼・誠実、シンプル・ミニマル - **キーワード**: 電光ブルー一色・幾何学パターン・細線枠カード・白抜き帯見出し・鳥モチーフのアクセント - **地の質感**: フラットな白地に、細い青線の斜線・ジグザグ、グレーの線画パターン、青ドットを背景装飾として重ねる - **形**: 角丸のない直角の矩形と 1px 細枠。円形は動画サムネのみ。右下の三角矢印アイコンで統一 - **温度感**: クールで知的。差し色のピンク赤で温度を少し上げる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3800FF` | ブランド青（見出し帯・枠線・アイコン） | 9% | 画素の実測 | | `on-primary` | `#FEFAFE` | 青地上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | ページ地色 | 57% | 画素の実測 | | `background-alt` | `#F4F3FC` | サブ見出しの淡グレー帯 | 4% | 画素の実測 | | `cta` | `#FE3263` | 固定エントリーボタン | 0% | 画素の実測 | | `on-cta` | `#FFF1F7` | エントリーボタン文字 | 0% | 画素の実測 | | `accent-1` | `#E63061` | キャッチコピー・鳥モチーフのピンク赤 | 2% | 画素の実測 | | `text` | `#27245E` | 本文・日付の濃紺 | 4% | 画素の主要色に補正 | | `line` | `#C8CADC` | お知らせ区切り線 | 1% | 画素の主要色に補正 | | `tint-1` | `#8573BF` | 淡い青紫の斜線パターン | 3% | 画素の主要色に補正 | | `tint-2` | `#F2F2F4` | グレーの線画背景パターン | 5% | 画素の主要色に補正 | | `dark-section` | `#3800FE` | フッターの青ベタ面 | 12% | 画素の実測 | | `cta-accessible` | `#E00137` | AA を満たす補正値（計算） | | 計算 | - 色はほぼ白と青の 2 色で構成する - 見出し・枠線・アイコン・リンクはすべて同じ青 - ピンク赤はキャッチ・鳥モチーフ・エントリーボタンだけに使う - 本文は黒でなく濃紺にする - フッターは青ベタにし、白カードと白文字で反転させる - 背景パターンは淡いグレーか淡い青紫にして、文字の邪魔をしない - `button-entry` は文字 `#FFF1F7` × 背景 `#FE3263` のコントラスト比が 3.28:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E00137`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチコピー | 明朝 | Shippori Mincho | 500 | 40px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（青帯に白抜き） | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.08em | | `headline-md` | カード内のタイトル・社員コピー | ゴシック | Noto Sans JP | 700 | 18px | 1.7 | 0.06em | | `headline-sm` | ボタンラベル・リンクカード名 | ゴシック | Noto Sans JP | 700 | 13px | 1.6 | 0.06em | | `body-md` | リード文・お知らせ本文 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 2.0 | 0.1em | | `note` | 日付・入社年・ハッシュタグ | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.05em | | `accent` | プロジェクト番号ラベル | 欧文サンセリフ | Space Mono | 700 | 11px | 1.4 | 0.05em | | `label-button` | エントリーボタン | 欧文サンセリフ | Space Mono | 700 | 16px | 1.0 | 0.05em | - 明朝はキャッチコピーだけに使い、ほかはすべてゴシック - セクション見出しは青ベタの帯に白抜きで中央に置く - サブラベルは小さい青帯に白文字、その下のタイトルは淡グレー帯に青文字 - リード文は中央揃えで字間を広めにとる - 欧文の等幅書体で番号やボタンにテック感を出す - リンクは青文字に下線 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。カルーセルは左右に隣のカードをのぞかせる - **本文ブロックの幅**: 画面幅の約 87% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - カードとボタンは左右 24px の余白で全幅に並べる - リンクカードは縦に 12〜16px 間隔で積む - アイコン付きカードは左に縦線で区切ったアイコン欄、右にラベルとタイトル - セクションは見出し帯、中央揃えリード、カード群の順に並べる - 一覧へのボタンは小さい枠ボタンを中央に置く ## Elevation & Depth - 影は使わない。1px の青枠で面を区切る - 奥行きは背景パターンの重なりで出す - 写真の上のラベルは白か青のベタ帯で浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 長方形のまま切り抜く。動画サムネだけ円形にする - **セクション境界**: 直線で切り替える。背景パターンが範囲の外まで流れ出してもよい - 角丸はどこにも使わない - ボタンは白地＋青 1px 枠 - 矢印は右下に置く小さな三角か外部リンクアイコン - ジグザグ・斜線・ドット・×印などの幾何学模様を背景の端に置く ## Components - **青帯見出し**（`section-heading-band`）: 文字幅に合わせた青ベタの帯に白い太字。中央に置く - **細枠リンクボタン**（`link-card`）: 白地に青 1px 枠。左に青太字のラベル、右端に三角矢印 - **アイコン付き案内カード**（`icon-feature-card`）: 左のアイコン欄を縦線で区切る。右に青帯の小ラベルと、淡グレー帯の青タイトルを置く - **写真サムネ付きリンク**（`photo-thumb-link`）: 左端に小さな写真を置いた横長の枠リンク - **社員・プロジェクトカード**（`carousel-card`）: 青枠の縦長カード。写真の下に青太字のコピー、名前、入社年を置く。下に三角の前後ボタン - **写真バナー**（`photo-banner`）: 全幅の写真。左下に青帯ラベルと白帯タイトルを 2 段で重ねる - **お知らせリスト**（`news-list`）: 日付と本文を並べ、細いグレー線で区切る。リンクは青の下線付き - **固定エントリーボタン**（`button-entry`）: 画面下部の固定バーに置くピンク赤の矩形ボタン。欧文の太字 - **フッターのグループリンク**（`footer-white-card`）: 青ベタの上に白の矩形リンクを縦に積む ## Do's and Don'ts **Do** - 青は 1 色に絞り、枠・文字・帯すべてに使う - 直角と 1px 細枠で揃える - セクションごとに違う幾何学パターンを端に添える - ピンク赤の鳥モチーフを数か所に散らしてリズムを作る - 見出しの下に中央揃えで 2〜3 行のリードを置く **Don't** - 角丸や影を付けない - グラデーションや多色使いをしない - ピンク赤を大きな面に使わない - 本文を真っ黒にしない - 背景パターンを文字の真下に濃く敷かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の姿勢を一言で示す）: 線画パターンの上に、ピンク赤の明朝の大コピーと鳥モチーフを置く。下に写真サムネ付きの枠リンクを 3 本並べる 2. **動画導線・お知らせ**（最新情報と動画への誘導）: 円形の動画サムネに青ラベルを添える。お知らせは日付付きで線区切りのリストにする 3. **採用コンセプト**（理念を伝える）: 青帯見出しの下に青太字の中央メッセージ、その下に枠ボタンを 2 本並べる 4. **事業紹介**（事業戦略と実績への導線）: リード文に続けて、アイコン付き案内カードを 2 枚置く 5. **キャリア紹介**（人事制度と福利厚生への導線）: アイコンカード 2 枚と、ピクセルアート風の特設バナーを置く 6. **プロジェクト紹介**（具体的な取り組みを見せる）: 番号ラベル付きのカードをカルーセルで見せ、ハッシュタグと一覧ボタンを添える 7. **社員紹介**（人の魅力を伝える）: 写真と青コピーのカードをカルーセルにし、続けて写真バナーを 2 枚とアイコンカードを置く 8. **採用情報**（募集区分への導線）: 枠リンクの下に説明文を添えて 2 本並べる 9. **さらに知る**（関連サイトへの導線）: 枠リンクを 3 本縦に積む 10. **フッター**（グループ各社と規約への導線）: 青ベタの上に白い矩形リンク、バナーの 2 列グリッド、規約リンクを並べる。下に固定エントリーバーを置く ## Imagery - 写真はオフィスで撮った自然光の社員ポートレート。スーツやオフィスカジュアルで、表情は明るい - テック系の写真は暗めの青トーン。画面やグラフを写す - アイコンは青の細線で描くラインアイコン（建物・人・グラフなど） - 背景装飾はジグザグ・斜線・×印・ドット・矢羽根の幾何学パターン - 差し色として、ピンク赤の折り紙風の鳥シルエットを置く - 特設バナーは青紫のピクセルアート調の街並み - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 約 65% 幅のコンテンツにし、右端に固定のセクション目次を置く - PC はアイコンカードや枠ボタンを 2 列に並べる - PC はカルーセルで 3〜5 枚を同時に見せる - PC ではエントリーと Menu を右上に固定する - 背景パターンは 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-e89e15c6`（元 LP の URL から採番） - **元 LP**: https://www.mizuho-fg.co.jp/saiyou/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。