DESIGN.md — 黒石板×海の青×えんじの海産健康食品 LP（Dark Slate Seafood Powder Supplement LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 健康食品・サプリメント ／ 雰囲気: 上品・高級、和風、信頼・誠実、情報量多め・訴求型
• キーワード: 縦書き明朝・黒い石板・海の青・素材のアップ写真・えんじ帯・産地訴求
• 地の質感: 石板やコンクリートのざらつきを写真で見せる。黒地は石目のテクスチャ。白地の部分は無地でフラット
• 形: 角丸はほぼ使わない直角ベース。見出しは四角い帯や細い枠で囲む
• 温度感: 黒・茶系で落ち着かせ、海の青と赤で温度差を付けた、やや重めで締まった印象

Colors

• 基本は白地。セクションごとに黒・青・えんじの全幅帯へ地を切り替えて、場面の転換を示す
• 黒い石板の地では見出しを金色、本文を白にする
• 青は海や産地を語る場面だけに使う
• えんじは締めのシリーズ紹介にだけ使い、ページ最下部を赤で閉じる
• CTA は焼き色ゴールドの塗りで、赤地の上でも目立たせる
• 写真の上に文字を置くときは白文字か半透明黒パネルを使う
• button-primary は文字 #FFFFFF × 背景 #BF7D0E のコントラスト比が 3.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#A26A0C、4.56:1）を使う。

Typography

• 写真の上のメインコピーは縦書きで、明朝または極太ゴシックにする
• 説明パートの見出しは極太ゴシックで横組みにする
• 成分名などは「」で囲み、金色の明朝で目立たせる
• 語りかけ文は字間を広げた明朝で、静かに見せる
• 本文は 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。