--- version: alpha name: Rustic Soy-Brown Braised Meat LP description: 濃い焦げ茶と和紙調ベージュの地を大きな曲線で切り替えるLP。照りのある肉料理の写真を大きく見せ、白い丸の吹き出しと臙脂色の太い丸ゴシックで食欲を誘う。説明はグレーの半透明パネルにまとめ、温かく素朴な和の通販の印象を作っている。 colors: primary: '#552613' background: '#DAD5CB' accent-1: '#7C2126' secondary: '#97262C' surface: '#DCDDDB' background-alt: '#DCDDDA' dark-section: '#5E5650' on-dark: '#EFEFED' text: '#4B3216' marker: '#F2E23A' text-muted: '#644C36' line: '#8E2A2A' typography: display: fontFamily: Yuji Syuku fontSize: 64px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 30px fontWeight: 800 lineHeight: 1.35 letterSpacing: 0.05em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 48px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em rounded: sm: 4px md: 6px lg: 9999px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-pill: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 36px catch-bubble: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 170px weight-badge: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px info-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 260px story-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 140px contents-frame: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 400px name-tag: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 30px --- # DESIGN.md — 焦げ茶×和紙ベージュの煮込み肉通販LP（Rustic Soy-Brown Braised Meat LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 和風、親しみ・手作り感、力強い・インパクト、ナチュラル - **キーワード**: 焦げ茶・和紙テクスチャ・大胆な曲線・照りのある肉写真・白丸吹き出し・臙脂の強調 - **地の質感**: ベージュ地に和紙や石のような細かいざらつき。焦げ茶の面はほぼ単色。 - **形**: 大きなS字カーブで地色を切り替える。見出しはピル型、パネルは角丸を小さく。 - **温度感**: 暖色寄り。醤油・焼き色を思わせる温かさ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#552613` | 地の焦げ茶 | 30% | 画素の実測 | | `background` | `#DAD5CB` | 和紙調ベージュ地 | 30% | 画素の実測 | | `accent-1` | `#7C2126` | 強調見出しの臙脂 | 2% | 画素の実測 | | `secondary` | `#97262C` | 内容表示の帯の赤 | 1% | 画素の実測 | | `surface` | `#DCDDDB` | 説明パネル（明るいグレー） | 8% | 画素の実測 | | `background-alt` | `#DCDDDA` | 見出しピル・吹き出しの白 | 4% | 画素の実測 | | `dark-section` | `#5E5650` | 濃いグレーの説明ボックス | 3% | 推定 | | `on-dark` | `#EFEFED` | 濃い地上の白文字 | 2% | 画素の主要色に補正 | | `text` | `#4B3216` | 見出し・本文の茶色文字 | 3% | 画素の実測 | | `marker` | `#F2E23A` | 重量表記の黄色 | 1% | 推定 | | `text-muted` | `#644C36` | 注釈のグレー茶 | 1% | 画素の主要色に補正 | | `line` | `#8E2A2A` | 内容枠・点線 | 0% | 推定 | - 地は焦げ茶とベージュを大きな曲線で交互に切り替える - 臙脂は吹き出しのキャッチと商品内容の帯だけに使う - 黄色は重量など数字を目立たせる所だけ - 説明は明るいグレーパネル、物語系は濃いグレーパネルで分ける - 文字は黒ではなく焦げ茶にする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名 | 手書き・筆 | Yuji Syuku | 700 | 64px | 1.1 | 0.02em | | `headline-lg` | 吹き出し内のキャッチ | 丸ゴシック | M PLUS Rounded 1c | 800 | 30px | 1.35 | 0.05em | | `headline-md` | ピル型セクション見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.3 | 0.08em | | `headline-sm` | ベージュ地のリード文 | 丸ゴシック | Zen Maru Gothic | 700 | 18px | 1.6 | 0.1em | | `body-md` | 手順・説明文 | ゴシック | Noto Sans JP | 500 | 14px | 1.6 | 0.03em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.03em | | `accent` | 重量の数字 | 欧文サンセリフ | Montserrat | 900 | 48px | 1.0 | -0.02em | - 見出しは字間を広めにして丸ゴシックで温かくする - 見出しの助詞だけ小さくして強弱を付ける - 数字は太い欧文を極太で、白い縁取りを付ける - 本文は中央揃えを基本に、手順は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 75% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は画面幅いっぱい、またははみ出して大きく置く - テキストパネルは左右に約12%の余白を取る - 吹き出しの円は写真の左側に重ねて置く - 見出しピルは中央にパネルより少し狭く置く ## Elevation & Depth - 影はほぼ使わず、平らに重ねる - パネルは半透明に近い色で地に溶け込ませる - 切り抜き料理写真にだけ軽い影をつける ## Shapes - **角丸**: 小 4px ／ 中 6px ／ 大 9999px。ボタンはピル型。 - **写真の切り抜き**: 皿ごと切り抜いて画面端からはみ出させる。一部は角丸なしの矩形 - **セクション境界**: 画面幅をまたぐ大きなS字カーブで地色を切り替える - 見出しはピル型の帯にする - 吹き出しは正円にする - パネルの角丸は4〜6pxに抑える ## Components - **ピル型見出し**（`heading-pill`）: 白いピル帯の中に焦げ茶の丸ゴシック。助詞だけ小さくする - **白丸吹き出し**（`catch-bubble`）: 直径約170pxの白い円の中に臙脂の太字を3行。両側に斜線の装飾 - **重量の丸バッジ**（`weight-badge`）: 臙脂の円に白い大きな数字と本数 - **説明パネル**（`info-panel`）: 明るいグレーの面に丸数字付きの手順と☆の注釈 - **濃色ストーリーボックス**（`story-box`）: 濃いグレーの面に白文字を中央揃え。強調語に傍点 - **商品内容の枠**（`contents-frame`）: 臙脂の細い枠と見出し帯。写真の下に商品名と重量を点線リーダーでつなぐ - **サブ名の白帯**（`name-tag`）: FVの商品名の下に置く白い角丸の帯 ## Do's and Don'ts **Do** - 料理写真は照りと断面がわかる大きさで見せる - 地色の切り替えは大きな曲線にする - 強調は臙脂と黄色の2色だけにする - ベージュ地には細かい紙のテクスチャを敷く **Don't** - 寒色や原色の青・緑を面に使わない - 細い明朝だけで見出しを組まない - 強い影やグラデのボタンで装飾しすぎない - 真っ白な無地の背景にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と量を一目で伝える）: 焦げ茶地に筆文字の商品名、臙脂の丸バッジ、切り抜いた皿の写真 2. **ボリューム訴求**（大きさを見せる）: ベージュ地に塊肉の写真を全幅で置き、黄色の重量表記を重ねる 3. **おいしさの訴求**（食べ飽きない味を伝える）: 白丸の吹き出しと縦書き風の短文、箸で持ち上げた肉の写真 4. **味の決め手**（タレのこだわり）: ピル見出しと白文字の短文、タレに浸った皿の写真 5. **歴史・こだわり**（受け継いだ味で信頼を作る）: 濃いグレーのボックスにストーリー、ベージュ地に太字のリード 6. **アレンジ提案**（使い道を広げる）: 吹き出しと料理写真を互い違いに縦に並べる 7. **召し上がり方**（調理手順の説明）: グレーのパネルに丸数字の手順と注釈、イラストの皿 8. **品質・配送**（鮮度と保存の安心）: パネルに説明、工場の写真、真空パックの商品を3つ並べる 9. **商品内容**（セット内容と重量の明示）: 臙脂の枠と帯の見出し、写真、点線リーダーの表記と注釈 ## Imagery - 照りのある肉料理を少し上から近くで撮る - 陶器や石目の和食器を使い、皿ごと切り抜く - パセリや卵黄など色の差し色を少し入れる - 食材をデフォルメした簡単なイラストを補助に置く - 商品パッケージは3本並べて量を見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは幅375〜480pxの中央カラムを固定し、左右に焦げ茶か紙テクスチャを敷く - 曲線の切り替えはカラム内で保つ - 文字サイズは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-e4781b55`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/f232092-hekinan/h166-001/?sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。