DESIGN.md — レモン黄×朱色のポップな雑貨イベントLP（Pop Illustrated Retail Event LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、情報量多め・訴求型
• キーワード: レモンイエロー・黒の細線枠・朱色のレトロロゴ・ゆるキャラのイラスト・イベント一覧・にぎやか
• 地の質感: グラデーションも影も使わないフラットな塗り。黒の1px線で絵本のように縁取る
• 形: 角丸なしの四角いカードとボタン。見出しは看板風の枠付きラベル
• 温度感: 暖色寄り。黄色と朱色が主役で、水色やピンクを差し色に使う

Colors

• 地は白にして、カードと帯はレモンイエローで塗る
• 屋上・野外系の企画カードは山吹色にしてグループを分ける
• 見出しロゴ、会期バッジ、ボタン文字は朱色にそろえる
• 情報ラベルは色で種類を分ける（会期=朱、場所=青、料金=紫、対象=緑）
• カード・写真・ボタンは必ず黒の細線で縁取る
• フッターだけ黒地にし、その上下を朱色ロゴの帯で締める
• button-check は文字 #E8541E × 背景 #FEFEFD のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#D04715、4.53:1）を使う。
• section-signboard は文字 #E8530F × 背景 #FFFFFF のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CE4A0D、4.56:1）を使う。
• info-badge は文字 #FFFFFF × 背景 #E8530F のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CE4A0D、4.56:1）を使う。
• marquee-band は文字 #E8530F × 背景 #FFFFFF のコントラスト比が 3.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CE4A0D、4.56:1）を使う。

Typography

• ロゴや英字見出しは太いレトロ書体の朱色にする
• 本文は小さめのゴシックで、情報量を詰めて見せる
• 見出しは英大文字の短い語を看板ラベルに入れる
• 日付は英字の曜日略号と組み合わせる
• 注意書きは※付きで小さく並べる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。ポップアップ一覧とショップ一覧は 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 96%
• 余白: セクション間 90px、基本単位 8px、カード内 10px（375px 幅換算）
• カードは画面の端近くまで広げ、黒枠で区切る
• カードの中は上に写真、下にタイトル・バッジ情報・ボタンの順で並べる
• セクションの間にはキャラクターのイラストと看板ラベルを置く
• ショップ一覧は罫線を共有したタイル状のグリッドにする
• 横長の企画は 1 カラムの幅広カードにする

Elevation & Depth

• 影は使わない
• 奥行きは黒い線とイラストの重なりだけで出す
• キャラクターをカードの縁に乗せて、はみ出させる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 黒枠付きの正方形か横長の四角に切り抜く
• セクション境界: 直線で切り替え、キャラクターのイラストを境目にまたがせる
• カードとボタンは角丸なしの四角にする
• 情報バッジだけは小さな楕円にする
• 看板ラベルは白地に朱色の文字、黒枠で囲む
• ステッカー風のイラストは白フチを付ける

Components

• CHECKボタン（button-check）: 白地に黒枠の横長ボタン。中央に朱色の英字、右端に朱色の丸い矢印を置く
• 看板ラベル見出し（section-signboard）: 白い四角に黒枠と朱色の英字を入れ、上にキャラクターを乗せる
• イベントカード（event-card）: 黄色の面に黒枠を付ける。写真、ドットの送り表示、名前、バッジ情報、ボタンの順に並べる
• 情報バッジ（info-badge）: 会期・場所・料金を示す小さな楕円のラベル。種類ごとに色を変える
• ショップタイル（shop-grid）: 罫線を共有する2列のタイル。写真、店名、箇条書きの特典を入れる
• ロゴ帯（marquee-band）: 白地に朱色のロゴと日付を繰り返す細い帯。ページの最上部と最下部に置く
• 導入テキスト帯（intro-band）: 黄色の全幅帯に、中央寄せの短い紹介文を3行入れる
• フッター（footer-dark）: 黒地の中央にロゴ、丸いSNSアイコン、コピーライトを置く

Do's and Don'ts

Do - 黄色と黒の細線を、どのカードにも一貫して使う - セクションの境目には毎回キャラクターのイラストを置く - 会期・場所はバッジ付きの行にして短く書く - 見出しは英字の看板ラベルで統一する - 写真は黒枠で囲み、イラストと共存させる

Don't - 角丸や影を付けたボタンにしない - グラデーションや半透明の重ねを使わない - 朱色以外の色を見出しの色にしない - 高級感を出すために余白を広くとりすぎない - 細い明朝体を使わない

Page Structure

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

1. ロゴ帯（イベント名と会期を常に見せる）: 白地に朱色のロゴを繰り返す細い帯
2. ファーストビュー（世界観とイベント名を伝える）: 黄色い棚に雑貨とキャラクターが並ぶ全面イラストに、朱色の大きなロゴと日付を載せる
3. 導入（開催の概要を伝える）: 黄色の帯に中央寄せの短い文章を入れる
4. ポップアップ一覧（出店ブランドを紹介する）: 看板ラベルの下に2列の黄色カードを並べ、最後の1枚は幅広にする
5. 屋上イベント（体験型の企画を紹介する）: 山吹色の1カラム大カードに、写真・説明・バッジ・リンクを入れる
6. 購入特典（ステッカーのプレゼントを訴求する）: ステッカーのイラストと条件の一覧、注意書きを並べる
7. SNSキャンペーン（フォローを促す）: 告知画像と応募条件をまとめた黄色カード
8. ショップ特典（館内の各店の企画を紹介する）: 罫線を共有する2列のタイルグリッド
9. クリエイター紹介（イラストレーターを紹介する）: 黄色地に朱色の英字見出し、プロフィール文、イラストを置く
10. フッター（運営元とSNSへの導線）: 黒地にロゴとSNSアイコンを置き、下にロゴ帯を付ける

Imagery

• 黒い線でゆるく描いたネズミ風キャラクターや小さなピンクの生き物を使う
• 風船・花束・ソフトクリームなどのモチーフを散らす
• パステル調のフラットな塗りに、黄・朱・水色・ピンクを使う
• 商品写真は自然光の物撮り。色の強い告知画像も混ぜてよい
• 白フチ付きのステッカー風カットを使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せで幅約60%のコンテンツ列にする
• PCではロゴ帯を左右の縦書き帯として固定する
• 屋上イベントや特典のカードは、PCでは写真と文章を横並びの2カラムにする
• ショップ一覧はPCでは3列のグリッドにする
• ヒーローのイラストは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 行書くと起動時に読み込まれる。