DESIGN.md — 紅×墨の和柄で魅せる飲食店採用 LP（Japanese Izakaya Red Wave Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: 和風、力強い・インパクト、信頼・誠実、情報量多め・訴求型
• キーワード: 深紅・墨黒・和柄地紋・斜めカット・波模様・老舗の職人
• 地の質感: 赤地に細かな和柄、黒地に青海波、白地に和紙の繊維テクスチャ
• 形: 台形・斜めに切った白パネル、角丸の少ない四角、筆致の波モチーフ
• 温度感: 温かく情熱的。赤の熱量と黒の締まり

Colors

• 地は白・淡灰和紙・深紅・墨黒の4種を交互に切り替える
• 赤は職種セクション地とボタン・見出し強調に限定
• 黒地には青海波などの地紋を薄く敷く
• 強調語は赤文字にして本文の黒と対比させる
• 白パネルは赤地・黒地の上に斜めカットで重ねる
• FAQ・タブ・ボタンは赤地に白文字で統一

Typography

• 見出しは太いゴシックで力強く
• 強調語のみ赤＋一回り大きく
• 職種名は赤の欧文大文字＋和文サブを横に添える
• 本文は小さめで行間を広く取る
• セクション見出しは中央揃え、両脇に赤い点の和柄装飾
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真の上に白パネルを縦積み
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真と白パネルを左右交互に重ねる
• パネルは片側を斜めにカット
• 福利厚生は2列アイコンカード（SPも2列可）
• 募集要項は職種タブ付き表
• 応募の流れは5ステップを矢印で連結

Elevation & Depth

• 影はほぼ使わずフラット
• フォームカードのみごく薄い影
• 奥行きは写真とパネルの重なりで出す

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角の写真。パネルの斜辺で部分的に隠す
• セクション境界: 直線の切り替え＋白パネルの斜めカット、波の筆模様をまたがせる
• ボタンは角丸小の長方形
• パネルは台形・平行四辺形
• アイコンは赤い円の中に白線画
• ステップは赤い正方形カード

Components

• ページ内リンクボタン（anchor-nav-button）: 赤地白文字に下向き三角、横並び
• 募集要項ボタン（button-primary）: 赤い長方形に右矢印
• セクションラベル（section-label）: 濃灰の小さな帯に白文字
• 斜めカット白パネル（slant-panel）: 写真に重なる台形の白パネルに本文
• 1日のスケジュール（schedule-timeline）: 時刻と赤い縦線・丸印のタイムライン
• 社員インタビューQ帯（qa-bar）: 赤帯のQ見出し＋白地の太字回答
• 福利厚生カード（benefit-card）: 赤丸アイコン＋見出し＋説明
• よくある質問（faq-accordion）: 赤地白文字の行、右端に＋
• 応募ステップ（step-card）: 赤い正方形にSTEP番号とアイコン、矢印連結

Do's and Don'ts

Do - 赤・黒・白・淡灰の地を交互に切り替える - 黒地・赤地には細かい和柄を敷く - 写真と斜めパネルを重ねて動きを出す - 赤い筆の波模様をセクション境界に配置 - 職種ごとに同じ構成（紹介→スケジュール→声）を繰り返す

Don't - パステルや青系を使わない - ピル型や大きな角丸にしない - 強い影やグラデーションを多用しない - 赤を本文全体に使わない - 和柄を濃くして文字を読みにくくしない

Page Structure

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

1. ファーストビュー（職人の姿で第一印象をつくる）: 調理中の写真に赤い波模様、白と赤の斜め帯にキャッチ
2. ページ内ナビ（各セクションへ誘導）: 赤い小ボタンを横並び
3. メッセージ（会社の想いを伝える）: スタッフ集合写真＋強調語赤の見出し、黒い青海波地に店舗写真と白パネル
4. 仕事を知る（職種導入）: 白地に見出し、右に斜め切りの写真
5. 職種紹介（複数）（仕事内容と1日の流れ）: 赤い和柄地に写真＋斜め白パネル、タイムライン
6. 社員の声（やりがいを伝える）: 人物写真全面に赤帯Q＋白パネルA、スライダー
7. 働く環境（福利厚生を一覧）: 和紙地に2列アイコンカード
8. 募集要項・FAQ（条件の提示と不安解消）: 黒地にタブ付き白表、赤いアコーディオン
9. 応募フォーム（応募獲得）: 応募の流れ5ステップ＋白カード型フォーム
10. 店舗情報・SNS（所在地と接点）: ロゴと連絡先、赤い地図ボタン、写真と地図、赤いSNSボタン

Imagery

• 黒ユニフォーム・白調理衣のスタッフを自然光の店内で撮影
• 木と障子の和風店内の暖色写真
• 赤い筆致の波模様（三本線）を装飾に
• 赤丸に白の線画アイコン
• 青海波・和柄の細かい地紋と和紙テクスチャ
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とパネルを左右交互2カラム、SP は写真の下にパネルを縦積み
• SP の斜めカットは浅い角度にする
• ページ内ナビは SP で2〜3列に折り返す
• 福利厚生カードは PC2列、SP は1〜2列
• 募集要項表は SP で項目名を上・内容を下に積む

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