--- version: alpha name: Dreamy Lavender Night Relax Care LP description: 紫の夜空グラデーションと白地を交互に置き、有機的な曲線で区切るリラックス系日用品 LP。細い字間広めのゴシックと欧文ラベルを使い、ぼかした光の玉とゆるいキャラクターイラストで、やわらかく夢見るような雰囲気にしている。 colors: primary: '#7470B3' background: '#FFFFFF' background-alt: '#F5F5F7' text: '#322229' secondary: '#535B89' accent-1: '#DB9281' tint-1: '#FEBBC5' tint-2: '#C8C3EC' dark-section: '#322229' on-dark: '#FFFFFF' line: '#BBB3BB' accent-2: '#EDDF62' typography: display: fontFamily: Josefin Sans fontSize: 64px fontWeight: 300 lineHeight: 1.0 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.1em body-md: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.15em accent: fontFamily: Josefin Sans fontSize: 13px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.12em headline-md: fontFamily: Josefin Sans fontSize: 24px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 8px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 40px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-label: textColor: '{colors.secondary}' typography: '{typography.accent}' height: 20px variant-badge: textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px photo-caption-bar: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 36px blob-photo: rounded: '{rounded.lg}' height: 320px mascot-whisper: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 160px spec-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px bokeh-dot: backgroundColor: '{colors.tint-1}' rounded: '{rounded.full}' height: 40px --- # DESIGN.md — ラベンダー夜空とぼかし玉のリラックスケア LP（Dreamy Lavender Night Relax Care LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: やさしい・柔らかい、上品・高級、かわいい、シンプル・ミニマル - **キーワード**: 夜空グラデーション・ラベンダー・ぼかし玉・曲線の切り抜き・細字の字間広め・ゆるキャラ - **地の質感**: 紫の面に星屑のような細かい粒子を散らす。白地にはピンクや青紫のぼかした光の玉を浮かべる - **形**: 波のような曲線や雲のような形で写真を切り抜く。細い円弧の線、細い横線付きの欧文ラベル - **温度感**: やや涼しげな紫に、温かみのあるコーラルピンクを差し色にする ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#7470B3` | 夜空セクションの紫の地 | 12% | 画素の主要色に補正 | | `background` | `#FFFFFF` | ページの白地 | 37% | 画素の実測 | | `background-alt` | `#F5F5F7` | 淡いグレーの地 | 4% | 画素の主要色に補正 | | `text` | `#322229` | 見出しと本文の濃いグレー | 3% | 画素の主要色に補正 | | `secondary` | `#535B89` | 欧文ラベルと細線の紺紫 | 1% | 画素の主要色に補正 | | `accent-1` | `#DB9281` | コーラルピンクの差し色 | 3% | 画素の主要色に補正 | | `tint-1` | `#FEBBC5` | ぼかし玉の淡いピンク | 2% | 画素の実測 | | `tint-2` | `#C8C3EC` | 曲線の縁取りの淡いラベンダー | 3% | 推定 | | `dark-section` | `#322229` | 写真上のキャプション帯 | 1% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 紫地とキャプション帯の上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#BBB3BB` | 表の区切り線 | 1% | 画素の主要色に補正 | | `accent-2` | `#EDDF62` | イラストの月の黄色 | 1% | 画素の実測 | - 地は白と紫の夜空グラデーションを交互に並べる - 紫の面は上を明るく、下を濃く(#7060B0〜#5040C0)して星屑を散らす - 紫地の上の文字はすべて白の細字にする - 白地の見出しは濃いグレー、欧文ラベルは紺紫にする - ピンクは商品バリエーションと円弧の装飾にだけ使う - 強い原色や太い塗りの CTA は使わない ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの縦書き欧文ロゴ風タイトル | 欧文サンセリフ | Josefin Sans | 300 | 64px | 1.0 | 0.05em | | `headline-lg` | セクションの大見出し(2 行) | ゴシック | Zen Kaku Gothic New | 400 | 24px | 1.6 | 0.15em | | `headline-sm` | 紫地の特長のリード文 | ゴシック | Zen Kaku Gothic New | 400 | 17px | 1.5 | 0.1em | | `body-md` | 見出し下の説明文 | ゴシック | Zen Kaku Gothic New | 400 | 12px | 1.6 | 0.15em | | `accent` | 横線付きの欧文セクションラベル | 欧文サンセリフ | Josefin Sans | 400 | 13px | 1.2 | 0.12em | | `headline-md` | サイズ表など英字の大見出し | 欧文サンセリフ | Josefin Sans | 300 | 24px | 1.2 | 0.1em | | `note` | 注釈(※付き) | ゴシック | Noto Sans JP | 400 | 8px | 1.4 | 0.03em | - 全体を細いウェイトで字間広めに組み、ゆったり見せる - 太字は使わない。強調は数字を大きくするだけにする - 見出しは 2 行に分け、左寄せか右寄せで交互に置く - 欧文ラベルは細い横線とセットで見出しの上に置く - イラストのつぶやきは縦書きの小さな手書き風で入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真や切り抜き画像は端まで裁ち落とす - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - 見出しブロックは左寄せと右寄せをセクションごとに切り替える - 写真は片側の画面端まで裁ち落とし、反対側に文字を置く - イラストと写真を互い違いに重ねて斜めの視線の流れを作る - 余白は広くとり、ぼかし玉を散らして間を埋める ## Elevation & Depth - 影はほぼ使わずフラットにする - 商品パッケージの写真にだけ自然な接地影を付ける - 奥行きはぼかし玉と曲線の重なりで出す ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 40px。ボタンは角丸の長方形。 - **写真の切り抜き**: 波打つ曲線や雲のような有機的な形で切り抜く。円形の切り抜きも使う - **セクション境界**: 大きなゆるい S 字カーブ。縁に淡いラベンダーの帯を重ねる - 直線的なセクション境界は避ける - 円は細い 1px の円弧線で描き、閉じずに途切れさせる - キャプション帯は角丸なしの半透明の黒にする ## Components - **横線付き欧文ラベル**（`section-label`）: 細い横線の横に紺紫の欧文を置く。見出しの上に付ける - **円弧線のバリエーション表示**（`variant-badge`）: 商品の斜め上に、途切れた細い円弧線と色付きの文字を置く - **写真上のキャプション帯**（`photo-caption-bar`）: 写真に重ねる半透明の黒い帯。白の細字で特長を短く入れる - **曲線で切り抜いた写真**（`blob-photo`）: 片側を画面端まで裁ち落とし、反対側は曲線で切り抜いた写真 - **キャラクターのつぶやき**（`mascot-whisper`）: ゆるい動物のイラストに、縦書きの短いひとことを添える - **サイズ表**（`spec-table`）: 罫線だけで作る 2 列の表。左に項目、右に数値を置く - **ぼかし玉**（`bokeh-dot`）: ピンクとラベンダーのぼかした円を背景に散らす ## Do's and Don'ts **Do** - 紫の夜空と白地を交互に並べ、境界は曲線にする - 文字は細字で字間を広くとる - ぼかし玉と星を余白に散らす - ゆるいキャラクターで親しみを足す - 見出しの左右の位置を交互に変えてリズムを作る **Don't** - 太字や原色の目立つボタンを使わない - 直線で区切ったセクションを並べない - 情報を詰め込んだ訴求バナーを入れない - 文字の影や枠付きの見出しを使わない - 紫地の上に濃い色の文字を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（使っているシーンで世界観を伝える）: 紫グラデーションの上に人物写真を置く。左に縦書きの欧文タイトル。下端は S 字カーブで区切る 2. **ブランドコンセプト**（ご褒美のようなひとときを提案する）: 欧文ラベルと 2 行見出しを置き、曲線で切り抜いた商品の写真を重ねる 3. **バリエーション紹介**（香りの種類を見せる）: パッケージ 2 つを上下にずらして並べ、それぞれに円弧線と種類名を付ける 4. **こだわり(特長)**（温かさと素材の良さを伝える）: 星屑を散らした紫地に、円形のイラストと写真、キャプション帯、キャラクターを互い違いに置く 5. **フィット感**（調整できる仕様を説明する）: 白地に右寄せの見出しを置き、商品を画面幅いっぱいに大きく見せる。点線で切り取り位置を示す 6. **利用シーン**（毎日の気分転換を想像させる）: 左寄せの見出しの下に、雲形で切り抜いた屋外の人物写真を置き、月のイラストを添える 7. **サイズ・仕様**（商品の寸法を伝える）: 中央に横線付きの英字見出しを置き、パッケージと本体を重ねた写真、罫線の表を並べる ## Imagery - 人物写真は紫やピンクの環境光を当て、柔らかくぼかした背景で撮る - 商品写真は淡い室内で、植物を添えた落ち着いた画にする - イラストは太めの線と淡い塗りのゆるい漫画調にする - 動物のキャラクターに目を隠したり、月に乗ったりするしぐさをさせる - 装飾には星、ぼかし玉、星屑の粒子を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は幅 420〜480px の中央カラムに SP デザインを置き、左右を淡い紫のグラデーションで埋めるのがおすすめ - PC に広げる場合は、写真と文字を 2 カラムで左右交互に並べる - 曲線の区切りは画面幅に合わせて横に伸ばす - 見出しサイズは 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-3352f200`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/kurashikenkou/1919975/sp=1 - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（3/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。