DESIGN.md — 深緑×ミントの鉄道職種採用 LP（Deep Green Mint Railway Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル
• キーワード: 深緑・ミントグラデーション・英字イタリック見出し・線枠ナビ・タイムライン・蛍光イエローの差し色
• 地の質感: フラットな単色面が中心。テクスチャはフッター手前のドット地と、薄い筆記体の透かし文字だけ。
• 形: 角丸はほぼ使わない直角の矩形。細い線枠のボックスとベタ塗りの帯で組む。
• 温度感: やや涼しげで、誠実で清潔な印象。

Colors

• 地は白が基本。深緑は見出し文字・帯・終点・フッターに限って使う。
• ミントは淡い色から濃い色への段階で進行や順序を表す。最終段だけ深緑にする。
• 蛍光イエローはエントリー系CTAとマーカーだけに使う。
• リンクカードはミントのベタ面に白文字と白アイコンを載せる。
• ヒーロー下にはミントのグラデーション帯を入れて区切る。
• link-card は文字 #F9FEFB × 背景 #36B29D のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#278172、4.61:1）を使う。
• header-entry は文字 #F9FEFB × 背景 #3BB29C のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#2B8272、4.54:1）を使う。

Typography

• 見出しは英字の太いイタリック体を大きく置き、その下に横線付きの和文を小さく添える。
• 見出しは左揃えにし、カード内だけ中央揃えにする。
• 本文は太めのゴシックで短い箇条書きにする。
• 人名はイニシャルを太いイタリックの英字で表記する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ナビだけ 2 カラムのグリッド。
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• リンクカードとボタンは左右16px程度の余白で幅いっぱいに置く。
• コンテンツは左右に約35pxの余白を取る。
• タイムラインは左に縦線と時計アイコンを置き、右側に写真を積む。
• フロー図は矢印で縦につなぐ。

Elevation & Depth

• 影は基本的に使わない。
• パンフレット画像だけ右下に灰色のずらし影をつける。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。人物写真は縦長、業務写真は横長にする。
• セクション境界: ヒーロー下はミントのグラデーション帯。それ以外は余白だけで区切る。
• 期間バッジだけは白いピル型にする。
• 枠線は1pxの深緑。

Components

• 線枠ナビタイル（nav-tile）: 深緑の線枠の中に、線画アイコン・英字大・和文小を並べる。
• 英字見出し＋和文（section-heading）: 英字の太いイタリック見出しの下に、横線と和文サブ見出しを置く。
• 社員カード（member-card）: 縦長写真の下に深緑の職種帯、入社年、イニシャルを並べる。
• ステップフロー（flow-step）: ミントが段階的に濃くなる帯を矢印でつなぎ、最後は深緑にする。
• 一日のタイムライン（timeline）: 縦線の上に時計アイコン、黄色マーカー付きの項目名、箇条書きを並べる。
• エントリーボタン（button-primary）: 蛍光イエローのベタ面に英字大と和文、右端に丸矢印アイコンを置く。
• 募集要項ボタン（button-secondary）: 深緑のベタ面に白文字と丸矢印を置く。
• ミントリンクカード（link-card）: ミントの大きなカードに、英字見出し・ダッシュ付きの和文・白いフラットアイコンを載せる。
• ヘッダーENTRY（header-entry）: 右上に置くミントの四角ボタンで、英字と和文の2段組み。

Do's and Don'ts

Do - 英字のイタリック見出しと和文サブ見出しを必ずセットで使う。 - 順序を表すときはミントの濃淡グラデーションで段階を示す。 - 蛍光イエローはエントリー導線とマーカーだけに絞る。 - 制服姿の社員写真を自然光で明るく見せる。 - アイコンは深緑とミントの線画、またはフラットで統一する。

Don't - 大きな角丸やピル型のボタンにしない。 - 暖色や派手な多色を足さない。 - ドロップシャドウやグラデーションのボタンを使わない。 - 長い文章を詰め込まず、箇条書きにする。

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ロゴの表示とエントリー導線）: 白地にロゴを置き、右にミントのENTRYボタンとハンバーガーメニューを並べる。
2. ファーストビュー（職種を印象づける）: 業務中の写真を深緑の帯で囲み、白地に職種名と英字ラベルを左下に載せる。透かしの筆記体も重ねる。
3. ページ内ナビ（各コンテンツへの誘導）: 線枠タイルを2列×3段に並べ、下にミントのグラデーション帯を置く。
4. 社員紹介（働く人を見せる）: 縦長の社員写真を縦に積み、職種の帯とイニシャルを添える。
5. キャリアの道のり（一人前になるまでの段階を示す）: 人物イラストを添え、ミントの濃淡帯と矢印で縦のフロー図にする。期間はピル型バッジで示す。
6. 一日の流れ（業務のイメージを伝える）: 縦線と時計アイコンのタイムラインに、業務写真を挟む。
7. 動画（臨場感を伝える）: 深緑の枠付きサムネイルの中央に白い再生ボタンを置き、下に注釈を添える。
8. CTA（募集要項とエントリーへの誘導）: 深緑ボタンと蛍光イエローボタンを幅いっぱいに縦に並べる。
9. 関連リンク（会社概要・よくある質問・関連採用への導線）: ミントの大型カードを4枚並べ、それぞれにアイコンを添える。
10. パンフレット（資料への誘導）: ドット地にずらし影付きの表紙を2つ並べ、背景に透かしの英字を入れる。
11. フッター（著作権表記）: 深緑の帯に白い小さな文字を中央揃えで置く。

Imagery

• 制服姿の社員を、明るい自然光で清潔感が出るように撮る。
• 車両や運転席など職場の背景を入れて業務感を出す。
• 人物イラストはグレーの制服を着たシンプルな線画にする。
• アイコンはミントと深緑の2色で描く線画またはフラット。
• 筆記体の英字を薄い透かしとして装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はナビタイルを4列にする。
• PC は社員カードを2列で横に並べる。
• PC のタイムラインはテキストを左、写真を右の縦列に分ける。
• PC はCTAボタンを2つ横並びにし、リンクカードを4列にする。
• PC のヒーローは深緑の帯を左に大きく出し、写真を右に寄せる。

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 行書くと起動時に読み込まれる。