--- version: alpha name: Mint Pop Illustrated Recruit LP description: 淡いミント地に鮮やかなミントの図形と線画イラストを重ねた製造業の新卒採用 LP。朱赤の極太見出しでインパクトを出し、深緑で信頼感を締める。中盤は角丸のリンクカードを並べたナビ型構成で、最後は深緑地に朱赤のエントリーボタンを積む。 colors: primary: '#007759' background: '#FFFFFF' background-alt: '#D8FCF2' secondary: '#36EECC' cta: '#FF4A43' on-cta: '#FFF0EB' text: '#212A29' dark-section: '#333333' accent-1: '#1ECAB0' tint-1: '#FDEFCC' tint-2: '#DFF0FA' line: '#999999' surface: '#F1F9F5' cta-accessible: '#DF0800' typography: display: fontFamily: Dela Gothic One fontSize: 72px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.1em accent: fontFamily: Raleway fontSize: 15px fontWeight: 500 lineHeight: 1.5 body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 24px section: 100px 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.md}' height: 95px arrow-button: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 26px link-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 155px segment-tab: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 50px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px nav-pill: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 45px person-slider: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 640px label-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 34px footer-link: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 60px --- # DESIGN.md — ミント×深緑×朱赤のポップな採用サイト LP（Mint Pop Illustrated Recruit LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 求人・採用 ／ **雰囲気**: ポップ・元気、清潔・爽やか、力強い・インパクト、親しみ・手作り感 - **キーワード**: ミント・線画イラスト・極太見出し・角丸カード・シェブロン図形・深緑フッター - **地の質感**: フラットなベタ塗りに黒の太い線画を重ねる。グラデーションや影はほぼ使わない - **形**: 角丸 8px のカード、黒線のピル型矢印ボタン、大きなシェブロン形と爆発形の装飾 - **温度感**: 爽やかで明るいが、朱赤と深緑で熱量と堅さも出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#007759` | ブランドの深緑（見出し英字・募集セクション地） | 14% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 28% | 画素の実測 | | `background-alt` | `#D8FCF2` | 淡いミント地（FV・働く環境） | 20% | 画素の実測 | | `secondary` | `#36EECC` | 鮮やかなミント（図形・装飾面） | 9% | 画素の主要色に補正 | | `cta` | `#FF4A43` | エントリーボタン・FV 見出しの朱赤 | 3% | 画素の実測 | | `on-cta` | `#FFF0EB` | CTA 上の白文字 | 0% | 画素の実測 | | `text` | `#212A29` | 見出し・本文の黒 | 2% | 画素の実測 | | `dark-section` | `#333333` | タブ選択中の黒地 | 0% | 画素の実測 | | `accent-1` | `#1ECAB0` | やや濃いミント（研修カード地） | 1% | 画素の実測 | | `tint-1` | `#FDEFCC` | クリーム色カード地 | 2% | 画素の実測 | | `tint-2` | `#DFF0FA` | 淡い水色カード地 | 2% | 画素の実測 | | `line` | `#999999` | 区切り線・カード枠のグレー | 0% | 推定 | | `surface` | `#F1F9F5` | 淡いグレーミントのカード地 | 1% | 画素の実測 | | `cta-accessible` | `#DF0800` | AA を満たす補正値（計算） | | 計算 | - 地は白と淡いミントを交互に使い、セクションを切り替える - 鮮やかなミントは図形・イラストの塗り・人物スライダー背景に限定する - 朱赤は FV の大見出しとエントリー CTA だけに使う - 深緑はセクション英字ラベル、強調ラベル、最下部の募集エリアの地に使う - リンクカードはミント・深緑・クリーム・水色・写真を交互にして単調さを避ける - 文字は黒が基本。深緑や写真の上だけ白文字にする - `button-primary` は文字 `#FFF0EB` × 背景 `#FF4A43` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DF0800`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の斜体風極太キャッチ | 装飾・ディスプレイ | Dela Gothic One | 900 | 72px | 1.15 | 0.0em | | `headline-lg` | セクション和文見出し（細めで上品） | ゴシック | Zen Kaku Gothic New | 400 | 30px | 1.4 | 0.05em | | `headline-md` | カード内の見出し・ラベル | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 写真カード上の明朝コピー | 明朝 | Shippori Mincho | 500 | 28px | 1.5 | 0.1em | | `accent` | セクション上の英字ラベル（深緑） | 欧文サンセリフ | Raleway | 500 | 15px | 1.5 | 0.0em | | `body-md` | リード文・本文 | ゴシック | Zen Kaku Gothic New | 400 | 14px | 1.9 | 0.08em | | `note` | 日付・ハッシュタグ・小ラベル | ゴシック | Noto Sans JP | 500 | 11px | 1.7 | 0.05em | | `label-button` | CTA・タブの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.05em | - セクション見出しは英字ラベル 2 行（深緑）＋細めの和文見出し＋中央揃えのリード文の 3 段構成 - 極太ディスプレイ書体は FV だけで使う - カード内の見出しは白い帯を敷いた黒太字にして写真の上でも読めるようにする - 縦書きを一部のカードに使い、遊び心を出す - 本文は字間を少し広く取り、行間は 1.8 以上にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はカードを 2 カラムのタイル状に並べる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - リンクカードは左右 8% ずつ余白を取り、縦に 8px 間隔で積む - カードの高さは約 150px でそろえ、右下に矢印ボタンを置く - セクション見出しは中央揃え、カード内は左揃え - 人物スライダーは画面幅いっぱいに広げ、両隣のカードを少しだけ見せる - 最下部の CTA は全幅に近いボタンを 8px 間隔で縦に積む ## Elevation & Depth - 影は使わずフラットにする - 奥行きは色面の重なりとイラストの線で出す - 白カードには細いグレー線の枠だけを付ける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: カード内は角丸の四角でトリミング。人物は縦長の楕円にトリミング - **セクション境界**: 基本は直線で切り替える。人物セクションは不定形の爆発形・波形のミント面で囲む - 矢印ボタンは白地・黒い細線の横長楕円 - タブとナビボタンは黒線のピル型 - 大きなシェブロン（くの字）を装飾として背景に敷く - CTA は角丸 8px の長方形にする ## Components - **エントリー CTA**（`button-primary`）: 深緑地の上に置く朱赤の大きな角丸ボタン。小さい年度ラベルと太字ラベルを 2 段で入れる - **楕円の矢印ボタン**（`arrow-button`）: 白地・黒い細線の横長楕円に→を入れる。カードの右下に置く - **リンクカード**（`link-card`）: 色面・写真・イラストのいずれかを入れた角丸カード。白帯ラベルと矢印ボタンを付ける - **切替タブ**（`segment-tab`）: 黒線のピル型に選択肢を 2 つ並べる。選択中は黒地に白文字 - **セクション見出し**（`section-heading`）: 深緑の英字ラベル 2 行の下に細めの大きな和文を置く - **横スクロールのナビピル**（`nav-pill`）: 白地・黒線のピル型ボタンを、薄い英字の帯の上で横に流す - **社員紹介スライダー**（`person-slider`）: ミントの不定形の面に楕円の人物写真、縦書きの職種ピル、タイトル、ハッシュタグを置く - **白帯ラベル**（`label-band`）: 写真や色面の上に白、または深緑のベタ帯を敷き、太字ラベルを載せる - **募集リンク**（`footer-link`）: 深緑地に黒い小さな矢印アイコンと白い太字を並べたリスト ## Do's and Don'ts **Do** - イラストは黒の太い線画にミントのベタ塗りでそろえる - カードごとに地色を変え、写真カードとイラストカードを交互に並べる - どのカードにも楕円の矢印ボタンを同じ位置に置く - 朱赤は FV の見出しと最終 CTA だけに絞る - セクション見出しは英字と和文の 2 段構成を守る **Don't** - ドロップシャドウやグラデーションボタンを使わない - 朱赤を本文や小さな装飾に散らさない - ミント以外の鮮やかな色（青・紫など）を足さない - カードの角丸を不統一にしない - 写真を全面に敷き詰めて余白を潰さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企業の個性と元気さを一目で伝える）: 淡いミント地に朱赤の極太キャッチ。巨大なミントのシェブロンと、飛ぶポーズの社員線画イラストを重ね、下に切替タブを置く 2. **メッセージ**（仕事の意義を短文の連なりで語る）: 爆発形のミント図形とイラストの下に、太字の短文を左揃えで行間広く並べる 3. **ナビピル帯**（主要コンテンツへ誘導する）: 薄い大きな英字の帯の上に、黒線のピルボタンを横スクロールで流す 4. **お知らせ**（最新情報を示す）: 白地。英字見出しと一覧リンクを縦線で区切り、日付と本文を置いて、下にグレーの線を引く 5. **企業を知る**（会社概要・理念・強み・事業を案内する）: 見出し 3 段構成の下に、多色の角丸リンクカードを縦に積む 6. **仕事を知る**（職種・プロジェクト・キャリア・研修を案内する）: 写真のコラージュ、深緑、クリーム、ミントにシェブロン、写真のカードを交互に並べる 7. **人を知る**（社員の声で親近感を出す）: 不定形のミント面に楕円の人物写真のスライダー。下にプログレスバー、前後ボタン、一覧リンクを置く 8. **座談会・プロジェクト**（深掘りコンテンツへ誘導する）: クリームと水色の座談会カード。緑フィルターの写真に明朝体白文字を載せたカード 9. **働く環境**（福利厚生・暮らしを案内する）: 淡いミント地に写真を散らして配置し、白い枠線カードのリンクを 2 つ置く 10. **募集・CTA**（エントリーへ導く）: 深緑地にミントのシェブロンと白文字コピー。緑フィルター写真、矢印付きリンクリストの後に朱赤ボタンを 4 つ積む ## Imagery - 人物は黒の太い主線と白・ミント 2 色のベタ塗りで描く。誇張したポーズで元気さを出す - 社員写真は自然光の明るいオフィスや現場で撮り、楕円や角丸四角に切り抜く - 工場や製品の写真は緑のカラーフィルターをかけてブランド色に寄せる - 背景にミントの巨大シェブロンと爆発形を大胆にはみ出させて配置する - 写真のコラージュは大小の四角をずらして散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV のキャッチとイラストを左右に並べて圧縮する - PC ではリンクカードを 2 カラムの大小タイル状に組む - PC では左端に巨大な細い英字のセクション名を縦に置く - PC の人物スライダーは 4〜5 人を同時に表示する - PC の CTA ボタンは 2×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-2cdac11b`（元 LP の URL から採番） - **元 LP**: https://www.yamatokogyo.co.jp/recruit/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。