--- version: alpha name: Warm Orange Fried Bread Food EC LP description: 白地にオレンジと黄色を強調色に使った食品通販 LP。揚げパンのシズル写真を大きく切り抜いて配置し、オレンジの吹き出しや帯見出しでにぎやかに訴求する。購入導線はグレーのピル型カートボタンにまとめ、セット商品をグリッドで並べる。 colors: primary: '#FC850C' secondary: '#FBD000' accent-1: '#FB9B18' accent-2: '#854427' cta: '#5E5A58' on-cta: '#F0ECE9' background: '#FFFFFF' background-alt: '#F4F1EC' tint-1: '#FEF4EA' surface: '#FFFFFF' text: '#333333' text-muted: '#777777' line: '#EDEDEF' accent-3: '#DB2923' primary-accessible: '#A55402' typography: display: fontFamily: Montserrat fontSize: 26px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.15em headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 17px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' height: 44px circle-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px set-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 28px number-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 40px link-banner: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 90px review-bubble: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 100px accordion-spec: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' height: 44px --- # DESIGN.md — オレンジ×焼き色の冷凍惣菜パン通販 LP（Warm Orange Fried Bread Food EC LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: シズル感・オレンジ帯・切り抜き写真・吹き出し・受賞アピール・セット通販 - **地の質感**: 白地が基本。ベージュの紙色ボックスと白レンガ柄の背景で温かみを出す - **形**: 斜めに切った帯見出し、円形の吹き出し、ピル型ボタン、家型のセクション上端 - **温度感**: 暖色寄りでにぎやか。焼き色の茶とオレンジが食欲を誘う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FC850C` | 帯見出し・ブランドの主色オレンジ | 5% | 画素の主要色に補正 | | `secondary` | `#FBD000` | 吹き出しの影・強調の黄色 | 2% | 推定 | | `accent-1` | `#FB9B18` | 英字見出しの山吹色 | 0% | 画素の主要色に補正 | | `accent-2` | `#854427` | 焼き色の茶（写真・バナー枠） | 4% | 画素の主要色に補正 | | `cta` | `#5E5A58` | カート追加ボタン | 1% | 推定 | | `on-cta` | `#F0ECE9` | ボタン上の文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | 52% | 画素の実測 | | `background-alt` | `#F4F1EC` | 送料案内・グレー地 | 4% | 画素の実測 | | `tint-1` | `#FEF4EA` | ブランドストーリーの紙色ボックス | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 品質表示の見出し帯ベージュ | 5% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃グレー | 2% | 推定 | | `text-muted` | `#777777` | 注釈・補足文字 | 0% | 推定 | | `line` | `#EDEDEF` | ボックス・吹き出しの枠線 | 0% | 画素の主要色に補正 | | `accent-3` | `#DB2923` | パッケージ強調の赤 | 0% | 画素の実測 | | `primary-accessible` | `#A55402` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にして、写真の焼き色とオレンジが映えるようにする - セクション見出し帯・吹き出し・家型の帯はオレンジで塗り、文字は白にする - 吹き出しの後ろに黄色の影を重ねて、元気な印象を出す - 英字見出しは山吹色にし、和文の小見出しは濃グレーで下に添える - 購入ボタンはオレンジではなく濃グレーにして、商品写真の邪魔をしない - ストーリー・送料・品質表示はベージュ系の淡い地で区切る - `ribbon-heading` は文字 `#F0ECE9` × 背景 `#FC850C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A55402`、4.62:1）を使う。 - `circle-bubble` は文字 `#F0ECE9` × 背景 `#FC850C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A55402`、4.62:1）を使う。 - `set-badge` は文字 `#F0ECE9` × 背景 `#FC850C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A55402`、4.62:1）を使う。 - `number-circle` は文字 `#F0ECE9` × 背景 `#FC850C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A55402`、4.62:1）を使う。 - `link-banner` は文字 `#F0ECE9` × 背景 `#FC850C` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#A55402`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 英字のセクション見出し | 欧文サンセリフ | Montserrat | 600 | 26px | 1.3 | 0.15em | | `headline-lg` | 帯見出し・商品名 | ゴシック | Noto Sans JP | 700 | 20px | 1.4 | 0.08em | | `headline-md` | 英字見出し下の和文サブ見出し | ゴシック | Noto Sans JP | 500 | 16px | 1.5 | 0.05em | | `headline-sm` | 番号付きポイントの見出し（オレンジ） | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `body-md` | 本文・商品説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `accent` | 円形吹き出しの短いコピー | 丸ゴシック | M PLUS Rounded 1c | 500 | 17px | 1.4 | 0.05em | | `note` | 注釈・原材料表示 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.0em | | `label-button` | カートボタン・リンクボタン | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - セクション見出しは英字を大きく字間広めに置き、和文を小さく 2 段目に添える - 価格は太字で（税込）を小さく添える - 吹き出しコピーは 3 行以内の中央揃えにする - 本文は中央揃えを多用し、長文の箇条だけ左揃えにする - 原材料など法定表示は小さい注釈サイズで詰めて組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品グリッドは 2 列 - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 各セクションは英字見出し＋和文サブ見出しで始める - 商品紹介はパッケージ写真と説明帯を左右交互に配置する - ポイントは丸数字＋見出し＋写真＋本文を縦に積む - お客様の声は人物アイコンと吹き出しを交互にずらす - 商品一覧はカードを並べ、写真・内訳バッジ・価格・数量・ボタンの順にする ## Elevation & Depth - 吹き出しには影を付けず、黄色の面をずらして重ねる - リンクバナーには軽い落ち影（0 2px 4px 程度）を付ける - 受賞エンブレムと切り抜き写真には自然な落ち影を付ける - 商品カードは影なしの平面にする ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品と揚げパンは背景を抜いた切り抜き。店舗・記事の写真は角丸なしの矩形 - **セクション境界**: 基本は直線。食べ方セクションだけ三角屋根の家型で上端を切る - 帯見出しは片端を斜めやギザギザに切ったリボン型にする - 訴求コピーは円形の吹き出しにする - 数量セット表示は左側が丸いピル型ラベルにする - リンクバナーは角丸小で、色付きのヘッダー帯＋白い本文の 2 段にする ## Components - **カート追加ボタン**（`button-cart`）: カートアイコン付きの濃グレーのピル型ボタン - **一覧リンクボタン**（`button-outline`）: 白地にグレー枠のピル型サブボタン - **リボン帯見出し**（`ribbon-heading`）: 端を斜めに切ったオレンジ帯に白抜きの商品名 - **円形訴求吹き出し**（`circle-bubble`）: オレンジの円に白文字の短いコピー。黄色の面を斜め後ろに重ねる - **セット数バッジ**（`set-badge`）: 数字を大きくしたオレンジのピル型ラベル - **丸数字**（`number-circle`）: オレンジの円に白い数字。ポイント見出しの上に置く - **リンクバナー**（`link-banner`）: オレンジまたは茶色のヘッダー帯に矢印、下は白地にアイコンと説明 - **口コミ吹き出し**（`review-bubble`）: 白地に細いグレー枠の角丸吹き出し。黄色い丸の人物アイコンを添える - **品質表示アコーディオン**（`accordion-spec`）: ベージュの見出し帯、白い本文、下部に＋の開閉バー ## Do's and Don'ts **Do** - 揚げパンの断面を大きく見せ、具材のシズル感を主役にする - オレンジは帯・円・数字など面で使い、白抜き文字にする - 英字見出し＋和文サブ見出しのセットを全セクションで統一する - 受賞歴はエンブレムと商品写真を並べて年ごとに繰り返す - 購入導線は各セット商品のすぐ下に置く **Don't** - 寒色や暗い地のセクションを入れない - カートボタンをオレンジにして装飾と区別をなくさない - 写真を小さく四角く並べるだけにしない - 吹き出しのコピーを長文にしない - 明朝体を使って高級感寄りにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の魅力とブランドを一目で伝える）: 揚げパンの断面写真を全面に置き、手書き風ロゴ、オレンジの説明ボックス、受賞バッジを重ねる 2. **ページ内ナビ**（主要コンテンツへの移動）: 白地のボタンに下向き三角を付けて 4 つ並べる 3. **人気セット**（まず買いやすいセットを提示する）: セット数バッジ、パッケージ写真、内訳ラベル、価格、カートボタン 4. **コンセプト・特長**（食感の魅力を短く伝える）: 円形吹き出し 3 つを切り抜き写真の上に並べる 5. **商品紹介**（味のバリエーションを紹介する）: パッケージ写真とリボン帯見出し・説明文を左右交互に配置 6. **おいしさの秘密**（こだわりを根拠づける）: 丸数字＋オレンジ見出し＋写真＋本文を 3 つ 7. **ブランドストーリー**（誕生の経緯で共感を得る）: 紙色のボックスに帯見出し 2 本、周囲に食材の切り抜き写真を散らす 8. **外部リンクバナー**（SNS やインタビューへ誘導する）: 色付きヘッダー帯付きのバナーを縦に 2 つ並べる 9. **お客様の声**（購入者の満足を見せる）: レンガ柄の地に人物アイコンと吹き出しを互い違いに配置 10. **受賞歴**（第三者評価で信頼を得る）: 年ごとにエンブレム、オレンジのリボン見出し、商品写真を並べる 11. **商品ラインアップ**（全セットから選んで購入させる）: 商品カードのグリッドにバッジ・価格・数量・カートボタン 12. **送料・食べ方**（購入前の不安を解消する）: グレー地の送料計算図と、家型オレンジ地に電子レンジのイラストとポイント 13. **品質表示**（原材料・アレルギーを開示する）: 商品ごとのアコーディオン形式の表 14. **店舗情報・読み物・利用ガイド**（回遊と信頼を補う）: 店舗写真と住所、記事カード 3 枚、おすすめ商品、枠付きのガイドボタン ## Imagery - 揚げたてのパンを半分に割り、具材が見える断面を寄りで撮る - 食材（じゃがいも・にんじん・肉・スパイス）は背景を抜いて散らす - パッケージは正面から撮って切り抜き、パン写真を手前に重ねる - 人物は黄色い丸に入れた線画アイコンで表す - 電子レンジやカトラリーは白い線のシンプルなアイコンにする - 受賞はゴールドの月桂樹エンブレムで表現する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 約 800px 幅で組み、SP は幅 90% の 1 カラムにする - PC の商品グリッドは 3 列、SP は 2 列にする - 左右交互の商品紹介は、SP では写真の下に帯見出しを縦に積む - 円形吹き出し 3 つは、SP では小さくして横並びにするか 2 段にする - 口コミの互い違い配置は、SP では縦 1 列にする ## 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-68e77211`（元 LP の URL から採番） - **元 LP**: https://www.every-house.jp/currybread/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。