--- version: alpha name: Torn Washi Rustic Izakaya LP description: 生成りの和紙テクスチャを地に、焦げ茶の木目と朱赤のボタンで締める焼鳥居酒屋の LP。破いた紙の縁、縦書きの太い筆文字、炭火の料理写真を重ねて、昭和の大衆酒場らしい温かさと賑わいを出している。 colors: background: '#E1DACE' background-alt: '#D9C3A4' primary: '#431404' cta: '#A11B16' on-cta: '#EAE5DC' accent-1: '#9A3A1E' accent-2: '#C9A24A' text: '#1C0904' text-body: '#24221E' dark-section: '#1A1B1A' on-dark: '#EAE5DC' line: '#8A7F70' secondary: '#A6957D' typography: display: fontFamily: Yuji Syuku fontSize: 64px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-md: fontFamily: Shippori Mincho fontSize: 36px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.04em headline-sm: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 64px 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.sm}' height: 40px brush-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px badge-speech: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 64px ribbon-tag: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 36px frame-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 300px info-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 300px info-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px fixed-bottom-bar: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 46px vertical-title-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 240px --- # DESIGN.md — 和紙と焦げ茶の赤提灯居酒屋 LP（Torn Washi Rustic Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、レトロ、力強い・インパクト、親しみ・手作り感 - **キーワード**: 和紙テクスチャ・破り紙の境界・縦書き筆文字・赤提灯・炭火の写真・焦げ茶の木枠 - **地の質感**: 生成りの和紙のザラつき、皺紙、木目の外枠、暗いセクションには黒い布地風の質感 - **形**: 破いた紙の不規則な縁、角が少し丸い長方形のボタン、円形に切り抜いた写真、二重線の額縁 - **温度感**: 暖色寄り。焼き色・朱赤・焦げ茶で、炭火の熱を感じる温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#E1DACE` | 和紙の地色 | 30% | 画素の主要色に補正 | | `background-alt` | `#D9C3A4` | 破り紙のクラフト色の重ね | 7% | 画素の実測 | | `primary` | `#431404` | 外枠の木目・情報パネルの焦げ茶 | 12% | 画素の実測 | | `cta` | `#A11B16` | 朱赤のボタン・下部固定バー | 4% | 画素の実測 | | `on-cta` | `#EAE5DC` | ボタン上の文字 | 1% | 画素の主要色に補正 | | `accent-1` | `#9A3A1E` | 見出し強調の赤茶・二重影 | 2% | 推定 | | `accent-2` | `#C9A24A` | 見出し強調の金・からし色 | 1% | 推定 | | `text` | `#1C0904` | 見出しの墨黒 | 3% | 画素の主要色に補正 | | `text-body` | `#24221E` | 本文 | 2% | 画素の主要色に補正 | | `dark-section` | `#1A1B1A` | フッター・暗い写真帯の黒 | 12% | 画素の実測 | | `on-dark` | `#EAE5DC` | 暗い面の上の文字 | 2% | 画素の主要色に補正 | | `line` | `#8A7F70` | 表の区切り線・額縁線 | 1% | 推定 | | `secondary` | `#A6957D` | 額縁の枠線・帯のくすんだベージュ | 2% | 画素の主要色に補正 | - 地は和紙色、ページ左右は焦げ茶の木目で額装する - 暗い写真帯や情報パネルで明暗のリズムを作る - 朱赤はボタンと固定バーだけに使う - 見出しの強調語 1〜2 文字を赤茶か金にし、ずらした影を付ける - 寒色は使わない。写真も暖色に寄せる - 暗い面の文字は生成り白にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ・店名 | 手書き・筆 | Yuji Syuku | 700 | 64px | 1.1 | 0.0em | | `headline-lg` | セクション大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 44px | 1.2 | 0.02em | | `headline-md` | 暗い帯の明朝見出し | 明朝 | Shippori Mincho | 800 | 36px | 1.3 | 0.04em | | `headline-sm` | カード見出し・墨帯のリード | 明朝 | Shippori Mincho | 700 | 22px | 1.4 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 2.0 | 0.05em | | `note` | 店舗情報の表・日付 | ゴシック | Noto Sans JP | 400 | 10px | 1.8 | 0.05em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 500 | 13px | 1.4 | 0.1em | | `accent` | 電話番号 | 欧文セリフ | Playfair Display | 700 | 20px | 1.2 | 0.02em | - 見出しは縦書きと横書きを混ぜ、大きさにメリハリを付ける - 強調語は 1.3 倍に大きくし、赤茶でずらした影を付ける - 見出しには白フチか二重影を付けて写真から浮かせる - 本文は小さめのゴシックで行間 2.0 - 墨帯の見出しは明朝体の白文字で、字間を広めにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と縦書き見出しを左右に重ねる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - ページ左右に約 6px の木目の枠を通す - 写真はセクション幅いっぱいに置き、見出しを重ねる - 本文ブロックは左右 24px の余白を取る - 店舗情報は 2 列の表にして、細い区切り線を引く - ボタンは幅約 60% で中央に置く - 画面下に TEL・予約・地図・MENU の 4 分割バーを固定する ## Elevation & Depth - 影は破り紙の縁の淡い影程度に抑える - 見出しの文字に付けるずらし影が主な立体表現 - ボタンは内側に細い二重線を入れ、ほぼフラットにする - 写真は紙を重ねて置くことで前後感を出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 全幅の長方形、円形の切り抜き、破り紙の不規則な縁 - **セクション境界**: 破いた和紙の縁、半紙のちぎれ、湾曲した紙の端 - ボタンは角丸 4px の長方形で、内側に細い枠線を入れる - 暗いカードは二重線の額縁で囲む - お知らせのサムネイルは円形にする - 墨の筆帯の上に白文字を乗せる ## Components - **朱赤ボタン**（`button-primary`）: 内側に白い細線の枠があり、右端に小さな三角アイコンを付ける - **墨の筆帯**（`brush-band`）: 斜めにかすれた黒い帯に白い明朝のリードを乗せる - **吹き出しバッジ**（`badge-speech`）: 赤茶の線で描いた丸い吹き出しに、短い強調語を入れる - **赤いリボン札**（`ribbon-tag`）: 斜めに置いた赤い札に白文字で、新しさを示す - **額縁カード**（`frame-card`）: 暗い写真の上に二重線の枠を重ねる。上部に波括弧の飾り線、明朝の見出し、本文、ボタンの順に並べる - **予約パネル**（`info-panel`）: 焦げ茶の角丸パネルに電話番号・予約ボタン・注意書きを入れる - **店舗情報の表**（`info-table`）: 項目名と内容の 2 列。行ごとに細い横線で区切る - **下部固定ナビ**（`fixed-bottom-bar`）: 左半分は赤（TEL・予約）、右半分は焦げ茶（地図・MENU）。アイコンの下に小さな文字を置く - **縦書きタイトル札**（`vertical-title-tag`）: 写真の上に、ベージュの縦長の札と太い縦書きのセクション名を重ねる ## Do's and Don'ts **Do** - 地の和紙テクスチャと左右の木目枠は全体で統一する - セクションの境界には破り紙の縁を使う - 料理写真は湯気や焼き色が見える寄りのアングルで撮る - 見出しの強調語には色と影を付ける - 暗い写真帯の文字は白にする - 赤提灯や暖簾のモチーフを添える **Don't** - フラットな白地や寒色を使わない - ピル型や大きな角丸のボタンにしない - 細いゴシックだけで見出しを作らない - 朱赤をボタン以外の広い面に使わない - 写真を青白く補正しない - 直線のきれいすぎる区切りを多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の雰囲気と名物を一目で伝える）: 上部に暖簾と提灯の店名。焼鳥の寄り写真に縦書きの筆文字キャッチを大きく重ね、下を破り紙にする 2. **店舗外観**（入りやすさを伝える）: 夜の外観写真を全幅で置き、手書き風の吹き出しで誘う 3. **コンセプト紹介**（どんな店かを伝える）: 墨の筆帯でリードを置き、大見出しの一語を丸囲みで強調。下に本文と酒器の写真 4. **名物メニュー**（主力料理を訴求する）: 炭火の写真の上に縦書きの短い見出し、皿写真、太い見出しと本文 5. **サブメニュー**（その他の人気料理を見せる）: 食材写真と吹き出しバッジ。縦書き見出しと料理写真を互い違いに置く。リボン札＋円形写真の新名物も載せ、メニューボタンへつなぐ 6. **宴会訴求**（コース・宴会の利用を促す）: 暗い料理写真の全幅帯に白い明朝の大見出しと本文、赤ボタン 7. **利用シーン**（一人飲み・昼飲みなどを提案する）: 額縁カードを 2 枚縦に並べ、端に縦書きの大文字を重ねる 8. **お知らせ**（最新情報を伝える）: 円形サムネイル、日付、タイトルを 2 件並べ、一覧ボタンを置く 9. **店舗情報**（予約と来店情報を伝える）: 外観写真に縦書きの札を重ねる。ロゴ、予約パネル、情報表、地図、地図ボタンの順 10. **フッター**（連絡先の再掲とシェア）: 黒い布地風の背景に提灯写真を薄く敷き、ロゴ・電話・予約・SNS・概要を載せる。下部ナビは固定 ## Imagery - 料理は炭火・湯気・焼き色が出る寄りの暖色写真にする - 外観は夜に撮り、提灯の灯りを主役にする - 暗いセクションには料理写真を落とし気味に敷く - 提灯・暖簾・酒器のカットを切り抜いて装飾に使う - 破いた和紙やクラフト紙を重ねて質感を出す - 手書きの線で描いた吹き出しを添える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に置いた 1 カラムを広げ、写真と見出しを左右 2 列に並べる - PC のヘッダーは店名・電話・予約ボタンを中央に置き、右側に縦書きのナビを並べる - PC では利用シーンのカードを 2 列にする - PC では予約パネルと注意書きを横並びにし、地図と情報表も横に並べる - SP は下部固定ナビ、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-3f5622a7`（元 LP の URL から採番） - **元 LP**: https://www.shojinsakaba.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（4/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。