DESIGN.md — 紺鼠×六角形の寝具ガジェット LP（Midnight Hexagon Sleep Gadget LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: クール・先進的、上品・高級、信頼・誠実、情報量多め・訴求型
• キーワード: 六角形モチーフ・紺鼠グレー・明朝×ゴシック・紫の発光・夜空テクスチャ・機能訴求
• 地の質感: 白地と淡いグレー地を交互に敷く。要所に星空風の紺のグラデと、黒地のハニカム柄を入れる
• 形: 六角形のバッジ・枠・アイコン、直角の黒ラベル、細い下線
• 温度感: 寒色寄りで静か。夜と眠りを思わせる落ち着いた温度

Colors

• 地は白と#F2F3F5を交互に敷いてセクションを区切る
• 見出しとバッジは紺鼠#42475Cで統一する
• 漆黒は悩み提起とPOINTラベルだけに使う
• 紫の発光は製品写真の中に限り、面としては塗らない
• 赤はボタンと注意喚起と許可取得の強調だけに使う
• 数字・キーワードを強調するときは紺鼠の明朝を大きくする

Typography

• 情緒的な大見出しは明朝、説明と小見出しはゴシックで分ける
• 見出しの中の助詞は小さく、キーワードを大きくして一文の中で大小をつける
• 大見出しの下には細いグレーの下線を長めに引く
• 英字ラベルは字間を広げた大文字サンセリフにする
• 本文は中央揃えにし、要点だけ太字にする
• Q&Aと保証の説明は左揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みと比較は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は画面幅いっぱいに裁ち落とす
• テキストブロックは左右に約20pxずつ余白をとる
• POINTごとに黒ラベル→リード→明朝大見出し→写真→説明の順で組む
• 淡グレーの地に白カードを置いて情報をまとめる
• セクション間は広めの白余白で静かに区切る

Elevation & Depth

• 影はほとんど使わず、面の色差で階層を作る
• CTAボタンだけに薄いドロップシャドウをつける
• 白カードは淡グレー地の上に置き、影はつけない

Shapes

• 角丸: 小 2px ／ 中 4px ／ 大 6px。ボタンは角丸の長方形。
• 写真の切り抜き: 全幅の矩形と六角形の切り抜き。人物アイコンも六角形に入れる
• セクション境界: 背景色の直線切り替え。逆三角の矢印で次のセクションへつなぐ
• 六角形をバッジ・アイコン・写真枠に繰り返し使う
• ラベルとボタンはほぼ直角にする
• 見出しの枠は細線の角丸4px程度にする
• 比較の間には三角矢印を置く

Components

• 赤グラデの登録ボタン（button-primary）: 横長の矩形ボタン。左に★、右に▶をつけ、白字を太く入れる
• POINT黒ラベル（point-label）: 中央に置く黒い矩形に、白い英字でPOINT番号を入れる
• 六角形の特長バッジ（hex-badge）: 紺鼠または夜空柄の六角形に、短い特長を2行の白字で入れる
• 下線つき明朝見出し（underline-heading）: 紺鼠の大きな明朝の下に、幅いっぱいの細い灰線を引く
• スタッフの声カード（voice-card）: 白カードに番号ラベル、六角形の人物アイコン、明朝の見出しを置き、本文は黒地白抜きのマーカーで強調する
• 悩みチェックグリッド（check-grid）: 黒地に2列×3段で写真を並べ、各写真の下にオレンジのチェックと白い短文を置く
• 英字ルビつき枠見出し（outline-title）: 上に字間の広い英字を小さく置き、下に細線の角丸枠と明朝の見出しを入れる
• Q&A項目（faq-item）: Qは灰色の丸、Aは紺鼠の丸で表す。質問は太字、回答は左揃えの本文にする
• 注意喚起ボックス（attention-box）: 淡グレーの面の上に赤いATTENTIONラベルを置き、黒い大きめの文字で模倣品への注意を書く
• 月桂樹の実績表記（laurel-badge）: 左右を月桂樹で囲み、中央に明朝の大きな数字を置く。下に注釈を小さく添える

Do's and Don'ts

Do - 六角形モチーフを全体で一貫して使う - 見出しは紺鼠の明朝を大きくし、余白を広くとる - POINTごとに同じ構成を繰り返す - 製品写真には紫の光で触感を表す - 数字・比較・図解で機能を根拠づける

Don't - 暖色の大面積やポップな配色を使わない - 丸いピル型のボタンを多用しない - 赤をボタンと注意以外に広げない - 装飾の強い手書き書体を使わない - 影やグラデを多用して重くしない

Page Structure

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

1. ファーストビュー（製品の触感と特長を一目で伝える）: 寝ている人物と製品の全幅写真に、明朝の大コピーを重ね、六角形バッジを4つ並べる
2. ブランド導入・コンセプト（ブランドと新しい触感を印象づける）: ロゴ、英字の製品名、六角形の中に特長を書いた写真、明朝の大見出しを並べる
3. CTA・注意喚起（お気に入り登録を促し、模倣品に注意を呼びかける）: 赤ボタンを置き、淡グレーの箱に赤いATTENTIONラベルを載せる
4. 実績・ブランドの信頼（ランキングと累計販売数で信頼を示す）: 月桂樹で囲んだ明朝の数字、ランキング画面の画像、既存商品の写真を並べる
5. スタッフの声（使った感想を伝える）: 淡ラベンダーの地に白いボイスカードを2枚置く
6. 悩みの提起（今の枕への不満に気づかせる）: 黒地に明朝の問いかけを置き、2列の写真でチェックリストを作る
7. 4つのポイント一覧（特長をまとめて見せる）: 夜空柄の六角形4つを千鳥に配置し、背景に人物写真を敷く
8. 特長詳細（POINT1〜4）（各機能を根拠つきで説明する）: 黒ラベルと明朝の見出しの後に、拡大図・圧力分布の比較・前後写真・重さの訴求を続ける
9. 使い方バリエーション（いろいろな寝方に合うことを示す）: ハニカム柄の淡い地に、横長の写真カードを5つ縦に並べる
10. 付属品・改善報告（付属のカバーと、品質改善を伝える）: 黒い帯見出しを置き、改善前と改善後の写真を2列で比べる
11. 商品サイズ・セット内容（仕様を明確にする）: 枠見出しの下に寸法線入りの製品図を置き、素材と重量を2列の表で示す
12. よくある質問（購入前の不安を解消する）: Q/Aの丸アイコンをつけたリストにする
13. 保証・サポート（保証期間と問い合わせ先で安心させる）: 紺鼠のパネルに月桂樹の保証年数を入れ、レビュー特典の注記を白カードにまとめる
14. 安全性・クロージング（許可の取得と品質を示して締める）: 細い二重線で囲み、赤の強調文字を入れる。最後に全幅の製品写真とロゴを置く

Imagery

• 白い寝具の上で目を閉じた人物を、柔らかい自然光で撮る
• 黒いハニカム素材をマクロで撮り、凹凸を強調する
• 製品の首元に紫の発光エフェクトを重ねる
• 背景には星空のような紺〜白のグラデーションを使う
• 機能説明は矢印・寸法線・圧力分布図などの図解で見せる
• 手で伸ばす・洗うなど、素材を扱う手元の写真を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に幅約750pxのカラムを置き、SPの縦長構成をそのまま見せる
• PC の左右の余白は淡グレーの地で埋める
• 悩みグリッドはPCで3列にしてもよい
• 六角形バッジはPCで横一列に4つ並べる
• 見出しの文字サイズはPCで1.3倍程度にする

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