DESIGN.md — 生成り地×えんじと多色の鉄道採用 LP（Playful Multicolor Railway Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 親しみ・手作り感、ポップ・元気、信頼・誠実、やさしい・柔らかい
• キーワード: 生成り地・えんじのピルボタン・職種別の5色・マスコットイラスト・路線図モチーフ・セリフ体の英字見出し
• 地の質感: 生成りのフラットな地に、薄いグレーの線路模様と街並みの線画を敷く。影はほぼ使わない
• 形: 角丸の写真、吹き出し形やブロブ形の切り抜き、ピルボタン、職種ごとに色を変えた変形フレーム
• 温度感: 暖かい。生成りとえんじが落ち着きを、多色のアクセントが明るさを出す

Colors

• 地はすべて生成り（#FDFCF8）にし、白い面の区切りや濃い帯は作らない
• 行動を促すボタンは、えんじの塗りに白文字だけを使う
• 英字見出しは頭文字だけをえんじにし、残りは墨色にする
• 職種ごとに水色・橙・紫・緑・赤を割り当て、フレームとラベルを同じ色にする
• 日本語のサブ見出しとタグは若草色で統一する
• 大きな背景面には淡い緑の吹き出し形だけを使う
• 見出し下のラインは水色・橙・紫・緑を横につないだ多色にする
• tag-pill は文字 #FFFFFE × 背景 #8CD39A のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#338644、4.53:1）を使う。
• job-card は文字 #FFFFFE × 背景 #95C1D2 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#407E96、4.52:1）を使う。

Typography

• 英字見出しはセリフ体の大文字にし、頭文字だけをえんじにする
• 英字見出しのすぐ下に、若草色の日本語サブ見出しを小さく添える
• スローガンは太い丸ゴシックで、1文字ずつ水色・橙・えんじ・紫・緑に塗り分ける
• 本文は字間を少し広げ、行間 2.0 でゆったり組む
• ニュースのタイトルは 2 行で切って三点リーダーで省略する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。職種カードは 3 列＋2 列、外部リンクのバナーは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 19px にする
• 各セクションは英字見出し → リード文 → 写真や一覧 → 中央のピルボタンの順に並べる
• 英字見出しは左揃え、ボタンは中央に置く
• ニュースは左に写真、右にタグ・日付・タイトルを置き、行ごとに区切り線を入れる
• マスコットは見出しや写真の角に重ねて置く

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる
• ボタンの周りに生成り色の太い縁取りを付け、地から浮かせる
• イラストは写真の角にはみ出させ、重なりで奥行きを出す

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 基本は角丸の長方形。他に円、吹き出し形、ブロブ形、職種ごとに色を変えた変形フレームを使う
• セクション境界: 直線では区切らない。街並みの線画や淡い緑の吹き出し形、線路の地模様でつなぐ
• ボタンとタグはすべてピル型にする
• 職種の写真は、角丸の上部と台形の下部を組み合わせた枠で囲み、左上に色付きの丸い 1 文字バッジを付ける
• インタビューの人物は猫耳付きの吹き出し形で切り抜く
• 路線図は丸い駅マーカーを付けた多色の線で描く

Components

• えんじのピルボタン（button-primary）: 中央に白文字、右端に白い丸アイコンを置いたボタン
• 頭文字が赤い英字見出し（heading-serif-initial）: セリフ体の英字見出し。頭文字だけをえんじにし、下に多色のラインを引いて、若草色の日本語サブ見出しを添える
• ニュースの一覧行（news-row）: 左に角丸のサムネイル、右に雇用形態タグ・日付・2 行のタイトルを置く。行の下に区切り線を引く
• 雇用形態タグ（tag-pill）: 若草色の小さなピル型タグ。文字は白
• 職種カード（job-card）: 職種の色で縁取った変形フレームの写真。左上に丸いバッジ、下に同じ色のピルラベルを付ける
• インタビューのスライダー（interview-slider）: 吹き出し形に切り抜いた人物写真の左右に、丸い矢印ボタンを置く。下に引用文、職種タグ、イニシャル、入社年を並べる
• 路線図イラスト（route-map）: 多色の路線、駅の丸マーカー、ブロブ形の写真、路線名のピルラベルを組み合わせた図
• 外部リンクのバナー（banner-link）: 細い枠線で囲んだ白い矩形のバナーを 2 列に並べる

Do's and Don'ts

Do - 地は生成り 1 色で通し、淡い線路模様を敷く - セクションごとにマスコットのイラストを 1〜2 体添える - 職種やカテゴリには固定の 5 色を割り当て、毎回同じ色で示す - 行動を促すボタンは、えんじのピル型に統一する - 写真は必ず角丸か変形フレームで切り抜く

Don't - 黒や濃紺の帯を大きく敷かない - ボタンを四角くしたり、えんじ以外の色にしたりしない - 見出しを日本語だけで済ませない。英字見出しと日本語サブ見出しを必ず組にする - 濃いドロップシャドウやグラデーションを使わない - 多色を本文の文字色に使わない

Page Structure

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

1. ヘッダー（ブランドを示し、ナビゲーションの入口を置く）: 左にロゴと会社名、右に 3 本線とMENU の文字を置いた白い帯
2. ファーストビュー（事業の象徴と、地域に寄り添う姿勢を伝える）: 全幅の車両写真の下端に英字スクリプトのコピーを重ね、その下に多色の丸ゴシックでスローガンを置く。左右にマスコット、背景に街並みの線画
3. お知らせ・求人ニュース（最新の募集を伝える）: えんじの変形フレームに入れた写真と円形写真を置き、英字見出しの下にサムネイル付きの一覧を 4 件並べる。最後にピルボタン
4. 仕事紹介（職種の幅を見せる）: 角丸の風景写真の下に、見出し・リード文・職種ごとに色分けした 5 枚の写真フレームとラベルを並べる
5. 社員インタビュー（働く人のリアルな声を伝える）: 斜線パターンの帯の上に、吹き出し形に切り抜いた人物写真を置いたスライダー。下に引用文と職種タグ
6. 写真の組み合わせ（現場の雰囲気を伝える）: 大きな角丸写真 1 枚と、小さな写真 2 枚を並べる
7. 数字で見る会社（データページへ誘導する）: 英字見出し、マスコット、リード文、ピルボタンの順に置く
8. フォトギャラリーと路線図（沿線と職場の風景を見せる）: 淡い緑の吹き出し形の上に見出しとボタンを置き、多色の路線図とブロブ形の写真を重ねる
9. 締めのCTA（応募へ誘導する）: 車両が並ぶ写真にスクリプトのコピーを重ね、多色のスローガン、短い文、えんじのボタンを続ける
10. 関連リンク・フッター（外部の媒体と SNS へ案内する）: 2 列のバナー、SNS のバナー、区切り線、コピーライトを中央揃えで置く

Imagery

• 写真は晴天の屋外で撮った車両や、制服姿の社員が笑顔で作業する明るい写真にする
• 人物は胸から上や作業中の手元で切り取り、現場の道具を一緒に写す
• イラストは白い犬型と車両型のマスコット。黒い線で描き、ベタ塗りにする
• 装飾は線路模様・街並みの線画・小さな木のアイコンを、薄いグレーや緑で入れる
• 路線図は丸い駅マーカーを付けた多色の線で、手描き風の曲線にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はグローバルナビを横に並べ、右端に応募ボタンを置く
• PC のニュースは左に大きな写真、右に一覧の 2 カラムにする
• PC の職種カードは 5 枚を横一列に並べる
• PC のインタビューは左にスライダー、右に写真を縦に並べる
• PC の数字セクションは左に写真、右に文章の 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 行書くと起動時に読み込まれる。