DESIGN.md — 黒×マスタード金×深紅の飲食店求人 LP（Dark Charcoal and Mustard Gold Restaurant Recruit LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、力強い・インパクト
• キーワード: チャコール黒・マスタードゴールド・深紅・装飾欧文見出し・厨房写真・スタッフ動画
• 地の質感: グラデーションのない単色ベタ面と、暖色の照明が当たった料理・厨房写真を組み合わせる
• 形: 角丸なしの四角いブロック。区切りは細い金の下線だけで、フラットな面が帯状に切り替わる
• 温度感: 暖色寄り。黒地の上に金と赤が映える、温かく重みのある配色

Colors

• 地の色は黒→金→黒→金→写真→深紅の順に帯で切り替える
• 黒地の見出しと罫線は金。本文は白
• 金地の上は文字も見出しもすべて白。金の上に金の文字は置かない
• 深紅は問い合わせセクションだけに使い、ページの締めとする
• 写真の上の文字は白にし、暗いドロップシャドウで読みやすくする
• staff-name は文字 #EAEBE9 × 背景 #AD8B44 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7F6632、4.56:1）を使う。
• accordion-qa は文字 #EAEBE9 × 背景 #AD8B44 のコントラスト比が 2.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#7F6632、4.56:1）を使う。

Typography

• セクション見出しは、大きな装飾欧文と小さめの和文見出しを中央揃えで縦に積む
• 金地の本文は太めのゴシックにし、行間 1.9 で読みやすくする
• インタビュー本文は左揃え。FV のリード文は中央揃え
• スタッフ名は太字ゴシックにし、上に役職ラベル、下に小さな欧文表記を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はスタッフ紹介のみ動画とテキストの 2 カラム
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は 18〜20px
• セクションの上下は 60〜90px 空ける
• 募集要項は「項目名＋金罫線＋本文」を縦に繰り返す
• 写真はブロック全幅か、余白付きの幅いっぱいで置く

Elevation & Depth

• 影は基本的に使わず、フラットな面で構成する
• 写真の上の白文字だけ、暗いドロップシャドウを付ける

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。動画は縦長（9:16）で切り抜く
• セクション境界: 直線で地の色を切り替える
• 角丸はどこにも使わない
• 区切りは 2px の金または白の水平線だけにする
• アコーディオンの開閉は太い V 字のシェブロンで示す

Components

• 欧文＋和文の見出し（section-title）: 装飾欧文の大見出しの下に和文の小見出しを置き、中央に揃える
• 募集要項の行（spec-row）: 金の項目名の下に金の 2px 罫線を引き、その下に白の本文を置く
• スタッフ名ブロック（staff-name）: 上から役職ラベル、太字の氏名、欧文表記の 3 段で組む
• 縦長スタッフ動画（video-portrait）: 縦書きの太い明朝テロップが入った、9:16 の埋め込み動画
• インタビューのアコーディオン（accordion-qa）: 問いの見出しを白で置き、右端にシェブロン、下に白の 2px 線を引く。開くと長文が出る
• 写真の上のメッセージ（photo-message）: 暗めの店内写真に、白の中央揃えの文章を重ねる
• LINE 友だち追加バナー（line-cta-banner）: 赤い面の両脇にスタッフの切り抜き写真を置き、中央に太字の白文字、下部に金の帯のボタンを置く
• 料理写真の並び（photo-split）: 細い黒の隙間で区切った料理・調理写真を横に並べる

Do's and Don'ts

Do - 黒と金の帯を交互に使い、リズムを作る - 見出しは必ず装飾欧文と和文の 2 段構成にする - スタッフの顔と人柄が伝わる、赤いコックコートの写真や動画を使う - 長文はアコーディオンで区切り、問いの形の見出しを付ける - 最後の CTA は深紅の面に置き、目立たせる

Don't - 角丸やピル型のボタンを使わない - 青や緑など寒色のアクセントを入れない - 金地に金や黒の細い文字を置かない - パステル調や明るい白地のセクションを作らない - 影や立体的なボタン表現を使わない

Page Structure

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

1. ファーストビュー（採用ページであることと、店の世界観を伝える）: 黒地に装飾欧文と和文の見出し、その下にロゴとスパイス・野菜の写真を置き、白い太字のキャッチを重ねる
2. 募集メッセージ（求める人物像と学べることを伝える）: 金のベタ地に、白の太字見出しとリード文を中央揃えで置く
3. 写真帯（厨房の臨場感を出す）: 調理写真を黒い隙間で区切って横に並べる
4. 募集要項（条件を一覧で示す）: 黒地に、金の項目名・金の罫線・白の本文を縦に積む。PC では表組みにする
5. スタッフ紹介（料理長と代表の人柄・想いを伝える）: 金地に名前ブロック、縦長動画、問い形式のアコーディオンの長文を、人数分繰り返す
6. 理念メッセージ（店の使命を伝える）: 暗めの店内写真の全幅背景に、白文字の中央揃えの文章を重ねる
7. CTA（LINE での問い合わせを促す）: 深紅の地に金の欧文と和文の見出し、その下にスタッフ写真入りの LINE バナーを置く

Imagery

• 暖色の照明で撮った、スパイス・野菜・調理中の手元のアップ
• 赤いコックコートと帽子を着たスタッフの、笑顔の切り抜き写真
• 縦長動画のサムネイルには、太い白の明朝体で縦書きテロップを入れ、黒い縁取りを付ける
• 店内カウンターの写真は暗めに落とし、背景として使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では、FV のキャッチを 1〜2 行の横長に組み直す
• PC の写真帯は 3 枚を横並びにする
• PC の募集要項は、左に項目名、右に本文の 2 列の表にする
• PC のスタッフ紹介は、左に動画、右にアコーディオンの 2 カラムにする
• PC の CTA バナーは中央に置き、最大幅 約 60% に収める

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