--- version: alpha name: Corporate Red Accent Recruiting LP description: 白とライトグレーを地に、鮮やかな赤を唯一の強調色にした採用 LP。英字の小見出しと、赤ベタ帯の日本語見出しを組み合わせる。スーツ姿の人物写真と、斜体の大きな英数字で、誠実さと勢いを両立させている。 colors: primary: '#E83A45' on-primary: '#FFFFFF' background: '#FFFFFF' background-alt: '#F7F7F7' text: '#141316' text-body: '#242633' accent-1: '#E8454D' line: '#E83A45' tint-1: '#D7E5F0' accent-2: '#292D4A' surface: '#FFFFFE' primary-accessible: '#E5232F' typography: display: fontFamily: Montserrat fontSize: 44px fontWeight: 400 lineHeight: 1.2 accent: fontFamily: Montserrat fontSize: 72px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 21px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.06em note: fontFamily: Montserrat fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 0px md: 4px lg: 6px 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}' section-label-en: textColor: '{colors.accent-1}' typography: '{typography.note}' height: 20px heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 40px hero-text-strip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 56px point-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 420px stat-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' height: 220px video-embed: backgroundColor: '{colors.tint-1}' height: 240px --- # DESIGN.md — 白と赤の誠実で勢いある採用 LP（Corporate Red Accent Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 信頼・誠実、力強い・インパクト、シンプル・ミニマル、クール・先進的 - **キーワード**: 赤一点強調・英字ラベル見出し・ビジネス人物写真・斜体の大きな数字・余白多め・白とグレーの交互配置 - **地の質感**: フラットで質感なし。写真以外はすべて単色の面と細い枠線。 - **形**: 四角が基本。写真だけ小さく角丸にし、見出し帯と数字カードは角を立てる。 - **温度感**: クール寄りのニュートラル。赤の差し色で熱量を足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E83A45` | 見出し帯の地色・数字・英字ラベル | 4% | 推定 | | `on-primary` | `#FFFFFF` | 赤帯の上の見出し文字 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の背景 | 43% | 画素の実測 | | `background-alt` | `#F7F7F7` | 特長セクションの背景 | 14% | 画素の実測 | | `text` | `#141316` | 見出し・リード文 | 3% | 画素の実測 | | `text-body` | `#242633` | 本文 | 3% | 画素の主要色に補正 | | `accent-1` | `#E8454D` | 英字ラベル（セクション上の小見出し） | 0% | 推定 | | `line` | `#E83A45` | 数字カードの赤い枠線 | 1% | 推定 | | `tint-1` | `#D7E5F0` | 動画セクションの淡い空色背景 | 6% | 画素の実測 | | `accent-2` | `#292D4A` | 写真の主調となるネイビー（スーツ） | 6% | 画素の実測 | | `surface` | `#FFFFFE` | ヒーロー見出しの白い帯 | 2% | 画素の実測 | | `primary-accessible` | `#E5232F` | AA を満たす補正値（計算） | | 計算 | - 地は白とごく薄いグレーを交互に使い、セクションを区切る。 - 強調色は赤 1 色だけ。見出し帯・数字・英字ラベル・枠線・キーワードに限って使う。 - 本文と見出しは黒に近いネイビーグレーにし、純黒は使わない。 - 赤の面は見出し帯だけに使い、広い面を赤で塗らない。 - 写真はネイビーとグレーの都市トーンに寄せ、赤との対比を効かせる。 - 動画セクションは淡い空色のビル写真を背景にして、軽く抜け感を出す。 - `heading-band` は文字 `#FFFFFF` × 背景 `#E83A45` のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E5232F`、4.55:1）を使う。 - `stat-card` は文字 `#E83A45` × 背景 `#FFFFFF` のコントラスト比が 4.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E5232F`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーローの英字キャッチ（白帯の上） | 欧文サンセリフ | Montserrat | 400 | 44px | 1.2 | 0em | | `accent` | 数字カードの大きな数値 | 欧文サンセリフ | Montserrat | 700 | 72px | 1 | -0.02em | | `headline-lg` | 赤帯のセクション見出し | ゴシック | Noto Sans JP | 700 | 26px | 1.4 | 0.05em | | `headline-md` | メッセージのリード見出し | ゴシック | Noto Sans JP | 700 | 21px | 1.7 | 0.1em | | `headline-sm` | 特長の小見出し・数字カードのラベル | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 2 | 0.06em | | `note` | セクション上の英字ラベル | 欧文サンセリフ | Montserrat | 400 | 14px | 1.4 | 0.12em | - 見出しは「赤の英字ラベル → 赤帯に白抜きの日本語見出し」の 2 段で中央に揃える。 - 英字と数字は Montserrat。キャッチと数値は斜体にして勢いを出す。 - 数字の単位は数値の約 1/3 の大きさにし、赤の太字で数値の右下に置く。 - 本文は行間 1.9〜2.0 と広めにとり、字間も少し空ける。 - リード見出しでは、社名にあたる語だけを赤にする。 - ヒーローの英字は 1 語だけ赤にして強調する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は特長が 3 カラム、数字が 2 カラム。 - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 左右の余白は約 20px。写真とカードは本文と同じ幅にする。 - セクション見出しは中央揃え、本文と小見出しは左揃え。 - セクションの上下に 80〜110px の大きな余白をとる。 - 特長は「写真 → 小見出し → 本文」の縦並びを繰り返す。 - 数字カードは縦に積み、カード同士の間を約 20px 空ける。 ## Elevation & Depth - 影は使わずフラットにする。 - 奥行きは、背景色の切り替え（白とグレー）と写真だけで出す。 - 数字カードは影なしで、赤の枠線だけで囲む。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。 - **写真の切り抜き**: 横長の長方形（約 3:2）。角は 4px ほどの小さな角丸。ヒーローは全幅で縦長。 - **セクション境界**: 直線。背景色の切り替えで区切る。 - 見出し帯とヒーローの白帯は角丸なしの長方形。 - 数字カードは角丸なしで、2px の赤い枠線。 - 写真の角丸はごく小さくし、柔らかく見せすぎない。 ## Components - **英字ラベル**（`section-label-en`）: 見出し帯の上に置く、赤い大文字英字の小見出し。中央揃えで字間を広くとる。 - **赤帯見出し**（`heading-band`）: 文字幅に合わせた赤いベタ帯に、白抜きの太字ゴシック。中央に置く。 - **ヒーロー白帯コピー**（`hero-text-strip`）: 人物写真の上に、白い長方形の帯を行ごとに重ねる。英字は斜体で、1 語だけ赤。下に日本語の小帯を添える。 - **番号付き特長カード**（`point-card`）: 写真の左下に、白い半透明の斜体の大きな番号（01〜03）を重ねる。その下に小見出しと本文を置く。 - **数字カード**（`stat-card`）: 赤い枠線の白い箱。上に黒のラベル、中央に赤い斜体の大きな数値、右下に赤い単位を置く。 - **紹介動画**（`video-embed`）: 淡い空色のビル写真を背景に、本文幅の 16:9 動画を中央に置く。 ## Do's and Don'ts **Do** - 強調はすべて赤 1 色で統一する。 - 各セクションの頭に「英字ラベル＋赤帯見出し」のセットを置く。 - 数値は斜体の Montserrat で大きく見せる。 - 人物写真は都市の屋外かオフィスで撮った、スーツ姿の自然光の写真を使う。 - 余白を広くとり、1 画面に入れる情報を絞る。 **Don't** - 赤以外の強調色（黄色や緑など）を足さない。 - 見出し帯やカードに大きな角丸や影をつけない。 - グラデーションや装飾的なイラストを入れない。 - 本文を詰めた行間で組まない。 - 赤の面を大きく使って、ページ全体を派手にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（求める人物像を一言で伝える）: 全幅の縦長の人物写真。左下に白帯の英字キャッチを 2 行と、日本語の小帯を 1 つ重ねる。 2. **会社紹介動画**（社内の雰囲気を動画で伝える）: 淡いビル写真を背景にして、英字ラベル・赤帯見出し・16:9 動画を中央に縦に並べる。 3. **メッセージ**（会社の存在意義と事業内容を伝える）: 白地。代表者の写真、太字のリード見出し（キーワードだけ赤）、行間の広い本文の順に並べる。 4. **働くポイント（特長）**（働く魅力を 3 つ示す）: 薄いグレー地。番号を重ねた写真・小見出し・本文を 3 回繰り返す。 5. **数字で見る会社**（規模・実績・働き方を数値で示す）: 白地。赤枠の数字カードを 6 枚、縦に積む。ラベルは黒、数値と単位は赤。 ## Imagery - 都市のビジネス街やオフィスで撮った、スーツ姿の社員の写真。自然光で、背景を少しぼかす。 - 人物はまっすぐ前を見るか、遠くを見上げる自信のある表情。電話中や商談中の自然な仕事のシーンも使う。 - 色味はネイビー・グレー・白のクールな都市トーンで、彩度は控えめにする。 - 背景には高層ビルを見上げた写真を、白く飛ばして淡い空色で使う。 - 建物の写真は、夕景や夜景でライトアップされた外観を使う。 - 装飾は、写真に重ねる斜体の大きな白い番号だけにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC のヒーローは横長の写真にし、人物を右側に、英字キャッチを左側に置く。 - PC のメッセージは、左に本文、右に写真の 2 カラムにする。 - PC の特長は 3 カラムで横に並べる。 - PC の数字カードは 2 カラム × 3 段のグリッドにする。 - 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-b802f2fd`（元 LP の URL から採番） - **元 LP**: https://nitoh-recruit.marugoto-cx.com/recruit-single/%E4%B8%8D%E5%8B%95%E7%94%A3%E5%96%B6%E6%A5%AD/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。