--- version: alpha name: Warm Ivory and Dark Wood Teppanyaki Wine Bistro LP description: 生成りの地に焦げ茶の暗いセクションを挟み、炎・ワイン・ステンドグラスの暖色写真を余白たっぷりにずらして配置した飲食店サイト。欧文セリフの大見出しと明朝の縦書きコピーで上品にまとめ、黒いピル型ボタンと茶色の予約ボタンで来店へ導く。 colors: background: '#FEFEF2' dark-section: '#2A1D14' primary: '#874218' cta: '#874218' on-cta: '#FFFFF8' secondary: '#2C2422' text: '#2B211A' accent-1: '#B8925A' accent-2: '#C9A24E' line: '#CBC3B6' text-muted: '#88796C' on-dark: '#E0D8D0' accent-3: '#AFA173' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.01em accent: fontFamily: Playball fontSize: 24px fontWeight: 400 lineHeight: 1.2 headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.2em headline-sm: fontFamily: Oswald fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 0px md: 4px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 96px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-reserve: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-pill-dark: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px heading-serif-en: textColor: '{colors.text}' typography: '{typography.display}' height: 110px vertical-copy: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 200px news-list: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 180px photo-hero-overlay: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-2}' typography: '{typography.display}' height: 260px info-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 560px floor-map: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 260px --- # DESIGN.md — 生成り×焦げ茶の大人の鉄板焼き店 LP（Warm Ivory and Dark Wood Teppanyaki Wine Bistro LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 上品・高級、ラグジュアリー・ダーク、ナチュラル - **キーワード**: 炎と暖色光・生成りの余白・焦げ茶の夜・欧文セリフ・縦書き明朝・非対称レイアウト - **地の質感**: フラットな生成り地。暗部は写真の暗がりと焦げ茶ベタでつなぐ。端に細い菱形格子柄をアクセントで置く - **形**: 写真は角丸なしの矩形。ボタンだけ黒いピル型。細い罫線で枠をずらして重ねる - **温度感**: 暖かい。オレンジの炎と琥珀色の照明が主役 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FEFEF2` | ページの地色（生成り） | 39% | 画素の実測 | | `dark-section` | `#2A1D14` | 店内紹介・フッターの焦げ茶地 | 20% | 画素の実測 | | `primary` | `#874218` | ブランドの焼き色ブラウン（予約ボタン） | 3% | 画素の主要色に補正 | | `cta` | `#874218` | 予約ボタンの面 | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFF8` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `secondary` | `#2C2422` | 黒いピル型の誘導ボタン | 1% | 画素の実測 | | `text` | `#2B211A` | 見出し・本文の墨色 | 3% | 画素の主要色に補正 | | `accent-1` | `#B8925A` | 筆記体の欧文アクセント（金茶） | 0% | 推定 | | `accent-2` | `#C9A24E` | 写真上の欧文見出しのゴールド | 0% | 推定 | | `line` | `#CBC3B6` | 表の区切り線・装飾の細線 | 0% | 画素の主要色に補正 | | `text-muted` | `#88796C` | 日付・注記の灰茶 | 0% | 画素の主要色に補正 | | `on-dark` | `#E0D8D0` | 暗地上の白文字 | 0% | 画素の実測 | | `accent-3` | `#AFA173` | 端の菱形格子柄 | 0% | 画素の実測 | - 地は生成りを基本に、店内・フロアのセクションとフッターだけ焦げ茶に反転する - 暗部への切り替えはグラデーションでなめらかにつなぐ - 予約の主ボタンだけを焼き色ブラウンにし、他の誘導は黒ピルで差をつける - ゴールド・金茶は欧文の飾り文字と細い装飾にだけ使う - 暖色を写真から出すため、面の色数は増やさない - 純黒・純白ではなく、墨色と生成りでやわらかく見せる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 欧文の大見出し（2行・字下げをずらす） | 欧文セリフ | Playfair Display | 400 | 44px | 1.1 | -0.01em | | `accent` | 筆記体の欧文の添え文字 | 欧文スクリプト | Playball | 400 | 24px | 1.2 | 0.0em | | `headline-lg` | セクションの和文見出し（2行） | 明朝 | Shippori Mincho | 500 | 22px | 1.6 | 0.12em | | `headline-md` | 縦書きのキャッチコピー | 明朝 | Noto Serif JP | 500 | 20px | 1.8 | 0.2em | | `headline-sm` | 欧文の小見出し・ナビ | 欧文サンセリフ | Oswald | 500 | 14px | 1.4 | 0.04em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 2.0 | 0.08em | | `note` | 日付・店舗情報表・注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.0 | 0.08em | - 欧文セリフの大見出しは2行目を右へずらして動きを出す - 和文見出しは明朝で字間を広めにとる - 縦書きの明朝コピーを写真の横に置き、筆記体の欧文を斜めに添える - 本文は細めのゴシックで行間2.0 - ナビとラベルは欧文の詰まったサンセリフを大文字で - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真と文章の 2 カラムを左右交互にずらす - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 20px（375px 幅換算） - 写真と文章を左右交互に配置し、高さをずらして非対称にする - 写真は画面端まで出したり余白を残したりして、リズムを変える - セクション間は大きく空けて余白で高級感を出す - 店舗情報は細い罫線の2列表でまとめる - 暗いセクションでは写真を散らしてコラージュにする ## Elevation & Depth - 影は使わずフラットにする - 奥行きは写真の重なりと細い線の枠のずらしで出す - 写真の上に文字を載せるときは暗いオーバーレイを敷く ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。横長・縦長・正方形を混ぜる - **セクション境界**: 直線で切る。暗部へはグラデーションでつなぐ - 写真は常に角を立てる - ボタンだけを完全なピル型にする - 細い線の枠を写真から少しずらして重ねる - 画面端に細い菱形格子の帯を置く ## Components - **予約ボタン**（`button-reserve`）: 焼き色ブラウンのピル型。カレンダーアイコン付き - **黒ピルの誘導ボタン**（`button-pill-dark`）: 墨色のピル型。左に線画アイコン、右に矢印 - **欧文大見出し**（`heading-serif-en`）: 欧文セリフの2行見出しに筆記体の添え文字 - **縦書きコピー**（`vertical-copy`）: 明朝の縦書き2行を引用符で挟み、筆記体を斜めに添える - **お知らせ一覧**（`news-list`）: 上に縦線、欧文見出しと more ボタン。サムネイル・日付・タイトルを並べる - **写真帯の見出し**（`photo-hero-overlay`）: 暗い写真の帯にゴールドの欧文と白い和文を中央に置く - **店舗情報表**（`info-table`）: 項目と内容の2列。行ごとに細い罫線 - **線画フロアマップ**（`floor-map`）: 暗地に白い細線で席の配置図を描く ## Do's and Don'ts **Do** - 炎・ワイン・照明など暖色の写真を主役にする - 生成りの地と余白をたっぷりとる - 欧文セリフと明朝を組み合わせて大人の雰囲気にする - 写真をずらし重ねて非対称なリズムをつくる - 予約導線は茶色のピルボタンで統一する **Don't** - 写真に角丸や影をつけない - 鮮やかな原色や寒色の面を使わない - ポップな丸ゴシックを使わない - 文字を詰め込みすぎない - ボタン色を何色にも増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の雰囲気とライブ感を一目で伝える）: 左に縦のロゴとナビ、右に炎が上がる調理シーンの大きな写真 2. **お知らせ**（営業日などの更新を見せる）: 縦線と欧文見出し、サムネイル付きの横並びリスト 3. **コンセプト**（料理とワインの組み合わせを打ち出す）: 欧文セリフの大見出しに照明写真を重ね、炎の写真と明朝見出し・本文を並べる 4. **こだわり**（気軽さと本格さを伝える）: スタッフ写真、縦書きコピー、筆記体を非対称に配置し、本文と黒ピルボタンで料理ページへ 5. **ワイン訴求**（ワインの魅力を伝える）: 暗いボトル写真の帯に見出しを載せ、続けて料理写真と本文、ボタン 6. **シーン・店内**（記念日などの利用シーンを想像させる）: 焦げ茶地に写真を散らしたコラージュ、その後に店内のパノラマ写真と欧文ラベル 7. **フロア紹介**（席の配置と居心地を伝える）: 暗地に明朝見出しと本文、線画のフロアマップ。下は生成りへグラデーション 8. **店舗情報・予約**（アクセスと予約へ導く）: 地図、ロゴ、電話番号、予約ボタン、罫線の情報表、外観写真、地図ボタン 9. **フッター**（連絡先とナビをまとめる）: 焦げ茶地にロゴ、電話、予約ボタン、2列のナビ ## Imagery - 低い照明と暖色光で撮り、背景は暗く落とす - 鉄板の炎はアップで写し、オレンジを画面いっぱいにする - ワイングラスとボトルは逆光で透け感を出す - ステンドグラスのランプを色のアクセントにする - スタッフは笑顔の自然なカットを入れる - フロアマップは白い細線のミニマルな線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左固定ナビ＋右の大きな写真。SP ではナビをハンバーガーにまとめ、写真を全幅にする - 左右交互の2カラムは、SP では写真→文章の縦積みにする - 縦書きコピーは SP でも縦書きを残し、写真の横に小さく置く - 欧文大見出しは SP で 40〜44px に縮め、ずらしは保つ - 予約ボタンは 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-223427ad`（元 LP の URL から採番） - **元 LP**: https://www.takamiya-ikoh.com/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。