DESIGN.md — 濃紺×白の上質な衣料用洗剤ブランドLP（Deep Navy Premium Detergent Brand LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: 信頼・誠実、上品・高級、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃紺帯・欧文セリフ見出し・中央パネル・六角形アイコン・製品別パステル・整然
• 地の質感: フラットな単色の面。製品パネルにだけ淡いグラデーションと光沢感がある
• 形: 角の小さい長方形パネル、六角形のバッジ、矢羽根型のリボン見出し
• 温度感: 寒色寄りでクール。製品の色で温かみを少し足す

Colors

• 濃紺の帯と白・薄グレーの帯を交互に置き、セクションを切り替える
• 濃紺地では中央に白〜淡青のパネルを置き、その中に本文を入れる
• 主ボタンは濃紺のベタ塗りに白文字。サブボタンは白地に濃紺の枠線
• 製品ラインごとにグリーン・オレンジ・パープル・ティールの淡いグラデーションで区別する
• ゴールドは技術名のリボンと受賞バッジだけに使う
• 赤やビビッドな色は使わない

Typography

• セクション見出しは細い欧文セリフの英字を大きく置き、下に和文ゴシックを小さく重ねて中央揃えにする
• 和文キャッチは明朝で、強調したい語だけ1.5倍にする
• 本文はゴシックで行間を広めにとる
• 注釈は※付きの極小グレー文字で本文の下に置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。PCは中央のパネルを固定幅にし、カードを2カラムに並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツはすべて中央の縦長パネルに収める
• 英字見出し、和文小見出し、短い区切り線を縦に積んで中央揃えにする
• 特長は六角形アイコンを3つ横に並べ、その下に説明カードを置く
• 製品カードは「左に写真、右にボタン2つ」の横組み
• FAQは1行ずつのアコーディオンを縦に積む

Elevation & Depth

• 影はほぼ使わずフラットにする
• パネルとカードは1pxの細線で囲んで区切る
• 製品写真のボトルにだけ光沢と映り込みを入れる

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 製品は切り抜きで並べる。人物は背景込みの長方形で使う
• セクション境界: 直線で背景色を切り替える。一部だけV字の切り込みを入れる
• ボタンは角丸2〜4pxの長方形で、右端に＞矢印を付ける
• 技術名は両端を矢羽根にしたリボン型にする
• 特長アイコンは白線で縁取った六角形にする
• FAQ行の右端に丸い＋アイコンを置く

Components

• 購入ボタン（button-primary）: 濃紺のベタ塗りに白文字、右端に＞を付ける
• 販売店検索ボタン（button-secondary）: 白地に濃紺の枠線と文字、左に虫眼鏡アイコンを付ける
• 英字＋和文の見出し（section-heading）: 細い欧文セリフの英字、その下に短い線と和文ゴシックを置く
• 六角形の特長バッジ（hex-badge）: 白い二重線の六角形に機能名を2〜4文字で入れる
• 技術名リボン（ribbon-title）: 両端が矢羽根のゴールドグラデーションの帯に技術名を入れる
• 悩み別の開閉バー（worry-accordion）: 左に丸い＋を置き、悩みのキーワードを大きな明朝で書き、右端に製品写真を置く。製品色の淡いグラデーション
• FAQ行（faq-item）: 白〜淡ラベンダーの帯に、セリフ体のQ、質問文、右端の＋を並べる
• 声カード（voice-card）: 濃紺地に白い長方形を縦に積み、体験談を短く載せる
• 製品ラインカード（product-lineup-card）: 上部に製品名リボン、左に製品群の写真、右に購入ボタン2つを置く

Do's and Don'ts

Do - 濃紺と白の帯を交互に置き、リズムをつくる - 見出しは必ず「英字セリフ＋和文」の2段にする - 情報は中央のパネルに集約し、左右に余白をとる - 製品ごとの色はパネル背景の淡いグラデーションだけに使う - CTAは「濃紺の購入ボタン＋白枠の販売店検索ボタン」の2つをセットにする

Don't - 大きな角丸やピル型ボタンにしない - 原色の赤や黄色で煽る表現をしない - 濃紺の帯に写真を全面に敷かない - 太い丸ゴシックやポップな書体を使わない - 影を強くかけない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（ブランドの約束を一言で伝える）: 銀〜白のグラデーション背景に起用人物と製品ボトルを並べ、斜めの矢印を添えた大きなキャッチを置く
2. お知らせ・動画（新製品とCMを告知する）: 白地に告知バナーと埋め込み動画を中央に並べる
3. ブランド紹介（製品の概要と購入導線を示す）: ロゴと製品写真を2カラムに並べ、短い説明と2つのボタンを置く。下に受賞バナーを入れる
4. 特長（3つの技術を示す）: 濃紺地に六角形バッジを3つ並べ、白い説明カードを2×2で置く
5. 悩み別提案（悩みに合う製品へ誘導する）: 人物と明朝の問いかけを置き、製品色の開閉バーを縦に積む
6. その他の特長（環境配慮などを補足する）: 薄グレー地に、アイコン付きの白い帯を縦に並べる
7. 性能の仕組み（技術を詳しく説明する）: 濃紺地の淡青パネル内に、技術ごとの見出し帯、ゴールドリボン、もっと読むボタンを並べ、図解と動画を続ける
8. 中間訴求（製品をまとめて印象づける）: 白地にロゴと3本のボトルを横に並べ、キーワードをタグ風に添える
9. お客様の声（使った人の評価で安心感を与える）: 濃紺地に白い短冊カードを縦に積む
10. よくある質問（不安を解消する）: Qマーク付きのアコーディオンを10行前後並べる
11. CMギャラリー（広告動画を見せる）: 濃紺地の中央に動画を1本置く
12. ラインアップ（製品ごとの購入導線を示す）: 白地に製品色のグラデーションカードを4枚縦に積み、それぞれにボタン2つを付ける
13. 関連製品・フッター（他の製品へ誘導する）: 「左に写真、右に名前・説明・枠線ボタン」のリストを置き、SNSアイコンと企業フッターで締める

Imagery

• 製品ボトルは白〜淡色の背景で切り抜き、光沢と映り込みを付ける
• 人物はスーツ姿で、指差しなどのポーズを明るいスタジオで撮る
• 洗濯物や部屋干しのシーンは自然光の淡いトーンにする
• アイコンは濃紺の単色線画で、Tシャツや洗濯機などを描く
• 技術の図解は水色の液体や繊維の拡大CGで、清潔な印象にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央のパネルを約470px幅に固定し、左右を背景色の帯で埋める
• SPではパネルを画面幅の92%に広げ、2カラムのカードは1カラムにする
• 製品カードの「写真＋ボタン」の横組みは、SPでは写真の下にボタンを縦に積む
• 英字見出しはSPで28〜32pxにする

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 行書くと起動時に読み込まれる。