---
version: alpha
name: Deep Crimson Modern Chinese Dining Corporate LP
description: 深い紅色と生成りグレージュを交互に敷いた飲食企業サイト。暗く落とした料理・店内写真に、細い明朝の見出しと線だけのボタンを合わせ、大人っぽく上質なモダン中華の空気をつくる。
colors:
  primary: '#5A0908'
  secondary: '#6E050E'
  background: '#DAD6CA'
  dark-section: '#1C0D01'
  text: '#652024'
  on-dark: '#E7E6DC'
  line: '#720913'
  surface: '#FFFFEA'
  accent-1: '#C9A9A0'
  background-alt: '#DEDCCF'
typography:
  display:
    fontFamily: Shippori Mincho
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.02em
  headline-lg:
    fontFamily: Shippori Mincho
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
  headline-sm:
    fontFamily: Zen Kaku Gothic New
    fontSize: 17px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0.04em
  body-md:
    fontFamily: Zen Kaku Gothic New
    fontSize: 14px
    fontWeight: 700
    lineHeight: 2.0
    letterSpacing: 0.06em
  accent:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.02em
  label-button:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.04em
  note:
    fontFamily: Inter
    fontSize: 8px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 8px
  lg: 10px
  full: 999px
spacing:
  unit: 8px
  card: 20px
  section: 72px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  button-outline-arrow:
    textColor: '{colors.on-dark}'
    typography: '{typography.label-button}'
    height: 42px
  section-label:
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    height: 24px
  brand-store-block:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    height: 900px
  menu-card:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 300px
  news-row:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    height: 84px
  contact-banner:
    backgroundColor: '{colors.dark-section}'
    textColor: '{colors.on-dark}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.md}'
    height: 130px
  back-to-top:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    rounded: '{rounded.sm}'
    height: 60px
  photo-collage:
    backgroundColor: '{colors.primary}'
    rounded: '{rounded.sm}'
    height: 260px
---

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

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

## Overview

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

## Colors

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `primary` | `#5A0908` | ブランド面の深紅（店舗紹介・フッター） | 28% | 画素の実測 |
| `secondary` | `#6E050E` | メニュー・採用のやや明るい紅 | 16% | 画素の実測 |
| `background` | `#DAD6CA` | 生成りグレージュの地 | 20% | 画素の実測 |
| `dark-section` | `#1C0D01` | 写真背景のメッセージ・FV の黒茶 | 14% | 画素の実測 |
| `text` | `#652024` | 生成り地の見出し・本文の紅文字 | 2% | 画素の実測 |
| `on-dark` | `#E7E6DC` | 紅・暗面上の白文字 | 3% | 画素の主要色に補正 |
| `line` | `#720913` | ボタン枠・ニュース区切り線 | 0% | 画素の主要色に補正 |
| `surface` | `#FFFFEA` | トップへ戻るボタンのクリーム面 | 1% | 画素の実測 |
| `accent-1` | `#C9A9A0` | 生成り地の薄い装飾曲線 | 0% | 推定 |
| `background-alt` | `#DEDCCF` | ニュース・お知らせ面の明るい生成り | 6% | 画素の実測 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FV の大きなキャッチ | 明朝 | Shippori Mincho | 500 | 30px | 1.3 | 0.02em |
| `headline-lg` | セクションの主見出し（2 行） | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.02em |
| `headline-md` | 店舗名・セクション英字ラベル | 欧文サンセリフ | Inter | 400 | 22px | 1.3 | 0.0em |
| `headline-sm` | メニュー名 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.04em |
| `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 2.0 | 0.06em |
| `accent` | 小さな英字ラベル・料理の英名 | 欧文サンセリフ | Inter | 500 | 10px | 1.4 | 0.02em |
| `label-button` | 細線ボタンの文字 | 欧文サンセリフ | Inter | 400 | 10px | 1.0 | 0.04em |
| `note` | 住所・コピーライト | 欧文サンセリフ | Inter | 600 | 8px | 1.6 | 0.02em |

- 大きな日本語見出しは細めの明朝にし、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

```text
この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる
```

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。

## Provenance

- **ID**: `xd-2c7afc71`（元 LP の URL から採番）
- **元 LP**: https://k-innovation-inc.com/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（7/10 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。