--- version: alpha name: Bold Red Card Recruitment LP description: 真紅の地に、大きな角丸の白カードを左右交互にはみ出させて重ねていく新卒採用 LP。黒い太字の欧文見出しがカードの縁にかかり、モノクロに黄色を差した手描き人物イラストが添えられる。黒枠のピル型ボタンで、親しみと力強さを両立させている。 colors: primary: '#E70012' background: '#FFFFFF' background-alt: '#EFEFEF' text: '#050202' on-primary: '#FFFFFF' accent-1: '#E70012' cta: '#FEFFFE' on-cta: '#0F0D0F' accent-2: '#F5C400' line: '#010101' text-muted: '#DCDEDD' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: Zen Maru Gothic fontSize: 28px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.15em rounded: sm: 8px md: 20px lg: 40px full: 999px spacing: unit: 8px card: 24px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-small: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px button-entry: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px card-bleed: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 600px interview-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 200px heading-overlap: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px value-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 100px info-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 130px map-pin: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 70px --- # DESIGN.md — 赤地×白カードの手描き線画 採用 LP（Bold Red Card Recruitment LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: 力強い・インパクト、親しみ・手作り感、ポップ・元気 - **キーワード**: 真紅の全面地・白い大角丸カード・左右交互のはみ出し・黒の太字欧文見出し・手描き線画イラスト・黒枠ピルボタン - **地の質感**: フラットなベタ塗り。グラデーションや影は使わない - **形**: 片側だけ画面端に接する大きな角丸カード。写真は斜めにカットした平行四辺形か円形 - **温度感**: 温かく情熱的。赤の熱量を白と黒で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#E70012` | 全面の地色・ブランドレッド | 40% | 画素の実測 | | `background` | `#FFFFFF` | 白カードの面 | 32% | 画素の主要色に補正 | | `background-alt` | `#EFEFEF` | カード間に見える淡いグレー地・補足ボックス | 5% | 画素の実測 | | `text` | `#050202` | 見出しと本文の黒 | 3% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤地の上の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#E70012` | 強調数字・地名・頭文字の赤文字 | 1% | 画素の主要色に補正 | | `cta` | `#FEFFFE` | 主ボタンの白い面 | 1% | 画素の実測 | | `on-cta` | `#0F0D0F` | ボタン文字・黒枠 | 0% | 画素の実測 | | `accent-2` | `#F5C400` | イラストの差し色の黄色 | 0% | 推定 | | `line` | `#010101` | 写真カード横の黒い区切り線 | 0% | 画素の実測 | | `text-muted` | `#DCDEDD` | 地図のグレー | 2% | 画素の実測 | - 地は常に真紅にし、内容は白カードに載せる - 使う色は赤・白・黒の3色に限る。黄色はイラストにだけ差す - 白カード内の強調は赤文字（数字・地名・英単語の頭文字）で行う - 赤地の上の文章は白文字・中央揃えにする - ボタンは白地に黒枠と黒文字にし、赤地の上で目立たせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大コピー（手書き風の極太） | 手書き・筆 | Dela Gothic One | 700 | 52px | 1.3 | 0.02em | | `headline-lg` | セクション名の欧文大見出し | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.08em | | `headline-md` | 和文セクション見出し（縦書き含む） | ゴシック | Noto Sans JP | 900 | 34px | 1.2 | 0.05em | | `headline-sm` | カード内の小見出し・理念の英単語 | ゴシック | Noto Sans JP | 700 | 17px | 1.4 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 700 | 12px | 1.7 | 0.1em | | `note` | 補足・入社年 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.1em | | `accent` | FVの縦書きサブコピー | 丸ゴシック | Zen Maru Gothic | 400 | 28px | 1.6 | 0.1em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.15em | - 欧文見出しは黒の極太で、文字間を広げて白カードの上端に半分かける - 和文の見出しは縦書きにしてカードの左外に置くことがある - 本文は太字寄りにし、字間を0.1em前後と広めにとる - 理念リストは英単語の頭文字だけを赤くする - メッセージ文は中央揃えの短い改行で詩のように組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算） - 白カードは片側を画面端まで伸ばし、反対側だけ角丸にする - カードの付く側を左右交互に入れ替えてリズムを作る - セクション見出しはカード上端から少し飛び出させる - 手描きイラストはカードの角に重ねて配置する - ボタンは横幅の約65%で中央に置く ## Elevation & Depth - 影は使わず、色面の重なりだけで奥行きを出す - ボタンは2px程度の黒枠で浮き立たせる ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 社員写真は斜辺を持つ平行四辺形に切り抜く。拠点や人物は円形にする - **セクション境界**: 直線の区切りは使わず、大角丸カードの端で地色を切り替える - カードの角丸は40px前後と大きくとる - ボタンとリンクボタンはすべて黒枠のピル型にする - 写真の斜めカットは左右で向きを反転させる ## Components - **黒枠ピル主ボタン**（`button-primary`）: 白地に黒の太枠を付け、黒文字に右向きの山括弧を添える - **小型詳細ボタン**（`button-small`）: インタビューカード内に置く、小さな黒枠のピル型ボタン - **ヘッダーENTRY**（`button-entry`）: 赤地に白枠と白文字で作るピル型ボタン。右上に固定する - **はみ出し大角丸カード**（`card-bleed`）: 片側を画面端に付けた白カード。左右交互に配置する - **社員インタビューカード**（`interview-card`）: 斜めにカットした写真と入社年・職種、黒線、詳細ボタンで構成する - **はみ出し欧文見出し**（`heading-overlap`）: 黒の極太欧文を、カード上端の赤地との境にまたがせる - **理念リスト**（`value-list`）: 頭文字を赤くした英単語、括弧書きの小さな和訳、本文の順に組む - **グレー補足ボックス**（`info-box`）: 淡いグレーの角丸ボックス。右上にロゴ風のスタンプを添える - **円形写真の拠点ピン**（`map-pin`）: グレーの地図上に円形写真を置き、赤い線と赤い地名でつなぐ ## Do's and Don'ts **Do** - 地は真紅で統一し、白カードで情報を区切る - カードを左右交互にはみ出させて動きを出す - 黒の線画イラストに黄色だけを差し、カードの角に添える - 強調は赤文字に絞る - ボタンは黒枠のピル型に統一する **Don't** - グラデーションやドロップシャドウを使わない - 青・緑などの第4色を面に使わない - カードを画面の中央に浮かせただけの均等配置にしない - 写真を長方形のまま並べない - 細い明朝体で見出しを組まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の想いを印象づける）: 赤地に白の手書き風極太コピーと縦書きサブコピーを置き、モノクロ線画の手がバトンを渡す絵を添える 2. **企業紹介**（理念体系を図で示す）: 欧文見出しをカードにかけ、右寄せの白カードに理念図を収める 3. **拠点紹介**（全国展開を伝える）: 左付けの白カードにグレーの地図を置き、円形写真のピンと赤い地名を配す 4. **理念・価値観**（大切にする考えを伝える）: 縦書きの和文見出しを左外に置き、頭文字を赤くした英単語のリストを並べる 5. **誇りの補足**（理念を短く締める）: グレーの角丸ボックスにスタンプ風のマークを添える 6. **仕事紹介**（業務内容と役割を説明する）: 赤地に字間を広げた白見出しを置き、左右の白い縦線で挟んだ中央揃えの白文と主ボタンを並べる 7. **社員インタビュー**（働く人を見せる）: 斜めカット写真のカードを3枚、左右交互に配置する 8. **メッセージ**（採用担当から学生へ呼びかける）: 欧文見出しと円形の顔写真を置き、中央揃えの白カードに詩的な本文を組む 9. **CTA**（募集要項へ誘導する）: 広い赤地の中央に黒枠のピル型ボタンを1つだけ置く ## Imagery - 黒のラフな線画で人物や手を描き、服などに黄色を一点だけ差す - 社員写真は明るいオフィスで撮った自然な笑顔の上半身にする - 写真は斜めカットか円形に切り抜く - 地図や図版はグレーと赤だけで単純化する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも 1 カラムの縦構成を保ち、カードを中央寄りに広げる - PC の FV では縦書きサブコピーを横書き 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-03e2bb94`（元 LP の URL から採番） - **元 LP**: https://recruit-smc.work/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。