--- version: alpha name: Kraft Paper Rustic Italian Osteria LP description: クラフト紙のような茶色の地に、焦茶と黒の写真ブロックを互い違いに重ねた飲食店 LP。欧文セリフの大見出しと明朝の和文で、本場の食堂らしい温かさと上品さを出す。民族柄の帯で縁取った白いリンクボタンと、ワインレッドの予約ボタンが特徴。 colors: primary: '#3D352D' background: '#BEA183' background-alt: '#BCC3C3' surface: '#FFFFFF' text: '#1B0C04' cta: '#8E1F2F' on-cta: '#F7F6F2' dark-section: '#33150A' on-dark: '#F7F6F2' secondary: '#1C110B' line: '#D8CDBB' accent-1: '#2E3A5A' tint-1: '#E1D1C1' typography: display: fontFamily: Cinzel fontSize: 36px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 28px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.15em headline-md: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.12em body-md: fontFamily: Noto Serif JP fontSize: 11px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.1em label-button: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.15em accent: fontFamily: Cinzel fontSize: 40px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.08em rounded: sm: 2px md: 4px lg: 40px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-link-band: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 82px button-reserve: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px button-pill: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px heading-latin: textColor: '{colors.text}' typography: '{typography.display}' height: 110px heading-watermark: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 60px faq-accordion: textColor: '{colors.text}' typography: '{typography.body-md}' height: 46px speech-bubble: backgroundColor: '{colors.text}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 80px news-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 120px info-dark-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 1400px --- # DESIGN.md — クラフト紙と焦茶の郷土イタリアン LP（Kraft Paper Rustic Italian Osteria LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ナチュラル、上品・高級、レトロ、親しみ・手作り感 - **キーワード**: クラフト紙・地産地消・郷土料理・ワイン・欧文セリフ・民族柄 - **地の質感**: ざらついた紙の質感と木目を地に敷く。地図の線画を薄く重ねる - **形**: 角のある四角い写真を左右交互にずらして重ねる。ボタンは直角の白い帯、小さな操作ボタンだけピル型 - **温度感**: 暖色。焼き色・木・ワインを思わせる茶系で統一する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3D352D` | ブランドの焦茶（店舗情報エリアの面） | 12% | 画素の実測 | | `background` | `#BEA183` | クラフト紙色の基本の地 | 30% | 画素の実測 | | `background-alt` | `#BCC3C3` | コンセプト部の淡い空色がかった地 | 8% | 画素の実測 | | `surface` | `#FFFFFF` | リンクボタン・お知らせ枠の白 | 4% | 画素の実測 | | `text` | `#1B0C04` | 見出し・本文の黒茶 | 3% | 画素の実測 | | `cta` | `#8E1F2F` | WEB予約ボタンのワインレッド | 0% | 画素の実測 | | `on-cta` | `#F7F6F2` | 予約ボタン上の文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#33150A` | 木目の濃い焦茶ブロック | 5% | 画素の実測 | | `on-dark` | `#F7F6F2` | 焦茶面の文字・地図道路 | 3% | 画素の主要色に補正 | | `secondary` | `#1C110B` | ピル型サブボタン・丸矢印の黒 | 1% | 画素の実測 | | `line` | `#D8CDBB` | 見出し下の細い区切り線 | 0% | 画素の主要色に補正 | | `accent-1` | `#2E3A5A` | 民族柄の帯（紺・橙） | 0% | 推定 | | `tint-1` | `#E1D1C1` | フッターの淡い生成り地 | 3% | 画素の実測 | - 地は常にクラフト紙色にし、白背景のセクションは作らない - 写真の背後に焦茶・木目のブロックをずらして置き、奥行きを出す - 店舗情報・アクセスは焦茶の面にまとめ、文字は生成りにする - ワインレッドは予約ボタンだけに使う - リンクボタンは白地＋黒文字＋民族柄の帯で統一する - 強い原色は写真の食材だけに任せ、UI は茶系の濃淡でまとめる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文大見出し | 欧文セリフ | Cinzel | 700 | 36px | 1.1 | 0.02em | | `headline-lg` | ファーストビュー・コンセプトの和文コピー | 明朝 | Shippori Mincho | 600 | 28px | 1.5 | 0.15em | | `headline-md` | 欧文見出し下の和文サブ見出し | 明朝 | Shippori Mincho | 600 | 19px | 1.4 | 0.12em | | `body-md` | 本文 | 明朝 | Noto Serif JP | 500 | 11px | 2.1 | 0.1em | | `label-button` | 白帯リンクボタンの文字 | 明朝 | Shippori Mincho | 600 | 18px | 1.4 | 0.15em | | `accent` | 縦書きの欧文ラベル・写真上の小さい英字 | 欧文セリフ | Cinzel | 400 | 40px | 1.0 | 0.05em | | `note` | 注釈・お知らせの日付・店舗情報 | 明朝 | Noto Serif JP | 500 | 10px | 1.8 | 0.08em | - 和文はすべて明朝にし、ゴシックは使わない - 欧文見出しは大文字の碑文風セリフにし、すぐ下に和文サブ見出しを付ける - 欧文見出しと和文サブ見出しは左揃えにし、下に細い線を引く - 本文は字間を広めにとり、小さめの文字で行間を 2 倍前後とる - コンセプトのコピーは中央揃え、または縦書きの 2 行で見せる - ラテン系の見出し語で各シーンを分ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右にずらして非対称に置く - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は 15px 前後にし、本文はさらに 20px 内側に下げる - 写真は画面端まで寄せるものと、片側に余白を残すものを交互に置く - 焦茶・木目の面を写真の裏から片側にはみ出させる - セクションの頭に短い縦線 2 本のインジケーターを置く - 店舗情報は項目名と値を縦に積むリストにする ## Elevation & Depth - 影はほぼ使わず、面の重なりで奥行きを出す - 写真の上に吹き出しや欧文ラベルを重ねて立体感を出す - 地図や白枠ボックスはフラットに置く ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 直角の長方形にする。料理の皿だけ円形の切り抜きを画面端からはみ出させる - **セクション境界**: 直線で区切る。面をずらして置き、段差のある境界にする - メインのリンクボタンは角丸なしの白帯にする - サブの小さいボタン（more・地図を開く）は黒のピル型にする - 丸い黒地に矢印のアイコンをボタンの右端に置く - 吹き出しは大きい角丸の半透明黒地にし、細い引き出し線を付ける ## Components - **民族柄帯付きリンクボタン**（`button-link-band`）: 白い長方形の上下を紺と橙の民族柄の帯で縁取る。中央に明朝の文字、右端に黒丸の矢印を置く - **WEB予約ボタン**（`button-reserve`）: ワインレッドの面に白文字。左にカレンダーのアイコンを付ける - **黒ピルのサブボタン**（`button-pill`）: 黒地に白の小さい文字。more や地図表示に使う - **欧文＋和文の見出し**（`heading-latin`）: 大きい欧文セリフの下に明朝の和文を置き、その下に細い区切り線を引く - **透かし欧文見出し**（`heading-watermark`）: 薄い大きな欧文を背後に敷き、その上に和文見出しを中央に重ねる - **FAQアコーディオン**（`faq-accordion`）: 上下を二重線で挟んだ行。左に Q と質問、右に下向きの矢印を置く - **店舗写真の吹き出し**（`speech-bubble`）: 半透明の黒い角丸の吹き出しに白の明朝 2 行を入れ、写真に細い線を引き出す - **お知らせ白枠**（`news-box`）: 白い面に日付とタイトルを 1 行ずつ並べ、日付の下だけ濃い線を引く - **店舗情報パネル**（`info-dark-panel`）: 焦茶の面に、ロゴ・電話番号・予約ボタン・店舗情報のリスト・手描き風の簡易地図を縦に並べる ## Do's and Don'ts **Do** - 地にクラフト紙の質感を必ず敷く - 写真と焦茶のブロックを左右交互にずらして重ねる - 見出しは欧文セリフ＋和文明朝の 2 段で組む - リンクボタンは民族柄帯の白ボタンに統一する - 料理・調理・乾杯・店内など、温かい光の写真を大きく使う - 地図の線画やモザイク画を薄く重ねて、土地の物語を出す **Don't** - 真っ白やグレーのフラットな地を使わない - ゴシック体や丸ゴシックを使わない - ビビッドな色のボタンを増やさない（赤は予約だけ） - 写真に角丸や影を付けない - 左右対称の整ったグリッドにしない - 派手なグラデーションやアイコンの多用は避ける ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（料理の迫力と店の世界観を一目で伝える）: 暗く寄った肉料理とハーブの写真を全面に敷く。中央に円形のロゴ、明朝 2 行のコピー、小さい欧文を置く 2. **コンセプト**（店の成り立ちと楽しみ方を伝える）: 淡い地に地図の線画を重ねる。大きな欧文の店名、明朝 2 行のコピー、中央揃えの本文を置き、下に皿の円形写真をはみ出させる 3. **地産地消のこだわり**（地元の食材へのこだわりを示す）: 食材の写真を 2 枚ずらして置き、背後に木目の帯を敷く。地域の地図線画に縦書きの見出しを重ね、横書きの本文を続ける 4. **調理・料理の想い**（料理の背景へ誘導する）: 白帯のリンクボタンを置き、炎や鍋の調理写真を焦茶の面と互い違いに並べる 5. **利用シーン導入**（楽しみ方の章に切り替える）: 薄くしたモザイク画の上に、縦書きの欧文を写真へまたがせて置く。続けて店内で食事する人の写真を全幅で見せる 6. **アラカルト**（夜の飲みの楽しみ方を伝える）: 欧文と和文の見出し、区切り線、本文、注釈、白帯ボタンの順に並べる 7. **コース**（宴会・貸切の利用を促す）: 乾杯写真を全幅で見せた後、同じ見出しの型で本文と白帯ボタンを置く 8. **ランチ**（昼の利用を促す）: ワインと前菜の写真を全幅で見せ、見出し・本文・白帯ボタンを続ける 9. **お知らせ**（最新情報を伝える）: 大きな欧文見出しを白枠に重ね、右上に黒ピルの more ボタンを置く。白枠に日付とタイトルを並べる 10. **よくある質問**（来店前の不安を解消する）: 透かし欧文の見出しの下に、二重線のアコーディオンを置く 11. **店舗情報・予約**（予約と来店につなげる）: 店の外観写真に吹き出しを重ねる。焦茶のパネルに、ロゴ・電話番号・赤い予約ボタン・情報リストを入れる 12. **アクセス・キャンセル規定**（道順と注意事項を示す）: 焦茶の地に白い道路の簡易地図、線で囲んだ中央揃えの規定を置く。その後に埋め込み地図と黒ピルのボタンを続ける 13. **フッター**（SNS と共有の導線を置く）: 古地図風のイラストを薄く敷く。ロゴ・SNS アイコン・共有ボタン・テキストリンク・コピーライトを中央に並べる ## Imagery - 料理は暗めの背景で寄って撮り、湯気や焼き目の質感を強調する - 調理の写真は炎や鍋の動きを入れ、温かい色温度で撮る - 人物は顔を主役にしない。手元・乾杯・談笑する後ろ姿で雰囲気を伝える - 地図の白い線画（国や地域の輪郭）を地に薄く重ねる - 南欧の民族画・モザイク画・古地図風のイラストを透かして装飾に使う - 木目のテクスチャ面を写真の背後の色面として使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は写真とテキストを左右 2 カラムに並べ、写真の左右を交互に入れ替える - PC のファーストビューは横長にし、上部に横並びのナビ、左下に電話番号と予約ボタンを置く - PC のコンセプトでは皿の円形写真を 3 枚横に並べる - 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-8e95a752`（元 LP の URL から採番） - **元 LP**: https://www.osteriabar-amano.com/ - **解析に使った画像**: 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/）からご連絡ください。