DESIGN.md — ミント×深緑×朱赤のポップな採用サイト LP（Mint Pop Illustrated Recruit LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 求人・採用 ／ 雰囲気: ポップ・元気、清潔・爽やか、力強い・インパクト、親しみ・手作り感
• キーワード: ミント・線画イラスト・極太見出し・角丸カード・シェブロン図形・深緑フッター
• 地の質感: フラットなベタ塗りに黒の太い線画を重ねる。グラデーションや影はほぼ使わない
• 形: 角丸 8px のカード、黒線のピル型矢印ボタン、大きなシェブロン形と爆発形の装飾
• 温度感: 爽やかで明るいが、朱赤と深緑で熱量と堅さも出す

Colors

• 地は白と淡いミントを交互に使い、セクションを切り替える
• 鮮やかなミントは図形・イラストの塗り・人物スライダー背景に限定する
• 朱赤は FV の大見出しとエントリー CTA だけに使う
• 深緑はセクション英字ラベル、強調ラベル、最下部の募集エリアの地に使う
• リンクカードはミント・深緑・クリーム・水色・写真を交互にして単調さを避ける
• 文字は黒が基本。深緑や写真の上だけ白文字にする
• button-primary は文字 #FFF0EB × 背景 #FF4A43 のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DF0800、4.53:1）を使う。

Typography

• セクション見出しは英字ラベル 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。