--- version: alpha name: Pop Comic Osaka Souvenir Sweets LP description: 朱色と山吹色の集中線、吹き出し、黒いキャラクターで関西のノリを出したアメコミ・漫画風の土産菓子 LP。方言コピーを吹き出しに入れ、成分図解、4コマ風ストーリー、店舗アコーディオン、商品カードの順で購入へつなげる。 colors: primary: '#EA5711' secondary: '#F7AC01' background-alt: '#F4AC01' background: '#FEFEFD' cta: '#F28202' on-cta: '#FFFFFF' text: '#100C0B' dark-section: '#110205' accent-1: '#F58B0F' marker: '#FECD0B' accent-2: '#652B18' on-primary: '#FEF5E9' line: '#FFFFFF' cta-accessible: '#B36001' accent-1-accessible: '#A95E07' primary-accessible: '#C4490E' typography: display: fontFamily: Yusei Magic fontSize: 44px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.15em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 26px fontWeight: 900 lineHeight: 1.0 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-cart: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 24px button-fv: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 28px heading-brush: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 24px speech-cloud: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 150px comic-panel: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 160px label-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 22px accordion-store: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 60px product-card: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 330px badge-rank: textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 120px --- # DESIGN.md — 朱色×山吹の漫画風ご当地菓子 LP（Pop Comic Osaka Souvenir Sweets LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 集中線・漫画の吹き出し・ドット柄・黒シルエットキャラ・関西弁・暖色ベタ塗り - **地の質感**: ベタ塗りの暖色面に、ドット柄・放射状の集中線・筆で塗ったような見出し帯を重ねる。立体感は出さず平面的に作る - **形**: 雲形・爆発形の吹き出し、太い黒枠の漫画コマ、角丸なしの四角いカードとボタン - **温度感**: とても暖かい。オレンジ系の色だけで構成する ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#EA5711` | ブランド朱色・店舗情報とフッターの地 | 24% | 画素の実測 | | `secondary` | `#F7AC01` | 山吹オレンジの地（人気の理由・キャラ・ラインナップ） | 17% | 画素の実測 | | `background-alt` | `#F4AC01` | 黄色の地・商品カードの面 | 13% | 画素の実測 | | `background` | `#FEFEFD` | 白の地（成分図解）・吹き出しの面 | 18% | 画素の実測 | | `cta` | `#F28202` | カート追加ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#100C0B` | 本文・見出しの黒文字、漫画の枠線 | 3% | 画素の実測 | | `dark-section` | `#110205` | キャラクターの黒シルエット | 3% | 画素の実測 | | `accent-1` | `#F58B0F` | 番号数字・見出し帯のオレンジ | 2% | 画素の主要色に補正 | | `marker` | `#FECD0B` | 成分ラベルの黄色マーカー | 1% | 画素の実測 | | `accent-2` | `#652B18` | FVのボタンに使う焦げ茶 | 2% | 画素の主要色に補正 | | `on-primary` | `#FEF5E9` | 朱色の地にのせる白文字 | 0% | 画素の実測 | | `line` | `#FFFFFF` | アコーディオン行を区切る白線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#B36001` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A95E07` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#C4490E` | AA を満たす補正値（計算） | | 計算 | - 地の色は朱色、山吹、黄色、白をセクションごとに切り替え、隣り合うセクションに同じ色を置かない - 強調にはオレンジ系だけを使う。青・緑は写真やイラストにしか出さない - 文字は黒か白のどちらか。黄色や山吹の地では黒、朱色の地では白 - 吹き出しは白地に黒の太い輪郭で描く - 見出し帯はオレンジを筆で塗ったような形にし、その上に白文字を置く - 購入ボタンはオレンジのベタ塗りに白文字と白い三角を置く - `button-cart` は文字 `#FFFFFF` × 背景 `#F28202` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#B36001`、4.57:1）を使う。 - `heading-brush` は文字 `#FEF5E9` × 背景 `#F58B0F` のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A95E07`、4.53:1）を使う。 - `accordion-store` は文字 `#FEF5E9` × 背景 `#EA5711` のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#C4490E`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の商品ロゴ風の大見出し | 手書き・筆 | Yusei Magic | 700 | 44px | 1.2 | 0.02em | | `headline-lg` | 吹き出し内の理由・ストーリーの文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 18px | 1.5 | 0.02em | | `headline-md` | セクション見出し（帯の上の白文字） | 丸ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.3 | 0.15em | | `headline-sm` | 成分ラベル・アコーディオンの店舗名 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.03em | | `body-md` | 説明文・価格 | ゴシック | Noto Sans JP | 500 | 13px | 1.6 | 0.02em | | `accent` | 吹き出し内の番号（斜めの太字） | 欧文サンセリフ | Montserrat | 900 | 26px | 1.0 | 0.0em | | `note` | 送料などの注記・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | カートボタンの文字 | ゴシック | Noto Sans JP | 700 | 11px | 1.0 | 0.05em | - コピーは関西弁の話し言葉で、短く改行する - 吹き出しの中は中央か左揃えで 2〜4 行にする - 見出しは字間を広く取り、筆塗り風の帯にのせる - 番号は斜めのオレンジの数字にして文の左に置く - 長い本文ブロックは作らない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は縦に積む - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅のベタ塗りで区切り、境界は直線にする - 見出し帯はセクションの上部中央に置く - 成分図解は写真を中央に置き、引き出し線でラベルを左右に散らす - ストーリーは黒枠のコマを縦に 4 つ並べる - 商品カードは黄色の地の中に中央揃えで並べる ## Elevation & Depth - 影は使わずフラットにする - 立体感は黒い太線と色のコントラストで出す - 吹き出しは輪郭線だけで浮かせる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は背景を切り抜くか、四角のまま置く。FV の写真は爆発形の吹き出しで切り抜く - **セクション境界**: 直線のベタ塗りで切り替える - ボタンとカードは角丸なしの四角 - 吹き出しは雲形かギザギザの爆発形にする - 漫画のコマは 3〜4px の黒枠で囲む - 見出し帯は端がかすれた筆塗り形にする ## Components - **カート追加ボタン**（`button-cart`）: オレンジの四角ボタン。白文字の右に白い三角を置く - **FV の購入導線ボタン**（`button-fv`）: 木札風の焦げ茶の縁取りに丸アイコンと文字を入れたボタン。左右に 2 つ並べる - **筆塗り帯の見出し**（`heading-brush`）: オレンジのかすれた帯の上に、字間を広げた白文字を置く - **雲形の吹き出し**（`speech-cloud`）: 白地に黒の太い輪郭の雲形。番号と関西弁のコピーを入れ、しっぽをキャラクターに向ける - **漫画コマ**（`comic-panel`）: 黒枠の横長コマ。イラストと短いセリフを入れる。集中線やドット柄のコマを混ぜる - **成分ラベル**（`label-marker`）: 黄色マーカーの上に黒い太字。細い黒の引き出し線で写真とつなぐ - **店舗アコーディオン**（`accordion-store`）: 朱色の全幅の行に、白文字の店舗名と下向き山形の矢印を置く。行は白線で区切る - **商品カード**（`product-card`）: 黄色の四角に商品写真、入数、税込価格、数量の入力欄、カートボタンを縦に並べる - **金メダル風の実績バッジ**（`badge-rank`）: 金の月桂樹メダルと赤いリボンで売上順位を示す。FV の右上に置く ## Do's and Don'ts **Do** - 吹き出し・集中線・ドット柄で漫画のノリを常に出す - セクションの地の色を暖色の中で交互に切り替える - 黒シルエットのキャラクターを繰り返し登場させ、語り手にする - コピーは方言の話し言葉で、短く改行する - ボタンとカードは角丸なしの四角にする **Don't** - 寒色の地や面を使わない - ドロップシャドウやグラデーションのボタンを使わない - 明朝体や細い書体を使わない - 長い説明文を段落で並べない - ピル型や大きな角丸を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ご当地感と商品の魅力を一目で伝える）: 朱色の集中線の地に、爆発形で切り抜いた商品写真、ロゴ、吹き出しコピー、金メダルのバッジを重ね、下に購入ボタンを 2 つ置く 2. **トピックス**（お知らせ・コラボ情報）: 朱色の地に見出し帯と横長のバナー画像を 1 枚置く 3. **人気の理由**（選ばれる理由を 3 つ示す）: 山吹にドット柄の地。番号つきの雲形吹き出しを 3 つ並べ、キャラクターが話す形にする 4. **素材のこだわり**（原材料の特徴を図解する）: 白い地の中央に商品写真を置き、引き出し線で黄色マーカーのラベルと素材のイラストを配置する 5. **誕生ストーリー**（開発の経緯を楽しく伝える）: 黄色の地に黒枠の漫画コマを 4 つ縦に並べる 6. **キャラクター紹介**（親しみとSNSへの誘導）: 山吹の地に大きなキャラクターと名前、吹き出しの紹介文を置く 7. **店舗情報**（販売店舗を探してもらう）: 朱色の全幅アコーディオンを白線で区切って縦に並べる 8. **ラインナップ**（通販で購入してもらう）: 山吹の地に黄色の商品カードを縦に並べ、最後に送料の注記を置く 9. **お問い合わせ・フッター**（会社情報と連絡先）: 朱色の地に白文字で社名、住所、フリーダイヤル、ロゴ、規約リンクを中央揃えで並べる ## Imagery - 商品写真は寄りで撮り、ソースや具材のシズル感を強く出す - キャラクターは黒シルエットに白い目とコック帽を描き、単純な線で描く - 素材のイラストは太い輪郭のフラットなカートゥーン調にする - 背景には放射状の集中線、ドット柄、WOW などの擬音文字を使う - パッケージ写真は白抜きにして黄色の地にのせる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC ではコンテンツを中央に約 60% 幅でまとめ、背景色は全幅に広げる - PC の FV は横長にし、写真・ロゴ・バッジを横に広げて配置する - PC の人気の理由は、吹き出しをキャラクターの周りに散らして配置する - 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-12a925d2`（元 LP の URL から採番） - **元 LP**: https://hyogetsudo.com/takopatie/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。