--- version: alpha name: Pop Multicolor Capsule Recruit LP description: 白地をベースにしています。黄色の面と青の応募面を大きな角丸で区切り、写真はカプセル型に切り抜きます。ピンク・緑・青・オレンジのピル状の帯を飛ばして元気さを出し、数字カードと黒いピル型ボタンで中小製造業の採用を親しみやすく見せる型です。 colors: primary: '#2754B1' secondary: '#F2D834' background: '#FEFEFE' background-alt: '#FBFBFB' cta: '#222222' on-cta: '#F9F9F9' text: '#060606' text-muted: '#BBBBBB' accent-1: '#FC6A97' accent-2: '#37BA8E' accent-3: '#FCAC15' marker: '#E44353' tint-1: '#2CA0E0' dark-section: '#333333' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Poppins fontSize: 11px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-lg: fontFamily: Poppins fontSize: 50px fontWeight: 800 lineHeight: 1.0 letterSpacing: -0.02em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 72px 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: 50px capsule-photo-label: backgroundColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 260px stat-card: textColor: '{colors.text}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 230px reason-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 370px icon-link-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 90px speech-heading: backgroundColor: '{colors.marker}' rounded: '{rounded.sm}' height: 44px section-eyebrow: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 16px photo-banner-card: backgroundColor: '{colors.tint-1}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 200px --- # DESIGN.md — 黄×青のカラフルカプセル型採用 LP（Pop Multicolor Capsule Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、清潔・爽やか - **キーワード**: カプセル型写真・多色ピル帯・数字カード・黒ピルボタン・英字小見出し・黄色ドット地 - **地の質感**: 白と薄グレーのフラットな地に、黄色面だけ縦長ドットの淡いパターンを敷く - **形**: 大きな角丸カード、カプセル・楕円の写真枠、斜めに飛ぶピル状の帯と丸 - **温度感**: 明るく暖かい。原色寄りの多色でも、白の余白で清潔に保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2754B1` | ブランドの青。応募セクションの地と理由03の帯 | 5% | 画素の主要色に補正 | | `secondary` | `#F2D834` | 数字セクションと職種セクションの黄色い地 | 10% | 画素の実測 | | `background` | `#FEFEFE` | 基本の地色 | 35% | 画素の実測 | | `background-alt` | `#FBFBFB` | 会社紹介や理由カードの薄グレー地 | 9% | 画素の実測 | | `cta` | `#222222` | 黒いピル型の導線ボタン | 2% | 画素の実測 | | `on-cta` | `#F9F9F9` | 黒ボタン上の文字 | 0% | 画素の実測 | | `text` | `#060606` | 見出しと本文の文字 | 3% | 画素の実測 | | `text-muted` | `#BBBBBB` | 英字の小見出し | 0% | 画素の実測 | | `accent-1` | `#FC6A97` | ピンク。理由01の帯、装飾の帯 | 3% | 画素の実測 | | `accent-2` | `#37BA8E` | エメラルド緑。理由02、アイコンの丸 | 3% | 画素の実測 | | `accent-3` | `#FCAC15` | オレンジ。理由04、写真の枠 | 2% | 画素の実測 | | `marker` | `#E44353` | 赤の吹き出し見出しとラベル | 1% | 画素の実測 | | `tint-1` | `#2CA0E0` | 水色。強調テキスト・認定カードの枠 | 3% | 推定 | | `dark-section` | `#333333` | フッターの濃グレー地 | 11% | 画素の実測 | - 地は白と薄グレーを交互に使う。数字セクションと職種セクションだけ黄色、応募セクションだけ青の大きな面にする - ピンク・緑・青・オレンジの4色を、項目を順番に色分けするために使う - ボタンは黒地に白文字で統一する。右端に白丸と黒い矢印を付ける - 赤は吹き出し見出しとラベルの強調だけに使う - 大事なフレーズの一部だけを水色の文字にする - フッターは濃グレーに白文字 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ヒーロー写真に重ねる白帯のコピー | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.5 | 0.05em | | `headline-lg` | セクションの日本語見出し | ゴシック | Noto Sans JP | 700 | 22px | 1.5 | 0.04em | | `headline-sm` | カードの見出し・ラベル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `accent` | 見出し上の英字（斜体） | 欧文サンセリフ | Poppins | 800 | 11px | 1.2 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.03em | | `note` | 数字カードの補足と注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.04em | | `body-lg` | 数字カードの大きな数値（斜体） | 欧文サンセリフ | Poppins | 800 | 50px | 1.0 | -0.02em | - セクション見出しは、薄グレーの斜体英字を上に置き、その下に太い和文ゴシックを2段で組む - 数値は極太の斜体欧文で大きくし、単位は小さく添える - ヒーロー写真の上に手書き風の英字スクリプトを重ねる - 本文は行間を2.0前後とって短い行で改行する - 吹き出し型の小見出しは「\ 〇〇 /」のように斜線で挟む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は数字と理由を 2〜3 カラムのカード並べにする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードは左右に約22pxの余白をとって幅いっぱいに置く - カードとカードの間は12〜16px - 色付きの面は上の角を大きく丸めて、白地から浮かせる - 写真の右下に、色付きピル型のラベルを重ねる ## Elevation & Depth - 影はほとんど付けない。白カードは色面の上に置いて浮かせる - 写真の下にごく薄い影を付ける程度にとどめる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: カプセル型・横長の楕円で切り抜く。色の太枠を付けた角丸写真を重ねて置く - **セクション境界**: 上の角を大きく丸めた色面で切り替える。吹き出しの三角を付けることもある - 装飾は斜め約20度のピル帯と小さな丸。4色で画面の端に置く - アイコンは色付きの丸の中に白いピクトを置く - ボタンとラベルは完全なピル型にする ## Components - **黒ピル導線ボタン**（`button-primary`）: 黒地に白文字、右端に白丸と矢印を付ける - **カプセル写真＋ラベル**（`capsule-photo-label`）: 楕円に切り抜いた写真の下端に、色付きのピル型ラベルを重ねる。願望や魅力を順番に色分けする - **数字カード**（`stat-card`）: 白い角丸カード。左上に項目名と色の短い下線、右上に丸アイコン、中央に巨大な斜体数字を置く - **理由カード**（`reason-card`）: 上部が色の帯で、帯に「番号＋細い斜体の数字」を入れる。その下に写真と2行のコピーを置く - **アイコン付きリンクカード**（`icon-link-card`）: 白カードの左に色丸アイコン、中央に項目名、右に黒丸矢印を置く - **吹き出し見出し**（`speech-heading`）: 赤い角丸の帯に白文字を入れ、下向きの三角を付ける - **英字小見出し**（`section-eyebrow`）: 淡いグレーの斜体の大文字英字を、和文見出しの上に置く - **写真付きバナーカード**（`photo-banner-card`）: 色地の角丸カードの上に写真をはみ出させる。下部に白い太文字と白丸矢印を置く ## Do's and Don'ts **Do** - 写真には笑顔の社員が自然に働く姿を使う - 項目はピンク・緑・青・オレンジの順に色分けする - 白い余白を大きくとり、色面は2〜3か所に絞る - 数字は大きく斜体で見せ、補足は1行にまとめる - セクションの区切りには黒ピルボタンで次の導線を置く **Don't** - くすんだ色や中間色を加えない - 写真を四角いまま並べない - グラデーションや強い影を使わない - 明朝体を使わない - 本文を長い段落にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（仕事の印象を伝える）: 青い太枠のカプセル型写真に、白帯の2行コピーと英字スクリプトを重ねる。周りにピル帯を置く 2. **会社紹介**（事業内容を伝える）: 色枠の写真2枚をずらして重ねる。薄グレー地に見出しと本文を置く 3. **求職者の願望**（共感をつくる）: 色地のカプセル写真3枚にラベルを重ね、最後に一部を水色にした締めの一文を置く 4. **数字で見る会社**（働きやすさを客観的に示す）: 黄色ドット地に社員の切り抜き写真と吹き出しを置き、数字カードを縦に並べる 5. **選ばれる理由**（魅力を4つ示す）: 色帯付きの理由カード4枚を並べ、最後に黒ピルボタンを置く 6. **認定実績**（信頼性を示す）: 水色の太枠の中に白カード2枚。それぞれ認定画像・名称・説明文を載せる 7. **社員の写真**（雰囲気を伝える）: 角丸の写真を2段で横に流し、ボタンを置く 8. **募集職種**（職種ページへ送る）: 黄色地にアイコン付きリンクカード4枚 9. **未経験の不安への回答**（応募の不安を消す）: 赤い吹き出しの問い、水色の大きな答え、人物写真、黒ボタンの順に置く 10. **関連ページ導線**（回遊させる）: 薄グレー地に写真付きバナーカード2枚 11. **働く魅力の再提示**（最後にもう一度訴求する）: カプセル写真4枚にラベルを付け、締めのメッセージを添える 12. **応募 CTA**（応募させる）: 上の角が丸い青地に、白いリンクカード2枚 13. **フッター**（サイトマップと会社情報）: 濃グレー地にリンクを線で区切って並べ、白いエントリーボタン、ロゴ、住所を置く ## Imagery - 職場での自然な笑顔や会話を、明るい自然光で撮る - 人物は切り抜いて、ベタ色の背景に載せることもある - 電球やキラキラなど、手描き線のちょい足し装飾を加える - アイコンは色丸に白い線画ピクトで描く - 装飾は斜めのピル帯と小さな丸を、画面の端に散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はカード類を中央約60%幅で2〜3カラムに並べる - 数字カードは PC では3列×2段にする - ヒーローは PC で左右にもカプセル写真を覗かせる - 未経験セクションは PC で写真とテキストを左右に分ける - フッターは PC でリンクを2列、ロゴ・住所を左に置く ## 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-06f3eea0`（元 LP の URL から採番） - **元 LP**: https://marusantakagi-recruit.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。