--- version: alpha name: Pop Comic Orange Merch Catalog LP description: 黄橙の地に白線イラストの柄を敷き詰め、黒い太枠で囲んだ傾いたカードを縦に積み重ねるコミック調のグッズ紹介 LP。カードは演者ごとのテーマ色（緑・赤・紫・青）でベタ塗りし、波形に切り抜いた写真と手描き線画キャラクターを組み合わせる。 colors: background: '#FFAB00' primary: '#FEAB01' surface: '#FFFFFF' text: '#060606' accent-1: '#6ACC8F' accent-2: '#E93830' accent-3: '#7E1083' secondary: '#1C6FA0' tint-1: '#FFCC62' cta: '#FEAB02' on-cta: '#FEFCF3' on-dark: '#FAFEFA' dark-section: '#010101' accent-1-accessible: '#2D844E' cta-accessible: '#9E6A01' accent-2-accessible: '#E7241B' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Rampart One fontSize: 30px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 900 lineHeight: 1.25 letterSpacing: 0.02em headline-sm: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 20px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 8px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Montserrat fontSize: 15px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' product-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 560px check-corner-tab: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 90px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 48px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 52px lineup-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.surface}' typography: '{typography.display}' rounded: '{rounded.md}' height: 150px burst-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 90px section-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 56px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 80px floating-item-button: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 44px --- # DESIGN.md — 黄橙×黒線のポップな芸人グッズ LP（Pop Comic Orange Merch Catalog LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: コミック調・太い黒枠・傾いたカード・白線イラスト柄・演者ごとのテーマ色・ベタ塗り - **地の質感**: フラットなベタ塗り。地には白い線画アイコンを低コントラストで敷き詰め、カード内にはストライプや格子柄を入れる。 - **形**: 太い黒枠で数度傾けたカード、波形・ギザギザの写真の切り抜き、爆発形の吹き出し、角を黒三角で落とした CHECK! タブ。 - **温度感**: 暖色寄りでにぎやか。原色ベースの多色使い。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFAB00` | ページ地の黄橙 | 30% | 画素の実測 | | `primary` | `#FEAB01` | ブランドを表す黄橙（見出し・CTA 面） | 4% | 画素の実測 | | `surface` | `#FFFFFF` | 白いカード面 | 17% | 画素の主要色に補正 | | `text` | `#060606` | 黒い枠線・見出し文字 | 6% | 画素の実測 | | `accent-1` | `#6ACC8F` | 演者テーマ色の緑 | 7% | 画素の実測 | | `accent-2` | `#E93830` | 演者テーマ色の赤 | 8% | 画素の実測 | | `accent-3` | `#7E1083` | 演者テーマ色の紫 | 5% | 画素の実測 | | `secondary` | `#1C6FA0` | 特別企画の青 | 3% | 推定 | | `tint-1` | `#FFCC62` | ストライプ地の淡黄 | 5% | 画素の主要色に補正 | | `cta` | `#FEAB02` | スタートボタン面 | 1% | 画素の実測 | | `on-cta` | `#FEFCF3` | ボタン上の白文字 | 0% | 画素の実測 | | `on-dark` | `#FAFEFA` | 色面上の白文字（価格・名前） | 2% | 画素の実測 | | `dark-section` | `#010101` | CHECK! 三角タブ・SNS ボタンの黒 | 2% | 画素の実測 | | `accent-1-accessible` | `#2D844E` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#9E6A01` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#E7241B` | AA を満たす補正値（計算） | | 計算 | - 地は黄橙一色にし、白い線画アイコンを薄く敷き詰めた柄にする。 - 商品カードは演者ごとのテーマ色（緑・赤・紫）をベタ塗りし、同じ演者の商品は同じ色にそろえる。 - 演者に属さない共通商品は白×淡黄のストライプ地にする。 - 枠線・影・CHECK! タブは黒で統一してコミック調を出す。 - 色面上の文字は白、白面上の文字は黒か黄橙にする。 - 特別企画のブロックだけ青をアクセントにして区別する。 - `product-card` は文字 `#FAFEFA` × 背景 `#6ACC8F` のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#2D844E`、4.56:1）を使う。 - `button-primary` は文字 `#FEFCF3` × 背景 `#FEAB02` のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#9E6A01`、4.52:1）を使う。 - `lineup-banner` は文字 `#FFFFFF` × 背景 `#E93830` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E7241B`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ・大見出しの英字 | 欧文サンセリフ | Dela Gothic One | 400 | 40px | 1.1 | 0.02em | | `headline-lg` | カード上の演者名の英字 | 装飾・ディスプレイ | Rampart One | 400 | 30px | 1.1 | 0.02em | | `headline-md` | 商品名（縁取りのポップ文字） | 丸ゴシック | M PLUS Rounded 1c | 900 | 22px | 1.25 | 0.02em | | `headline-sm` | セクション見出しの英字・ボタン文字 | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.08em | | `body-md` | 説明文・告知文 | ゴシック | Zen Kaku Gothic New | 700 | 13px | 1.8 | 0.04em | | `accent` | 価格表示 | 欧文サンセリフ | Montserrat | 800 | 20px | 1.2 | 0.02em | | `note` | カード左右の縦書き英字の人名 | 欧文サンセリフ | Montserrat | 700 | 8px | 1.2 | 0.1em | | `label-button` | CHECK! THIS ITEM などのボタン文字 | 欧文サンセリフ | Montserrat | 800 | 15px | 1.2 | 0.08em | - 見出しは英字の太いサンセリフを主役にし、和文は太い丸ゴシックで添える。 - 商品名は白や色の縁取りを付けたポップ文字にし、写真の上端に重ねる。 - 価格は「PRICE」の小さなラベル＋大きな数字＋税込の小さな注記の 3 段サイズで組む。 - 本文は太めのゴシックで中央揃えにし、短い行で改行する。 - カードの左右端には英字の人名を 90 度回転させて小さく入れる。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラムで、カードを縦に積む - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 24px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面幅 90% 前後で、1〜3 度交互に傾けて少し重ねる。 - 各カードの右下に黒三角の CHECK! タブを置く。 - カード下端の左に価格、右に CHECK タブを配置する。 - セクション見出しは白抜きの枠やラベルで中央に置く。 - セクション間は 24px 前後に詰め、テンポよく見せる。 ## Elevation & Depth - ぼかし影は使わず、右下へ 4〜6px ずらした黒ベタの影を付ける。 - カードは 3px 前後の黒枠線で囲む。 - ボタンも黒枠＋黒のずらし影で立体的に見せる。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 写真は波形・ギザギザ・台形などの変形フレームで切り抜き、白い縁を付ける。 - **セクション境界**: 直線の境界は使わず、傾いたカード同士の重なりで区切る。 - 商品カードは角丸なしで傾ける。 - ラインナップ枠・クイズ枠は角丸 12〜20px の白い箱にする。 - 見出しやバッジには爆発形・星形の吹き出しを使う。 - ボタンは角丸 8px 前後の長方形に、右向きの矢印を付ける。 ## Components - **傾いた商品カード**（`product-card`）: テーマ色ベタ地に黒の太枠。英字の演者名、商品名、変形フレームの写真、価格、黒の CHECK タブを入れる。 - **CHECK! 三角タブ**（`check-corner-tab`）: カード右下の黒い直角三角形に、白字の CHECK! THIS ITEM を斜めに入れる。 - **黒枠ボタン**（`button-outline`）: 白地に黒枠と黒のずらし影を付け、太い英字と右矢印を入れる。 - **スタートボタン**（`button-primary`）: 黄橙ベタに白い英字を入れた角丸の長方形。 - **演者ラインナップ帯**（`lineup-banner`）: テーマ色に格子柄を敷き、線画の人物と立体文字の英字名を重ねたバナー。右上に CHECK タブを付ける。 - **爆発形バッジ**（`burst-badge`）: 白いギザギザの吹き出しに、記念・特典を短く入れる。 - **セクション見出しラベル**（`section-label`）: 白の長方形に黒枠とずらし影を付け、アイコン＋英字＋数バッジを入れる。 - **吹き出し**（`speech-bubble`）: 白地に黒線の角丸吹き出しで、キャラクターのセリフを 2 行で入れる。 - **追従アイテムボタン**（`floating-item-button`）: 画面右下に固定する小さな白四角のボタン。アイコンと件数を入れる。 ## Do's and Don'ts **Do** - 黒の太枠と黒のずらし影で、すべての部品をコミック調にそろえる。 - 演者・カテゴリごとにテーマ色を決め、カード面とバナーに一貫して使う。 - カードを少し傾けて重ね、手作り感とリズムを出す。 - 写真は笑顔や大げさなポーズで、商品を持った人物を主役にする。 - 白線画のキャラクターを、カードの縁からはみ出させて添える。 **Don't** - ぼかし影やグラデーションを使わない。 - 細い線や淡いパステルだけでまとめない。 - 写真を単純な長方形のまま並べない。 - 明朝体などの上品な書体を使わない。 - カードの傾きを大きくしすぎない（5 度以内）。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（世界観と周年の告知）: 家形の黒枠写真の上部にロゴを重ね、記念の爆発バッジと白抜きの手書き風キャッチを添える。 2. **アイテム一覧ナビ**（商品一覧への導線）: 白い横長ラベルにアイコン・英字・件数バッジを入れる。 3. **ブランド紹介**（企画の説明への入口）: 白の爆発形に感謝の言葉を入れ、線画キャラと黒枠の CHECK ボタンを配置する。 4. **演者ラインナップ**（参加メンバーの紹介）: 白い角丸枠の中に、テーマ色の格子柄バナーを 3 本縦に並べる。 5. **商品への誘導見出し**（スクロールを促す）: 白文字の問いかけ＋小さな英字＋下向きの三角。 6. **共通商品と購入特典**（主力商品と特典の訴求）: ストライプ地の傾いたカード。特典は「さらに」の強調と黄橙の大きな価格で見せる。 7. **演者別の商品カード**（商品を一つずつ紹介）: テーマ色のカードに演者名・商品名・変形写真・価格・CHECK タブを入れ、色ごとに連続させる。 8. **周年特別グッズ**（限定品の強調）: 青い幕の装飾がある白い角丸箱。写真、商品の横並びリスト、黒枠ボタン、演者バナーで構成する。 9. **全商品への CTA**（一覧ページへの送客）: 指差しイラスト付きの矢印形白ボタン。 10. **クイズ企画**（回遊とファン施策）: 白い角丸箱に立体ロゴと 3 行の説明、黄橙のスタートボタンを置く。 11. **SNS・フッター**（SNS での拡散を促す）: 英字見出し、黒いアカウントボタン、キャラクターと吹き出し、クレジット表記。 ## Imagery - 写真は自然光の室内や屋外で撮る。モデルが商品を持ち、笑顔や大げさなポーズをとる。 - 背景はレトロな和室や生活感のある部屋にし、カラフルな小物を散らす。 - 人物イラストは黒の単線で描き、白抜きか単色で塗った漫画調にする。 - 地の柄は、ギャグや小物をモチーフにした白線アイコンを敷き詰める。 - 写真の縁は波形や台形で切り抜いて白い縁を付け、躍動感を出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では SP 幅（約 350px）のカード列を中央に置き、左右に黄橙の柄地を広く見せる。 - PC では右上に白い角丸のアイテム目次パネルを固定し、サムネイルと商品名を並べる。 - PC では左上にロゴを固定表示する。 - カードの傾き・黒枠・ずらし影は SP・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-8e4447e2`（元 LP の URL から採番） - **元 LP**: https://www.felissimo.co.jp/laughrees/laughrees_lh.html?xid=p_nr_2112092_RELEASE_laughrees%2F%3Fsp%3D1 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。