--- version: alpha name: Kraft Paper Japanese Izakaya LP description: クラフト紙のような茶色の地に、明朝体の縦書き見出しと料理の大きな写真を重ねた和風居酒屋のLP。ボタンは焦げ茶の木目調、フッターは黒の革目調で、温かく落ち着いた夜の雰囲気を出している。 colors: background: '#CBA57A' background-alt: '#C29D74' primary: '#341401' cta: '#341401' on-cta: '#EBE8DE' dark-section: '#1A130B' on-dark: '#F8F4F0' text: '#060101' text-body: '#2A180B' text-muted: '#786B4C' line: '#634728' tint-1: '#CCA57A' accent-1: '#EBE8DE' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 16px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em label-button: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em accent: fontFamily: Cormorant Garamond fontSize: 20px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 20px section: 60px 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: 40px vertical-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 240px lined-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 110px photo-caption-overlay: textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 260px scene-tag: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px contact-block: textColor: '{colors.text}' typography: '{typography.accent}' height: 120px info-table: textColor: '{colors.text-body}' typography: '{typography.note}' height: 400px fixed-bottom-nav: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 44px --- # DESIGN.md — クラフト紙×焦げ茶の和風居酒屋 LP（Kraft Paper Japanese Izakaya LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感 - **キーワード**: クラフト紙・縦書き明朝・焦げ茶の木目・シズル写真・夜の居酒屋 - **地の質感**: 地は全面にクラフト紙の繊維テクスチャ。縦縞の和紙柄の帯と筆の円モチーフを薄く重ねる。フッターは黒い革・石のようなざらつき。 - **形**: 角丸はほぼ使わず四角。写真は矩形でずらして重ね、木札形の短冊タグを使う。 - **温度感**: 暖色寄りで、灯りのような温かみがある ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#CBA57A` | クラフト紙の地 | 45% | 画素の実測 | | `background-alt` | `#C29D74` | 明るめの紙帯セクション | 12% | 画素の実測 | | `primary` | `#341401` | 焦げ茶ボタン・ブランド色 | 3% | 画素の実測 | | `cta` | `#341401` | 木目調CTAボタン | 2% | 画素の実測 | | `on-cta` | `#EBE8DE` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#1A130B` | フッターの黒い革目地 | 12% | 画素の実測 | | `on-dark` | `#F8F4F0` | 暗い地の上の文字 | 0% | 画素の実測 | | `text` | `#060101` | 見出しの墨色 | 1% | 画素の実測 | | `text-body` | `#2A180B` | 本文の焦げ茶 | 2% | 画素の主要色に補正 | | `text-muted` | `#786B4C` | 日付などの補足 | 0% | 画素の主要色に補正 | | `line` | `#634728` | 見出しや表の区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#CCA57A` | 縦縞和紙柄の帯 | 4% | 画素の実測 | | `accent-1` | `#EBE8DE` | 写真の上の淡い白 | 1% | 画素の主要色に補正 | - 地はクラフト紙の茶色で、明暗違いの紙色を交互に置いてセクションを区切る - ボタンはすべて焦げ茶の木目調に白文字で、ほかの色は使わない - 文字は墨色か焦げ茶だけ。純粋な黒は見出しだけに使う - 地酒などを見せる写真セクションは暗い木の色で、白文字を重ねる - フッターと固定メニューは黒の革目調でページを締める - 彩度の高い色は料理写真にしか出さない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きの大見出し | 明朝 | Shippori Mincho | 500 | 40px | 1.2 | 0.1em | | `headline-lg` | セクション見出し | 明朝 | Shippori Mincho | 500 | 30px | 1.5 | 0.08em | | `headline-md` | 写真に重ねる縦書きの料理名 | 明朝 | Shippori Mincho | 600 | 24px | 1.2 | 0.05em | | `headline-sm` | 小見出し・連絡先ラベル | 明朝 | Noto Serif JP | 600 | 16px | 1.5 | 0.1em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 11px | 2.2 | 0.08em | | `note` | 店舗情報の表・注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.05em | | `label-button` | ボタンのラベル | 明朝 | Noto Serif JP | 700 | 12px | 1.4 | 0.12em | | `accent` | 電話番号・欧文ロゴ | 欧文セリフ | Cormorant Garamond | 500 | 20px | 1.3 | 0.08em | - 見出しは明朝体。重要な見出しは縦書きにし、横に細い縦線を添える - 本文は細いゴシックで、行間を2倍以上に広く取る - 見出しの一部の漢字を一回り大きくして強弱をつける - 写真の上に重ねる料理名は白の縦書き明朝にする - 電話番号は欧文セリフに受話器アイコンを付けて大きく見せる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と縦書き見出しを左右にずらして重ねる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 60px、基本単位 8px、カード内 20px（375px 幅換算） - 料理写真は画面幅いっぱいに置き、その下に本文ブロックを続ける - 縦書き見出しと写真は左右に分け、一部を重ねる - ボタンは中央に置き、幅は画面の約半分にする - 店舗情報は2列の表にし、行ごとに線で区切る - 紙色の違う帯でセクションの切り替わりを示す ## Elevation & Depth - 影はほとんど使わず、紙と写真の重なりで奥行きを出す - 皿の写真は切り抜きにし、うっすら影を落とす - 縦縞和紙柄のブロックを写真の背後にずらして置く ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角く切る。料理の皿だけは切り抜いて紙の地に直接置く - **セクション境界**: 直線で切り替え、紙色の帯や青海波の細い帯を境界に使う - ボタンは角丸なしの横長の長方形 - 利用シーンを書く短冊は木札のような縦長の形 - 細い横線を見出しの上下に引いて挟む - 筆で描いた円を背景に薄く敷く ## Components - **木目調CTAボタン**（`button-primary`）: 焦げ茶の木目の長方形に、白い明朝のラベルと右端の丸矢印アイコン - **縦書き見出し**（`vertical-heading`）: 大きな明朝の縦書きに細い縦線を添え、写真の横に重ねる - **上下線つき見出し**（`lined-heading`）: 2行の明朝見出しを、細い横線で上下から挟む - **写真上の料理名**（`photo-caption-overlay`）: 全幅のシズル写真の端に白い縦書き明朝を重ねる - **利用シーン短冊**（`scene-tag`）: 紙色の縦長の札に縦書きで利用シーンを書き、4〜5枚並べる - **電話番号ブロック**（`contact-block`）: 横線で挟んだ小さなラベルの下に、大きな電話番号とSNSアイコンを置く - **店舗情報テーブル**（`info-table`）: 左に項目名、右に内容を置く2列の表。行は線で区切る - **固定下部ナビ**（`fixed-bottom-nav`）: 木目調で3つに分けた固定バー（電話・地図・メニュー） ## Do's and Don'ts **Do** - 地は全面にクラフト紙のテクスチャを敷く - 見出しは明朝体にし、要所は縦書きにする - 料理写真は湯気・焼き目・油のつやなど、シズル感のあるものを大きく使う - ボタンは焦げ茶の木目調に統一する - 紙色の帯や和紙柄で、和の温かみを重ねる **Don't** - 白い地や彩度の高い色の面は使わない - ピル型や丸みの強いボタンにしない - ポップな丸ゴシックやイラストを使わない - 強いドロップシャドウやグラデーションのボタンにしない - 本文の行間を詰めない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（店の看板料理と雰囲気を一目で伝える）: 紙の地の中央に筆文字のロゴ。切り抜いた料理の皿を2枚ずらして重ね、左端に縦書きの短い説明を添える 2. **お知らせ**（最新情報を届ける）: 明朝の見出しの下に、サムネイル・日付・タイトルを横に並べる。一覧へのリンクには線を引く 3. **コンセプト**（店の楽しみ方を伝える）: 縦書きの大見出しと客席の写真を左右に重ね、その下に横書きの大見出しと本文を続ける 4. **こだわり**（看板料理3品の魅力を伝える）: 上下線つきの見出しのあと、全幅の写真に縦書きの料理名を重ね、本文と交互に並べる。最後にメニューへのボタン 5. **宴会コース**（団体での利用を促す）: 縦書きの見出しを料理写真に重ね、その下にボタンを置く 6. **空間の案内**（席の数や貸切に対応できることを伝える）: 店内の写真の背後に和紙柄をずらして敷き、見出し・本文・ボタンを続ける 7. **お酒の紹介**（地酒の品ぞろえを伝える）: 暗い木の色の背景に酒瓶と料理の写真を置き、白文字の見出しと本文、ボタンを重ねる 8. **利用シーン**（さまざまな使い方を提案する）: 散らばった写真の上に半透明の紙のパネルを置き、見出し・木札形の短冊・ボタンを並べる 9. **店舗情報**（予約と来店につなげる）: 外観写真に筆の刷毛跡と白い見出しを重ね、ロゴ・電話・SNS・情報テーブル・地図・地図ボタンを続ける 10. **フッター**（連絡先を再掲し、ページを締める）: 黒い革目調の地にロゴ・電話・簡易の店舗情報・コピーライト・シェアボタンを置き、下部ナビを固定する ## Imagery - 料理は暗めの背景の上で、温かい色の照明を使い、湯気・焼き目・油のつやを近くから撮る - 陶器の皿や笹の葉など、和の器を真上か斜め上から撮り、切り抜いて紙の地に置く - 店内と客席は電球色の灯りで、自然に楽しむ人物を写す - クラフト紙・縦縞の和紙・筆の円・刷毛跡を装飾に使う - 外観は夜の灯りを生かして撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは写真と縦書きテキストを左右2カラムで重ね、雑誌のようなレイアウトにする - PCではヘッダー右側に縦書きのナビと電話番号を置く - PCのこだわりセクションでは、全幅の写真の上に縦書きの本文を直接重ねる - PCの店舗情報は、左に地図と写真、右に情報テーブルの2カラムにする - 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-e115622f`（元 LP の URL から採番） - **元 LP**: https://www.kushi-nakanaka.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。