--- version: alpha name: Monochrome Ink Brush Izakaya LP description: 明るいグレー地と漆黒の面を交互に置く、和モダンなモノトーンの居酒屋 LP。筆文字ロゴと縦書きの明朝コピー、薄い雲の文様で和の空気を出す。料理と店内の暖色写真が黒地の上で強く見える。ボタンは黒のピル型でそろえる。 colors: background: '#F6F6F6' background-alt: '#E5E5E5' dark-section: '#0A090A' primary: '#010101' cta: '#010101' on-cta: '#F5F5F3' text: '#000000' text-body: '#333333' line: '#BDBDBD' surface: '#FEFEFE' on-dark: '#F6F6F6' tint-1: '#F6F6F6' accent-1: '#412E1B' typography: display: fontFamily: Yuji Syuku fontSize: 110px fontWeight: 700 lineHeight: 1.0 headline-lg: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Yuji Syuku fontSize: 30px fontWeight: 700 lineHeight: 1.1 body-md: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 2.4 letterSpacing: 0.12em accent: fontFamily: Playfair Display fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em label-button: fontFamily: Shippori Mincho fontSize: 17px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.3em note: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.1em rounded: sm: 4px md: 6px lg: 999px full: 999px spacing: unit: 8px card: 24px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px vertical-copy: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 900px menu-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 560px section-emblem-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 180px vertical-tab: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 230px info-list: backgroundColor: '{colors.background-alt}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 900px fixed-bottom-nav: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 92px --- # DESIGN.md — 墨色と生成りグレーの和モダン居酒屋 LP（Monochrome Ink Brush Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、上品・高級、シンプル・ミニマル、ラグジュアリー・ダーク - **キーワード**: 墨・筆文字・縦書き・雲文様・モノトーン・夜の灯り - **地の質感**: 明るいグレー地に、薄墨の雲文様と細かいノイズを重ねる。黒の面はわずかにざらついた質感にする。 - **形**: 写真は角丸の小さい矩形にする。ボタンはピル型。円形のマスクと八角形の紋章を装飾に使う。 - **温度感**: 背景は無彩色で冷たい。写真の電球色と焼き色で温かさを補う。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F6F6` | 基本の地色（明るいグレー） | 30% | 画素の実測 | | `background-alt` | `#E5E5E5` | おすすめ・店舗情報セクションの地色 | 25% | 画素の実測 | | `dark-section` | `#0A090A` | 黒の帯セクション・フッター | 25% | 画素の実測 | | `primary` | `#010101` | 墨黒（ロゴ・見出し・ボタン） | 5% | 画素の実測 | | `cta` | `#010101` | 主ボタンの面 | 2% | 画素の実測 | | `on-cta` | `#F5F5F3` | 黒ボタン上の文字 | 0% | 画素の実測 | | `text` | `#000000` | 見出しの文字 | 1% | 画素の実測 | | `text-body` | `#333333` | 本文の文字 | 2% | 推定 | | `line` | `#BDBDBD` | 本文下の罫線・区切り線 | 0% | 推定 | | `surface` | `#FEFEFE` | 白抜きのサブボタン・縦ラベル | 2% | 画素の実測 | | `on-dark` | `#F6F6F6` | 黒地の上の白文字 | 0% | 画素の主要色に補正 | | `tint-1` | `#F6F6F6` | 雲文様の薄墨 | 4% | 画素の実測 | | `accent-1` | `#412E1B` | 料理写真の焼き色・暖色 | 8% | 画素の主要色に補正 | - 地は明るいグレー2段階と漆黒の3色を交互に切り替える。 - 有彩色は写真だけにする。UI に色を足さない。 - 主ボタンは黒地に白文字。写真の上や黒帯の近くでは白地に黒文字の線ボタンにする。 - 黒の面の上は白文字と薄グレーの線画だけにする。 - 罫線は薄いグレーの1px で、本文の各行の下に引く。 - 地図はグレースケールにしてモノトーンにそろえる。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大コピーの主役の一字（筆文字） | 手書き・筆 | Yuji Syuku | 700 | 110px | 1.0 | 0.0em | | `headline-lg` | 縦書きコピー・セクション見出し | 明朝 | Shippori Mincho | 500 | 36px | 1.4 | 0.1em | | `headline-md` | 写真の上の見出し | 明朝 | Shippori Mincho | 500 | 32px | 1.3 | 0.15em | | `headline-sm` | 料理カードの縦書きの料理名 | 手書き・筆 | Yuji Syuku | 700 | 30px | 1.1 | 0.0em | | `body-md` | 紹介文・店舗情報 | 明朝 | Noto Serif JP | 400 | 10px | 2.4 | 0.12em | | `accent` | 欧文の添えコピー・電話番号 | 欧文セリフ | Playfair Display | 400 | 26px | 1.2 | 0.05em | | `label-button` | ボタンのラベル | 明朝 | Shippori Mincho | 500 | 17px | 1.0 | 0.3em | | `note` | 情報の項目名・注記・コピーライト | 明朝 | Noto Serif JP | 400 | 9px | 1.8 | 0.1em | - 文字はすべて明朝にする。ゴシックは使わない。 - 主役の一語だけを太い筆文字で極端に大きくし、ほかの文字は細い明朝で小さくする。 - メインコピーは縦書きで1文字ずつ積む。 - 本文は小さめにして字間を広く取る（0.1em 以上）。 - ボタンのラベルは字間を0.3em ほど広げる。 - 欧文の添えコピーはセリフ体のイタリックにせず、細めに組む。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。料理は横スクロールのカルーセル。 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 100px、基本単位 8px、カード内 24px（375px 幅換算） - 写真は左右5%の余白を残して置き、要所では画面いっぱいに広げる。 - 縦書きのコピーのまわりは上下に大きく空ける（150px 以上）。 - ボタンは幅85%前後で中央に置き、縦に並べるときは間隔を16px にする。 - 店舗情報は項目名に下線を付け、値を1字下げて並べる。 - 画面下に4分割の固定ナビを置く。 ## Elevation & Depth - 影は使わない。面の色の切り替えで階層を出す。 - 写真の上の文字は暗めのオーバーレイで読ませる。 - 固定ナビは黒地に白アイコンにし、細い縦線で区切る。 ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 矩形に小さい角丸を付ける。料理カードは縦長、ブランド部分は円形にマスクする。 - **セクション境界**: 直線で色面を切り替える。黒帯の中に大きな白い円を置いて区切りにする。 - ボタンはすべて完全なピル型にし、右端に小さな矢印を付ける。 - 装飾の紋章は八角形の枠にする。 - 縦書きのラベルは白い長方形のタブにして、写真の右上にかける。 ## Components - **黒ピルボタン**（`button-primary`）: 黒地に白い明朝のラベル、右端に矢印。予約やメニューへの導線に使う。 - **白ピル線ボタン**（`button-outline`）: 白地に黒の細い枠線と黒文字。写真の直下に縦に2つ並べる。 - **縦書きの大コピー**（`vertical-copy`）: 細い明朝を1字ずつ縦に積み、途中の主役の一字だけ巨大な筆文字にする。背景に雲文様を敷く。 - **黒地の料理カード**（`menu-card`）: 縦長の黒いカード。左上に筆文字で料理名を縦書きし、中央に料理写真を置く。横スクロールで次のカードを少し見せる。 - **紋章付きの見出し**（`section-emblem-title`）: 八角形の紋章アイコンの下に、明朝の大きい見出しを置く。 - **縦書きの白タブ**（`vertical-tab`）: 写真の右上に、白い縦長のタブを置いてセクション名を縦書きする。 - **店舗情報リスト**（`info-list`）: 項目名に下線を付け、値を字下げして並べる明朝の小さい文字の一覧。 - **下部の固定ナビ**（`fixed-bottom-nav`）: 黒地に白の線アイコンと欧文ラベルを4つ等分して並べる。 ## Do's and Don'ts **Do** - 地色はグレーと黒の交互だけで構成する。 - 主役の一語だけを筆文字で極端に大きくし、強弱を付ける。 - 本文は小さい明朝で、字間と行間を広く取る。 - 写真は夜の灯りや炭の焼き色が見える暖色のトーンにする。 - 雲文様は薄く、ページの背景として控えめに敷く。 **Don't** - UI に赤や金など有彩色のアクセントを足さない。 - ゴシック体や丸ゴシックを使わない。 - ボタンを角ばった形にしたり、影を付けたりしない。 - 本文を大きくして余白を詰めない。 - グラデーションを派手にかけない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店構えと屋号で世界観を一目で伝える）: 夕暮れの外観写真をほぼ全面に置き、白抜きのロゴを上部に重ねる。左端に縦書きの小さい説明文、下部に縦書きの「SCROLL」と縦線を入れる。 2. **ロゴの提示**（屋号を印象づける）: グレー地の中央に、黒の紋章と筆文字ロゴを大きく置く。 3. **コンセプトコピー**（店の楽しさを一言で伝える）: 雲文様の上に縦書きの明朝を置き、主役の一字だけ巨大な筆文字にする。 4. **店の紹介**（立地と空間の魅力を伝える）: スタッフの笑顔の写真にコピーを重ね、下に罫線付きの小さい明朝の本文を置く。 5. **おすすめ料理**（看板料理を見せる）: 紋章付きの見出しの下に黒い料理カードを横スクロールで並べ、短い説明と黒ピルボタンを付ける。 6. **ブランドの帯**（区切りとリズムを作る）: 黒地の中に白い円を置き、中に線画のイラストと欧文ロゴを入れる。 7. **宴会・コース**（団体利用へ誘導する）: 宴会の写真に縦書きの白タブ、欧文の添えコピー、明朝の見出しと白文字の本文を重ねる。下に白ピル線ボタンを2つ置く。 8. **雰囲気写真**（店内の質感を見せる）: 木札のメニューのアップ写真を全面に入れる。 9. **予約CTA**（電話とWEB予約へ導く）: 外観写真の下に、セリフ体の大きな電話番号と黒ピルの予約ボタンを置く。 10. **店舗情報**（基本情報を提供する）: 下線付きの項目名を並べたリストと、SNS へのリンク。 11. **アクセス**（所在地を示す）: グレースケールの地図を全幅で置き、下に黒ピルボタンを付ける。 12. **フッター**（締めとページ内の移動）: 黒地に紋章を薄く透かし、コピーライト・共有ボタン・トップへ戻るリンクを置く。下部に固定ナビ。 ## Imagery - 夕暮れや夜の時間帯に、灯りが入った木造の外観を撮る。 - 料理は黒背景の上でスポット光を当て、器の柄と焼き目を際立たせる。 - 人物は自然な笑顔の手持ちスナップにし、電球色で少し粒子感を残す。 - 木札や器のアップを浅い被写界深度で撮る。 - 装飾は薄墨の雲文様、細い線画、八角形の紋章にする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューの写真を全幅にし、右上にメニューの縦リストを置く。 - PC の本文は縦書きの段組みにし、各行の間に縦の罫線を引く。 - PC は見出しを左の縦書き、料理カードを右に3枚並べる横長の構成にする。 - PC の宴会セクションは写真を左右2枚に分け、ボタンを横に並べる。 - PC は左に写真を固定し、右の列に店舗情報を流す2カラムにする。 - 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-49d00a3b`（元 LP の URL から採番） - **元 LP**: https://www.tori-hada.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。