--- version: alpha name: Midnight Hexagon Sleep Gadget LP description: 白〜淡いグレーを地に、くすんだ紺鼠と漆黒で締めた寝具・生活雑貨のLP。モチーフは六角形（ハニカム）。紫の発光、明朝の大見出し、黒い帯ラベルの組み合わせで、先進的かつ上品な睡眠体験を伝える。 colors: primary: '#42475C' on-primary: '#F7FAFD' background: '#FFFFFF' background-alt: '#F2F3F5' dark-section: '#24202B' text: '#42475C' text-body: '#333333' secondary: '#88808B' accent-1: '#8A4FE0' cta: '#B42B24' on-cta: '#FFF2EB' line: '#B2B7C1' tint-1: '#EEEDF3' marker: '#010103' typography: display: fontFamily: Shippori Mincho fontSize: 40px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Noto Serif JP fontSize: 32px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.1em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 accent: fontFamily: Montserrat fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 2px md: 4px lg: 6px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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: 40px point-label: backgroundColor: '{colors.dark-section}' typography: '{typography.accent}' height: 46px hex-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 80px underline-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 60px voice-card: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 200px check-grid: backgroundColor: '{colors.dark-section}' typography: '{typography.body-md}' height: 130px outline-title: textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 40px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px attention-box: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px laurel-badge: textColor: '{colors.primary}' typography: '{typography.display}' height: 90px --- # DESIGN.md — 紺鼠×六角形の寝具ガジェット LP（Midnight Hexagon Sleep Gadget LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: クール・先進的、上品・高級、信頼・誠実、情報量多め・訴求型 - **キーワード**: 六角形モチーフ・紺鼠グレー・明朝×ゴシック・紫の発光・夜空テクスチャ・機能訴求 - **地の質感**: 白地と淡いグレー地を交互に敷く。要所に星空風の紺のグラデと、黒地のハニカム柄を入れる - **形**: 六角形のバッジ・枠・アイコン、直角の黒ラベル、細い下線 - **温度感**: 寒色寄りで静か。夜と眠りを思わせる落ち着いた温度 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#42475C` | ブランド紺鼠（見出し・六角バッジ） | 5% | 画素の主要色に補正 | | `on-primary` | `#F7FAFD` | 紺地上の白文字 | 1% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 34% | 画素の実測 | | `background-alt` | `#F2F3F5` | 淡グレーの区切り地 | 12% | 画素の実測 | | `dark-section` | `#24202B` | 漆黒の悩み提起セクションとラベル | 7% | 画素の主要色に補正 | | `text` | `#42475C` | 見出しの濃紺グレー文字 | 2% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文の濃グレー文字 | 3% | 推定 | | `secondary` | `#88808B` | ラベン系グレーの帯 | 4% | 画素の主要色に補正 | | `accent-1` | `#8A4FE0` | 紫の発光（製品の強調） | 1% | 推定 | | `cta` | `#B42B24` | 赤の登録ボタン・注意ラベル | 1% | 画素の実測 | | `on-cta` | `#FFF2EB` | 赤ボタン上の白文字 | 0% | 画素の実測 | | `line` | `#B2B7C1` | 細い区切り線・枠線 | 1% | 画素の主要色に補正 | | `tint-1` | `#EEEDF3` | ラベンダーグレーの淡面 | 5% | 画素の実測 | | `marker` | `#010103` | 黒地白抜きの本文マーカー | 1% | 画素の実測 | - 地は白と#F2F3F5を交互に敷いてセクションを区切る - 見出しとバッジは紺鼠#42475Cで統一する - 漆黒は悩み提起とPOINTラベルだけに使う - 紫の発光は製品写真の中に限り、面としては塗らない - 赤はボタンと注意喚起と許可取得の強調だけに使う - 数字・キーワードを強調するときは紺鼠の明朝を大きくする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV・各ポイントの大見出し | 明朝 | Shippori Mincho | 500 | 40px | 1.3 | 0.08em | | `headline-lg` | 機能名の見出し（下線つき） | 明朝 | Noto Serif JP | 500 | 32px | 1.3 | 0.1em | | `headline-md` | リード見出し・セクション導入 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | Q&Aの質問・小見出し | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.03em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 14px | 1.8 | 0.03em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `accent` | POINT番号・英字ラベル・製品名 | 欧文サンセリフ | Montserrat | 600 | 18px | 1.2 | 0.1em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.1em | - 情緒的な大見出しは明朝、説明と小見出しはゴシックで分ける - 見出しの中の助詞は小さく、キーワードを大きくして一文の中で大小をつける - 大見出しの下には細いグレーの下線を長めに引く - 英字ラベルは字間を広げた大文字サンセリフにする - 本文は中央揃えにし、要点だけ太字にする - 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 ```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-54bcafd6`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/nissoplus/nl-sp25/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。