DESIGN.md — 墨黒×ライトグレーの飲食FC募集 LP（Monochrome Charcoal Franchise Recruitment LP）

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

Overview

• 業種: 求人・採用 ／ 雰囲気: シンプル・ミニマル、クール・先進的、情報量多め・訴求型
• キーワード: モノトーン・黒帯見出し・下向き三角・左右交互の写真・POINT番号・チェックリスト
• 地の質感: フラットな単色の面だけで作る。影やグラデーションは使わない
• 形: 四角の帯と写真が基本。角丸はほとんど使わず、ピル型はサブボタン 1 つだけ
• 温度感: 地はクールなグレー。温かみは料理写真の暖色に任せる

Colors

• 地はライトグレーを全体に使い、白はCTAボックスとフォームの面だけに使う
• セクション見出しは全幅の墨黒の帯に白文字で置き、帯の下中央に同じ色の三角を付ける
• 有彩色は写真と必須バッジの赤だけ。UIには色を足さない
• CTAセクションは濃いグレーの地に白いボックスを置き、ボタンは黒にする
• グレーは3段階（黒・濃いグレー・中間グレー）の明るさで階層を作る

Typography

• 書体はゴシック 1 系統に揃え、太さの差で階層を付ける
• POINT番号だけはイタリックの欧文細字にする
• 見出しは太字、本文は細めで小さくし、強弱をはっきり付ける
• 黒帯見出しは中央揃え、POINT見出しは左揃えにする
• 見出しを強調するときは、文頭と文末に斜線「＼ ／」を置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。POINT は文章と写真の 2 分割を左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• POINTブロックは、文章と写真をそれぞれ約半幅にし、行ごとに左右を入れ替える
• 写真は画面端まで寄せ、文章側にだけ余白を取る
• 黒帯見出しの前後には 40〜60px の余白を空ける
• サポートのアイコンは SP で 3 列グリッドにする
• 会社概要は左に項目名、右に値を置く2列の表にする

Elevation & Depth

• 影は使わず、すべてフラットに作る
• 前後関係は面の明るさ（グレーの地→白いボックス）だけで表す

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。約 3:2 で、画面端に寄せる
• セクション境界: 全幅の黒帯と、帯の下中央に付ける下向き三角
• CTAボタンは角丸なしの長方形にする
• 外部リンクのサブボタンだけピル型の濃いグレーにする
• フォームの入力欄は下線だけ、または細い枠線にする

Components

• 黒帯見出し（section-band-heading）: 全幅の黒帯に白い太字を中央揃えで置き、帯の下中央に三角を付ける
• 斜線見出し（slash-heading）: 文頭と文末に細い斜線を置いた太字見出し
• チェックリスト（check-list）: 灰色のチェックマークと太字の短文を 9 行前後並べる
• POINT交互ブロック（point-block）: イタリックの番号、太字見出し、説明文を片側に、写真をもう片側に置く
• ピル型リンクボタン（pill-link）: 濃いグレーのピル型に白文字。公式サイトなど外部へのリンクに使う
• サポートアイコン（support-icon）: フラットなカラーイラストのアイコンと太字ラベルを 3 列で並べる
• 問い合わせCTAボックス（cta-box）: 濃いグレーの地に白いボックスを置き、見出し・黒ボタン2つ・電話番号の帯を入れる
• 黒の四角ボタン（button-primary）: 資料請求・問い合わせ・送信に使う、黒地に白文字の長方形ボタン
• 必須バッジ（required-badge）: フォーム項目名の横に付ける小さな赤い四角の白文字ラベル
• 問い合わせフォーム（contact-form）: 白い面の上に縦に並べるフォーム。項目名は太字、入力欄は下線、送信ボタンは黒で中央に置く

Do's and Don'ts

Do - 見出しは必ず黒帯と下向き三角のセットで区切る - POINTは番号を付け、写真の左右を交互に入れ替える - UIはグレー階調だけで作り、色は写真に任せる - 写真は明るく暖かい料理や店内のものにする - 本文は短い段落に分け、行間を広く取る

Don't - ボタンにビビッドな色を使わない - 影・グラデーション・大きな角丸のカードを使わない - 見出しに明朝体や手書き書体を混ぜない - 写真に枠や角丸を付けない - 赤は必須バッジ以外に使わない

Page Structure

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

1. ヘッダー（ブランドを示す）: 白地の左上にロゴだけを小さく置く
2. ファーストビュー（商材の世界観を伝える）: 全幅の料理写真の下に、黒帯で2行のキャッチを置く
3. 強みの一覧（選ばれる理由を一覧で見せる）: 斜線見出しの下に、チェック付きの短文を 9 つ並べる
4. 特長（各強みを詳しく説明する）: POINT 1〜9 を、写真と文章の左右交互で並べる
5. ブランド紹介（公式サイトへ誘導する）: 黒帯見出しの下に、ピル型のリンクボタンを 1 つ置く
6. サポート体制（加盟後の安心感を出す）: 黒帯見出しの下に、アイコンとラベルを 4 つグリッドで並べる
7. CTA（資料請求・問い合わせを促す）: 濃いグレーの地に白いボックスを置き、黒ボタン2つと電話番号の帯を入れる
8. 会社概要（運営元の信頼性を示す）: 線で区切った2列の表の下に地図を埋め込む
9. 問い合わせフォーム（問い合わせを受け付ける）: 白い面に縦並びの入力欄を置き、必須バッジを付け、黒の送信ボタンを中央に置く
10. プライバシーポリシー・フッター（法的な情報を載せる）: 小さな文字で条文を流し、最後にコピーライトを中央に置く

Imagery

• 自然光で撮った料理写真。木のトレイやテラスの席など、リゾート感のある背景にする
• 店内写真は広角で、窓からの明るさを活かす
• 調理工程の手元写真で、手作り感を伝える
• サポートの説明にはフラットなカラーイラストのアイコンを使う
• 写真は加工を控え、彩度は自然なままにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は全幅レイアウトのまま、POINTは画面を半分ずつ使って写真と文章を交互に並べる
• PC はヘッダーに電話番号と資料請求・問い合わせのボタンを置く
• PC はサポートアイコンを 4 列横並びにする
• PC の会社概要は、表と地図を左右に並べる
• フォームとCTAボックスは 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 行書くと起動時に読み込まれる。