--- version: alpha name: Playful Wood-Grain Party Snack LP description: 明るい木目調の生成り地に、ピンク・黄緑・黄・水色のポップな太文字ロゴを乗せたお菓子の遊び方提案 LP。白カードに番号バッジとゲーム情報を並べ、チョコ色の濃茶を締め色に使う。斜めに散らした商品パッケージや斜め切りの色帯で、パーティーの楽しさを出している。 colors: background: '#F2EBDC' surface: '#FEFEFE' primary: '#591C23' text: '#3A2A2A' accent-1: '#EC7AAB' cta: '#8EC31B' on-cta: '#FEFEFE' accent-2: '#F8E96C' accent-3: '#6CC3E0' secondary: '#E8952F' line: '#E3DDD4' tint-1: '#FBF5ED' cta-accessible: '#5D8012' accent-1-accessible: '#DF2173' typography: display: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Dela Gothic One fontSize: 34px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.04em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.9 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 11px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.06em rounded: sm: 4px md: 8px lg: 16px 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}' floating-buy-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 64px game-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 140px number-badge: backgroundColor: '{colors.primary}' typography: '{typography.headline-md}' height: 28px rating-row: textColor: '{colors.accent-1}' typography: '{typography.note}' height: 20px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 28px character-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 90px event-label: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px detail-link: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 木目地×ポップ多色のお菓子遊び提案 LP（Playful Wood-Grain Party Snack LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 木目テクスチャ・多色ポップロゴ・番号付きゲームカード・散らした商品パッケージ・チョコ色の締め色 - **地の質感**: 明るいベージュの木目板を全面の地に敷く。その上に白いカードと斜め切りの色帯を重ねる - **形**: 角丸の小さい白カード、平行四辺形の色帯、斜めにトリミングした写真、濃茶の四角い番号バッジ - **温度感**: 暖かく明るい。生成りの地にビビッドな色をアクセントで置く ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F2EBDC` | 木目調の地 | 55% | 画素の実測 | | `surface` | `#FEFEFE` | カードの面 | 13% | 画素の実測 | | `primary` | `#591C23` | チョコ色の締め色・番号バッジ・フッター | 7% | 画素の実測 | | `text` | `#3A2A2A` | 見出し・本文の文字 | 3% | 推定 | | `accent-1` | `#EC7AAB` | ロゴのピンク・星評価 | 2% | 画素の実測 | | `cta` | `#8EC31B` | 追従購入ボタンの黄緑 | 3% | 画素の実測 | | `on-cta` | `#FEFEFE` | 購入ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#F8E96C` | 黄色の色帯 | 2% | 画素の実測 | | `accent-3` | `#6CC3E0` | 水色・人数アイコン | 1% | 推定 | | `secondary` | `#E8952F` | キャッチの橙文字 | 0% | 推定 | | `line` | `#E3DDD4` | カード内の区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#FBF5ED` | ショップ誘導帯の淡い面 | 3% | 画素の実測 | | `cta-accessible` | `#5D8012` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#DF2173` | AA を満たす補正値（計算） | | 計算 | - 地は木目調の生成りで統一し、情報は白カードに載せる - ロゴや大見出しはピンク・黄緑・黄・水色を1文字ずつ塗り分ける - 締め色は濃いチョコ色1色で、番号バッジ・ラベル・フッターに使う - 黄緑は購入ボタンだけに使い、追従させて目立たせる - 評価の星はピンク、人数アイコンは水色、パック数は黄緑と色で区別する - キャッチの小見出しは橙や水色で色を変え、リズムをつける - `floating-buy-button` は文字 `#FEFEFE` × 背景 `#8EC31B` のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#5D8012`、4.56:1）を使う。 - `event-label` は文字 `#FEFEFE` × 背景 `#EC7AAB` のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#DF2173`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | メインロゴ風の大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（多色） | 装飾・ディスプレイ | Dela Gothic One | 400 | 34px | 1.2 | 0.04em | | `headline-md` | カード内のゲーム名 | ゴシック | Zen Kaku Gothic New | 900 | 20px | 1.4 | 0.04em | | `headline-sm` | カードの小キャッチ（色文字） | 丸ゴシック | M PLUS Rounded 1c | 700 | 12px | 1.4 | 0.04em | | `body-md` | 本文・キャラ紹介 | ゴシック | Noto Sans JP | 500 | 13px | 1.9 | 0.04em | | `note` | 項目ラベル・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 吹き出しの手書き風ひとこと | 手書き・筆 | Yomogi | 400 | 11px | 1.4 | 0.02em | | `label-button` | 詳細ボタン・購入ボタン | 丸ゴシック | M PLUS Rounded 1c | 800 | 13px | 1.2 | 0.06em | - 大見出しは極太ディスプレイ書体で、1文字ずつ色を変え、白フチと影をつける - 本文は細めのゴシックで行間を広くとる - リード文は1文ずつ改行し、行ごとに色違いの下線を引く - 番号は濃茶の四角に白の太字で入れる - 吹き出しには手書き風書体を使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は中央寄せで写真とカードを左右に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - ゲームカードは写真を上、情報を下に重ねてずらす - 情報は『項目ラベル＋アイコン評価』の表で揃える - セクションの間は色帯や散らした商品で余白を埋める - 購入ボタンは右端に追従固定する - キャラ紹介はカードを互い違いに配置する ## Elevation & Depth - 白カードには薄い影（0 2px 6px rgba(0,0,0,.08)）をつける - 商品パッケージの切り抜きにはくっきりした落ち影をつける - ロゴ見出しは白フチ＋濃茶の影で浮かせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は角丸の長方形か、平行四辺形の斜め切り。商品は切り抜いて傾ける - **セクション境界**: 基本は境界なしで木目を続ける。フッターだけ凸凹のタブ形で濃茶に切り替える - 色帯は平行四辺形に傾けて画面の端に置く - 詳細ボタンは円の中に＋を入れたアイコン付きのテキストリンクにする - 吹き出しは楕円か星形の爆発形にする ## Components - **追従購入ボタン**（`floating-buy-button`）: パッケージ袋の形をした黄緑のボタン。右端に傾けて固定する - **ゲーム紹介カード**（`game-card`）: 左に写真、右に白カード。番号・キャッチ・ゲーム名・評価表・詳細リンクを入れる - **番号バッジ**（`number-badge`）: 濃茶の正方形に白の太字数字を入れる - **評価アイコン行**（`rating-row`）: 難易度は星、人数は人型、パック数は四角のアイコンを個数で示す - **キャラ吹き出し**（`speech-bubble`）: 白地または黄地の楕円・星形に、性格をひとことで入れる - **キャラ紹介カード**（`character-card`）: 白カードに名前と点線区切り、短い性格紹介。商品画像を角に重ねる - **イベント項目ラベル**（`event-label`）: 日時・内容・場所を色付きの小ラベルで示す - **詳細リンク**（`detail-link`）: テキストの右に丸囲みの＋を置く ## Do's and Don'ts **Do** - 全面に木目調の生成り地を敷き、その上に白カードを重ねる - 見出しは多色の極太文字で遊び心を出す - 商品パッケージを傾けて余白に散らす - 評価はアイコンの数で直感的に伝える - 購入導線は黄緑の追従ボタンで常に見せる **Don't** - 暗い背景や無彩色の地にしない（フッターだけは例外） - 見出しを細い書体や単色にしない - カードの角丸を大きくしすぎない - 黄緑を購入ボタン以外に多用しない - 長文の段落を詰め込まない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（遊びの企画を楽しく打ち出す）: 中央に多色ロゴ、周りに遊ぶ人の斜め切り写真と商品を散らす 2. **メッセージ**（ブランドの思いと企画の意図を伝える）: 左に商品写真、右に1行ずつ色下線を引いた短文を並べる 3. **キャラクター紹介**（商品の種類を性格づけて親しみを出す）: ロゴ見出しの下に吹き出し付きの白カードを互い違いに並べる 4. **遊び方10選**（商品を使った遊び方を具体的に見せる）: 番号付きのゲームカードを縦に10枚並べる。写真と情報表をセットにする 5. **イベント告知**（体験の場へ誘導する）: 写真と、ラベル付きの日時・内容・場所の表を並べる 6. **購入案内**（購入先へ送る）: 淡い帯にテキストとショップのバナー画像を置く 7. **フッター**（企業情報とSNSを載せる）: 凸凹のタブ形で濃茶に切り替え、ロゴとSNSの丸アイコンを置く ## Imagery - グレーのスタジオ背景の前で、白T・黒Tの若者が笑って遊ぶ写真を使う - 写真に手書きの効果線や吹き出し文字を書き足す - 個包装の商品を切り抜き、傾けて散らす - 背景は淡い木目板のテクスチャにする - 平行四辺形の色帯（黄・黄緑・水色・橙）を画面の端に重ねる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP ではゲームカードを写真の上、情報の下に縦積みにする - SP の散らし商品は数を減らし、端に小さく置く - 追従購入ボタンは SP では右下に小さく固定する - PC はコンテンツ幅を約900pxに抑え、左右の余白に装飾を置く - SP のメインロゴは画面幅の約80%にする ## 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-9170a26b`（元 LP の URL から採番） - **元 LP**: https://www.tirol-choco.com/tiropa10/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/12 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。