--- version: alpha name: Retro Anime Pop Exhibition Event LP description: 濃い青紫の斜めストライプ帯と白地を交互に置き、黄色の極太見出しに青い影を重ねた展示イベント LP。昭和〜令和のアニメ風イラストとステッカー風の小物を散らし、懐かしく元気な推し活気分を出す。 colors: primary: '#3024E1' background: '#FFFFFF' background-alt: '#F3F3F3' accent-1: '#F8DF16' text: '#1B2095' cta: '#E60012' on-cta: '#FFFFFF' accent-2: '#FF00A4' tint-1: '#FFC4F2' tint-2: '#FEF27C' secondary: '#4D7BF0' accent-3: '#FE9900' line: '#9A9CE0' surface: '#F9C6E8' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-sm: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 12px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px heading-drop: textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' height: 80px nav-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 64px number-tab: textColor: '{colors.text}' typography: '{typography.accent}' height: 24px era-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px intro-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 260px info-table: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px ranking-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 300px sns-button: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 56px --- # DESIGN.md — 青紫×黄色のレトロアニメ風イベント LP（Retro Anime Pop Exhibition Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、レトロ、力強い・インパクト、かわいい - **キーワード**: 昭和レトロアニメ・ステッカー散らし・極太ドロップシャドウ見出し・青紫ストライプ帯・年代タイムライン - **地の質感**: ベタ塗りのフラットなイラストと太い黒い輪郭線。青紫の帯にうすい斜めストライプが入る。 - **形**: 角丸の大きいカード、太い紺の枠線と下にずらした影。ボタンはピル型。 - **温度感**: 高彩度の寒色（青紫）に暖色（黄・ピンク・赤）をぶつけた、にぎやかで熱い印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#3024E1` | ストライプ帯の地色・ブランド青紫 | 20% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 47% | 画素の実測 | | `background-alt` | `#F3F3F3` | ページ外側のうすいグレー | 5% | 画素の実測 | | `accent-1` | `#F8DF16` | 見出し文字の黄色 | 2% | 画素の実測 | | `text` | `#1B2095` | 見出しの影・枠線・本文の濃紺 | 3% | 画素の主要色に補正 | | `cta` | `#E60012` | 主ボタンの赤 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FF00A4` | ピンクの差し色・年代ラベル | 2% | 画素の実測 | | `tint-1` | `#FFC4F2` | 年代カードのうすいピンク | 2% | 画素の実測 | | `tint-2` | `#FEF27C` | 年代カードのうすい黄 | 2% | 画素の実測 | | `secondary` | `#4D7BF0` | 平成カードの青 | 2% | 推定 | | `accent-3` | `#FE9900` | 時間軸の帯のオレンジ | 0% | 画素の実測 | | `line` | `#9A9CE0` | 情報表の区切り線 | 0% | 推定 | | `surface` | `#F9C6E8` | ランキングを囲むパステルグラデ枠 | 3% | 推定 | - 白地と青紫ストライプ帯を交互に置き、セクションのリズムを作る - 青紫地の見出しは黄色文字に濃紺の影、白地の見出しは青紫〜黄色文字に濃紺の影 - 赤は購入・詳細などの主ボタンだけに使う - 年代ごとにピンク・青・黄のカード色を割り当て、時間軸の帯も同じ色にする - 本文は濃紺。純黒は輪郭線以外ではほとんど使わない - パステルのグラデーションはデータ・ランキングの枠だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのイベントロゴ風タイトル | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.1 | 0.0em | | `headline-lg` | 各楽しみ方の大見出し（2行） | 装飾・ディスプレイ | Dela Gothic One | 900 | 32px | 1.3 | 0.02em | | `headline-md` | セクション見出し（下に英字ラベル付き） | ゴシック | M PLUS Rounded 1c | 900 | 26px | 1.3 | 0.02em | | `headline-sm` | カード見出し・年代名 | ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.4 | 0.02em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 700 | 14px | 1.8 | 0.04em | | `note` | 注釈・出典・著作権表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 英字ラベル・番号（01〜04） | 欧文サンセリフ | Montserrat | 900 | 12px | 1.2 | 0.08em | | `label-button` | ボタン文字 | ゴシック | M PLUS Rounded 1c | 800 | 14px | 1.2 | 0.04em | - 見出しは極太にし、濃紺の影を右下に 2〜3px ずらして重ねる - 見出しは 1 文字ごとに大小をつけたり、少し傾けて弾ませてよい - セクション見出しの下に小さな英字ラベルを置く - 本文も太め（700）で、白地では中央か左揃えにする - 番号は丸みのある極太の欧文数字で、見出しの上に置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は画像とテキストの 2 カラムを左右交互に置く - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 楽しみ方の目次は 4 つの濃紺カードを横に並べる（SP は 2×2） - 各特長セクションは番号＋大見出し＋短い区切り線＋2〜3 行の説明 - 年代カードは縦に積み、右端に色の違う時間軸の帯を置く - 情報表は左にラベル、右に内容。細い線で区切る - 余白にステッカー風の小物イラストを散らし、ブロックの端にかぶせる ## Elevation & Depth - カードとボタンはぼかしなしの濃紺のベタ影を 3〜4px 下にずらす - ぼかしのあるドロップシャドウは使わない - イラストやステッカーは白いフチと黒い輪郭線で浮かせる ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸の長方形かフチなしの横長カルーセル。イラストは切り抜いて重ねる - **セクション境界**: 青紫の帯は上の角を大きく丸めて白地にかぶせる。番号タブが境界線の上に乗る - 枠線は濃紺の 2〜3px - 年代カードは左上に斜めのラベルタブを付ける - SNS ボタンは白いピル型に濃紺の枠とベタ影 - 吹き出しや集中線の形をイラストの背景に使う ## Components - **赤いピル型 CTA**（`button-primary`）: 赤地に白文字、右向き矢印付き。濃紺のベタ影 - **影付き極太見出し**（`heading-drop`）: 黄色か青紫の極太文字に濃紺の影。下に英字ラベル - **楽しみ方の目次カード**（`nav-card`）: 上に番号タブ、濃紺地に白文字、下に二重矢印。4枚並べる - **セクション番号**（`number-tab`）: 01〜04 の極太数字を境界線の上に乗せる - **年代カード**（`era-card`）: 年代ごとの色の地、斜めラベルタブ、中央に年代名と開始年、本文 - **紹介カード**（`intro-card`）: ストライプ帯の上の白カード。水色の太枠と濃紺の影、周りにステッカー - **概要表**（`info-table`）: ラベル列と内容列。細い区切り線 - **ランキングパネル**（`ranking-panel`）: パステルグラデ枠の中に白カード。番号丸付きの横長行を 5 つ並べる - **SNS シェアボタン**（`sns-button`）: 白いピル型にアイコンを中央配置。濃紺の枠とベタ影 ## Do's and Don'ts **Do** - 見出しには必ず濃紺のベタ影を付ける - 白地と青紫ストライプ帯を交互に置く - 余白にレトロな小物ステッカー（カセット・ゲーム機・レコードなど）を散らす - 年代やテーマごとに色を固定する - 主 CTA は赤のピル型にそろえる **Don't** - ぼかし影やグラデーションの見出しは使わない - 細い明朝体や低彩度の落ち着いた配色にしない - 写真ばかりで組まない。イラストを主役にする - 赤を装飾に多用して CTA を埋もれさせない - 本文を細字（300 以下）にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベント名・日程・会場を一目で伝える）: 白地の中央にキャラクター3人と小物を放射状に配置。極太ロゴ、日程のピル、無料バッジを置く 2. **イベント紹介**（コンセプトを説明する）: 青紫ストライプ帯の上に太枠の白カード。中央揃えの本文、周りにステッカー 3. **楽しみ方の目次**（4つの体験に誘導する）: 手書き風の小見出し＋影付き見出し、4枚の番号付き濃紺カード 4. **特長1：歴史展示**（展示内容を見せる）: 白地。左に大見出しと説明、右に会場写真のカルーセル 5. **特長2：撮影スポット**（写真映えを訴求する）: 青紫帯。左に集中線背景のイラスト、右に黄色の見出し 6. **特長3：年代別アイテム**（時代ごとの魅力を伝える）: 白地。左に見出しとサブボタン、右に年代カードの縦タイムライン 7. **特長4：コスプレ体験**（体験ブースを訴求する）: 青紫帯。英字の掛け声を添えたイラストと黄色の見出し 8. **キャンペーン**（SNS 投稿キャンペーンへの参加を促す）: 写真バナーと黄色の帯。帯に応募期限と赤い CTA 9. **概要・アクセス**（日時・料金・会場を伝える）: 線で区切った 2 列の表と地図 10. **データ紹介**（関連データで信頼と興味を高める）: リード文とパステル枠のランキングパネル 2 つ 11. **SNSシェア**（拡散を促す）: 青紫の帯に白いピル型の SNS ボタンを 3 つ 12. **フッター**（アプリへの誘導と表記）: ロゴ、赤地のアプリダウンロードバナー、注釈、著作権表記 ## Imagery - 80〜90年代アニメ風の大きな瞳のキャラクターを、太い輪郭線とベタ塗りで描く - カセット・レコード・ゲーム機・ポスター・ペンライトなどの小物を、白フチ付きのステッカー風にする - 集中線・ギザギザの吹き出し・星やキラキラの線を背景の飾りにする - 写真は会場のにぎわいがわかる横長のカット - イラストは少し傾けて、ブロックの外へはみ出させる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は特長セクションを画像とテキストの 2 カラムで左右交互に置く。SP は縦に積み、見出しを先に出す - 目次カードは PC で 4 列、SP で 2×2 - 年代タイムラインは SP では全幅のカードにし、右端の帯は細くする - ステッカーは SP では数を減らし、小さくする - ランキングの 2 列は SP では縦に積む ## 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-5f8f2772`（元 LP の URL から採番） - **元 LP**: https://jp-news.mercari.com/cho-oshikatu-ten/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。