--- version: alpha name: Pop Comic Gradient Recruiting LP description: 青から緑へのグラデーション地に、蛍光イエローとピンクの手書き風見出しを重ねた出版社の新卒採用LP。漫画的な吹き出し・キラキラ装飾・斜めカットの写真で、遊び心とエネルギーを出している。 colors: primary: '#0C95C9' secondary: '#13C2AA' accent-1: '#EBF70F' accent-2: '#EE7AD0' accent-3: '#0076FB' cta: '#FD8701' on-cta: '#FFFFFF' marker: '#FF3658' tint-1: '#2DABE6' dark-section: '#1E2A30' text: '#FFFFFF' text-body: '#111111' background: '#035483' tint-2: '#A0C9C7' background-accessible: '#0582CB' accent-2-accessible: '#C31997' accent-3-accessible: '#0071F1' cta-accessible: '#B36001' marker-accessible: '#EE0028' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: Montserrat fontSize: 30px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0.06em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 21px fontWeight: 800 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.05em accent: fontFamily: Yomogi fontSize: 17px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.6 rounded: sm: 6px md: 10px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 130px message-panel: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 220px interview-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 240px speech-bubble-link: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 70px banner-highlight: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 100px sns-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 76px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px button-external: backgroundColor: '{colors.marker}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px question-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px --- # DESIGN.md — 青緑グラデ×蛍光黄のポップ出版採用 LP（Pop Comic Gradient Recruiting LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、力強い・インパクト、クール・先進的 - **キーワード**: 青緑グラデーション・蛍光イエロー・ピンクのリボン帯・漫画の吹き出し・キラキラ装飾・斜めカット - **地の質感**: 細かいノイズ粒子が乗ったグラデーション地。フラットで光沢なし。 - **形**: 角丸カード、ピル型ボタン、楕円の吹き出し、斜めにカットした写真パネル、少し傾けたリボン帯。 - **温度感**: 爽やかで明るいが、蛍光色とピンクで熱量が高い。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0C95C9` | ページ地のグラデーション(青側) | 45% | 画素の実測 | | `secondary` | `#13C2AA` | グラデーション(緑側) | 12% | 画素の実測 | | `accent-1` | `#EBF70F` | 蛍光イエローの見出し・面 | 6% | 画素の実測 | | `accent-2` | `#EE7AD0` | ピンクのリボン帯・吹き出し | 4% | 推定 | | `accent-3` | `#0076FB` | メッセージ枠の鮮やかな青 | 3% | 画素の実測 | | `cta` | `#FD8701` | 募集情報ボタン(オレンジ) | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 推定 | | `marker` | `#FF3658` | マイページ等の強調ボタン(赤ピンク) | 1% | 画素の実測 | | `tint-1` | `#2DABE6` | 外部サービスボタンの水色 | 1% | 画素の実測 | | `dark-section` | `#1E2A30` | SNS誘導の黒カード | 2% | 推定 | | `text` | `#FFFFFF` | 見出し・本文の白文字 | 2% | 推定 | | `text-body` | `#111111` | 黄色地上の黒文字 | 0% | 推定 | | `background` | `#035483` | 写真キャプション帯の濃紺半透明 | 2% | 画素の実測 | | `tint-2` | `#A0C9C7` | 英字ロゴ風の淡い水色文字 | 3% | 画素の主要色に補正 | | `background-accessible` | `#0582CB` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#C31997` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#0071F1` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#B36001` | AA を満たす補正値（計算） | | 計算 | | `marker-accessible` | `#EE0028` | AA を満たす補正値（計算） | | 計算 | - 地は全ページ通して左上青→右下緑の対角グラデーション。 - 見出しは蛍光イエロー、その上のリード帯はピンク地に白文字。 - 代表メッセージなどの大きなパネルだけ鮮青と蛍光黄のベタ面で区切る。 - 本文は白一色。黒文字は黄色面の上だけ。 - 情報ボタンはオレンジ、重要な外部導線は赤ピンクと水色で差をつける。 - ボタンには白い細枠をつけ、グラデ地から浮かせる。 - `page` は文字 `#111111` × 背景 `#035483` のコントラスト比が 2.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `background-accessible`（`#0582CB`、4.55:1）を使う。 - `section-heading` は文字 `#EBF70F` × 背景 `#EE7AD0` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C31997`、4.57:1）を使う。 - `message-panel` は文字 `#FFFFFF` × 背景 `#0076FB` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#0071F1`、4.53:1）を使う。 - `speech-bubble-link` は文字 `#EE7AD0` × 背景 `#EBF70F` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C31997`、4.57:1）を使う。 - `banner-highlight` は文字 `#FFFFFF` × 背景 `#EE7AD0` のコントラスト比が 2.52:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C31997`、4.55:1）を使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#FD8701` のコントラスト比が 2.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B36001`、4.57:1）を使う。 - `button-external` は文字 `#FFFFFF` × 背景 `#FF3658` のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `marker-accessible`（`#EE0028`、4.5:1）を使う。 - `question-tag` は文字 `#EE7AD0` × 背景 `#EBF70F` のコントラスト比が 2.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C31997`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大きな漢字ロゴ・セクション見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.3 | 0.05em | | `headline-lg` | 英字の大見出し | 欧文サンセリフ | Montserrat | 700 | 30px | 1.15 | 0.06em | | `headline-md` | キャッチコピー | 丸ゴシック | M PLUS Rounded 1c | 800 | 21px | 1.6 | 0.12em | | `headline-sm` | リボン帯・キャプション | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.4 | 0.04em | | `body-md` | リード文・ニュース | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.05em | | `accent` | 吹き出し内の手書き風文字 | 手書き・筆 | Yomogi | 400 | 17px | 1.3 | 0.02em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.04em | | `note` | 注釈 | ゴシック | Noto Sans JP | 500 | 10px | 1.6 | 0.0em | - セクション見出しは太い装飾書体を蛍光黄で、やや右上がりに傾ける。 - 英字見出しは白の幾何学サンセリフで大文字。 - キーワードにはルビをつけて読み遊びを入れる。 - 本文は中央揃えで短く改行する。 - 吹き出しの中はピンク文字の手書き風。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、インタビューのみ 2 カラムのカード - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 12px（375px 幅換算） - 要素はすべて中央に寄せる。 - 見出しの上下にキラキラ装飾を余白に散らす。 - メッセージパネルは全幅で 2 枚縦に積む。 - 最後のボタンは幅 60% のピル型を縦に並べる。 ## Elevation & Depth - 影はほぼ使わず、フラットな面で構成する。 - カードやボタンは白の細枠で浮かせる。 - 写真のキャプション帯は濃紺の半透明を重ねる。 ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。メッセージ写真は対角線で斜めにカットして色面と重ねる。FV上部は人物をアーチ型の窓で切り抜く。 - **セクション境界**: 直線。色面パネルは斜めの切り替え - リボン帯はやや傾けた長方形。 - 吹き出しは楕円に小さな三角のしっぽ。 - ボタンはすべてピル型。 - 角の折り返しや白縁取りで漫画のコマっぽさを出す。 ## Components - **リボン帯+装飾見出し**（`section-heading`）: 眼鏡をつまむ手のイラスト、傾いたピンクのリボン帯、その下に蛍光黄の大見出しを重ねる。 - **斜めカットの代表パネル**（`message-panel`）: 全幅の色面に人物写真を対角線でカット。吹き出しと英字の大見出しを重ねる。 - **社員インタビューカード**（`interview-card`）: 2カラムで角丸写真、下部に斜めの濃紺帯を敷いて年次と所属を白文字で入れる。 - **吹き出しリンク**（`speech-bubble-link`）: 黄色の楕円吹き出しにピンクの手書き文字。下にキャラ化したロゴとキラキラを添える。 - **制度訴求バナー**（`banner-highlight`）: ピンク地の角丸バナーに白と黄の太字。角に折り返しと虫眼鏡アイコン。 - **SNS誘導カード**（`sns-card`）: 黒い角丸カードに白の細枠。左にロゴ、右にピンクの小見出しと白のアカウント名。 - **情報ボタン**（`button-primary`）: オレンジのピル型に白文字、白い細枠。縦に並べる。 - **外部導線ボタン**（`button-external`）: 赤ピンク/水色のピル型で英字の大文字、小さなカナと外部リンクアイコンを添える。 - **問いかけタグ**（`question-tag`）: 黄色地に黒の太枠、ピンク文字で問いを書いた付箋風の札。 ## Do's and Don'ts **Do** - 地は必ず青→緑の対角グラデーションに細かいノイズをのせる。 - 見出しは蛍光黄、リード帯はピンクに固定する。 - 見出しの周りにキラキラの装飾を必ず散らす。 - 写真は明るい職場で自然に笑う社員を使う。 - 本文は白で短く、中央揃えにする。 **Don't** - 白い背景のセクションは作らない。 - 明朝体や細い書体は使わない。 - 影やグラデーションのボタンは使わない。 - 落ち着いたくすみ色は混ぜない。 - 長い本文の段落は置かない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（テーマを強く印象づける）: 上部に社員写真のアーチ窓を並べ、中央に手と眼鏡のイラストを添えた蛍光黄の巨大な漢字ロゴ、下に淡い英字の大きなタイトル。 2. **コンセプト**（会社の考え方を伝える）: 付箋風の問いかけタグ、ルビ付きの白いキャッチ 2 行、中央揃えのリード文 5 行。 3. **お知らせ**（最新情報を伝える）: 白文字のラベルと下線、日付と短い本文、黄色下線のリンク。 4. **SNS誘導・制度訴求**（フォローと制度アピール）: 黒いSNSカードとピンクの訴求バナーを縦に並べる。 5. **代表メッセージ**（トップの想いを伝える）: 鮮青と蛍光黄の全幅パネル 2 枚に、斜めカットの人物写真と吹き出し、英字見出し。 6. **職種紹介**（仕事の種類を案内する）: リボン帯付き見出しと、商品を並べた角丸写真。 7. **社員インタビュー**（働く人を見せる）: 2 カラム×2 段の角丸写真カードに斜めの濃紺キャプション帯。 8. **仕事の流れ**（商品ができる工程を紹介）: リボン帯見出し、2 行の黄色大見出し、角丸写真。 9. **その他コンテンツ**（関連ページへ回遊させる）: 英字見出しの下に黄色吹き出しリンクを 3 つ、互い違いに配置。 10. **募集情報・CTA**（応募導線）: 英字 2 行の見出し、オレンジのピル型ボタン 4 つ、赤ピンクと水色の外部ボタン 2 つ、最後に注釈。 ## Imagery - FVの社員写真はモノクロにしてアーチ窓で切り抜く。 - 本文中の社員写真はカラーで、本棚のある職場で笑顔を撮る。 - 商品は棚に並べて正面から撮った明るい写真にする。 - 装飾は白い四芒星のキラキラ、眼鏡をつまむ白手袋の手、ポップな漫画線画。 - ロゴの漢字を緑の線でキャラクター化して吹き出しに添える。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV のコピーを横一行にして英字タイトルを2行に縮める。 - PC は代表メッセージ2枚を横並びにする。 - PC のセクションは写真と見出しを左右交互の2カラムにする。 - PC のインタビューは4人を横一列に並べる。 - PC の吹き出しリンクは3つ横並び、ボタンは4つ横並びにし、外部ボタン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-1d3b8a58`（元 LP の URL から採番） - **元 LP**: https://www.hakusensha.co.jp/recruit2026/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。