--- version: alpha name: Dark Slate Seafood Powder Supplement LP description: 産地の海と素材の写真を大きく見せ、縦書きの明朝コピーと黒い石板の背景で高級感を出す健康食品 LP。青い海の帯、黒い成分説明、えんじ色のシリーズ紹介の順に、地の色を大胆に切り替えて展開する。 colors: background: '#FDFDFD' primary: '#015BC4' dark-section: '#1B1B1B' on-dark: '#FFFFFF' accent-1: '#E8C98A' secondary: '#941D1D' cta: '#BF7D0E' on-cta: '#FFFFFF' text: '#000000' background-alt: '#DDE4E4' accent-2: '#2B8FE0' surface: '#161918' line: '#8A8A8A' tint-1: '#C9B49B' cta-accessible: '#A26A0C' typography: display: fontFamily: Shippori Mincho fontSize: 44px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0.05em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 0px md: 2px lg: 4px full: 999px spacing: unit: 8px card: 16px section: 56px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 52px heading-band-blue: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 130px nutrient-item: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 120px frame-heading: textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 40px vertical-copy-panel: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 230px series-card: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 360px worry-speech: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' height: 200px note-text: textColor: '{colors.text}' typography: '{typography.note}' height: 60px --- # DESIGN.md — 黒石板×海の青×えんじの海産健康食品 LP（Dark Slate Seafood Powder Supplement LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 健康食品・サプリメント ／ **雰囲気**: 上品・高級、和風、信頼・誠実、情報量多め・訴求型 - **キーワード**: 縦書き明朝・黒い石板・海の青・素材のアップ写真・えんじ帯・産地訴求 - **地の質感**: 石板やコンクリートのざらつきを写真で見せる。黒地は石目のテクスチャ。白地の部分は無地でフラット - **形**: 角丸はほぼ使わない直角ベース。見出しは四角い帯や細い枠で囲む - **温度感**: 黒・茶系で落ち着かせ、海の青と赤で温度差を付けた、やや重めで締まった印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FDFDFD` | 本文セクションの白地 | 30% | 画素の実測 | | `primary` | `#015BC4` | 海を表す見出し帯の青 | 6% | 画素の実測 | | `dark-section` | `#1B1B1B` | 成分説明の黒い石板背景 | 12% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の白文字 | 2% | 画素の主要色に補正 | | `accent-1` | `#E8C98A` | 黒地の成分名見出しの金色 | 1% | 推定 | | `secondary` | `#941D1D` | シリーズ紹介のえんじ色背景 | 8% | 画素の実測 | | `cta` | `#BF7D0E` | 主ボタンの焼き色ゴールド | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#000000` | 見出しと本文の黒文字 | 3% | 画素の実測 | | `background-alt` | `#DDE4E4` | 悩み提起の淡いグレー地 | 5% | 画素の実測 | | `accent-2` | `#2B8FE0` | 産地マップの水色 | 1% | 推定 | | `surface` | `#161918` | 写真上の縦書きコピー用の半透明黒パネル | 1% | 画素の主要色に補正 | | `line` | `#8A8A8A` | 黒地の項目区切りと枠線 | 0% | 推定 | | `tint-1` | `#C9B49B` | パウダーの焼き色ベージュ | 5% | 画素の主要色に補正 | | `cta-accessible` | `#A26A0C` | AA を満たす補正値（計算） | | 計算 | - 基本は白地。セクションごとに黒・青・えんじの全幅帯へ地を切り替えて、場面の転換を示す - 黒い石板の地では見出しを金色、本文を白にする - 青は海や産地を語る場面だけに使う - えんじは締めのシリーズ紹介にだけ使い、ページ最下部を赤で閉じる - CTA は焼き色ゴールドの塗りで、赤地の上でも目立たせる - 写真の上に文字を置くときは白文字か半透明黒パネルを使う - `button-primary` は文字 `#FFFFFF` × 背景 `#BF7D0E` のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A26A0C`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 写真上の縦書き大コピー | 明朝 | Shippori Mincho | 600 | 44px | 1.1 | 0.05em | | `headline-lg` | セクションの太い黒見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0.0em | | `headline-md` | 成分名・帯見出し（明朝） | 明朝 | Noto Serif JP | 700 | 20px | 1.4 | 0.03em | | `headline-sm` | シリーズカードの商品名 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※の注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.0em | | `accent` | 悩みの語りかけ・問いかけ文 | 明朝 | Shippori Mincho | 500 | 20px | 1.6 | 0.1em | | `label-button` | CTA ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.03em | - 写真の上のメインコピーは縦書きで、明朝または極太ゴシックにする - 説明パートの見出しは極太ゴシックで横組みにする - 成分名などは「」で囲み、金色の明朝で目立たせる - 語りかけ文は字間を広げた明朝で、静かに見せる - 本文は 14px・行間 1.8 で、短い段落に分ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と本文の横並びは縦積みにする - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は全幅で大きく敷き、セクションの導入にする - 本文ブロックは左右 5% の余白を取る - 成分説明は見出し＋アイコン＋本文の 3 段を細線で区切って並べる - シリーズ紹介は SP で 2 列のグリッドにする - 全幅の色帯どうしの間には白地の余白を挟む ## Elevation & Depth - 影はほとんど使わず、写真と色帯で奥行きを出す - 写真の上のパネルは半透明黒で重ねる - サブ写真には白い太枠を付けて、写真の上に浮かせる ## Shapes - **角丸**: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形。全幅のブリード写真が中心 - **セクション境界**: 直線で色を切り替える。海の写真は下端を白へフェードさせる - ボタン・カード・見出し帯はすべて直角 - 見出しは四角い青帯か細い白枠で囲む - 商品パッケージは切り抜き写真で置く ## Components - **主 CTA ボタン**（`button-primary`）: ゴールドの横長角ボタン。右端に＞矢印を付け、えんじ地の上に置く - **青い四角の見出し帯**（`heading-band-blue`）: 海の写真の上に重ねる青い四角。小さな明朝の前置き＋大きな漢字見出し＋ふりがなの構成 - **成分説明ブロック**（`nutrient-item`）: 黒地に、金色の明朝見出しとアイコン（または人物イラスト）と白い本文を並べ、細線で区切る - **細枠の見出し**（`frame-heading`）: 写真や黒地の上に置く、細い白線の枠で囲んだ見出し - **縦書きコピーのパネル**（`vertical-copy-panel`）: 写真の端に置く半透明黒の縦長パネル。白の縦書きで推しポイントを書く - **シリーズ商品カード**（`series-card`）: えんじ地に並べる縦長カード。商品名に下線、効能 2 行、素材写真とパッケージを縦に積む - **悩みの語りかけ**（`worry-speech`）: 淡いグレー地に、考え込む女性の写真と、明朝の問いかけ文を左右に置く - **注釈**（`note-text`）: ※で始まる小さな補足文。本文の下に置く ## Do's and Don'ts **Do** - 素材を大きくアップで撮った写真を全幅で使う - メインコピーは写真の上に縦書きで重ねる - 黒・青・えんじの全幅帯で場面を切り替える - 成分名は「」付きの金色明朝で見せる - 産地や工場の写真で、安全性の根拠を示す **Don't** - 角丸やピル型のボタンを使わない - パステル色やポップなイラストを主役にしない - 写真なしの文字だけのセクションを続けない - 青を産地の話以外に使わない - 影の濃いカードを並べない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（素材と商品を一目で伝える）: 石板の上に生の素材とパウダーを並べた写真。縦書き明朝のコピーと商品パッケージを重ね、左上にロゴ 2. **素材の紹介**（素材の価値を伝える）: 海の写真の上に青い見出し帯を置き、素材のアップ写真と短い本文を続ける 3. **成分の強み**（主要な栄養素を 3 つ説明する）: 黒い石板の地。金色の見出しとアイコンで 3 項目を並べ、最後にその他の栄養素を細枠見出しでまとめる 4. **悩みの提起**（毎日とるのは難しいという共感を得る）: 淡いグレー地に、考え込む女性の写真と明朝の問いかけ文 5. **商品の提案**（解決策として商品を出す）: コンクリート地の商品写真に、縦書きの半透明パネルを重ねる 6. **特長の導入**（特長パートの始まりを示す）: パウダーを接写した全幅写真の中央に、細枠の見出し 7. **原料へのこだわり**（無添加と濃さを訴える）: 木目の上の素材写真に、白い極太の縦書きコピー。続けて黒見出しと、写真＋本文の 2 段 8. **産地の紹介**（産地の信頼性を示す）: 青空と海の写真に縦書きの大きな産地名、白枠のサブ写真 2 枚。続けて水色の地図と本文 9. **製造の品質**（安全性を示す）: 極太の黒見出し、本文と工場写真の横並び、※の注釈 10. **締めのビジュアル**（商品を改めて印象づける）: FV と同じ構図の写真に縦書きコピー。シリーズのロゴと明朝の問いかけ文を添える 11. **シリーズ紹介・CTA**（関連商品へ誘導する）: えんじの全幅帯に明朝の大見出し、縦長カードを 4 列並べ、ゴールドの CTA で締める ## Imagery - 素材は石板や木目の上に置き、斜め上からアップで撮る。光は暗めで、質感を強く出す - パウダーは白い器に盛り、焼き色の粒が見える接写にする - 産地は青空と海の広い風景写真にする - 人物は白背景で考え込むポーズ。成分説明には簡単なイラストを添える - 工場は白衣の作業員を撮った、明るく清潔な写真にする - 商品パッケージは白い袋の切り抜き写真にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元は 1076px 幅の縦長 1 カラムで、SP にもそのまま縮めて使える構成 - SP では縦書きコピーを 36〜44px に縮め、写真の端に寄せる - 写真と本文の横並びは、SP では写真を上にして縦に積む - シリーズの 4 列カードは、SP では 2 列×2 段にする - CTA は SP では幅 90% にする ## 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-21377ca3`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/sonique/n-oysterexpw-30-1/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。