--- version: alpha name: Dark Sizzle Seafood Gourmet LP description: 黒い地に鮮魚の大きな写真を敷き詰め、オレンジのグラデーション帯で見出しを載せる食品通販LP。前半は黒地でシズル感と食べ方の提案、後半は白地と和柄の青波、赤い縦書き見出しで信頼感を出す。 colors: primary: '#EA6825' secondary: '#F9B57B' dark-section: '#121212' background: '#FFFFFF' background-alt: '#F3F3F3' on-dark: '#FFFFFF' marker: '#F5D13A' accent-1: '#E0201A' accent-2: '#4AA2D6' accent-3: '#F7B500' tint-1: '#F6E4CF' text: '#333333' text-muted: '#6A9CC0' line: '#666666' primary-accessible: '#C65013' accent-3-accessible: '#966E00' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Noto Serif JP fontSize: 22px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-sm: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Playfair Display fontSize: 56px fontWeight: 700 lineHeight: 1.0 rounded: sm: 0px md: 4px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 40px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 40px recipe-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px round-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px review-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' height: 110px review-bubble: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 44px vertical-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 220px rating-block: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' height: 160px notice-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.note}' height: 50px --- # DESIGN.md — 黒地×橙帯のシズル感海産物通販LP（Dark Sizzle Seafood Gourmet LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 力強い・インパクト、情報量多め・訴求型、和風 - **キーワード**: シズル写真・黒背景・オレンジ帯・縦書き明朝・和柄の波・食べ方提案 - **地の質感**: 写真を全面に使う。黒地には墨のかすれと波しぶきのテクスチャを入れる。 - **形**: 角丸なしの横長帯と四角い写真枠が中心。円形のバッジでアクセントを付ける。 - **温度感**: 暖色の食材写真を黒地で引き締めた、温かく濃い印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA6825` | 見出し帯のオレンジ | 7% | 画素の主要色に補正 | | `secondary` | `#F9B57B` | 帯グラデの淡いオレンジ | 5% | 画素の主要色に補正 | | `dark-section` | `#121212` | 黒地セクション | 30% | 画素の実測 | | `background` | `#FFFFFF` | 白地セクション | 20% | 画素の実測 | | `background-alt` | `#F3F3F3` | 薄グレー地 | 10% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地上の白文字 | 2% | 画素の主要色に補正 | | `marker` | `#F5D13A` | 黒地本文の強調黄 | 0% | 推定 | | `accent-1` | `#E0201A` | 縦書き見出しの赤 | 2% | 推定 | | `accent-2` | `#4AA2D6` | 解凍案内の水色帯 | 3% | 推定 | | `accent-3` | `#F7B500` | 円形バッジの黄 | 0% | 推定 | | `tint-1` | `#F6E4CF` | 評価見出しのベージュ | 3% | 画素の主要色に補正 | | `text` | `#333333` | 白地の本文 | 2% | 推定 | | `text-muted` | `#6A9CC0` | 薄青の補足文字 | 0% | 推定 | | `line` | `#666666` | 見出し両脇の細線 | 0% | 推定 | | `primary-accessible` | `#C65013` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#966E00` | AA を満たす補正値（計算） | | 計算 | - 前半の訴求ゾーンは黒地。写真を主役にする。 - 見出しは橙→淡橙グラデの帯に白抜き文字で載せる。 - 黒地本文の強調は黄色文字だけにする。 - 調理法・保存などの説明は白／薄グレー地に切り替え、水色を補助色にする。 - ブランドのこだわりは白地に赤の縦書き帯を載せる。 - 評価エリアは金色の月桂樹とベージュでまとめる。 - `heading-band` は文字 `#FFFFFF` × 背景 `#EA6825` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C65013`、4.61:1）を使う。 - `recipe-label` は文字 `#FFFFFF` × 背景 `#EA6825` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C65013`、4.61:1）を使う。 - `round-badge` は文字 `#FFFFFF` × 背景 `#F7B500` のコントラスト比が 1.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#966E00`、4.64:1）を使う。 - `review-bubble` は文字 `#FFFFFF` × 背景 `#EA6825` のコントラスト比が 3.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C65013`、4.61:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの商品名・縦書きの大キャッチ | 明朝 | Shippori Mincho | 800 | 48px | 1.1 | 0.02em | | `headline-lg` | 橙帯の見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.3 | 0.03em | | `headline-md` | 赤帯の縦書き見出し | 明朝 | Noto Serif JP | 600 | 22px | 1.3 | 0.05em | | `headline-sm` | レシピ名のラベル | 明朝 | Noto Serif JP | 700 | 20px | 1.2 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `note` | 注釈・口コミ本文 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `accent` | 評価点の数字 | 欧文セリフ | Playfair Display | 700 | 56px | 1.0 | 0.0em | - 大見出しは明朝体で極太。金・白のグラデや影を付ける。 - 縦書きを多用して和の高級感を出す。 - 帯見出しは2行で段差をつけ、小さい前置き＋大きい本題の構成にする。 - 見出しの語尾には「！」を付け、斜体ぎみで勢いを出す。 - 本文は12px前後の小さめゴシックで短く改行する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真はほぼ全幅で使う。 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は全幅か左右どちらかに寄せ、反対側の余白に墨のテクスチャを見せる。 - 見出し帯は画面左端から食い込ませて配置する。 - レシピは写真＋左下か右下のラベルを交互に並べる。 - 口コミは白いカードを縦に並べ、右上に吹き出し見出しを重ねる。 - こだわりは写真＋本文を1セットにし、赤い縦書き帯を写真の右端に重ねる。 ## Elevation & Depth - 口コミカードには薄い影を付ける。 - 写真上の文字には黒いドロップシャドウを付けて読ませる。 - 基本はフラットにし、影は最小限にする。 ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。全幅か片側寄せの裁ち落とし。 - **セクション境界**: 直線で地色を切り替える。和柄の青波や墨のかすれで区切る。 - 見出し帯は四角で、右端をグラデで消す。 - バッジは円形か花形にする。 - 吹き出しは角丸大のオレンジにし、尾を付ける。 ## Components - **橙グラデ見出し帯**（`heading-band`）: 左寄せの横長帯に白抜き文字を載せる。2段で段違いに積む。 - **レシピ名ラベル**（`recipe-label`）: 写真の下角に置く橙帯ラベル。前置きの文言を黄色い円バッジに入れる。 - **円形バッジ**（`round-badge`）: 黄色の円か花形に、短い前置きや推奨ラベルを入れる。 - **口コミカード**（`review-card`）: 白いカードにアバター・星評価・本文を並べ、橙の吹き出しで要約を重ねる。 - **要約吹き出し**（`review-bubble`）: オレンジの角丸吹き出し。白い太字で感想を要約する。 - **赤縦書き見出し**（`vertical-tag`）: 写真の右端に重ねる赤い縦長帯。白い明朝で縦書きにする。 - **高評価ブロック**（`rating-block`）: 金色の月桂樹で囲んだ見出しと、大きな評価点数・星を並べる。 - **注意ボックス**（`notice-box`）: 白い箱に赤丸の！アイコンと赤字の注釈を入れる。 ## Do's and Don'ts **Do** - 食材の写真は大きく寄りで、照りと脂を強調する。 - 黒地と暖色写真のコントラストを保つ。 - 見出しは明朝＋橙帯で統一する。 - レシピ提案は同じ型で何度も繰り返す。 - 信頼訴求は白地＋赤縦書きで空気を変える。 **Don't** - パステルや寒色を主役にしない。 - 角丸のやわらかいカードを多用しない。 - 写真を小さいサムネイルにしない。 - 黒地の本文に強調色を何色も使わない。 - 見出しを細い書体で弱く見せない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の量とおいしさを一目で伝える）: 複数の料理写真をコラージュする。明朝の大きな商品名と量のバッジ、縦書きのキャッチを置く。 2. **高評価・口コミ**（社会的証明を示す）: 月桂樹と評価点数を置き、口コミカードと橙の吹き出しを3件並べる。 3. **産地のこだわり**（品質の背景を説明する）: 黒地に橙帯の見出し、白い本文、全幅の写真を組む。 4. **鮮度・製法**（鮮度の理由を伝える）: 墨の装飾線と橙帯の見出しを置き、本文の要点を黄色で強調する。 5. **おすすめ用途・栄養**（幅広い世代に使えることを伝える）: 写真を左に、本文を右に置き、家族の写真を添える。 6. **セット内容**（届く内容と量を示す）: 水色の見出しバーと斜めの冷凍リボンを付け、パック写真と注意ボックスを置く。 7. **食べ方提案**（使い道を広げる）: 料理写真を8点ほど繰り返す。黒地に墨テクスチャを敷き、橙のラベルを付ける。 8. **解凍方法**（おいしく食べる手順を案内する）: 水色の帯見出しを置く。推奨・非推奨を白い箱で対比させ、時計のアイコンを添える。 9. **締めのキャッチ**（購買意欲をもう一度高める）: 全幅の食材写真に白い縦書き明朝を重ねる。 10. **作り手のこだわり**（企業としての信頼を示す）: 市場の写真と和柄の青波を置き、線で挟んだ見出しの下に写真＋赤縦書き帯を4つ並べる。 ## Imagery - 暗いスレートや木の板に食材を置き、暖色の照明で艶を出す。 - 盛り付けた料理は真上から少し斜めの寄りで撮り、薬味の緑で彩りを添える。 - 黒地の余白には墨のかすれや波しぶきのテクスチャを敷く。 - 和柄の青波や月桂樹などの装飾を見出しに添える。 - 作り手や市場の実写で現場感を出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に750px前後の固定幅で配置し、左右は黒かグレーの地で埋める。 - 写真とテキストの左右配置は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-18ca1dae`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/f402231-koga/027-0012/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。