--- version: alpha name: Gray Concrete Script Izakaya LP description: 明るいグレーの地に、暗めのシズル写真と紺色のピルボタンを合わせた居酒屋向けの LP。手書きの筆記体英字を見出しに重ねたり、細い曲線を背景に流したりして、都会的でこなれた空気をつくる。写真は左右にずらして非対称に置く。見出しは字間を広く取った太めのゴシック。 colors: background: '#CDCDCD' primary: '#1C2661' cta: '#1C2661' on-cta: '#EFF0FE' text: '#000000' on-dark: '#FFFFFF' surface: '#FFFFFF' background-alt: '#B4B4B4' line: '#9C9C9C' dark-section: '#000000' accent-1: '#845F2D' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.2em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.2em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.15em accent: fontFamily: Mrs Saint Delafield fontSize: 64px fontWeight: 400 lineHeight: 1.0 body-md: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.08em label-button: fontFamily: Quicksand fontSize: 11px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em rounded: sm: 0px md: 0px lg: 999px full: 999px spacing: unit: 8px card: 20px section: 120px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px script-overlay: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 60px white-band-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px photo-link-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 44px info-table: textColor: '{colors.text}' typography: '{typography.note}' height: 50px logo-square: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 120px fixed-bottom-nav: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 38px --- # DESIGN.md — グレー地×紺と筆記体の大人居酒屋 LP（Gray Concrete Script Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: シンプル・ミニマル、上品・高級、クール・先進的 - **キーワード**: コンクリートグレー・紺のピル・筆記体英字・シズル写真・字間の広いゴシック・非対称レイアウト - **地の質感**: フラットなグレーの面。立体感は写真の暗いトーンと、背景を流れる細い曲線でつくる - **形**: 写真は角丸なしの矩形。ボタンだけが完全なピル型 - **温度感**: 背景は無彩色で冷たい。写真の暖色の照明が温度を加える ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#CDCDCD` | ページ全体の地 | 45% | 画素の実測 | | `primary` | `#1C2661` | ブランドの紺（ボタン・帯・ロゴ地） | 5% | 画素の実測 | | `cta` | `#1C2661` | 主 CTA ボタン | 2% | 画素の実測 | | `on-cta` | `#EFF0FE` | ボタン上の文字 | 0% | 画素の実測 | | `text` | `#000000` | 見出しと本文 | 3% | 画素の実測 | | `on-dark` | `#FFFFFF` | グレー地や写真上の白抜き見出し | 1% | 画素の実測 | | `surface` | `#FFFFFF` | 見出しの白い帯・フッターの地 | 10% | 画素の実測 | | `background-alt` | `#B4B4B4` | お知らせ欄の濃いグレー | 2% | 画素の実測 | | `line` | `#9C9C9C` | 表の区切り線・背景を流れる曲線 | 0% | 推定 | | `dark-section` | `#000000` | ファーストビュー両脇の黒 | 4% | 画素の実測 | | `accent-1` | `#845F2D` | 写真に入る木目・照明の暖色 | 5% | 画素の主要色に補正 | - 地は明るいグレー 1 色で通す。白はフッターと見出しの帯だけに使う - 色を持つのは紺だけ。ボタン、写真下の帯、ロゴ地に限定する - グレー地に置くリード見出しは白抜きにして、控えめな印象を保つ - 色数は写真の暖色に任せ、UI 側では足さない - 細い曲線はグレーより少し濃い線で、背景に溶け込ませる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しの大きな和文 | ゴシック | Zen Kaku Gothic New | 700 | 40px | 1.3 | 0.2em | | `headline-md` | 見出し上の小見出し・白抜きリード | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.2em | | `headline-sm` | 白帯の上に載せる項目見出し | ゴシック | Zen Kaku Gothic New | 900 | 26px | 1.3 | 0.15em | | `accent` | 見出しや写真に重ねる手書きの筆記体英字 | 欧文スクリプト | Mrs Saint Delafield | 400 | 64px | 1.0 | 0.0em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 10px | 2.0 | 0.08em | | `label-button` | ボタンの英字ラベル | 欧文サンセリフ | Quicksand | 600 | 11px | 1.0 | 0.05em | | `note` | 店舗情報の表・注記 | ゴシック | Noto Sans JP | 500 | 9px | 1.7 | 0.03em | - 和文の見出しは字間を 0.15〜0.2em と広めに取る - 筆記体英字は和文見出しの背後や写真の下端に、はみ出すように重ねる - 本文は小さめにし、行間を 2 前後と広く取る - 見出しには縦書きと横書きを組み合わせてよい - ボタンの英字は大文字か頭文字だけを大文字にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真を左右へずらして非対称に置く - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 120px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は画面端に接するように置き、左寄せと右寄せを交互にする - 本文ブロックは左右 20px の余白で左揃え（ドリンクの紹介は中央揃え） - セクションの間は 100px 以上空けてゆったり見せる - CTA ボタンはほぼ全幅のピル型 - 画面下に 4 分割の固定ナビを置く ## Elevation & Depth - 影は使わず、すべてフラットにする - 奥行きは写真の重なりと筆記体のはみ出しで出す ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。横長や正方形を画面端に寄せて置く - **セクション境界**: 区切りは直線のみ。背景には細い曲線を流す - 写真に角丸はつけない - ボタンだけを完全なピル型にする - 項目見出しは左端から伸びる白い帯に載せる ## Components - **紺のピルボタン**（`button-primary`）: 英字ラベルを左寄せにし、右端に細い矢印を置いたほぼ全幅のボタン - **筆記体の英字見出し**（`script-overlay`）: 和文見出しや写真の下端に重ねる、手書き風の白または黒の英字 - **白帯見出し**（`white-band-heading`）: 左端から伸びる白い帯に、黒の太字見出しを載せる - **写真の下の紺帯リンク**（`photo-link-band`）: 写真のすぐ下に紺の帯を敷き、白字のラベルと矢印を置く - **店舗情報の表**（`info-table`）: 項目名と内容を縦に積み、項目ごとに細い線で区切る - **紺の正方形ロゴ**（`logo-square`）: 紺の正方形に白の手書きロゴを入れ、その下に電話番号と CTA を続ける - **固定の下部ナビ**（`fixed-bottom-nav`）: 電話・Web 予約・初めての方向け・メニューの 4 分割。予約だけを紺にする ## Do's and Don'ts **Do** - グレーの地と紺の 2 色を軸にする - 暗めでシズル感のある写真を大きく使う - 筆記体の英字を見出しに重ねて抜け感を出す - 写真は左右交互にずらして配置する - 余白はたっぷり取る **Don't** - 明るい原色やグラデーションを使わない - 写真やボタン以外に角丸をつけない - 影や立体的な装飾を加えない - 本文を太く大きくしすぎない - 写真を均等なグリッドに並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の雰囲気を一瞬で伝える）: 両脇を黒にした縦長の写真に、白の手書きロゴを大きく重ねる 2. **コンセプト**（店名に込めた想いを伝える）: グレー地に白抜きの大見出しを置き、白帯見出し 2 つと本文を続ける 3. **料理紹介**（料理の魅力を伝える）: 筆記体英字を重ねた見出しの下に、料理写真 3 枚を互い違いに配置し、本文とメニューボタンを添える 4. **ドリンク紹介**（お酒の品揃えを伝える）: 全幅の瓶の写真に筆記体英字を重ね、中央揃えの本文とボタンを続ける 5. **空間・利用シーン**（居心地の良さを伝える）: 縦書きと横書きの見出しを組み合わせ、人物写真と小物の写真を重ねる 6. **誘導バナー**（過ごし方・席案内のページへ送る）: 全幅写真に筆記体英字を重ね、下に紺帯のリンクを置く 7. **外観**（来店のイメージを持たせる）: 店の外観を全幅写真で見せる 8. **予約 CTA**（電話や Web 予約へ導く）: 紺の正方形ロゴの下に電話番号と紺のピルボタンを置く 9. **店舗情報・地図**（基本情報を伝える）: 線で区切った情報表のあとに、地図と地図アプリへのボタンを置く 10. **お知らせ・フッター**（更新情報と補足を載せる）: 濃いグレーのお知らせ欄のあとに、白地のフッターと固定ナビを置く ## Imagery - 暖色の照明を活かしたローキーな写真で、背景は暗く落とす - 料理は木のテーブルの上を斜め上から撮り、浅い被写界深度で - 人物は横顔や手元など、自然な瞬間を切り取る - 背景には細いペンで描いたような曲線を大きく流す - ロゴや英字は手書きの筆記体で描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は左端に縦長のナビ列を固定し、ロゴと電話を縦に並べる - PC は写真とテキストを 2 カラムで千鳥に配置する - PC はボタンを短いピル型にする - PC は過ごし方と席案内の誘導バナーを横 2 分割で並べる - 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-c82ee4c9`（元 LP の URL から採番） - **元 LP**: https://www.yumekyu.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。