--- version: alpha name: Retro Greige Dining Bar LP description: ざらついたグレージュの紙地に、極太で丸い欧文ディスプレイ書体を黒で大きく置いた、レトロでポップなダイニングバーLP。暗めの夜の店内写真を角丸カードや円形、傾けたポラロイド風の切り抜きで並べる。赤の手書き風楕円ラベルとオレンジの予約ボタンを差し色にしている。 colors: background: '#CCC6B9' primary: '#110E0D' surface: '#E9E9E9' background-alt: '#B1A482' dark-section: '#222222' on-dark: '#DDDBD8' cta: '#FEA24E' on-cta: '#3D2B22' accent-1: '#C0302A' accent-2: '#8A9A84' marker: '#DAD4CA' text-body: '#3A3633' line: '#877F72' typography: display: fontFamily: Dela Gothic One fontSize: 56px fontWeight: 400 lineHeight: 0.95 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 36px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.04em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Playfair Display fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.06em label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 6px md: 10px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' height: 36px oval-label: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 40px scene-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 360px circle-plan: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 300px tilted-photo: backgroundColor: '{colors.on-dark}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 260px menu-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' rounded: '{rounded.md}' height: 200px fixed-footer-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px info-table: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px --- # DESIGN.md — グレージュ×極太黒文字のレトロ中華バーLP（Retro Greige Dining Bar LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: レトロ、力強い・インパクト、ポップ・元気、親しみ・手作り感 - **キーワード**: 紙のざらつき・極太欧文・夜の店内写真・傾けたスナップ写真・赤い楕円ラベル・点線の区切り - **地の質感**: グレージュの地に細かいノイズを重ねて、紙のような質感を出す - **形**: 角丸カード、円形の写真、傾けた白フチ写真、ピル型の赤い線ラベル、ずらした黒い影付きボタン - **温度感**: 暖かくくすんだ中間色に、黒と赤で締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#CCC6B9` | ページの地（ざらついたグレージュ） | 40% | 画素の実測 | | `primary` | `#110E0D` | 極太見出しと主要な文字（墨黒） | 6% | 画素の主要色に補正 | | `surface` | `#E9E9E9` | シーンカードと店舗情報の面 | 17% | 画素の実測 | | `background-alt` | `#B1A482` | ディナーセクションのオリーブ系の地 | 8% | 画素の実測 | | `dark-section` | `#222222` | フッターの黒い帯 | 5% | 画素の実測 | | `on-dark` | `#DDDBD8` | 黒い地の上の文字 | 1% | 画素の実測 | | `cta` | `#FEA24E` | 予約ボタン（オレンジ） | 1% | 画素の実測 | | `on-cta` | `#3D2B22` | 予約ボタンの文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#C0302A` | 楕円ラベルとハッシュ記号の赤 | 0% | 推定 | | `accent-2` | `#8A9A84` | 見出しのアンパサンドの緑灰 | 0% | 推定 | | `marker` | `#DAD4CA` | 小見出しの背後の帯 | 0% | 画素の実測 | | `text-body` | `#3A3633` | 本文の文字 | 2% | 推定 | | `line` | `#877F72` | 点線の区切りと表の罫線 | 0% | 画素の主要色に補正 | - 基本はノイズを入れたグレージュの地。情報のまとまりは明るいグレーの面に載せる - 見出しは墨黒の極太書体だけで出し、色は付けない - 赤は楕円ラベル、ハッシュ記号、ふりがなの吹き出しなど小さなアクセントだけに使う - オレンジは予約ボタンと固定フッターの予約・電話にだけ使う - 料理を見せるセクションはオリーブ寄りのくすんだ地に切り替えて変化を出す - フッターは黒にして、上側を大きな角丸で切り替える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字の大見出し（セクション名） | 装飾・ディスプレイ | Dela Gothic One | 400 | 56px | 0.95 | 0.02em | | `headline-lg` | ファーストビューとディナーの日本語の大見出し | ゴシック | Zen Kaku Gothic New | 900 | 36px | 1.3 | 0.02em | | `headline-md` | 円形カード内の白抜き見出し | ゴシック | Noto Sans JP | 500 | 22px | 1.5 | 0.04em | | `headline-sm` | ハッシュ記号付きのシーン小見出し | ゴシック | Noto Sans JP | 500 | 16px | 1.6 | 0.04em | | `body-md` | 本文と説明文 | ゴシック | Noto Sans JP | 400 | 11px | 1.9 | 0.08em | | `accent` | 縦書きの英文キャプションと電話番号 | 欧文セリフ | Playfair Display | 400 | 13px | 1.4 | 0.04em | | `note` | 注釈、日付、表のラベル | ゴシック | Noto Sans JP | 400 | 9px | 1.8 | 0.06em | | `label-button` | ボタンとリンクの文字 | ゴシック | Noto Sans JP | 500 | 11px | 1.4 | 0.08em | - セクション名は極太の丸い欧文で、画面幅いっぱいに大きく組む - 大見出しの直下に、赤い楕円の線で囲んだ日本語ラベルを添える - 大見出しの1語だけ緑灰の色に変えて遊びを入れる - 英文や日本語のキャプションは縦書きにし、写真の端や余白に置く - 本文は小さめにし、字間を広めにとって落ち着かせる - 白抜きの縁取り文字を使い、レトロな看板のような見出しにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。シーンカードは写真と文字を左右半分ずつ交互に置く - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの間は横いっぱいの点線で区切る - ファーストビューは大きな欧文、写真のコラージュ、縦書きの説明の順に重ねる - シーンカードは写真と文字の左右を1枚ごとに入れ替える - 料理の写真は傾けて重ね、はみ出させる - 店舗情報は罫線で区切った2列の表で見せる - 画面下に電話・予約・SNS・メニューの固定バーを置く ## Elevation & Depth - ボタンには右下にずらした黒い影（ぼかしなし）を付ける - 傾けたスナップ写真は白フチに薄い影を付ける - カードは影なしの平らな面にする - 料理の皿の写真は切り抜きにして、柔らかい落ち影を付ける ## Shapes - **角丸**: 小 6px ／ 中 10px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸の長方形、白フチの円形、白フチで傾けたスナップ写真、皿の切り抜き - **セクション境界**: 横いっぱいの点線。フッターの手前は大きな角丸で切り替える - ボタンは角丸なしの長方形で、ずらした影を付ける - ラベルは赤い線で描いた楕円や吹き出しにする - 円形カードの下部に白い矢印を置く - ロゴサムネイルは角丸の枠線で囲む ## Components - **予約ボタン**（`button-primary`）: オレンジの長方形に、カレンダーのアイコンと文字。黒い影をずらして付ける - **一覧・地図リンクボタン**（`button-outline`）: 地色の上に黒い枠線と黒い影。右端に細い矢印 - **赤い楕円ラベル**（`oval-label`）: 大見出しの下や円形カードの上に置く、赤い線の楕円と赤い文字 - **シーンカード**（`scene-card`）: 角丸のグレーの面を左右に分け、片方は写真、片方はハッシュ記号付きの見出しと説明。写真の上に英語の小ピルを置く - **円形プランカード**（`circle-plan`）: 白フチの円形に写真を入れ、暗いオーバーレイの上に白い見出しと矢印。赤い吹き出しで人数を示す - **傾けたスナップ写真**（`tilted-photo`）: 白フチの写真を回転させて重ね、白い枠線の縦書きキャプションを載せる - **価格ボックス**（`menu-box`）: 明るいグレーの角丸の面に、メニュー名、価格、緑の点付きの品目を2列で並べる - **固定フッターバー**（`fixed-footer-bar`）: 画面下に固定。左にオレンジの電話・予約、右にSNSアイコンと赤い楕円のメニュー - **店舗情報の表**（`info-table`）: 左に項目、右に内容。行ごとに細い罫線で区切る ## Do's and Don'ts **Do** - 地には必ず細かいノイズの質感を入れる - 極太の欧文見出しは、画面幅の8〜9割を占めるくらい大きくする - 写真は暖かい照明の夜の店内と料理を中心にする - 縦書きのキャプションや英文を余白に置いて、雑誌のような遊びを出す - ボタンは長方形で、ずらした影を付けた形にそろえる **Don't** - 鮮やかな原色の大きな面を使わない（赤とオレンジは小さく使う） - 細い書体だけで大見出しを組まない - ぼかしの強い柔らかい影を使わない - 写真をすべて同じ正方形に整列させない - 白一色の無地の地にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の世界観とコンセプトを一目で伝える）: ロゴを中央に、右上に縦書きの店舗説明。3行の極太欧文の下に、ふりがな吹き出し付きの日本語コピー。その下に店内と料理の写真を隙間なく並べたコラージュ 2. **店舗紹介**（立地と使い方を短く説明する）: 地の上に小さな本文を左揃えで置き、点線で区切る 3. **利用シーン**（宴会・女子会・学生・イベントなど用途を提案する）: 欧文の大見出しと赤い楕円ラベル、カクテルの切り抜き。左右を入れ替えた角丸カードを4枚並べる 4. **プラン選択**（貸切か少人数コースかへ誘導する）: 欧文の問いかけ見出しの下に円形の写真カードを2つ。人数は赤い吹き出しで示し、左右に点線と縦書きの英字を置く 5. **ディナー**（料理とカクテルの体験価値を訴求する）: オリーブ系の地に、縁取り文字と極太欧文。傾けた写真を重ね、縦書きのキャプションを添える 6. **ランチ**（昼の利用と価格を伝える）: 店内写真の上に白抜きの欧文と時間の帯。その下に皿の切り抜き写真、縦書きの見出し、価格ボックスと注釈 7. **お知らせ**（最新情報を見せる）: 左に縦向きの極太欧文、右にロゴサムネイルと日付のリスト、一覧ボタン 8. **店舗情報**（電話・予約・営業情報を伝える）: 流れる欧文の帯の下に、グレーの面。ロゴ、大きな電話番号、オレンジの予約ボタン、罫線の表 9. **地図**（アクセスを示す）: 地図の埋め込みとアウトラインボタン。下端を大きな角丸にする 10. **フッター**（シェア、著作権表記、ページ上部へのリンク）: 黒の地に白い文字と指アイコン。画面下に固定のアクションバー ## Imagery - 暖色の照明が当たる、にぎやかな夜の店内で乾杯する人物写真 - 蒸籠や点心を真上や斜め上から撮った、コントラスト高めの料理写真 - グラスや皿は切り抜きにして、傾けて配置する - 白フチのポラロイド風スナップ写真を回転させて重ねる - 手描き風の指差しアイコンや矢印などの線画を小さく添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではシーンカードを2列のグリッドにし、写真を上、文字を下にする - PCではプランの円形カード2つを横に並べる - PCでは上部に横並びのナビゲーションと予約ボタンを固定する - PCのランチは写真と文字を左右に並べる - 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-90c083a8`（元 LP の URL から採番） - **元 LP**: https://www.diningbar-joujou.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。