--- version: alpha name: Pastel Polka Dot Food Festival LP description: 白地に淡いピンクの大きな水玉を敷いたポップなイベント告知LP。見出しはキャラメル色のピル帯で統一する。開催日程表、出店カードの4列グリッド、赤いグラデーションCTAで情報を多く並べる構成。 colors: primary: '#FFFFFF' background: '#FEFBF4' secondary: '#DDA966' cta: '#FE2B2C' on-cta: '#FFFFFF' accent-1: '#E60012' text: '#333333' background-alt: '#EEEEEE' surface: '#FEFBF3' accent-2: '#14C3AC' accent-3: '#C35AA5' line: '#F5E6A0' tint-1: '#FFCEE4' text-muted: '#1C8ACB' cta-accessible: '#ED0102' accent-2-accessible: '#0E8575' text-muted-accessible: '#197CB7' typography: display: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 headline-lg: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.3 headline-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.3 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.6 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 3px md: 6px lg: 20px full: 999px spacing: unit: 4px card: 4px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-pill-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 22px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 26px schedule-table: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 110px vendor-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 300px tab-switch: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 20px news-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 230px sub-heading-bar: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 18px share-buttons: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 20px --- # DESIGN.md — ピンク水玉×キャラメル帯のスイーツイベントLP（Pastel Polka Dot Food Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、情報量多め・訴求型 - **キーワード**: 水玉背景・パステルピンク・キャラメル帯見出し・赤文字強調・出店カードグリッド・イベント告知 - **地の質感**: 白地に淡ピンクの大きな水玉模様が全面に繰り返される。見出し帯にはごく薄い木目調の質感がある - **形**: 見出しはピル型の帯、カードは角丸が小さく薄い影付き、CTAは角丸が小さめの横長ボタン - **温度感**: 暖かく甘い。ピンクとキャラメル色で、お菓子のような明るさを出す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FFFFFF` | 水玉と装飾のピンク | 10% | 画素の実測 | | `background` | `#FEFBF4` | ページの白地 | 33% | 画素の実測 | | `secondary` | `#DDA966` | セクション見出しのキャラメル帯 | 7% | 画素の実測 | | `cta` | `#FE2B2C` | 主CTAボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#E60012` | 強調文字の赤（日時・注意書き） | 2% | 推定 | | `text` | `#333333` | 本文と見出しの文字 | 4% | 推定 | | `background-alt` | `#EEEEEE` | 表のヘッダー行のグレー | 5% | 画素の実測 | | `surface` | `#FEFBF3` | 出店カードの見出し地（クリーム） | 5% | 画素の実測 | | `accent-2` | `#14C3AC` | タブと告知枠の青緑 | 1% | 画素の実測 | | `accent-3` | `#C35AA5` | 告知バナー枠のピンク紫 | 3% | 推定 | | `line` | `#F5E6A0` | お知らせ枠のクリーム黄の線 | 0% | 推定 | | `tint-1` | `#FFCEE4` | フッターの濃いめピンク | 1% | 画素の実測 | | `text-muted` | `#1C8ACB` | リンク・SNS文字の青 | 0% | 推定 | | `cta-accessible` | `#ED0102` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#0E8575` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#197CB7` | AA を満たす補正値（計算） | | 計算 | - 地は白にして、全面に淡ピンクの水玉を敷く - セクション見出しはすべてキャラメル色のピル帯に茶色の文字 - 日時・注意書き・最重要の一文は赤文字の太字 - 主CTAは赤のグラデーションに白文字で統一 - 表のヘッダーは薄グレー、本文行は白 - 青緑はタブ切替など、ナビゲーション用だけに限定する - `button-primary` は文字 `#FFFFFF` × 背景 `#FE2B2C` のコントラスト比が 3.75:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#ED0102`、4.56:1）を使う。 - `tab-switch` は文字 `#FFFFFF` × 背景 `#14C3AC` のコントラスト比が 2.23:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#0E8575`、4.54:1）を使う。 - `share-buttons` は文字 `#FFFFFF` × 背景 `#1C8ACB` のコントラスト比が 3.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#197CB7`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 重要告知の大見出し（赤） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.0em | | `headline-lg` | 表内の開催地名（赤・大） | ゴシック | Noto Sans JP | 700 | 22px | 1.3 | 0.0em | | `headline-md` | キャラメル帯の見出し | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.02em | | `headline-sm` | 出店カードの店名（赤茶） | ゴシック | Noto Sans JP | 700 | 12px | 1.3 | 0.0em | | `body-md` | 本文・お知らせ | ゴシック | Noto Sans JP | 400 | 12px | 1.6 | 0.0em | | `note` | カード内の説明・注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | CTAボタンの文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.4 | 0.02em | - 書体はゴシック1種類だけにする - 装飾的なロゴ文字はバナー画像の中だけで使う - 強調は赤＋太字。下線は使わない - カード内は9px前後の小さな文字で情報を詰める - 見出し帯の文字は中央揃えで、小さく控えめに - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は1カラム。出店カードのみ4列グリッド - **本文ブロックの幅**: 画面幅の約 96% - **余白**: セクション間 24px、基本単位 4px、カード内 4px（375px 幅換算） - 見出し帯は画面の左右いっぱい近くまで（左右4px程度の余白） - 日程表は3列（日時・地域・場所）を縦に積み、SPでは中央揃えで読ませる - 告知バナーは横幅いっぱいの画像で連続して置く - 出店カードは写真・店名・説明・商品名・産地の順に並べる - お知らせは淡黄色の枠で囲み、日付と▶付きのタイトルを並べる ## Elevation & Depth - 出店カードには薄いドロップシャドウ（0 1px 3px rgba(0,0,0,.2)） - CTAボタンには下方向の軽い影 - 見出し帯は影なし。木目調の質感だけをつける ## Shapes - **角丸**: 小 3px ／ 中 6px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: カード写真は横長の矩形で角丸なし。商品は正面から撮影 - **セクション境界**: 直線的な区切りは使わず、見出しのピル帯で区切る - 見出し帯だけをピル型にする - CTAは角丸3〜4pxの横長ボタン - バナーは太い色枠付きの矩形 ## Components - **キャラメル帯見出し**（`section-pill-heading`）: 画面幅いっぱいのピル型帯。薄い木目の質感で、中央に小さな太字を置く - **赤グラデCTA**（`button-primary`）: 横幅いっぱいの赤グラデーションのボタン。下に赤い注釈を添える - **開催日程表**（`schedule-table`）: グレーのヘッダー行と点線の区切り。日時は赤文字、地名は赤の大文字 - **出店カード**（`vendor-card`）: クリーム色の店名帯、写真、説明、商品の箇条書き、赤字の産地を縦に並べる - **開催地タブ**（`tab-switch`）: 選択中は青緑の塗りに白文字と下向きの三角、未選択は白地に青緑の枠線 - **お知らせ枠**（`news-box`）: 淡黄色の太枠の中に、日付と▶付きのタイトルを並べる - **左線付き小見出し**（`sub-heading-bar`）: 左に黒の縦線、下に点線を引いた中見出し - **SNSシェアボタン**（`share-buttons`）: 2つの色付きボタンを横に並べる ## Do's and Don'ts **Do** - 背景には淡ピンクの水玉を常に敷く - 見出しはすべてキャラメル色のピル帯にそろえる - 日時・期間限定・注意は赤字の太字で目立たせる - 商品写真はカラフルで明るいものを使う - 情報は表やカードにして密度高く並べる **Don't** - 暗い背景色や黒基調のセクションを入れない - 明朝体などの上品な書体を使わない - CTAの色を赤以外にしない - 大きな余白をとった、ミニマルな構成にしない - 見出しの形をセクションごとに変えない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベントの世界観を伝える）: パステル配色のポップなイラストのキービジュアル。上にピンク地のヘッダーを置く 2. **SNSシェア**（拡散を促す）: 2色のシェアボタンを横に並べる 3. **告知バナー**（新店オープンや監修情報を伝える）: 太い色枠の画像バナーを縦に連続して置く 4. **協賛募集バナー**（企業向けの募集）: 青緑の枠、ガーランドと風船の装飾、ロゴを入れる 5. **開催スケジュール**（日程と会場を伝える）: 赤い大見出しの下に、3列の日程表を開催地ごとに繰り返す 6. **お知らせ**（最新情報を伝える）: 淡黄色の枠のリスト 7. **イベント概要**（趣旨を説明する）: 見出し帯の下に本文を2段落 8. **出店・商品一覧**（出店者と商品を紹介する）: 開催地タブの下に、4列の出店カードを並べる 9. **併催イベント**（関連企画を紹介する）: 本文と写真のコラージュグリッド 10. **開催実績**（信頼性を補強する）: 左線付き見出しと過去実績へのリンク 11. **お問い合わせ**（問い合わせに誘導する）: 赤字の電話番号と赤いCTAボタン2つ 12. **スタッフ募集**（人材を募集する）: 短い本文と赤いCTA 13. **SNS埋め込み・フッター**（SNSへ誘導し、ページを締める）: 埋め込みウィジェット、ページトップボタン、ピンク地のフッター ## Imagery - スイーツは白か明るい背景で、正面・俯瞰から撮る - キービジュアルはパステルの色ブロックにポップなイラストとカラフルな手書き風ロゴ - 装飾はガーランド旗、風船、テントなど、お祭りのモチーフ - ロゴの文字は濃いピンクに白の縁取りをつけた立体風 - コラージュは小さな商品写真を隙間なくタイル状に並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの約960px幅で、左右の水玉背景が見える - PCではヘッダー右にテキストのナビを置く - 出店カードはPCで3列、SPで4列の小さなカード - 日程表はPCで1行に3列を横並び - お問い合わせとスタッフ募集、SNS2つはPCで2カラムに並べる - CTAボタンは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-171e3aa6`（元 LP の URL から採番） - **元 LP**: https://www.i-89.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。