--- version: alpha name: Rustic Kraft Snack Food LP description: 濃い焦げ茶の地に金茶と生成りを重ねた、クラフト紙や木目の質感がある食品LP。太い丸ゴシック見出し、円形バッジ、吹き出し、味ごとに変わる色面で、香ばしさと健康感を一緒に伝える。 colors: primary: '#AA742B' dark-section: '#291C14' background: '#F4EDE3' background-alt: '#F5CD8B' surface: '#FEFEFE' text: '#342119' text-body: '#3D3836' secondary: '#61422F' accent-1: '#8B0504' accent-2: '#9A7A1E' accent-3: '#584133' on-dark: '#FFFFFF' marker: '#B79155' line: '#C7B69F' primary-accessible: '#9E6C28' typography: display: fontFamily: Zen Maru Gothic fontSize: 72px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 800 lineHeight: 1.25 letterSpacing: 0.03em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.05em accent: fontFamily: Klee One fontSize: 15px fontWeight: 600 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Dancing Script fontSize: 11px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' badge-circle-stat: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 110px flavor-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 95px benefit-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 100px label-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 44px checklist-board: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 380px staff-comment: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px memo-card: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 400px process-diagram: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 90px --- # DESIGN.md — 焦げ茶×金のクラフト感スナック食品LP（Rustic Kraft Snack Food LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 親しみ・手作り感、力強い・インパクト、ナチュラル、情報量多め・訴求型 - **キーワード**: 焦げ茶・金茶・クラフト紙・木目・シズル・円形バッジ - **地の質感**: 黒板・木目・クラフト紙・生成りの紙のテクスチャを背景に敷く。完全なフラットにはしない - **形**: 円形バッジ、吹き出し、角丸の白カード、斜めの帯ラベル - **温度感**: 暖色寄り。焼き色のような茶と金で、温かく香ばしい印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#AA742B` | ブランドの金茶（見出し強調・バッジ） | 8% | 画素の主要色に補正 | | `dark-section` | `#291C14` | 焦げ茶の暗色セクション地 | 20% | 画素の実測 | | `background` | `#F4EDE3` | 生成りの紙地 | 11% | 画素の実測 | | `background-alt` | `#F5CD8B` | 大豆色のベージュ地 | 8% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 白カード・吹き出し | 10% | 画素の実測 | | `text` | `#342119` | 見出しの濃茶文字 | 5% | 画素の主要色に補正 | | `text-body` | `#3D3836` | 本文の茶黒文字 | 3% | 画素の実測 | | `secondary` | `#61422F` | 濃い茶の帯・ラベル | 7% | 画素の主要色に補正 | | `accent-1` | `#8B0504` | 梅味の赤 | 4% | 画素の実測 | | `accent-2` | `#9A7A1E` | 醤油味のオリーブ金 | 5% | 推定 | | `accent-3` | `#584133` | 黒胡椒味のグレー茶 | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | 暗色地の白文字 | 2% | 画素の主要色に補正 | | `marker` | `#B79155` | 本文の強調文字（金茶） | 1% | 画素の主要色に補正 | | `line` | `#C7B69F` | 区切りの点線・枠 | 1% | 画素の主要色に補正 | | `primary-accessible` | `#9E6C28` | AA を満たす補正値（計算） | | 計算 | - 焦げ茶の暗い地と、生成り・ベージュの明るい地を交互に置く - 見出しは濃茶を基本にし、キーワードだけ金茶に色を変える - 味のバリエーションは赤・オリーブ金・グレー茶の色面で見分ける - 暗い地の本文は白、強調だけ金茶にする - 白は本文カードと吹き出しにだけ使う - 寒色は使わない - `badge-circle-stat` は文字 `#FFFFFF` × 背景 `#AA742B` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9E6C28`、4.54:1）を使う。 - `benefit-circle` は文字 `#FFFFFF` × 背景 `#AA742B` のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#9E6C28`、4.54:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 極太の大見出し（素材名など） | 丸ゴシック | Zen Maru Gothic | 900 | 72px | 1.1 | 0.02em | | `headline-lg` | セクションのキャッチ見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 40px | 1.25 | 0.03em | | `headline-md` | 中見出し・帯ラベル | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.4 | 0.05em | | `headline-sm` | チェックリスト・小見出し | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.5 | 0.04em | | `body-md` | 本文 | ゴシック | Zen Kaku Gothic New | 500 | 14px | 1.75 | 0.05em | | `accent` | メモ風の手書き本文 | 手書き・筆 | Klee One | 600 | 15px | 1.9 | 0.03em | | `note` | 英字の小飾り・注釈 | 欧文スクリプト | Dancing Script | 500 | 11px | 1.4 | 0.02em | - 見出しは太い丸ゴシックで、文字の大小を極端につける - 見出しのキーワードは金茶にし、助詞は濃茶のまま小さくする - 数値（たんぱく質量など）は整数を大きく、小数を小さく組む - 効果音的な言葉は縦書きや斜め置きの小さな手書き風にする - 本文は14px前後で、行間を広めに取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。味の紹介だけ写真と文章の 2 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - セクションは背景色か質感で全幅に切り替える - 味違いの選択肢は 3 列に並べ、丸ラベル・写真・パッケージを縦に積む - 利点は円形バッジ 3 個を横に並べる - 味紹介は左に商品、右に説明と円形の数値バッジ、下にスタッフの吹き出し - 写真は全幅で敷き、その上に縦書きの帯見出しを重ねる ## Elevation & Depth - 白カードには弱い影（0 4px 12px rgba(0,0,0,.15)）をつける - 商品パッケージの写真は切り抜いて、うっすら影を落とす - 円形バッジは影をつけず、白い縁取りの二重線にする ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 料理写真は全幅の角型か円形のお皿形。商品は切り抜き - **セクション境界**: 直線の切り替え。テクスチャ地の境目はまっすぐにする - 味ラベルは円形で、下に吹き出しの尻尾をつける - 帯見出しは角のある濃茶の帯にし、少し傾けることもある - メモカードは上辺にリング穴を描いたノート風にする ## Components - **円形の数値バッジ**（`badge-circle-stat`）: 金茶か白の円に二重線を入れ、栄養の数値を大きく入れる - **味ラベル吹き出し**（`flavor-bubble`）: 味ごとの色で塗った円に吹き出しの尻尾をつけ、白文字で味名を入れる - **利点の丸バッジ**（`benefit-circle`）: 金茶の円に白い太字で利点を書き、3 個並べる - **濃茶の帯見出し**（`label-band`）: 白文字を入れた濃茶の帯。中見出しや縦書きの訴求に使う - **クリップボード型チェックリスト**（`checklist-board`）: 木製クリップボードの上の白い紙に、金茶のチェック付きで対象者を並べる - **スタッフ一言の吹き出し**（`staff-comment`）: 左に人物イラスト、右に白い角丸の吹き出しで短い感想を書く - **ノート風メモカード**（`memo-card`）: 白い紙に罫線と手書き文字を入れる。上に丸い見出しタブ、強調は金茶 - **加工工程の図**（`process-diagram`）: 素材→加工→完成を矢印でつないだ横並びの図。最後は円形の結果バッジ ## Do's and Don'ts **Do** - 背景に木目・クラフト紙・素材の写真のテクスチャを敷く - 見出しの一部を金茶にしてリズムをつける - 食感を表す言葉を手書き風で写真のまわりに散らす - 数値は円形バッジで大きく見せる - 味ごとにテーマ色を決め、セクションの地に使う **Don't** - 青や緑などの寒色をメインに使わない - 細い明朝体で見出しを組まない - 背景を真っ白のフラットだけで続けない - 角丸の大きいピル型ボタンを多用しない - 文字の大きさを均一にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品のシズルと主な数値を一目で伝える）: 暗い木目の地に皿盛りの写真を大きく置く。白い斜め帯のキャッチ、金茶と白の極太見出し、左下に円形の数値バッジ 2. **バリエーション選択**（味の選択肢を見せる）: 暗い地に 3 列。色違いの円形吹き出し、中身の写真、パッケージを縦に並べる 3. **素材の価値**（原料の健康価値を伝える）: 素材写真の地に、ベージュの面と極太の大見出し、金茶の丸バッジ 3 個 4. **商品の提案**（手軽さを伝える）: 大きな丸ゴシックの見出しを括弧状の線で囲み、下にチップスを横一列に並べる 5. **おすすめの人**（対象者に当てはまると感じさせる）: クリップボード風の紙にチェックリストを置き、人物写真とビールの切り抜きを重ねる 6. **商品の説明**（仕組みを図で説明する）: 黒板の地に白文字の本文と金茶の強調。白い枠と金茶の面で、工程図を 2 段並べる 7. **こだわり**（形状と食感の差を伝える）: 生成り地に帯見出しと極太見出し。円形に切り抜いた手元写真、食感ワードを入れた濃茶のラベル 8. **味の紹介**（味ごとの特徴と数値を伝える）: 素材の写真を全幅で敷き、味の色の面の上に商品・説明・数値バッジ・スタッフの吹き出しを置く 9. **利用シーン**（食べる場面を想像させる）: 木のテーブルの写真を全幅で使い、縦書きの濃茶帯と白抜きの文字。家族の写真をグリッドで並べる 10. **国内生産**（安心感を伝える）: 工場の線画の灰色地に国旗アイコン付きの見出し、工程写真を 3×2 のグリッド、下に濃茶帯の注記 11. **豆知識メモ**（背景の価値を補う）: 木目の地にノート風の白カード。丸いタブ見出しと手書き文字、植物の線画 12. **保存の便利さ**（パッケージの利点を伝える）: 木目の地に白い大見出し。パッケージと円形の拡大写真、点線で囲んだ注記 13. **価格の理由**（安さの根拠を伝える）: 生成り地に白い角丸カード。左にアイコンとラベル、右に本文を置き、点線で区切る ## Imagery - 暖色の照明で、焼き色がわかる寄りの料理写真を撮る - 背景は濃い木のテーブルか白い陶器の皿 - 素材（大豆・梅・にんにく・胡椒）を画面いっぱいに敷き詰めたテクスチャ写真を使う - 人物は自然な笑顔の生活シーン。家族や運動する女性 - スタッフはシンプルな線のイラスト顔アイコンにする - 黒板・クラフト紙・ノート・線画の植物などの手作り感のある装飾を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像はないため、以下は推奨。PC はコンテンツ幅を約 1000px に収め、テクスチャ背景は全幅に広げる - 味の紹介は PC で左右の幅を広げ、写真と文章を 1:1 にする - 工程写真のグリッドは PC で 3 列のまま余白を広げる - 極太見出しは PC で 1.3 倍程度に留める ## 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-97c31c1b`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/oga15b/h000911/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。