--- version: alpha name: Retro Chinese Diner Izakaya LP description: 薄灰の紙質感の地に、朱赤と深い青磁緑の色面を交互に敷く、レトロ中華の大衆酒場風 LP。雷文枠・提灯・花紋の装飾と縦書き明朝の見出し、漢字2文字＋欧文サブの見出しで、昼・夜・宴会のシーン別にメニューを見せる。 colors: background: '#DEDEDE' primary: '#A51715' secondary: '#336667' on-primary: '#FFFFFF' text-body: '#222222' text: '#9A1514' cta: '#2C665A' on-cta: '#E7E7E6' dark-section: '#1A0A06' line: '#971F1F' accent-1: '#CD8D50' text-muted: '#555555' typography: display: fontFamily: Shippori Mincho fontSize: 56px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-lg: fontFamily: Yuji Syuku fontSize: 44px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.1em headline-md: fontFamily: Noto Serif JP fontSize: 28px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.08em accent: fontFamily: Rubik fontSize: 18px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.03em label-button: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' fixed-reserve-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 56px button-frame: textColor: '{colors.secondary}' typography: '{typography.label-button}' height: 36px section-kanji-title: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 160px white-band-copy: backgroundColor: '{colors.on-primary}' textColor: '{colors.text-body}' typography: '{typography.headline-md}' height: 40px question-banner: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 250px read-me-heading: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 180px news-block: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 340px floor-map: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.accent}' height: 300px --- # DESIGN.md — 朱赤×青磁緑のレトロ中華居酒屋 LP（Retro Chinese Diner Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: レトロ、和風、力強い・インパクト、情報量多め・訴求型 - **キーワード**: レトロ中華・雷文フレーム・提灯・縦書き明朝・色面ブロック・大衆酒場 - **地の質感**: うっすら紙の粒子が見える薄灰の地。色面はベタ塗りで、グラデーションは使わない。 - **形**: 四角い色面と細い線の枠が基本。角に雷文が付いたボタン枠、丸い印章風の漢字バッジ、提灯と花紋のイラストを使う。 - **温度感**: 朱赤で温かく、青磁緑で引き締める。全体はやや温かい。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#DEDEDE` | 紙質感の薄灰の地 | 38% | 画素の実測 | | `primary` | `#A51715` | 朱赤の色面・見出し・装飾 | 20% | 画素の実測 | | `secondary` | `#336667` | 青磁緑の色面・サブボタン・間取り図 | 9% | 画素の実測 | | `on-primary` | `#FFFFFF` | 赤や緑の面に乗せる白文字・白帯 | 3% | 画素の実測 | | `text-body` | `#222222` | 本文の黒文字 | 3% | 推定 | | `text` | `#9A1514` | 縦書き大見出しの朱赤文字 | 1% | 画素の実測 | | `cta` | `#2C665A` | 固定予約バーの緑ボタン | 1% | 画素の実測 | | `on-cta` | `#E7E7E6` | 予約ボタン上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#1A0A06` | 写真の暗部と帯の黒 | 6% | 推定 | | `line` | `#971F1F` | 細い枠線と雷文の線 | 1% | 画素の実測 | | `accent-1` | `#CD8D50` | 写真の蒸籠や照明に出る暖かい木の色 | 6% | 画素の主要色に補正 | | `text-muted` | `#555555` | 注釈やリード文の灰色文字 | 0% | 推定 | - 地は紙質感の薄灰にする。真っ白な背景にはしない。 - 朱赤の面と青磁緑の面を交互に置き、セクションごとにリズムを付ける。 - 朱赤の面と青磁緑の面には白文字だけを乗せる。キャッチは白い帯の上に黒明朝で置く。 - サブボタンは緑の細線枠と緑文字で、塗りつぶさない。 - フッターと固定バーは朱赤と緑で締める。 - 暖色の写真を色面に重ねて温度を足す。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きの大きなキャッチ | 明朝 | Shippori Mincho | 500 | 56px | 1.2 | 0.05em | | `headline-lg` | 漢字2文字のセクション名（筆風） | 手書き・筆 | Yuji Syuku | 700 | 44px | 1.1 | 0.1em | | `headline-md` | 色面上の問いかけ見出し・白帯のキャッチ | 明朝 | Noto Serif JP | 600 | 28px | 1.4 | 0.08em | | `accent` | 欧文サブラベル（NEWS / COURSE / LUNCH など） | 欧文サンセリフ | Rubik | 800 | 18px | 1.0 | 0.05em | | `body-md` | 本文と店舗情報 | 明朝 | Noto Serif JP | 600 | 11px | 1.9 | 0.03em | | `label-button` | 枠ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.4 | 0.05em | | `note` | 注釈とコピーライト | 明朝 | Noto Serif JP | 500 | 9px | 1.6 | 0.03em | - 見出しは縦書きの明朝を基本にする。 - セクション名は筆風の漢字2文字にし、太い斜体の欧文ラベルを小さく添える。 - 欧文ラベルは見出しの縦辺に沿わせて回転させてもよい。 - 本文は太めの明朝で小さめに組み、行間を広く取る。 - キャッチは白帯に1行ずつ分けて載せる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と色面をずらして重ねる。 - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 色面ブロックは画面端まで広げ、写真は色面から少しはみ出させて重ねる。 - 本文ブロックは左右に約36pxの余白を取る。 - セクション名の枠は細線で囲み、片側を開けたL字の枠にする。 - 店舗情報は見出し列と値の列の2列テーブルにし、罫線は付けない。 - 画面下にTEL・MAP・MENU付きの予約バーを常に固定する。 ## Elevation & Depth - 影は基本的に使わない。 - 写真の背後に、ずらした色面を置いて段差を作る。 - 固定予約バーだけは前面に置き、上端を色面で区切る。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形で切る。蒸籠は丸い形のまま切り抜いて画面端にはみ出させる。 - **セクション境界**: 直線で切り替える。区切りには赤白の細いストライプ線や雷文ラインを使う。 - 角丸は使わない。 - ボタンの四隅に雷文の飾りを付ける。 - 円形の印章風漢字バッジは、ファーストビューの四隅だけに使う。 ## Components - **固定予約バー**（`fixed-reserve-bar`）: 画面下に固定するバー。左に雷文枠付きの予約ボタン、右にTEL・MAPのアイコンとMENUを並べる。 - **雷文枠ボタン**（`button-frame`）: 四隅に雷文が付いた細線の枠と、花紋アイコンを添えた緑文字で作る。 - **漢字2文字の見出し**（`section-kanji-title`）: L字の細線枠に筆風の漢字2文字を入れ、縦か横に欧文ラベルを添える。 - **白帯キャッチ**（`white-band-copy`）: 写真や色面の上に白い帯を1行ずつずらして重ね、黒の明朝を載せる。 - **問いかけバナー**（`question-banner`）: 全幅の赤か緑の色面に、花紋・明朝の問いかけ・雷文ライン・下向き矢印を中央揃えで縦に並べる。 - **雷文額縁の見出し**（`read-me-heading`）: 雷文の額縁の上に蒸籠アイコンを載せ、赤い小さなラベルと明朝の見出しを入れる。上に筆記体の英字を添える。 - **お知らせブロック**（`news-block`）: 赤い面の中に、太い斜体の英字見出し・日付・白い「more」ボタンを置く。 - **フロアマップ**（`floor-map`）: 緑の線と塗りで描く平面図。席は丸で示し、太い斜体の欧文でラベルを付ける。 ## Do's and Don'ts **Do** - 装飾には提灯・花紋・雷文・蒸籠アイコンを繰り返し使う。 - 見出しは縦書きの明朝と筆風の漢字にする。 - 赤と緑の色面を交互に置く。 - 写真を色面からはみ出させてずらし、重ねて躍動感を出す。 - SPでは予約バーを常に固定する。 **Don't** - 角丸やピル型のボタンは使わない。 - パステル色やグラデーションは使わない。 - 丸ゴシックの可愛い書体は使わない。 - 真っ白でフラットな地にしない。 - 影の強いカードUIは使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（名物料理と店の世界観を一目で伝える）: 料理写真を雷文の細枠で囲む。四隅に印章風の漢字バッジ、上部中央にロゴアイコンを置く。 2. **お知らせ**（最新情報を知らせる）: 赤い色面に英字見出し・日付・白いボタンを置く。 3. **コンセプト**（店の魅力を情緒的に伝える）: 縦書きの大きな赤明朝のキャッチに雷文の縦ラインと提灯を添え、蒸籠の写真を左端からはみ出させる。その下に本文を置く。 4. **説明書見出し**（ここから詳細紹介が始まることを示す）: 雷文の額縁と蒸籠アイコンで作る見出しにする。 5. **夜メニュー**（看板料理を紹介する）: 緑と赤の色面に写真を重ね、漢字2文字の見出しと白帯キャッチを置く。下に本文と枠ボタンを並べる。 6. **宴会コース**（団体利用を促す）: 写真の下に赤い色面を置き、縦書きの白帯キャッチを重ねる。下に本文と枠ボタンを置く。 7. **ランチ・昼飲み**（昼の利用シーンを提案する）: 全幅の写真と、赤・緑の問いかけバナーを交互に置く。 8. **空間紹介**（店内の雰囲気と席を見せる）: 縦書きの見出しに提灯を添え、緑のフロアマップ、写真グリッド（大1枚＋小2枚）、本文の順に並べる。 9. **予約・店舗情報**（予約と来店に必要な情報を伝える）: ロゴ・電話番号・注意事項・外観写真・2列の情報テーブル・地図の順に並べる。 10. **フッター**（再度の予約導線と共有ボタンを置く）: 赤い面に白文字で電話番号・概要・SNSボタン・ロゴを置き、白い提灯のイラストを添える。 ## Imagery - 蒸籠料理を真上や斜め上から撮り、彩りの良い具材を密に並べる。 - 湯気や箸で持ち上げる瞬間を撮ってシズル感を出す。 - 店内はオレンジの照明が効いた暖色の写真にし、赤と緑のスツールを見せる。 - 提灯・花紋・雷文は朱赤の単色ベタのイラストで描く。 - 蒸籠は丸い形のまま切り抜き、画面端にはみ出させる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは左側に赤い縦長のナビパネルを置き、メニューリンクを縦に並べる。 - PCではキャッチ・本文・写真を2〜3カラムに並べ、色面と写真のずらし重ねをより大きく使う。 - PCでは2つの問いかけを1枚の写真の上に斜めの区切りで並べる。 - PCでは店舗情報を左にロゴと外観写真、右にテーブルの2カラムにする。 - SPの固定予約バーの代わりに、PCでは右上に縦書きの予約ボタンを固定する。 ## 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-79802169`（元 LP の URL から採番） - **元 LP**: https://www.jokiroman.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。