--- version: alpha name: Pop Illustrated Manufacturing Recruit LP description: 黄・黄緑・青の 3 色の地をセクションごとに切り替えるポップな採用 LP。線画イラストの人物、雲形の境界、吹き出し型の見出し、オレンジの強調数字で、高校生に親しみやすく情報を伝える。 colors: primary: '#2345A5' dark-section: '#4261B3' secondary: '#C3EC73' accent-1: '#FBF45D' background: '#FEFFFE' surface: '#F2EEEB' cta: '#FC630E' on-cta: '#FEFEFE' accent-2: '#EA5F13' text: '#3C4982' line: '#374684' marker: '#FDF886' accent-3: '#3BB4E5' tint-1: '#EDFAFE' accent-2-accessible: '#C75110' cta-accessible: '#CD4B03' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.2 accent: fontFamily: Montserrat fontSize: 48px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 6px md: 14px lg: 24px 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}' heading-bubble: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 64px stat-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.accent-2}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 150px pill-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px anchor-tab: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px interview-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 260px survey-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 560px rank-badge: textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px faq-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px --- # DESIGN.md — 黄緑×青のポップなイラスト高卒採用 LP（Pop Illustrated Manufacturing Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実 - **キーワード**: 高校生向け・線画イラスト・雲形の境界・吹き出し見出し・3色の地の切替・ドット・ジグザグ柄 - **地の質感**: 地に細かいドット・ジグザグ・三角の柄を薄く敷き、カード内は生成りの紙のような質感にする - **形**: 濃紺の細い線で囲んだ角丸カード、雲形・波形のセクション境界、ピル型ラベル - **温度感**: 明るく暖かい。黄とオレンジで元気さを、青と濃紺で誠実さを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#2345A5` | ブランド青（セクション地・ラベル・FAQバー） | 14% | 画素の実測 | | `dark-section` | `#4261B3` | 柄入りの青い地セクション | 12% | 画素の実測 | | `secondary` | `#C3EC73` | 黄緑の地セクション | 12% | 画素の実測 | | `accent-1` | `#FBF45D` | 黄色の地セクション・FV | 12% | 画素の実測 | | `background` | `#FEFFFE` | 白い地（導入・FAQ） | 14% | 画素の実測 | | `surface` | `#F2EEEB` | 生成りのカード面 | 13% | 画素の実測 | | `cta` | `#FC630E` | オレンジの強調・主ボタン | 2% | 画素の実測 | | `on-cta` | `#FEFEFE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#EA5F13` | 見出し・数字のオレンジ文字 | 1% | 画素の実測 | | `text` | `#3C4982` | 濃紺の見出し・本文文字 | 3% | 画素の実測 | | `line` | `#374684` | カード・吹き出しの濃紺枠線 | 1% | 画素の主要色に補正 | | `marker` | `#FDF886` | 数字下の黄色マーカー | 0% | 画素の主要色に補正 | | `accent-3` | `#3BB4E5` | 所属ラベルの水色 | 0% | 推定 | | `tint-1` | `#EDFAFE` | 数値カードの淡い水色面 | 3% | 画素の実測 | | `accent-2-accessible` | `#C75110` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#CD4B03` | AA を満たす補正値（計算） | | 計算 | - 地の色は黄→白→黄緑→青→黄→青→黄緑→黄→青→黄緑→白の順に切り替え、隣り合う色を同じにしない - 見出し文字と吹き出し内のタイトルはオレンジ、本文は濃紺で統一する - 数値・強調語はオレンジの太字に黄色マーカーを下に敷く - ラベル・タブ・FAQバーはブランド青の面に白文字 - カードは白か生成りの面に濃紺の細線で囲む - 主ボタンだけオレンジの面にし、他の要素と面の色を混ぜない - `heading-bubble` は文字 `#EA5F13` × 背景 `#FEFFFE` のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C75110`、4.54:1）を使う。 - `stat-card` は文字 `#EA5F13` × 背景 `#EDFAFE` のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#C75110`、4.54:1）を使う。 - `button-primary` は文字 `#FEFEFE` × 背景 `#FC630E` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#CD4B03`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの手描き風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.2 | 0.0em | | `accent` | セクション背後の欧文アウトライン見出し | 欧文サンセリフ | Montserrat | 500 | 48px | 1.0 | 0.05em | | `headline-lg` | 吹き出し内のセクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.4 | 0.05em | | `headline-md` | カードタイトル・強調数字 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.4 | 0.08em | | `headline-sm` | リスト項目・インタビューの一言 | ゴシック | Noto Sans JP | 700 | 15px | 1.6 | 0.05em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.05em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `label-button` | ラベル・タブ・ボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.08em | - 全体に太めのゴシックを使い、細字は使わない - 本文も中央揃えの短文が多く、改行で語の区切りを整える - 欧文の見出しは線だけのアウトライン文字にし、和文見出しの吹き出しと少し重ねる - 数字は本文より大きく太くし、単位は小さくする - 字間はやや広め（0.05〜0.1em）にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。数値カード・タブは 2 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面端から 16px ほど空けて置く - セクションは欧文アウトライン→吹き出し見出し→リード文→本体の順に並べる - イラストはセクション境界にまたがって置く - リストは細線で区切り、アイコンを左、文を右に置く - インタビューは縦長カードを左右交互に上下ずらして並べる ## Elevation & Depth - 影はほぼ使わず、濃紺の細い線で囲んで面を分ける - 吹き出しやカードは平面のまま、地の柄との差で浮かせる - 写真ボタンだけ下に濃紺の太線を付けて押せるように見せる ## Shapes - **角丸**: 小 6px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形。人物はカード上部に切り抜きで置く - **セクション境界**: 雲形・山形・波形の曲線で地の色を切り替える - 見出しは下にしっぽの付いた横長のピル型吹き出しにする - インタビューカードは上下が半円の縦長の形にする - 番号は円形、研修の番号はギザギザの星形バッジにする - 職種ラベルはギザギザの吹き出し形にする ## Components - **吹き出し見出し**（`heading-bubble`）: 白地に濃紺の枠、下にしっぽの付いたピル型。中にオレンジの太字見出し - **数値カード**（`stat-card`）: 淡い面に青いアイコン、ラベル、オレンジの大きな数字と黄色マーカー - **工程ラベル**（`pill-label`）: 青い面に白文字のピル型。カード内の小見出しに使う - **部署リンクボタン**（`anchor-tab`）: 青い角丸の矩形に下向き矢印と白文字。2 列に並べる - **社員紹介カード**（`interview-card`）: 上下半円の縦長カードに人物写真、色付き所属ラベル、一言、青い丸のプラスボタン - **アンケートカード**（`survey-list`）: 青い見出し帯（上にQ番号のタブ）と白い本体、線画アイコン付きの行を細線で区切る - **順位メダル**（`rank-badge`）: 金銀銅の丸にリボンの付いたバッジ。オレンジの見出しの左に置く - **FAQ アコーディオン**（`faq-bar`）: 青い角丸のバーに白丸のQ、白い質問文、右端にプラス - **応募ボタン**（`button-primary`）: オレンジの大きなピル型に白文字と右端の丸矢印 ## Do's and Don'ts **Do** - セクションごとに黄・黄緑・青の地を切り替え、雲形や波形でつなぐ - どの見出しも欧文アウトライン＋吹き出しの同じ形にする - 数字や強調語はオレンジの太字に黄色マーカーで目立たせる - 人物イラストは濃紺の線画にし、少ない色で塗る - カードは濃紺の細線で囲み、内側は生成りか白にする **Don't** - 黒文字やグレー文字を使わない（濃紺で統一する） - 影の濃いカードやグラデーションボタンにしない - 直線だけでセクションを区切らない - 細い明朝体や大人っぽい高級感のある書体を使わない - オレンジを地の色に広く使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（高校生の興味を引き、採用サイトだと伝える）: 黄色の地に太い手描き風の大見出し、跳ねる人物の線画、下に青いピル型ラベル、雲で白地へつなぐ 2. **メッセージ**（働く楽しさを短い言葉で伝える）: 白地に中央揃えの濃紺の短文を 3 段、上下に仕事をする人物のイラスト 3. **会社紹介**（事業の広さを見せる）: 黄緑の地に花びら形の事業図と、横スクロールできる街のイラストマップ 4. **数字で見る会社**（実績や働きやすさを数字で示す）: 青い柄の地に、アイコンとオレンジの数字を載せた角丸カードを 1 列＋2 列で並べる 5. **仕事紹介**（部署ごとの仕事内容を伝える）: 黄色のジグザグ柄の地に部署リンクを 2 列、番号付きの生成りカードに青ラベルと本文 6. **社員紹介**（先輩の顔と一言で親しみを出す）: 青い地に縦長の丸いカードを左右交互にずらして並べ、職種ラベルとプラスボタンを付ける 7. **アンケート**（若手の本音を見せる）: 黄緑の地に Q 番号タブ付きの白カード、アイコンと短文の行を区切り線で並べる 8. **施設紹介**（職場の雰囲気を写真で見せる）: 青い地に角丸写真のタップボタンを縦に並べ、右下にオレンジの TAP 印。自然の写真と動物の写真も添える 9. **福利厚生**（おすすめ制度をランキングで紹介する）: 黄色の地に順位メダル付き写真カード 3 枚、その下にチェックリストのカードと施設写真 10. **研修制度**（入社後の安心感を伝える）: 黄緑の地に矢羽型の時系列図と縦の黄色ラベル、星形番号付きの写真カード 4 枚 11. **よくある質問**（疑問を解消する）: 写真の帯を波形で切り、白地に青いアコーディオンバーを縦に並べる 12. **応募 CTA**（応募の方法を伝え行動を促す）: 黄色の地に大きな白い欧文、全員集合のイラスト、オレンジの大きなピル型ボタン ## Imagery - 人物は作業着姿の若者を濃紺の太めの線画で描き、青・黄緑・白・オレンジの少ない色で塗る - 製品や道具の小物イラストを地の上に散らす - 雲は黄色・水色の丸いもこもこ形で、網点の影を付ける - 写真は明るく自然光の職場・社員の笑顔。角丸で切り抜く - 社員写真は白背景で切り抜いた上半身の正面ショット - アイコンは濃紺の線画に黄・オレンジのワンポイント - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は本文幅を約 80% にし、中央に寄せる - 数値カード・社員紹介・アンケートは PC で 3 列にする - 仕事紹介は PC で部署タブ切替にし、ラベルと本文を左右に並べる - 施設写真は 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-ced1cf23`（元 LP の URL から採番） - **元 LP**: https://asuzacgroup.jp/recruit/highschool/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。