DESIGN.md — 市松地×巻物見出しのアニメコラボイベント LP（Checkered Area-Coded Anime Collab Event LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 情報量多め・訴求型、レトロ、和風、ポップ・元気
• キーワード: 市松模様・巻物見出し・二重枠パネル・金帯ラベル・エリア別配色・商品カード
• 地の質感: 背景は2トーンの市松。見出しには羊皮紙の巻物と古びた金のプレートを使う。パネル内はフラットな白にする
• 形: 角の立った長方形が中心。CTA だけ角丸 md で、パネルは黒の二重線で囲む
• 温度感: 地の市松が冷色〜中間色、見出しの金と茶色で温かみを加える

Colors

• 施設ごとにページ地の市松色を変える。緑、水色、紫、黄緑の順にする
• パネル内は白に統一し、地の色はパネルの左右と上下にだけ見せる
• カテゴリ見出しは金帯に黒文字。左右に白い菱形を置く
• 表は黒帯ラベルに白文字、値欄はグレー地に黒文字
• カードの地色は種類で変える。メニューは緑、グッズは紫か青緑
• 主 CTA は赤、チケット購入は青。どちらにも白文字と右矢印を付ける
• バッジはランダム商品をピンク、オープン商品を青、種類数を白地黒枠にする
• button-primary は文字 #FFFFFF × 背景 #DA4149 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D93B43、4.51:1）を使う。
• button-secondary は文字 #FFFFFF × 背景 #45A6E3 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1C7CB8、4.54:1）を使う。
• badge-type は文字 #FFFFFF × 背景 #D33B7C のコントラスト比が 4.48:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら marker-accessible（#D3397B、4.52:1）を使う。
• notice-box は文字 #FFFFFF × 背景 #DA4149 のコントラスト比が 4.34:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D93B43、4.51:1）を使う。

Typography

• 見出しには太い明朝を使い、時代劇・冒険風の雰囲気を出す
• 本文、表、注意書きはすべてゴシックにする
• リード文は中央揃えの太字にし、2〜4行で改行する
• 注意書きは※でぶら下げ、小さな文字で並べる
• カード内の商品名・価格は白文字で中央揃えにする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。グッズとメニューのカードは縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 24px、基本単位 8px、カード内 14px（375px 幅換算）
• 市松地の上に、黒の二重線で囲んだ白パネルを幅94%で置く
• パネル内のブロックは左右 16px の余白で並べる
• エリア見出しの巻物はパネルの外、地の上に中央配置する
• 1パネルに1企画をまとめる。順序は金帯見出し→リード→画像→CTA→表→注意
• パネル同士の間は約24pxあけ、地の色を見せる

Elevation & Depth

• 影は使わない
• 奥行きは黒の二重線の枠で出す
• 巻物画像だけ、立体感のある描画にする

Shapes

• 角丸: 小 0px ／ 中 10px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品写真は四角い白枠に収める。料理写真は明るいグレー背景の正方形近くで撮る
• セクション境界: 市松地の色を切り替えて区切る。境界は直線
• パネルとカードは角を立てる
• CTA ボタンとお知らせボックスだけ角丸 md にする
• 金帯見出しは細い黒の内枠を付けた長方形にする
• バッジは角丸なしの小さな長方形にする

Components

• 巻物見出し（scroll-heading）: 羊皮紙の巻物の中央に、明朝体でエリア名を書く
• 金帯見出し（gold-band-heading）: 金色の帯に黒の内枠を付け、左右に菱形を置いた企画名の見出し
• 二重枠パネル（framed-panel）: 白地を黒の二重線で囲む。1企画を1枚にまとめる
• 黒帯ラベル表（info-table）: 黒帯の見出しの下にグレーの値欄を置き、縦に積む
• 赤 CTA（button-primary）: 幅いっぱいの赤ボタン。2行の文字と右矢印の線を入れる
• 青チケットボタン（button-secondary）: チケット購入へ誘導する青いボタン
• 商品カード（product-card）: 色付きの枠の中に白い画像エリアを置き、商品名・価格・バッジを白文字で中央に入れる
• 販売形式バッジ（badge-type）: 白の種類数バッジとピンクまたは青の形式バッジを横に並べる
• 赤地お知らせボックス（notice-box）: 濃い赤の地に黄色のラベルと白・黄の文字を載せ、中に白い注意ボックスを入れる
• 菱形アンカーナビ（anchor-nav）: 黒地の帯に、菱形の記号を付けたエリア名を横に並べる

Do's and Don'ts

Do - エリアごとに市松地の色を変え、どの施設の情報か一目でわかるようにする - 企画は必ず二重枠パネルに収める - 表は黒帯ラベル形式で統一する - 商品カードには価格・種類数・購入制限をすべて入れる - 画像の下には著作権表記を小さく入れる

Don't - パネルやカードにドロップシャドウを付けない - 見出しを丸ゴシックにしない - CTA の色を赤と青以外に増やさない - 市松地を無地の背景に置き換えない - カードを強い角丸にしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（コラボの世界観と会期を伝える）: キャラクター集合のキービジュアルを置き、縦書きコピーと金の期間帯を重ねる。下に黒地のナビを付ける
2. 開催概要（期間と会場を示す）: グレー地に巻物見出しを置き、二重枠パネル内に黒帯ラベル表を並べる
3. エリア1チケット（限定チケットを販売する）: 緑の市松地。グッズ画像、料金表、青い CTA、注意事項を順に置く
4. スタンプラリー（回遊企画の告知）: 特典カードの画像と赤い CTA の下に、黒帯の表を置く
5. コンプリート特典（達成特典を見せる）: 特典の画像とタグ風の文字を並べる
6. コラボカフェ（メニューを紹介する）: 緑のカードに料理写真、名前、価格、アレルギー表記を入れる
7. エリア2の企画（別施設の企画を並べる）: 水色の市松地で同じパネル構成を繰り返す
8. コラボグッズ（商品の一覧）: 紫の市松地。紫と青緑の商品カードを縦に積む
9. 購入特典・通販案内（購入を後押しする）: 特典の画像と、赤地のお知らせボックスを置く
10. お問い合わせ（連絡先を示す）: グレーのボックスにメールアドレスと注意書きを入れる
11. レストランフェア（飲食店との連動企画）: 黄緑の市松地。オレンジの丸い第1弾・第2弾ラベルとカードを並べ、赤い CTA を置く
12. 撮影会・SNS・フッター（イベント告知と SNS への導線）: 撮影会の写真を2枚並べ、SNS の埋め込みと施設ロゴを置く

Imagery

• キャラクターは探検家・冒険風の衣装で描き下ろし、集合イラストにする
• グッズは白背景の物撮りにし、透かしの SAMPLE を入れる
• コラボ料理は明るいグレー背景で、正面からやや俯瞰で撮る
• 見出しの装飾は羊皮紙の巻物と古い金の装飾にする
• 未公開の商品はグレー文字の COMING SOON 画像と、斜めの赤い発売日リボンで示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央に約80%幅のパネルを置く。左右には市松地を広く見せる
• PC の商品カードとメニューカードは2カラムにする
• PC の表はラベルを左、値を右にした横並びにする
• PC の CTA は幅を半分ほどに縮める
• PC のリード文は1行にまとめる

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 行書くと起動時に読み込まれる。