--- version: alpha name: Monochrome Smoke Japanese Grill Corporate LP description: 白い地に、炭火・煙・職人の写真を大きく置いた和モダンの飲食企業サイト。明朝体の縦書き見出しと字間の広い欧文見出し、細い線のボタンで静かな高級感を出す。フッターは墨色。 colors: background: '#FFFFFF' background-alt: '#F5F5F5' primary: '#262626' dark-section: '#262626' on-dark: '#FFFFFF' text-body: '#262626' text-muted: '#8A8A8A' line: '#262626' accent-1: '#B99176' surface: '#666666' secondary: '#3F2A27' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Cormorant Garamond fontSize: 30px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.12em headline-sm: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 2.1 letterSpacing: 0.1em label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em accent: fontFamily: Cormorant Garamond fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.2em note: fontFamily: Noto Serif JP fontSize: 8px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.08em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 24px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 30px button-outline-dark: textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 30px section-title-en: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 50px vertical-copy: textColor: '{colors.on-dark}' typography: '{typography.display}' height: 180px brand-card: textColor: '{colors.on-dark}' height: 125px photo-strip: backgroundColor: '{colors.background-alt}' height: 60px text-link-underline: textColor: '{colors.primary}' typography: '{typography.note}' height: 16px footer-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 400px --- # DESIGN.md — 白地と炭火写真の和モダン焼鳥店 LP（Monochrome Smoke Japanese Grill Corporate LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル - **キーワード**: 炭火・煙・余白・明朝縦書き・職人・墨色 - **地の質感**: 白地に薄い煙のにじみ、写真は暖色の焼き色と暗い影 - **形**: 角丸なしの矩形と細い線枠、丸いアイコンだけ円形 - **温度感**: 白と墨で冷静、写真の炭火で温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページ地 | 38% | 画素の実測 | | `background-alt` | `#F5F5F5` | 写真の裏に敷く淡い灰の面 | 6% | 画素の実測 | | `primary` | `#262626` | 墨色（見出し・ロゴ） | 9% | 画素の主要色に補正 | | `dark-section` | `#262626` | フッターの墨色の面 | 8% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗い面の上の文字 | 1% | 画素の実測 | | `text-body` | `#262626` | 本文 | 2% | 画素の主要色に補正 | | `text-muted` | `#8A8A8A` | 英字の小ラベル・注記 | 1% | 推定 | | `line` | `#262626` | ボタン枠・下線 | 1% | 画素の主要色に補正 | | `accent-1` | `#B99176` | 焼き色ブラウン（ボタン内の丸矢印） | 1% | 画素の主要色に補正 | | `surface` | `#666666` | 開店予定のプレースホルダ面 | 2% | 画素の実測 | | `secondary` | `#3F2A27` | 店舗紹介ブロックの土壁ブラウン | 5% | 画素の主要色に補正 | - 地は白。色をのせるのは写真の焼き色と影だけにする - 文字は墨色に統一し、強調にほかの色を使わない - ブラウンは丸矢印などの小さな装飾だけに使う - 暗い面は写真のブロックとフッターに限る - セクションの切り替えは白地と淡い灰の面を半幅でずらして示す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真に重ねる縦書きのコピー | 明朝 | Shippori Mincho | 400 | 44px | 1.2 | 0.1em | | `headline-lg` | 欧文のセクション見出し | 欧文セリフ | Cormorant Garamond | 400 | 30px | 1.2 | 0.12em | | `headline-sm` | 見出し下の和文小ラベル | 明朝 | Noto Serif JP | 400 | 10px | 1.5 | 0.1em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 400 | 11px | 2.1 | 0.1em | | `label-button` | 線枠ボタンの文字 | 明朝 | Noto Serif JP | 400 | 11px | 1.4 | 0.2em | | `accent` | 小さな英字ラベル（CONCEPT・SCROLL DOWNなど） | 欧文セリフ | Cormorant Garamond | 400 | 8px | 1.4 | 0.2em | | `note` | コピーライト・注記 | 明朝 | Noto Serif JP | 400 | 8px | 1.8 | 0.08em | - ゴシック体は使わず、すべて明朝体と欧文セリフにする - 大きなコピーは縦書きにして写真に重ねる - 欧文見出しは字間を広げ、下に和文の小ラベルを添える - 本文は小さめの文字で行間2以上・字間0.1em - 太字は使わず、文字の大きさと余白だけで強弱をつける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真の一覧だけ横スクロールの帯にする - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 90px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの間に大きな余白をとる - 写真は画面の端まで広げるか、左右に余白を残して中央に置く - ボタンは中央に置き、幅は約70% - 淡い灰の面を画面の半分の幅で敷き、写真とずらして重ねる - 本文は左揃えで、両端に約7%の余白 ## Elevation & Depth - 影はほぼ使わない - 奥行きは写真と面のずらし重ねで出す - 煙の写真を白地に溶け込ませて浮遊感を出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。横長かやや正方形に切る - **セクション境界**: 直線。写真の端で切り替えるか、半幅の灰面をずらして区切る - ボタンは1pxの線枠の矩形 - 丸くするのは矢印の円とSNS・電話アイコンだけ - 写真の境界に装飾線は付けない ## Components - **線枠ボタン**（`button-outline`）: 白地に1pxの墨色の線。文字を中央に置き、右端に小さな丸矢印を付ける - **暗い写真の上の線枠ボタン**（`button-outline-dark`）: 背景を透過し、白い線と白い欧文の文字で作る - **欧文見出し**（`section-title-en`）: 字間の広いセリフ体の大文字。下に和文の小ラベルを添える - **縦書きコピー**（`vertical-copy`）: 写真の左上や中央に重ねる明朝体の縦書き。白か墨色 - **店舗カード**（`brand-card`）: 店内写真の左にロゴを白抜きで置き、右下に白い丸の電話・予約・SNSアイコンを並べる - **写真の帯**（`photo-strip`）: 小さな料理・調理の写真を細い隙間で横に並べ、灰面の上に重ねる - **下線リンク**（`text-link-underline`）: 一覧へのリンク。右寄せにして長い下線を引く - **墨色フッター**（`footer-dark`）: 中央に縦組みロゴ、その下にコピーライト・SNSボタン・PAGE UP ## Do's and Don'ts **Do** - 余白を多めにとり、写真1枚を主役にする - 見出しは縦書きの明朝か、字間を広げた欧文セリフにする - 炭火・煙・職人の手元など、温度が伝わる写真を使う - ボタンは細い線枠の矩形にする - 色数は墨・白・灰と写真の色だけに抑える **Don't** - 塗りつぶしの派手なCTAボタンを置かない - ゴシック体や太字の見出しにしない - 角丸カードやドロップシャドウを使わない - 原色や蛍光色を使わない - 文字を詰めた情報量の多い訴求にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観を一目で伝える）: 中央に縦組みロゴを置き、職人の集合写真に縦書きコピーを重ねる。下に炭火の写真を全幅で置く 2. **お知らせ**（最新情報への入口）: 欧文見出しと和文の小ラベル、右寄せの下線リンク 3. **店舗ロゴの一覧**（運営する店舗を示す）: 煙のにじむ白地に店舗ロゴを横に4つ並べる 4. **コンセプト**（料理への姿勢を伝える）: 煙から料理写真へ溶けるグラデーションに縦書きの大コピー。写真の下部に横書きのコピーを白文字で重ねる。その下に本文と線枠ボタン 5. **写真ギャラリー**（店内と調理の雰囲気を見せる）: 半幅の灰面に小さな写真の帯を重ねる 6. **採用**（人材を募集する）: 職人の写真を全幅で置き、下端に大きな欧文見出しを白で重ねる。その下に本文と線枠ボタン 7. **店舗紹介**（主力店舗に誘導する）: 土壁の写真の上に白抜きのロゴ、短い文、白い線枠のボタン 8. **ブランド一覧**（各店舗への予約導線）: 店内写真のカードを縦に積み、予約アイコンを付ける。開店予定の店は灰の面で示す 9. **フッター**（会社情報と共有）: 墨色の面に縦組みロゴ、コピーライト、SNSボタン、PAGE UP ## Imagery - 炭火と立ち上る煙を、暗めの露出・暖色で接写する - 白衣の職人をカウンター越しに撮った自然光の写真 - 白地に溶ける煙の写真を背景の装飾に使う - 木・土壁・竹などの和素材の質感がわかる店内写真 - ロゴは筆書き風。写真の上には白抜きで置く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは左に縦長の料理写真、右にナビゲーションと縦組みロゴを置く2分割のファーストビュー - PCの本文は縦書きの段組みにし、ボタンも縦長にする - PCのブランド一覧は5つのカードを横に並べる - PCでは上部に横並びのナビゲーション（和文の下に小さな欧文）と電話・予約ボタンを置く - SPでは写真を全幅にし、写真の一覧は横スクロールの帯にする ## 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-0e60a057`（元 LP の URL から採番） - **元 LP**: https://www.hikoei.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。