--- version: alpha name: Washi Beige and Dark Wood Izakaya LP description: 和紙のようなベージュ地と焦げ茶の木目調の帯を交互に置き、朱赤のボタンを差し色にした和風居酒屋の LP。明朝の大見出しと縦書きの短冊、写真の大きな裁ち落としで、落ち着いた大人の酒場らしさを出している。 colors: primary: '#4B3423' background: '#D9CDBD' background-alt: '#CABDAA' surface: '#F5F4F2' cta: '#B33C33' on-cta: '#F3F1EF' text: '#070706' text-body: '#483321' dark-section: '#020101' on-dark: '#FFFFFD' secondary: '#4B3423' line: '#492716' accent-1: '#C8402E' text-muted: '#877152' typography: display: fontFamily: Shippori Mincho fontSize: 38px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-lg: fontFamily: Shippori Mincho fontSize: 32px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em headline-md: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.06em headline-sm: fontFamily: Noto Serif JP fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em accent: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.15em label-button: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 70px 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}' height: 30px vertical-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 200px scene-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 175px boxed-kanji: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 60px photo-banner: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 170px framed-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 540px speech-callout: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 80px info-table: textColor: '{colors.text-body}' typography: '{typography.note}' height: 40px sticky-footer-nav: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 50px --- # DESIGN.md — 和紙ベージュ×焦茶の海鮮居酒屋 LP（Washi Beige and Dark Wood Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、上品・高級、ナチュラル、情報量多め・訴求型 - **キーワード**: 和紙・木目の焦茶・朱赤・明朝・縦書き・青海波 - **地の質感**: ベージュ地に和紙の繊維感と薄い青海波（扇の連続模様）・波紋の透かし。茶帯は粗い紙やすり調のザラつき - **形**: 基本は角丸なしの矩形。茶帯の上下は大きな円弧でえぐる。枠は太い焦茶の罫線 - **温度感**: 暖色寄り。照明の暖かいアンバーと生成り色 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4B3423` | 木目調の茶帯（ブランド地色） | 22% | 画素の実測 | | `background` | `#D9CDBD` | 和紙ベージュの基本地 | 35% | 画素の実測 | | `background-alt` | `#CABDAA` | 濃いめのグレージュ地（駐車場枠内・予約ボックス） | 10% | 画素の実測 | | `surface` | `#F5F4F2` | 白い和紙カード | 8% | 画素の実測 | | `cta` | `#B33C33` | 朱赤のボタン | 2% | 画素の実測 | | `on-cta` | `#F3F1EF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#070706` | 見出しの墨黒 | 2% | 画素の実測 | | `text-body` | `#483321` | 本文の濃茶グレー | 2% | 画素の主要色に補正 | | `dark-section` | `#020101` | 写真帯・黒背景 | 9% | 画素の実測 | | `on-dark` | `#FFFFFD` | 茶帯上の白文字 | 1% | 画素の実測 | | `secondary` | `#4B3423` | 縦書き短冊の茶色 | 1% | 画素の実測 | | `line` | `#492716` | 枠線・区切り線の焦茶 | 1% | 画素の主要色に補正 | | `accent-1` | `#C8402E` | ロゴ・地図の朱 | 0% | 推定 | | `text-muted` | `#877152` | 日付・注記の灰茶 | 0% | 画素の主要色に補正 | - 地はベージュ和紙と焦茶の木目帯を交互に置き、リズムを作る - 朱赤は CTA ボタンと小さな差し色だけに使う - 茶帯の上は白文字、ベージュ地の上は墨黒文字 - 写真は暖色の照明で、地色の茶系となじませる - 純白・純黒の広い面は使わず、生成りと焦茶にとどめる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ・大見出し | 明朝 | Shippori Mincho | 700 | 38px | 1.4 | 0.12em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 600 | 32px | 1.4 | 0.1em | | `headline-md` | カード見出し | 明朝 | Shippori Mincho | 600 | 26px | 1.4 | 0.06em | | `headline-sm` | 小見出し・リード | 明朝 | Noto Serif JP | 500 | 18px | 1.6 | 0.08em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 2.0 | 0.05em | | `accent` | 縦書きの短冊コピー・写真のラベル | 明朝 | Shippori Mincho | 600 | 24px | 1.3 | 0.15em | | `label-button` | ボタンの文字 | 明朝 | Noto Serif JP | 600 | 11px | 1.4 | 0.1em | | `note` | 日付・注記・店舗情報表 | ゴシック | Noto Sans JP | 400 | 9px | 1.8 | 0.04em | - 見出しはすべて明朝で、字間を広めにとる - 見出しの中の助詞（の・を・が・な）は 6〜7 割の大きさに下げ、名詞を大きくする - キーワード 1〜2 文字を白い角枠に入れて強調する - 縦書き短冊でキャッチを 2 行並べる - 本文は小さめのゴシックで、行間を 2.0 に広くとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 70px、基本単位 8px、カード内 20px（375px 幅換算） - 写真は左右に 15px ほど余白を残すか、全幅で裁ち落とす - 見出しは中央揃え。下に細い二重線か点線を引く - カードは縦に 3 枚、間を 20px 空けて積む - 茶帯セクションは上下を円弧で切り、ベージュ地とつなぐ - 店舗情報は 2 列の定義リスト。行は細線で区切る ## Elevation & Depth - 白和紙カードにうっすら影（0 2px 6px rgba(0,0,0,.12)） - ボタンは焦茶の 1px 枠で、影はなし - 写真ブロックは太い焦茶枠で縁取り、浮かせない ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。料理の写真は切り抜きにして地の上に置くことも - **セクション境界**: 茶帯の上下を大きな円弧でえぐる。ほかは直線で切り替える - 角丸は使わない - 写真ラベルには波括弧のような曲線の手書き線を添える - 枠は 4〜5px の焦茶の太罫線 ## Components - **朱赤の矩形ボタン**（`button-primary`）: 朱赤の面に焦茶の 1px 枠。明朝の白文字で、右端に » を付ける - **縦書き短冊**（`vertical-tag`）: 茶色の細長い短冊に白の明朝を縦書きにする。2 本を上下にずらして並べる - **利用シーンカード**（`scene-card`）: 白い和紙カード。中央に明朝の見出し、その下にゴシックの本文 - **角枠の強調文字**（`boxed-kanji`）: 見出しの中の 1 文字ずつを白い四角枠に入れる - **写真リンクバナー**（`photo-banner`）: 暗くした写真に焦茶の太枠。白の明朝の見出しと、丸の中に » のアイコン - **太枠の案内ボックス**（`framed-box`）: グレージュ地に焦茶の太枠。中に見出し、イラスト地図、吹き出しを入れる - **茶色の吹き出し**（`speech-callout`）: 焦茶の四角に三角のしっぽ。白の明朝で補足を書く - **店舗情報表**（`info-table`）: 左に項目名、右に内容。行の間を細線で区切る - **下部の固定ナビ**（`sticky-footer-nav`）: 焦茶の地。中央に朱赤の電話・予約アイコンボタン、左右に地図アイコンとメニューアイコン ## Do's and Don'ts **Do** - ベージュ和紙と焦茶帯を交互に置く - 見出しは明朝で、助詞を小さくする - 料理は暖色光で湯気やツヤが出るようにアップで撮る - CTA は朱赤の矩形に » を付けた形でそろえる - 地には青海波や波紋をごく薄く敷く **Don't** - 角丸やピル型のボタンを使わない - 青や緑などの寒色の面を入れない - ポップな丸ゴシックを使わない - 朱赤を広い面に使わない - 純白のフラットな背景にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（看板料理の写真で食欲と雰囲気を伝える）: 青海波の地に筆文字のロゴ。その下に料理のアップ写真を大きく置く 2. **コンセプト**（どんな店かを伝える）: 朱赤の帯のボタン、切り抜きの料理写真と縦書き短冊。明朝の大キャッチの一部を角枠で囲む 3. **店内紹介**（空間と概要を伝える）: 店内写真と小さめの本文を数段落 4. **利用シーン**（使い道を示す）: 明朝の見出しの下に二重線。白い和紙カードを 3 枚縦に積む 5. **名物・こだわり**（看板商品を訴求する）: 円弧で切った茶帯に、全幅の写真 2 枚と縦書きのラベル。点線で挟んだ大見出しと CTA 6. **コース案内**（宴会の需要を取り込む）: 料理を集めた写真の上に白い帯の見出し。続けて明朝の大見出し、CTA、写真バナー 7. **ドリンク**（酒の種類の豊富さを示す）: 暗い背景のボトル写真。茶帯の上に角枠の強調見出しと、ボトル画像付きの CTA 8. **駐車場案内**（アクセスの不安を減らす）: 太枠ボックスにイラスト地図、写真付きの吹き出し、地図リンク 9. **お知らせ**（更新情報を見せる）: サムネイルと日付のリスト、一覧ボタン 10. **店舗情報**（予約と基本情報）: 暗い写真の見出し帯。ロゴ、電話と予約のボックス、定義リストの表、カッコ形の枠の注意書き、地図 11. **フッター**（シェアと固定ナビ）: 茶帯にシェアボタンとコピーライト、下部に固定ナビ ## Imagery - 料理は暖色の照明でアップ、背景は暗く落とす - 刺身や鍋などは切り抜いてベージュ地に重ねる - 店内は夜の暖かいアンバー光で、少し暗く撮る - 酒瓶は黒背景に並べ、映り込みを生かす - 地図は茶系の線画イラストで描き、朱でルートを示す - 地紋は青海波・扇・波紋を薄く透かす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はメニューを縦書きにしてヘッダー右に並べ、電話と予約ボタンを置く - PC の FV は写真の横長全幅と、縦書きキャッチのコラージュ - PC の利用シーンカードは 3 列で、上下に少しずらして並べる - PC の名物セクションは大きな茶色の円の中に、写真 2 枚を左右に置く - 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-bd133b58`（元 LP の URL から採番） - **元 LP**: https://www.hebereke-utsunomiya.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。