--- version: alpha name: Playful Halloween Purple Liquor Fair LP description: 濃淡2色の紫の地を、とろけるような波形の境界で交互に切り替える季節キャンペーンLP。手書き風の太いポップ体、オレンジのリボン見出し、金縁の額に入れたレシピ写真、ピーチ色のピル型ボタンで、楽しくて少し妖しいハロウィンパーティーの雰囲気を出している。 colors: primary: '#6A3A78' background-alt: '#431351' cta: '#FDC28B' on-cta: '#41114E' accent-1: '#FD983B' secondary: '#FEC28B' accent-2: '#A423A3' accent-3: '#A88A5E' dark-section: '#281029' on-dark: '#FFFBF9' background: '#FFFCF5' tint-1: '#CDB98E' typography: display: fontFamily: Montserrat fontSize: 46px fontWeight: 800 lineHeight: 1.05 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 28px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Mochiy Pop One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 50px fontWeight: 700 lineHeight: 1.1 body-lg: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 12px section: 90px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px ribbon-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.background-alt}' typography: '{typography.headline-md}' height: 48px price-block: textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 60px label-pill: backgroundColor: '{colors.accent-1}' textColor: '{colors.background-alt}' typography: '{typography.body-lg}' rounded: '{rounded.full}' height: 30px recipe-frame: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 260px product-carousel: backgroundColor: '{colors.background-alt}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 200px ghost-step: textColor: '{colors.background-alt}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 56px invitation-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 400px accordion-note: textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 32px --- # DESIGN.md — 紫×オレンジのハロウィン酒フェアLP（Playful Halloween Purple Liquor Fair LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 酒類 ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: ハロウィン・紫の夜・とろける波形・リボン見出し・金縁フレーム・ポップ体 - **地の質感**: フラットなベタ塗りの紫に、コウモリやグラスの濃紫シルエットを薄く重ねる。グラデーションは使わない - **形**: 溶けたキャンディのような有機的な波形の境界、両端を切り込んだリボン帯、角丸のピル型ボタン、金色の額縁 - **温度感**: 暗めの紫に暖色のオレンジとピーチを差した、楽しく温かい夜の雰囲気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6A3A78` | メインの紫地（明るい方） | 40% | 画素の実測 | | `background-alt` | `#431351` | 交互に入る濃紫のセクション地 | 30% | 画素の実測 | | `cta` | `#FDC28B` | ピル型ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#41114E` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FD983B` | 強調オレンジ（価格・レシピ名・ラベル） | 5% | 画素の実測 | | `secondary` | `#FEC28B` | リボン見出しの帯（ピーチ） | 4% | 画素の実測 | | `accent-2` | `#A423A3` | マーカー状の鮮やかな紫・期限帯 | 2% | 画素の実測 | | `accent-3` | `#A88A5E` | 額縁・バッジの金茶 | 2% | 推定 | | `dark-section` | `#281029` | 招待状カードの黒紫 | 4% | 画素の実測 | | `on-dark` | `#FFFBF9` | 紫地の上の白見出し・本文 | 3% | 画素の実測 | | `background` | `#FFFCF5` | フッター手前の生成り帯 | 1% | 画素の実測 | | `tint-1` | `#CDB98E` | テーブルや猫柄のベージュ | 3% | 推定 | - 地は明るい紫と濃紫を交互にし、境界は溶けたような波形でつなぐ - 強調語・価格の数字・レシピ名はオレンジにする - 見出しリボンはピーチの帯に濃紫の文字、両端はオレンジの折り返し - ボタンはピーチの面に濃紫の文字、右下に鮮やかな紫の影をずらして置く - 白は見出しと本文だけに使い、面の色には使わない - 金茶は額縁・ラベルバッジ・招待状の枠にだけ使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの英字タイトル | 欧文サンセリフ | Montserrat | 800 | 46px | 1.05 | 0.02em | | `headline-lg` | セクション大見出し・リード | 装飾・ディスプレイ | Dela Gothic One | 400 | 28px | 1.5 | 0.04em | | `headline-md` | リボン内の見出し・レシピ名 | 装飾・ディスプレイ | Mochiy Pop One | 400 | 30px | 1.3 | 0.04em | | `accent` | 価格の大きな数字 | 欧文サンセリフ | Montserrat | 700 | 50px | 1.1 | 0.0em | | `body-lg` | レシピの説明・手順 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.03em | | `body-md` | 商品名・カードの文字 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 10px | 1.4 | 0.08em | - 見出しは丸みのある太いポップ体で、中央揃えにする - 見出しの一部の語をオレンジにしたり、紫のマーカーを敷いたりして強調する - 価格は数字を単位の約2倍の大きさにし、数字だけオレンジにする - ボタンの文字は小さく控えめにする - 細い明朝体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品紹介は横スクロールのカルーセル、レシピは写真と文字の2カラムを左右交互に並べる - **本文ブロックの幅**: 画面幅の約 82% - **余白**: セクション間 90px、基本単位 8px、カード内 12px（375px 幅換算） - 各セクションは「リボン見出し→リード→ビジュアル→価格→ボタン」の順に積む - レシピは写真の位置を左右交互に入れ替える - ボタンは中央に置き、幅は画面の約6割にする - セクションの境界ごとに地の紫の濃淡を入れ替える - イラストの正方形パネルは左右に余白を取って中央に置く ## Elevation & Depth - ボタンの右下に、ぼかさない紫の影を約4pxずらして置く - 額縁の写真に、ごく薄いドロップシャドウを付ける - それ以外はフラットにし、ぼかした影は使わない ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: レシピ写真は金縁の額に入れ、長方形・楕円形・少し傾けた長方形を使い分ける。商品は角丸の小さい正方形 - **セクション境界**: 溶けたキャンディが垂れるような有機的な波形で、紫の濃淡を切り替える - 見出し帯は両端に切り込みと折り返しのあるリボン形にする - ラベルバッジはピル型にする - 直線の水平の区切り線は使わない ## Components - **ピル型ボタン**（`button-primary`）: ピーチの面に濃紫の小さな文字。右下にずらした紫のベタ影を付ける - **リボン見出し**（`ribbon-heading`）: ピーチの帯に濃紫のポップ体を載せ、両端はオレンジの折り返し - **価格表示**（`price-block`）: 白い「本数」の文字とオレンジの大きな数字を並べる - **ラベルピル**（`label-pill`）: オレンジの面に濃紫の文字で項目名を示すラベル - **額縁レシピカード**（`recipe-frame`）: 金縁の額に入れた写真に燭台のイラストを添え、横にオレンジのレシピ名を置く - **商品カルーセル**（`product-carousel`）: 正方形の商品画像に、金茶のバッジ・価格・商品名を付ける。下にオレンジと白の進捗バーを置く - **おばけの番号**（`ghost-step`）: 白いおばけのイラストに濃紫の数字を入れ、手順の番号として使う - **招待状カード**（`invitation-card`）: 黒紫の面に金の二重枠と細い角飾りを付け、英字の見出しと割引・期間を載せる - **注意事項のアコーディオン**（`accordion-note`）: 白い細線で囲んだ枠に、小さな白文字と下向きの矢印を置く ## Do's and Don'ts **Do** - 紫の濃淡を交互に使い、境界は波形にする - 強調語・価格はオレンジにして目立たせる - コウモリ・燭台・おばけなどのハロウィン装飾を、濃紫のシルエットで散らす - ボタンにはずらしたベタ影を付けて立体感を出す - 写真は金縁の額に入れて、パーティーの雰囲気を出す **Don't** - 白い地のセクションを多用しない - リアルなホラー表現や、血のような赤は使わない - 細い書体や明朝体で見出しを組まない - ぼかした影やグラデーションでフラット感を崩さない - オレンジを面の色に多用しない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（フェア名・割引率・期間を伝える）: 紫の地に招待状カードを傾けて置き、英字の大見出し、キャラクターとかぼちゃ、割引と期間の帯を載せる 2. **リード**（企画の全体像を伝える）: 白のポップ体を中央揃えで6行並べ、キーワードをオレンジとマーカーで強調する。左右に商品瓶を置く 3. **企画1（ガチャ）**（1本ガチャの魅力と価格を伝える）: リボン見出し、リード、イラストのパネル、リボン帯の特典、大きな価格、ボタンの順に並べる 4. **企画2（選べるセット）**（セット購入を促す）: 企画1と同じ構成を、明るい紫の地で繰り返す 5. **商品一覧**（対象の商品を見せる）: 白の小見出しとリボン見出しの下に、横スクロールのカードと進捗バーを置く 6. **アレンジレシピ**（飲み方を提案して購入につなげる）: 額縁の写真とオレンジのレシピ名・ラベル・材料を、左右交互に4件並べ、各件にボタンを付ける 7. **プレゼントキャンペーン**（SNS投稿への参加を促す）: 白の大見出し、ピーチのリボン帯、おばけの番号で2ステップを示し、投稿ボタンを置く 8. **キャンペーン告知のバナー**（投稿の特典と期限を強調する）: 招待状カードとキャラクターを組み合わせ、鮮やかな紫の帯に期限を白文字で載せる 9. **注意事項**（条件の補足）: 細線で囲んだアコーディオンを置き、その下に生成りの地にベージュのキャラクター柄の帯を並べる ## Imagery - 人物を入れず、ポップでフラットなハロウィンのイラストを描く（コウモリ、かぼちゃ、おばけ、燭台、魔女帽の猫） - 商品は、くすんだ色の正方形の背景に瓶を立てたパッケージ写真にする - レシピ写真は暗い紫の背景で、グラスに綿あめやマシュマロのおばけを飾る - 瓶のシルエット・リボン・キラキラを組み合わせて、中身が秘密のイラストを作る - 背景の装飾は地より少し濃い紫のシルエットにして、主張させない - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に幅約480pxのSPカラムを置き、左右を紫で埋める構成を推奨する - PCに広げる場合は、レシピを写真と文字の2カラムのまま余白だけ増やす - 商品カルーセルは、PCでは4〜5枚が同時に見えるようにする - 波形の境界は横幅いっぱいに伸ばして使う ## 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-f971f9e5`（元 LP の URL から採番） - **元 LP**: https://kurand.jp/pages/halloween - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。