--- version: alpha name: Psychedelic Matsuri Pop Food Festival LP description: 手描き絵具タッチの極彩色背景をセクションごとに切り替える、夏祭り系フードイベントLP。ぷっくりした立体ロゴ風の見出しはピンクと水色の二色で、ピルボタンもピンク。不定形に切り抜いた写真や円形アイコンを並べ、混沌として賑やかな見た目にまとめている。 colors: primary: '#FF8ED4' secondary: '#1BB3EC' background: '#FEFEFE' background-alt: '#FEFA5A' accent-1: '#D71B31' accent-2: '#0152A3' dark-section: '#20165B' on-dark: '#FFFFFF' cta: '#2DC84D' on-cta: '#FAFEFA' text: '#1A1A1A' accent-3: '#FFFB5F' tint-1: '#66FA32' primary-accessible: '#E2008C' cta-accessible: '#1E8734' secondary-accessible: '#0E7EA7' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 2.2 letterSpacing: 0.05em body-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.04em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 64px heading-puffy: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px concept-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.body-lg}' rounded: '{rounded.lg}' height: 900px speech-label: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px menu-card: textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 400px avatar-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.full}' height: 230px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.body-md}' height: 70px --- # DESIGN.md — ピンク×水色×黄の極彩色お祭りフードフェスLP（Psychedelic Matsuri Pop Food Festival LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、かわいい、情報量多め・訴求型 - **キーワード**: 極彩色・手描き絵具・お祭り・ネオン・ぷっくり文字・混沌 - **地の質感**: ポスターカラーの筆跡や、にじみのある手描きテクスチャを全面の背景に使う。上にネオン系の写真を重ねる - **形**: ピル型ボタン、円形アバター、ぐにゃっとした不定形の写真マスク、角丸の白カード - **温度感**: 高温・祝祭的。原色を彩度最大で使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FF8ED4` | 見出し・ボタン・強調の主ピンク | 11% | 画素の実測 | | `secondary` | `#1BB3EC` | 見出しの水色・リード文 | 3% | 画素の実測 | | `background` | `#FEFEFE` | コンセプト用白カード・フッター下 | 15% | 画素の実測 | | `background-alt` | `#FEFA5A` | コンテンツ紹介のレモン黄地 | 12% | 画素の実測 | | `accent-1` | `#D71B31` | 提灯モチーフの赤 | 6% | 画素の主要色に補正 | | `accent-2` | `#0152A3` | 屋台セクションの青い筆跡地 | 15% | 画素の実測 | | `dark-section` | `#20165B` | 出演者セクションの夜空紺 | 9% | 画素の実測 | | `on-dark` | `#FFFFFF` | 濃い地の上の白文字 | 1% | 画素の主要色に補正 | | `cta` | `#2DC84D` | LINE登録ボタンの緑 | 1% | 推定 | | `on-cta` | `#FAFEFA` | CTAボタン上の文字 | 0% | 画素の実測 | | `text` | `#1A1A1A` | 黄地の本文の黒 | 2% | 推定 | | `accent-3` | `#FFFB5F` | 入場無料などの強調黄色文字 | 1% | 画素の主要色に補正 | | `tint-1` | `#66FA32` | アクセス背景の黄緑 | 3% | 画素の実測 | | `primary-accessible` | `#E2008C` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#1E8734` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#0E7EA7` | AA を満たす補正値（計算） | | 計算 | - セクションごとに背景の手描きテクスチャを切り替え、色で場面転換する（黄→赤×青→黄→青→紺→ピンク→青→黄緑→ピンク） - 見出しはピンクと水色の二色組みにし、白の太い縁取りと影で立体化する - ボタンはピンクのピルに白文字で統一する。主CTA（LINE登録）だけ緑 - 白カード上の文章は水色とピンクで段落ごとに色を替える - 黄地の本文は黒、紺地や青地の文字は白かピンクにする - 強調の黄文字は赤や青の地に置き、周りにキラキラ装飾を添える - `button-pill` は文字 `#FFFFFF` × 背景 `#FF8ED4` のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E2008C`、4.55:1）を使う。 - `button-primary` は文字 `#FAFEFA` × 背景 `#2DC84D` のコントラスト比が 2.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#1E8734`、4.51:1）を使う。 - `concept-card` は文字 `#1BB3EC` × 背景 `#FEFEFE` のコントラスト比が 2.39:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#0E7EA7`、4.57:1）を使う。 - `speech-label` は文字 `#FF8ED4` × 背景 `#FEFEFE` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E2008C`、4.51:1）を使う。 - `avatar-badge` は文字 `#FFFFFF` × 背景 `#FF8ED4` のコントラスト比が 2.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E2008C`、4.55:1）を使う。 - `faq-accordion` は文字 `#FF8ED4` × 背景 `#FEFEFE` のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#E2008C`、4.51:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション見出しのロゴ風極太文字 | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.1 | 0.02em | | `headline-lg` | 日程・入場無料などの大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.0em | | `headline-md` | コンセプトの見出し・各コンテンツのタイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.4 | 0.02em | | `body-lg` | 白カード内のリード文（中央揃え・色付き） | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 2.2 | 0.05em | | `body-md` | コンテンツ説明の本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.9 | 0.04em | | `headline-sm` | 出演者名・グッズ名 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.0em | | `note` | 注釈・肩書き・時間バッジ | ゴシック | Zen Kaku Gothic New | 700 | 11px | 1.6 | 0.03em | | `label-button` | ピルボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.0 | 0.05em | - 見出しは丸みのある極太書体にし、白の太縁と影で浮き出させる - 見出しは単語ごとにピンクと水色で塗り分ける - 本文も丸ゴシックの太字にして、細字は使わない - リード文は中央揃えで行間を2倍以上とり、詩のように短く改行する - 出演者名には紺地でも読めるよう縁取りを付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。出演者・クリエイター・グッズは 2 カラムグリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - 背景は全幅のテクスチャ、コンテンツは左右12〜16pxの余白で置く - コンセプトは白い角丸カードを背景に浮かせる - コンテンツ紹介は写真→見出し→本文→ボタンの順に縦積みする - 屋台メニューは各店の色の枠で囲んだ正方形寄りのカード＋下にボタン - 出演者は円形写真・名前・時間バッジの3段セットを2列で並べる ## Elevation & Depth - 影は控えめにし、立体感は縁取りと配色で出す - 見出し文字には白縁と落ち影を付ける - 白カードやFAQパネルは影なしのフラットで背景から浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 不定形のぐにゃっとしたブロブマスク、円形アバター、角丸8pxの長方形 - **セクション境界**: 直線で背景テクスチャを切り替える。境界に見出しがまたがる - ボタンはすべてピル型 - 人物は必ず正円で切り抜く - メイン写真はブロブ型に切り抜いて遊びを出す - 吹き出し型ラベルは白地にピンク枠 ## Components - **ピンクのピルボタン**（`button-pill`）: 詳細を見る系のサブボタン。左寄せか中央に置く - **LINE登録CTA**（`button-primary`）: 緑の大きな角丸ボタン。下に注釈を添える - **ぷっくり見出し**（`heading-puffy`）: ピンクと水色の極太文字に白縁と影を付け、セクションの頭に中央配置する - **コンセプト白カード**（`concept-card`）: 絵具テクスチャの上に置く大きな白い角丸カード。中に色付きの中央揃え文 - **吹き出しラベル**（`speech-label`）: 写真上のスポットを指す白い吹き出し。小見出しは水色、名称はピンク - **屋台メニューカード**（`menu-card`）: 店舗ごとの色の枠の中に料理写真、ロゴ風の店名、監修者の円アイコンを入れる - **出演者アバター**（`avatar-badge`）: 円形写真の下に名前と、ピンクの角丸時間バッジを置く - **FAQアコーディオン**（`faq-accordion`）: 白パネル内にピンク文字のQと下向き三角。区切りはピンクの線 ## Do's and Don'ts **Do** - セクションごとに地の色とテクスチャを大胆に切り替える - 見出しは極太の丸文字に二色と白縁を付けて立体的にする - 写真はネオン照明の夜祭りの雰囲気で選ぶ - ボタンはピンクのピルに統一する - 余白の空いた所にキャラクターや花飾りを散らす **Don't** - くすみ色やパステル寄りの淡い配色にしない - 細い明朝体や細字の本文を使わない - 背景を無地のグレーや白だけで埋めない - 人物写真を四角いまま並べない - シャープな直角ボタンを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観とイベント名を一撃で伝える）: 手描きの全面イラストの中央にぷっくりロゴ。下帯に日程・会場・入場無料バッジ 2. **コンセプト**（イベントの思想を語る）: 黄〜橙の泡テクスチャの上に白カード。水色とピンクの中央揃え文。主催ロゴで締める 3. **会場マップ・動画**（会場の全体像を見せる）: 赤い提灯柄の地にブロブ写真と吹き出しラベル。続いてロゴと埋め込み動画 4. **開催概要・CTA**（日時・場所と事前登録へ誘導する）: 大きな日程文字、黄色の入場無料とキラキラ、緑のLINEボタン、注釈 5. **コンテンツ紹介**（体験の目玉を個別に紹介する）: 黄地に白い筆跡。ブロブ写真・ピンク見出し・黒の本文・ピルボタンを縦に繰り返す 6. **屋台メニュー**（コラボメニューを並べる）: 青い筆跡の地に、色枠のメニューカードとメニューを見るボタンを繰り返す 7. **出演者**（ステージの出演者と時間を示す）: 紺地にぼけた玉ボケ光。円形アバターを2列、時間バッジ付き。最後にタイムテーブルボタン 8. **クリエイター**（プロデューサー陣を紹介する）: ピンクに白い脳のしわ模様の地。円形写真＋肩書き＋名前を2列で並べる 9. **グッズ**（限定グッズを告知する）: 青い筆跡の地に切り抜き商品画像とピンクの品名を2列で並べる 10. **アクセス**（最寄駅と地図を示す）: 黄緑と橙のテクスチャに駅情報のリストと埋め込み地図 11. **よくある質問**（疑問を解消する）: カラフルなパネル柄の地に白パネルのアコーディオンと、もっとみるボタン 12. **フッター**（ロゴ・SNS導線を置く）: ピンク地にロゴと白丸のSNSアイコン。最下部は白地に企業ロゴ ## Imagery - メインビジュアルは、ポスターカラーで描いた原色だらけの祭りイラスト（提灯、動物キャラ、脳モチーフ） - 背景は筆跡が残る手描きテクスチャ（縦縞の青、白い集中線の黄、白いミミズ模様のピンク） - 写真はピンクや紫のネオン照明が入った夜祭り会場。人で賑わう様子を写す - 料理は白背景の真俯瞰か斜め上から撮る。店名は看板風のロゴ文字で載せる - 装飾として、くす玉の花飾り・キラキラの星・手描きキャラを隅に配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央のコンテンツ幅を約70%にし、背景テクスチャは全幅のまま - コンテンツ紹介はPCで写真と文を左右交互に並べ、後半は3カラムのカードにする - 屋台メニューはPCで2列グリッド、出演者・クリエイター・グッズは3列 - FVはPCで横長のイラスト。日程と会場は左右に分けて下帯に置く - アクセスは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-32394a46`（元 LP の URL から採番） - **元 LP**: https://noujiruyokocho.com/?utm_source=instagram&utm_medium=cpc&utm_content=01&utm_id=120226363852080694&utm_term=120226363853120694&utm_campaign=120226363852080694&fbclid=PAQ0xDSwLCNdNleHRuA2FlbQEwAGFkaWQBqyFD4fy1hgGnmb80CZejz5tnHhHZyDYfhPTISPn7R6e9sk0PCo - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。