--- version: alpha name: Halloween Purple Orange Playful AR Campaign LP description: 紫の夜空とオレンジのかぼちゃ色を軸にした、子ども向けのハロウィン食品キャンペーン LP。極太の丸ゴシック、手描き風のイラスト、リボン型の見出しで遊び心を出している。体験の手順を STEP カードで縦に並べたあと、黒板のような深緑の SNS 投稿キャンペーン帯へつなぐ構成。 colors: primary: '#66227C' secondary: '#A71C82' cta: '#FC8D21' on-cta: '#FDFBF3' background: '#FEFFFE' background-alt: '#F8F29A' tint-1: '#FEFBEB' tint-2: '#F8EDD7' dark-section: '#16391B' accent-1: '#1CAB45' text: '#532F06' text-body: '#511C63' marker: '#F5E430' accent-2: '#C50D11' line: '#61422A' cta-accessible: '#B55A02' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 900 lineHeight: 1.15 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 19px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.7 note: fontFamily: M PLUS Rounded 1c fontSize: 11px fontWeight: 700 lineHeight: 1.5 label-button: fontFamily: M PLUS Rounded 1c fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 24px full: 999px spacing: unit: 8px card: 20px section: 56px 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.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-orange: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 34px ribbon-heading: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 64px step-label: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 24px step-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 260px speech-label: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 110px chalkboard-panel: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 420px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 80px warning-box: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 70px --- # DESIGN.md — 紫×橙のハロウィン食品AR企画 LP（Halloween Purple Orange Playful AR Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: ハロウィン・夜空の紫・かぼちゃオレンジ・極太丸文字・イラスト多用・ステップ解説 - **地の質感**: ベタ塗りを基本に、紫のストライプ、黄色地のドット、斜めに切り替わる帯、クレヨン風の塗りを重ねる - **形**: 大きめの角丸カード、ピル型ボタン、リボン型の見出し帯、吹き出し型のラベル - **温度感**: 暖かく、にぎやかで子どもらしい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#66227C` | ブランドの紫・夜空の地 | 14% | 画素の実測 | | `secondary` | `#A71C82` | マゼンタ寄りの紫グラデーション地 | 6% | 画素の主要色に補正 | | `cta` | `#FC8D21` | オレンジのボタン・期間帯 | 7% | 画素の主要色に補正 | | `on-cta` | `#FDFBF3` | オレンジ面にのる白文字 | 1% | 画素の実測 | | `background` | `#FEFFFE` | カードと白地セクション | 28% | 画素の実測 | | `background-alt` | `#F8F29A` | 黄色のドット地 | 8% | 画素の実測 | | `tint-1` | `#FEFBEB` | STEP カードの薄クリーム面 | 5% | 画素の実測 | | `tint-2` | `#F8EDD7` | 規約・問い合わせのベージュ地 | 6% | 画素の実測 | | `dark-section` | `#16391B` | 黒板風の深緑キャンペーン帯 | 14% | 画素の実測 | | `accent-1` | `#1CAB45` | もう 1 つの商品ラインを示す緑のラベル・ボタン | 1% | 画素の実測 | | `text` | `#532F06` | こげ茶の見出しと本文 | 2% | 画素の実測 | | `text-body` | `#511C63` | 紫の本文 | 2% | 画素の実測 | | `marker` | `#F5E430` | 黄色マーカー・強調文字 | 1% | 推定 | | `accent-2` | `#C50D11` | 注意喚起の赤 | 1% | 画素の実測 | | `line` | `#61422A` | カードとボタンのこげ茶の縁 | 1% | 画素の実測 | | `cta-accessible` | `#B55A02` | AA を満たす補正値（計算） | | 計算 | - 地色はセクションごとに大きく切り替える。紫の夜空→紫のストライプ→黄色のドットとオレンジの斜め帯→白→深緑→白→ベージュの順。 - オレンジは期間の帯、STEP ラベル、主ボタン、リボン見出しに使う。 - 紫の地にのせる本文は白地のカードに入れ、文字は紫かこげ茶にする。 - 深緑の帯では白と黄色の文字を使い、マーカーには黄色を使う。 - 注意書きは赤で強調し、白い箱に入れる。 - 商品ラインの違いは紫と緑のラベル色で見分けられるようにする。 - `button-orange` は文字 `#FDFBF3` × 背景 `#FC8D21` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B55A02`、4.58:1）を使う。 - `ribbon-heading` は文字 `#FDFBF3` × 背景 `#FC8D21` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B55A02`、4.58:1）を使う。 - `step-label` は文字 `#FDFBF3` × 背景 `#FC8D21` のコントラスト比が 2.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B55A02`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（黄色からオレンジのグラデ文字＋濃紺の縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 52px | 1.15 | 0.0em | | `headline-lg` | リボン見出し・セクションのタイトル | 丸ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.02em | | `headline-md` | STEP の見出し・キャンペーンの見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 19px | 1.4 | 0.02em | | `headline-sm` | ラベル・商品名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.4 | 0.02em | | `body-lg` | リード文（中央揃えで短く改行） | 丸ゴシック | M PLUS Rounded 1c | 700 | 15px | 1.6 | 0.03em | | `body-md` | 規約などの長文 | ゴシック | Noto Sans JP | 400 | 12px | 1.7 | 0.0em | | `note` | ※ の注釈 | 丸ゴシック | M PLUS Rounded 1c | 700 | 11px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 15px | 1.2 | 0.05em | - ほぼ全体を太字の丸ゴシックで組み、細い文字は使わない。 - リード文は中央揃えにし、1 行 15〜20 字で意味の切れ目ごとに改行する。 - 大見出しは縁取りとグラデをかけた極太文字にし、少し傾けて動きを出す。 - 数字や当選人数は大きくし、黄色マーカーを引く。 - 見出しの導入に「＼ ／」の囲みや、◆ を 2 つずつ並べた飾りを使う。 - 長い規約だけは標準的なゴシック体にする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。参加方法と商品一覧だけ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 20px（375px 幅換算） - 白い大カードの中に STEP の小カードを縦に積み、間を紫の下矢印でつなぐ。 - STEP の小カードはクリームとグレーを交互にし、上端にオレンジのピル型ラベルを重ねる。 - セクション見出しはリボン型の帯を中央に置く。 - ボタンは幅 85〜90% の中央配置にする。 - 注釈はカードの外に、地色の上で小さく置く。 - FV は全面イラストで、文字と商品を一枚絵として組む。 ## Elevation & Depth - ボタンとFAQカードには、こげ茶の濃い影を下に 4〜6px ずらして付ける（ぼかさない）。 - カードは基本的にフラットにし、太い縁で分ける。 - 黒板風のパネルは白い細枠で囲み、立体感はつけない。 - ぼかした影は使わない。 ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品写真は背景を切り抜いて置く。キャラクターのイラストは枠からはみ出させる - **セクション境界**: 家や木のシルエットの境界、斜めの色帯、角を内側にえぐったカードの縁 - 主ボタンとラベルはピル型にする。 - 白い大カードの上の角は、内側に丸くえぐる。 - 吹き出し型のラベルは六角形気味にし、下にしっぽを付ける。 - FAQ カードはこげ茶の太い縁と角丸 16px で作る。 - 参加方法のカードの上には、半円のオレンジ STEP 札を重ねる。 ## Components - **主 CTA ボタン**（`button-primary`）: 紫の地に夜の家のイラストを添え、右端に矢印を置いた横長のピル型ボタン - **オレンジのピル型ボタン**（`button-orange`）: 下にずらした濃い影を付けたオレンジのボタン - **アウトラインのボタン**（`button-outline`）: 白地にこげ茶の縁を付け、右端に ▼ を置いた小さめのピル型ボタン - **リボン型の見出し**（`ribbon-heading`）: オレンジの帯の両端に黒いリボンの端を付け、かぼちゃやクモの巣を添えた見出し - **STEP ラベル**（`step-label`）: カードの上端に重ねる、オレンジのピル型の番号札 - **手順カード**（`step-card`）: クリームかグレーの角丸カード。見出し、イラスト、ボタンを中央揃えで入れる - **吹き出し型のラベル**（`speech-label`）: 紫か緑の吹き出しに白文字で対象を示し、下のカードに重ねる - **黒板風のキャンペーンパネル**（`chalkboard-panel`）: 深緑の地に三角の旗、紙吹雪、子どものイラストを散らし、白と黄色の文字で告知する - **FAQ の開閉カード**（`faq-item`）: 白地にこげ茶の太い縁と下の影を付け、右端に薄オレンジの丸に＋を入れた開閉カード - **注意の箱**（`warning-box`）: 白い箱に赤い太字で注意を書く。赤い縁と ⚠ アイコンを付ける場合もある ## Do's and Don'ts **Do** - セクションごとに地色と柄（ストライプ・ドット・斜めの帯）を切り替えて、楽しさを出す。 - コウモリ、星のきらめき、かぼちゃ、キャンドルなどの小物を余白に散らす。 - 手順は番号札と矢印で、1 つずつ縦に見せる。 - ボタンや縁にはこげ茶のずらし影を付けて、手作り感を出す。 - 期間・当選数・注意点は色の帯やマーカーで目立たせる。 **Don't** - 細い明朝体や細いゴシック体で見出しを組まない。 - 無彩色だけの落ち着いた配色にしない。 - ぼかした影やガラス風の効果を使わない。 - 長文をカードに入れずに紫の地へ直接のせない。 - 写実的な写真の人物は使わず、イラストで統一する。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画の世界観と体験内容を一目で伝える）: 紫の夜空の一枚絵。極太の縁取り文字、中央の大きなキャラクター、手前の商品と手書き風のバッジで組む 2. **期間の帯**（体験できる期間を伝える）: オレンジの全幅帯。白いピル型の見出しを置き、白い太字で日付を中央に入れる 3. **導入ストーリー**（体験の楽しさを物語として伝える）: 角をえぐった白カードに、紫の中央揃えの文と橙のハッシュタグを入れる 4. **キャンペーンの告知**（投稿キャンペーンへ誘導する）: 家のシルエットの下に黒板風のパネルを置き、旗、紙吹雪、ギフトのロゴを添える 5. **遊び方**（体験の手順を説明する）: 紫のストライプ地の上に白い大カードを置き、STEP の小カード 5 つを矢印でつなぐ 6. **素材のダウンロード**（対象別に素材を配布する）: 黄色のドット地にオレンジの斜め帯を重ねる。吹き出しラベル付きのカードに素材と商品を並べ、ボタンを置く 7. **体験の起動 CTA**（体験の開始へ誘導する）: 下矢印、紫の大きな問いかけ見出し、キャラクターのイラストのあとに紫のピル型ボタンを置き、下に商品を横一列に並べる 8. **対象商品**（対象となる商品を示す）: 白地に 2×2 の商品グリッドを置き、紫の区切り線と赤い注釈を添える 9. **投稿キャンペーンの詳細**（賞品と参加方法を伝える）: 深緑の地にクモの巣の線画を重ねる。黄色地の賞品カードと、2×2 の参加ステップカードを置き、3 色のボタンを並べる 10. **よくある質問**（不安や疑問を解消する）: 白地に、こげ茶の縁と影を付けた開閉カードを縦に並べる 11. **利用規約・問い合わせ**（規約と窓口を示す）: ベージュの地に白いスクロール枠の規約を置き、大きな電話番号とブランドサイトへのボタンを続ける ## Imagery - 子どもやキャラクターは、太い主線と頬の赤みのある、親しみやすいフラットなイラストで描く。 - マスコットのモンスターは、クレヨンで塗ったような質感にする。 - 洋館、墓、柵、枯れ木は濃紺のシルエットで描き、紫やピンクの雲と組み合わせる。 - 商品は背景を切り抜いた写真を斜めに配置し、影を軽く付ける。 - 星のきらめき、コウモリ、紙吹雪、三角の旗、キャンディを余白に散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に約 400〜480px 幅のカード列を置き、背景の柄を全幅に広げる。 - PC の FV は横長の一枚絵にし、左右にお城やかぼちゃのイラストを広げる。 - PC では期間を 1 行にまとめる。 - PC では参加方法を 4 カラムに並べる。 - PC では背景に商品写真やクモの巣を大きく散らし、余白を埋める。 ## 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-5b3c19e5`（元 LP の URL から採番） - **元 LP**: https://webar.styly.cc/landing_pages/pucchin-2026aut - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。