DESIGN.md — 深紅×生成りのモダン中華飲食企業 LP（Deep Crimson Modern Chinese Dining Corporate LP）

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

Overview

• 業種: 飲食店・レストラン ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: 深紅・生成り・暗めの料理写真・細線ボタン・明朝見出し・余白多め
• 地の質感: 紅色の面にうっすら布や墨のような濃淡。生成り面には細い曲線のラインを薄く引く。
• 形: 写真は角丸小さめの長方形。ボタンは角なしの細線枠に丸い矢印アイコンが重なる形。
• 温度感: 温かく濃い。夜の灯りを思わせる暖色の暗さ。

Colors

• 紅系の面（#5A0908/#6E0B17）と生成りの面を交互に並べて、セクションの区切りを色で見せる。
• 紅面と写真の暗い面では文字を白にする。生成り面では文字も線も紅にする。
• 派手な強調色は使わない。ボタンも塗らず、細い線と文字色だけで見せる。
• 暗いメッセージ面は、料理のクローズアップ写真を全面に敷いて暗く落とす。
• クリーム色の塗りはフッターの戻るボタンだけに使う。

Typography

• 大きな日本語見出しは細めの明朝にし、2 行に分けて句読点で区切る。
• セクションラベルは英単語 1 語の欧文サンセリフで、日本語見出しの上に置く。
• 本文は太めのゴシックで、行間 2.0 前後とゆったり組む。
• 暗い写真の上では縦書きの英字ラベルを右端に置いてもよい。
• 料理名の上に小さな英名を添えて、日英の 2 段で見せる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。メニューだけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 20px。写真は本文と同じ幅にそろえる。
• セクションは縦に 70〜90px の余白をとり、色面の切り替えで区切る。
• 店舗紹介は写真→ラベル→店名→本文→地図→ボタン 2 つの順で縦に積む。
• メニューは細線で囲んだ 2 列のタイルにし、中央ぞろえにする。
• ニュースは上下を細線で区切った行リストにし、右端に「>」を付ける。

Elevation & Depth

• 影はほぼ使わない。平面と線で構成する。
• 暗い写真の上に文字を置いて奥行きを出す。
• FV 下部では写真タイルを段違いに重ねてリズムをつくる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸 4〜8px の長方形。料理の皿は真上から撮った円形の写真をタイルの中央に置く。
• セクション境界: 直線で色面を切り替える。斜めや波形は使わない。
• ボタンは角なしの細線長方形にし、右端に円形の矢印アイコンをはみ出させて重ねる。
• カード枠は 1px の半透明白線にし、角丸は小さくする。
• 生成り面には大きな円弧の細線を装飾として薄く引く。

Components

• 細線矢印ボタン（button-outline-arrow）: 細い線枠の長方形に短い文字を入れ、右端に円形の矢印を重ねる。どの面でも使う主導線。
• 英字セクションラベル（section-label）: 英単語の見出しの上に小さな点を置き、右肩に上付きの通し番号を付ける。
• 店舗紹介ブロック（brand-store-block）: 横長写真、店名、SNS リンク、本文、地図埋め込み、ボタン 2 つを縦に並べた一式。
• メニュータイル（menu-card）: 細線で囲んだ 2 列のタイル。皿の写真、英名、料理名、短い説明を中央ぞろえで並べる。
• お知らせ行（news-row）: 日付とタイトルを 2 段にし、上下を紅の細線で区切る。右端に「>」を付ける。
• 問い合わせバナー（contact-banner）: 暗い器の写真を敷いた角丸の横長バナー。白の見出しと小さな細線ボタンを載せる。
• トップへ戻るボタン（back-to-top）: フッターに置くクリーム色の角丸ボタン。紅の文字と上向き矢印を入れる。
• FV 下部の写真コラージュ（photo-collage）: 店内・調理・料理の写真を、大きさをばらして段違いに並べ、紅の面へつなぐ。

Do's and Don'ts

Do - 夜の灯りのような暖色で暗めの写真を大きく使う。 - 紅と生成りの面を交互に置き、配色の幅を最小限に保つ。 - 見出しは明朝、ラベルは欧文サンセリフ、本文はゴシックと使い分ける。 - ボタンは細線と矢印だけで控えめに見せる。 - 余白を広くとり、1 画面の情報を絞る。

Don't - ボタンをビビッドな色で塗りつぶさない。 - 明るく白飛びした料理写真を使わない。 - ポップな丸ゴシックや手書き文字を使わない。 - 派手な影・グラデーション・バッジを足さない。 - 紅以外の強い有彩色を差し色にしない。

Page Structure

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

1. ファーストビュー（企業の世界観とビジョンを一目で伝える）: 乾杯シーンの暗い写真を全面に敷く。白の明朝で 2 行のキャッチ、欧文の小さな説明文、括弧で囲んだ英字タグラインを載せる。
2. 写真コラージュ（店舗や人の活気を見せる）: 大きさの違う写真タイルを段違いに置き、下を深紅の面につなげる。中央にロゴを小さく置く。
3. 企業紹介（事業内容と姿勢を伝える）: 生成り地に、紅の英字ラベル、明朝 2 行の見出し、料理の手元写真、中央ぞろえの本文、細線ボタンを置く。
4. メッセージ（代表の想いを伝える）: 料理のクローズアップ写真を暗くして全面に敷く。白の明朝見出しと長めの本文を置き、右端に縦書きの英字ラベルを添える。
5. 店舗紹介（各ブランドの店舗を案内する）: 深紅地に番号付きの店舗ブロックを縦に並べる。各ブロックに写真、本文、地図、詳細ボタンと予約ボタンを入れる。
6. メニュー（看板料理を見せる）: 明るめの紅地に、中央ぞろえの短いリード文を置く。その下に皿の写真入りタイルを 2 列で並べる。
7. お知らせ（最新情報を伝える）: 生成り地に、英字見出し、右上の一覧リンク、線で区切った行リストを置く。
8. 問い合わせ（問い合わせ窓口へ誘導する）: 器の写真を敷いた角丸バナーにする。
9. 採用（仲間の募集）: スタッフの写真 2 枚の下に紅地のテキストと細線ボタンを置く。
10. フッター（サイト内を回遊させる）: 深紅地に大きなロゴ、2 段組のリンク、クリーム色の戻るボタン、コピーライトを置く。

Imagery

• 暗い店内で暖色の照明を当てた、夜の雰囲気の写真にする。
• 料理は皿ごと真上から撮り、背景を消して円形で見せる。
• 調理中の手元やシェフをシズル感のある構図で撮る。
• ネオンや器など中華らしいモチーフを、控えめな色調で入れる。
• 生成り面には大きな円弧の細線を装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は企業紹介を 3 列（見出し・写真・本文）に並べる。
• PC の店舗紹介は、左に写真、右に情報を置く 2 カラムにする。
• PC のメニューは 3 列グリッドにして中央に置く。
• PC のヘッダーはナビを横に並べ、FV に採用ボタンを紺色で置く。
• 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 行書くと起動時に読み込まれる。