--- version: alpha name: Sunset Gradient Summer Liqueur LP description: 生成りの地に、マスタード・テラコッタ・紺の夕暮れグラデーションを重ねた夏のリキュールのプロモーション LP。英字の筆記体で入れた水色の縦書き装飾と、角丸の写真カードで、リゾート気分と大人っぽい甘さを両方出している。 colors: background: '#F9F3E7' primary: '#07101E' secondary: '#A57529' accent-1: '#A34426' dark-section: '#24344D' on-dark: '#FFFFFF' accent-2: '#6EBFD0' background-alt: '#EDEAE6' surface: '#FEFEFE' tint-1: '#5FD3D8' cta: '#D9673F' line: '#E3EBE9' text-muted: '#7A7F88' dark-section-alt: '#0B2033' secondary-accessible: '#9B6E26' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 26px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.06em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Pacifico fontSize: 64px fontWeight: 400 lineHeight: 1.0 note: fontFamily: Outfit fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.08em headline-md: fontFamily: Outfit fontSize: 24px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.01em rounded: sm: 8px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' vertical-script-deco: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 300px scene-block: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 760px pairing-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 310px info-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 200px schedule-row: textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 72px campaign-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 1000px section-label: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 80px footer-panel: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 150px --- # DESIGN.md — 生成りと夕焼けグラデの夏リキュール LP（Sunset Gradient Summer Liqueur LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: 上品・高級、ナチュラル、清潔・爽やか、やさしい・柔らかい - **キーワード**: 夏のリゾート・夕焼けグラデーション・生成り・筆記体装飾・シーン提案・イベント情報 - **地の質感**: ざらついたノイズを乗せたグラデーション面と、霞んだ淡いぼかし背景 - **形**: 角丸 12px 前後の写真カード、丸いアイコン、細い罫線のリスト - **温度感**: 暖色（琥珀・夕焼け）が主で、水色と紺で涼しさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F9F3E7` | コンセプトなどの生成り地 | 20% | 画素の実測 | | `primary` | `#07101E` | 見出しとフッターの濃紺 | 6% | 画素の実測 | | `secondary` | `#A57529` | シーン1のマスタード地 | 5% | 画素の実測 | | `accent-1` | `#A34426` | シーン2のテラコッタ地 | 6% | 画素の実測 | | `dark-section` | `#24344D` | シーン3の夜の紺地 | 6% | 画素の実測 | | `on-dark` | `#FFFFFF` | 色付き地の上の白文字 | 2% | 画素の主要色に補正 | | `accent-2` | `#6EBFD0` | 筆記体の装飾英字に使う水色 | 1% | 推定 | | `background-alt` | `#EDEAE6` | イベント部分の淡いグレージュ地 | 18% | 画素の実測 | | `surface` | `#FEFEFE` | 情報ボックスと白地 | 10% | 画素の実測 | | `tint-1` | `#5FD3D8` | キャンペーン枠の外側の水色 | 3% | 推定 | | `cta` | `#D9673F` | スライダー矢印の朱色 | 0% | 推定 | | `line` | `#E3EBE9` | リストの区切り罫線 | 0% | 画素の主要色に補正 | | `text-muted` | `#7A7F88` | スペック注記のグレー | 0% | 推定 | | `dark-section-alt` | `#0B2033` | フッターの濃紺パネル | 2% | 画素の実測 | | `secondary-accessible` | `#9B6E26` | AA を満たす補正値（計算） | | 計算 | - 基本の地は生成り #F9F3E7。白とグレージュの面で章を切り替える - シーン紹介はマスタード→テラコッタ→紺のグラデーションで、昼から夜への流れを見せる - 色付き地の上の文字は白だけにする - 見出しと本文は黒ではなく濃紺を使う - 水色は筆記体の装飾英字とキャンペーン枠だけに使う - 朱色はスライダー矢印などの小さな操作要素だけに使う - `scene-block` は文字 `#FFFFFF` × 背景 `#A57529` のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#9B6E26`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大見出し | ゴシック | Zen Kaku Gothic New | 700 | 26px | 1.5 | 0.04em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.06em | | `headline-sm` | カードとイベントの小見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.6 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 11px | 1.9 | 0.03em | | `accent` | 縦に置く筆記体の装飾英字 | 欧文スクリプト | Pacifico | 400 | 64px | 1.0 | 0.0em | | `note` | セクションの英字ラベルとスペック注記 | 欧文サンセリフ | Outfit | 400 | 10px | 1.6 | 0.08em | | `headline-md` | キャンペーンタイトルと英字見出し | 欧文サンセリフ | Outfit | 500 | 24px | 1.3 | 0.01em | - 和文はすっきりしたゴシックに統一する - セクション見出しの上に、小さな大文字の英字ラベルを置く - 筆記体の英字は 90 度回転させて縦に置き、写真と重ねる - 本文は小さめにし、行間を 1.9 前後とって広く読ませる - シーン紹介の本文は中央揃え、イベント情報は左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。料理ペアリングのみ横スクロールのカルーセル - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 写真は左右 16px の余白で幅いっぱいに置く - ファーストビューと区切りの写真は全幅で端まで裁ち落とす - イベントは写真、タイトル、本文、白の情報ボックスの順に積む - 日程リストはサムネ、テキスト、丸矢印の 3 列にする - 筆記体装飾を置く部分は大きく余白をとる ## Elevation & Depth - 影はほとんど使わない - 情報ボックスは白の半透明面と極薄の線で浮かせる - キャンペーン枠は水色の面の上に生成りのカードを乗せる ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸 12px の長方形。料理やドリンクのアイコンは円形 - **セクション境界**: 直線で区切るほか、グラデーションで滑らかに色を移す - 写真には必ず角丸を付ける - 丸い矢印ボタンは細い線の円にする - キャンペーンカードとフッターには大きめの角丸を付ける ## Components - **縦書き筆記体の装飾**（`vertical-script-deco`）: 水色の英字筆記体を縦に回転させ、写真の端に重ねる - **シーン紹介ブロック**（`scene-block`）: 色付き地に、英字ラベル、ロゴ風タイトル、写真、円形アイコン付きの小見出し、中央揃えの本文を並べる - **ペアリングカード**（`pairing-card`）: 生成りのカードの上半分に写真、下に見出しと本文。左右に朱色の丸矢印を付けたカルーセル - **イベント情報ボックス**（`info-box`）: 半透明の白いボックスに、太字の項目名と値を縦に積む - **日程リスト行**（`schedule-row`）: サムネ、日付と説明、水色の丸矢印を並べ、行は細い罫線で区切る - **キャンペーンカード**（`campaign-card`）: 水色グラデーションの上に生成りの角丸カード。英字ハッシュタグの見出し、期間、手順リストを入れる - **英字ラベル付き見出し**（`section-label`）: 小さな大文字の英字の下に、2 行の和文見出しを置く - **フッターパネル**（`footer-panel`）: 濃紺の角丸パネルに、ロゴと白の英字ナビを中央揃えで置く ## Do's and Don'ts **Do** - 地は生成りと白を基本にし、暖色のグラデーションはシーン紹介だけに使う - 写真は夕日、海、乾杯など光のあるシーンを選ぶ - 見出しの上に英字ラベルを添える - 写真の端に縦書きの筆記体英字を重ねる - 情報は白い角丸ボックスに項目と値の形で整理する **Don't** - 真っ黒の文字や、強い原色のボタンを使わない - 太い影や立体的な装飾を付けない - 写真を角丸なしの四角でカードに入れない - 水色を本文や大きな面に広げない - テキストを詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（夏のリゾートと商品の世界観を一目で伝える）: 海辺のテーブルに商品を置いた全幅写真。上にロゴを白抜きで置き、下に商品画像と大見出しを並べる 2. **リード文**（季節に合わせた楽しみ方を提案する）: 生成り地に中央揃えの本文を 4 行置く 3. **コンセプト**（商品の香りや味の魅力を語る）: 全幅写真に筆記体の縦書き装飾を重ね、角丸写真と左揃えの本文を交互に置く 4. **問いかけ**（シーン紹介へ誘導する）: 白地にロゴと筆記体を置き、中央に短い 3 行の問いかけ 5. **シーン提案**（飲み方とシーンを 3 つ紹介する）: マスタード→テラコッタ→紺のグラデーション地に、シーンブロックを縦に 3 つ並べる 6. **ペアリング**（料理との組み合わせを提案する）: 中央の見出しの下に、横スクロールのカードカルーセルを置く 7. **イベント**（開催中の体験イベントを告知する）: 淡いぼかし地に縦書き装飾と見出しを置き、写真スライダーと情報ボックスを繰り返す 8. **キャンペーン**（SNS 投稿を促す）: 水色の地に生成りカードを乗せ、期間、写真の横並び、手順リスト、SNS アイコンを入れる 9. **商品紹介**（商品 2 種のスペックを伝える）: 白地に角丸写真、商品名、本文、グレーのスペック注記を並べる 10. **締めのビジュアル**（世界観を再確認させる）: 乾杯の全幅写真に白抜きの大見出しを重ねる 11. **フッター**（SNS への誘導とナビゲーション）: 英字見出しと SNS アイコンの下に濃紺の角丸パネルを置く ## Imagery - 夕日や逆光の暖かい色調で、少し霞んだフィルム調の写真 - 海辺のテーブルにグラスとボトルを置き、ヤシの葉の影を落とす - 人物はシルエットか手元だけにし、顔は主役にしない - 料理は暖色の木目テーブルで、寄りの構図で撮る - グラデーションの面にはノイズのざらつきを加える - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC 版の画像がないため、以下は推奨。PC ではコンテンツ幅を 960px 前後に収め、写真と本文を左右 2 カラムにする - シーン提案は写真と本文を左右交互に配置する - ペアリングカードは 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-baf75fe7`（元 LP の URL から採番） - **元 LP**: https://disaronno.jp/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。