DESIGN.md — 黄橙×黒線のポップな芸人グッズ LP（Pop Comic Orange Merch Catalog LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: コミック調・太い黒枠・傾いたカード・白線イラスト柄・演者ごとのテーマ色・ベタ塗り
• 地の質感: フラットなベタ塗り。地には白い線画アイコンを低コントラストで敷き詰め、カード内にはストライプや格子柄を入れる。
• 形: 太い黒枠で数度傾けたカード、波形・ギザギザの写真の切り抜き、爆発形の吹き出し、角を黒三角で落とした CHECK! タブ。
• 温度感: 暖色寄りでにぎやか。原色ベースの多色使い。

Colors

• 地は黄橙一色にし、白い線画アイコンを薄く敷き詰めた柄にする。
• 商品カードは演者ごとのテーマ色（緑・赤・紫）をベタ塗りし、同じ演者の商品は同じ色にそろえる。
• 演者に属さない共通商品は白×淡黄のストライプ地にする。
• 枠線・影・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

• 見出しは英字の太いサンセリフを主役にし、和文は太い丸ゴシックで添える。
• 商品名は白や色の縁取りを付けたポップ文字にし、写真の上端に重ねる。
• 価格は「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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。