DESIGN.md — 水色×ピンク×黄色の遊園地風キャラ雑貨 LP（Pop Amusement Park Character Goods LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、かわいい、情報量多め・訴求型
• キーワード: 遊園地・電飾文字・ストライプ地・ずらし影・ステッカー散らし・ビビッドパステル
• 地の質感: フラットな塗りに、ストライプ柄と黄色のオフセット影を重ねる。光沢やグラデーションはほぼ使わない。
• 形: 角ばった矩形ボタンに、ずらした影を付ける。セクション境界は波形。カードは白いドット枠で囲む。
• 温度感: 暖かく陽気。夏のお祭りのような高揚感。

Colors

• ページ全体を水色の細い外枠で囲む。
• 地色はセクションごとに切り替える。導入は水色、ピックアップはピンクの縦ストライプ、一覧はクリーム、カルーセルは淡紫×淡ピンクの斜めストライプ。
• 商品写真・カード・ボタンには、必ず黄色のオフセット影を付ける。
• クリーム地では、ボタンも文字もティールにする。
• ストライプ地では、カード枠とボタンを濃ピンクと紫で交互に塗り分ける。
• 見出しは黄色地に白い電飾ドット、またはピンクや水色の縁取りで目立たせる。
• page は文字 #48A08A × 背景 #FFFCE1 のコントラスト比が 3.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-accessible（#3A806F、4.51:1）を使う。
• button-check は文字 #F5E34A × 背景 #02ADA3 のコントラスト比が 2.13:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01706A、4.53:1）を使う。
• button-check-alt は文字 #F5E34A × 背景 #DE469B のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B92176、4.51:1）を使う。
• dotted-carousel-card は文字 #FFFFFB × 背景 #EC7CB6 のコントラスト比が 2.58:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#DD2082、4.55:1）を使う。
• ended-stamp は文字 #FFFFFB × 背景 #02ADA3 のコントラスト比が 2.79:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#01706A、4.5:1）を使う。
• price-badge は文字 #FFFFFB × 背景 #DE469B のコントラスト比が 3.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-2-accessible（#B92176、4.53:1）を使う。

Typography

• 見出しはすべて英字の太い丸みのある書体にする。
• 大見出しは、文字の中に白いドットを並べた電飾風にする。
• 日本語は太めのゴシック 1 書体で統一する。
• 価格は太字で大きく、税込表記は小さく添える。
• 商品名と価格は左寄せで、商品写真の左下または右下に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品ごとに写真の左右位置を交互に振る。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 60px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品写真は大きく、やや傾けて配置する。
• 商品情報と CHECK ボタンは、写真の左右どちらかに寄せる。
• 余白にはキャラのステッカーを散らす。
• カルーセルのカードは画面幅の 86% にし、左右に黄色い丸矢印を付ける。
• 左右の画面端に、細い水色の外枠を 4px ほど残す。

Elevation & Depth

• ぼかし影は使わない。右下へ 6〜8px ずらした黄色のベタ影だけを使う。
• ボタンにも黄色いずらし影を付ける。
• 写真やステッカーは影ではなく、太い白縁や色縁で浮かせる。

Shapes

• 角丸: 小 0px ／ 中 6px ／ 大 10px。ボタンは角丸の長方形。
• 写真の切り抜き: 商品は背景を抜いた切り抜き写真にし、傾けて配置する。カード内は白い角丸の台紙に置く。
• セクション境界: 波形のカーブで地色を切り替える。
• ボタンは角ばった矩形にする。
• カード枠には、白い丸ドットを電飾のように並べる。
• カルーセル矢印は黄色い円形にする。
• 写真フレームは傾けた額縁やポラロイド風にする。

Components

• CHECK ボタン（button-check）: ティールの矩形に黄色の英字と指アイコン。黄色いずらし影付き。
• ストライプ地用ボタン（button-check-alt）: 濃ピンクまたは紫の幅広ボタン。黄色い文字と影を付ける。
• 電飾見出し（marquee-heading）: 黄色の英字の中に白いドットを並べ、縁取りを付けた遊園地看板風の見出し。
• ずらし影商品（product-offset）: 切り抜いた商品に黄色のベタ影を重ね、傾けて置く。
• 電飾枠カルーセル（dotted-carousel-card）: 色付きの枠に白いドットを並べ、中に白い台紙で商品写真を置く。下に白文字で商品名と価格。
• 一覧誘導帯（banner-all-items）: 水色の横長帯に黄色の英字を置き、黄色い影を付ける。
• 終了スタンプ（ended-stamp）: 半透明のティールの帯を斜めに重ね、白文字で終了を示す。
• 価格丸バッジ（price-badge）: 濃ピンクの円に白文字で価格を入れる。

Do's and Don'ts

Do - 地色はセクションごとにストライプ柄で切り替える。 - 黄色いずらし影を全要素で統一する。 - キャラクターのステッカーを余白に散らし、にぎやかにする。 - 商品は大きく切り抜き、左右交互に傾けて配置する。 - 見出しは英字の電飾風にする。

Don't - ぼかしたドロップシャドウを使わない。 - 落ち着いた低彩度の配色にしない。 - ボタンをピル型や細い線のボタンにしない。 - 余白を整然と残しすぎない。 - 明朝体を使わない。

Page Structure

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

1. ファーストビュー（テーマとキャラクターで世界観を伝える）: 水色の地に電飾ロゴを置き、遊園地の背景とキャラの集合イラストを全面に配置する。
2. 導入メッセージ（発売日と企画趣旨を伝える）: 白い雲形の吹き出しの中に中央揃えの文章を置く。発売日はチケット風の札で示し、周囲にフィルム写真を散らす。
3. 限定商品（オンライン限定商品を目立たせる）: ピンクの縦ストライプ地に英字見出しを置く。額縁風の写真と商品、水色の CHECK ボタンを並べる。
4. ピックアップ商品一覧（主要商品を 1 点ずつ見せる）: クリーム地で、ずらし影付きの切り抜き商品を左右交互に配置する。商品名・価格・CHECK を添える。
5. カルーセル商品（そのほかの商品をまとめて見せる）: 淡紫の斜めストライプ地に、ピンクと紫の電飾枠カードを交互に並べる。
6. 全商品への誘導（一覧ページへ送る）: キャラのイラストの下に、水色の横長帯ボタンを置く。
7. キャンペーン告知（イベントやプレゼント企画を伝える）: 黄色やピンクのポスター風カードを縦に並べる。終了した企画は斜めの帯で示す。
8. 注意事項・フッター（対象外の店舗などを補足する）: ストライプ地に小さな注釈を置き、キャラの集合イラストとピンクの波形で締める。

Imagery

• 商品は白背景で撮影して切り抜き、10〜15度ほど傾けて置く。
• キャラクターは太い色縁を付けたステッカー風のダイカットにする。
• 余白には、風船・手袋形のバルーン・稲妻線・ポップコーンなどの小物イラストを散らす。
• ポラロイドやフィルム片を斜めに散らし、思い出アルバムのような感じを出す。
• 動きを表す短い弧線を、商品の周りに描き添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 版の画像はない。PC では中央の 480px 前後の固定幅に SP レイアウトを置き、左右を水色かストライプで埋めることを推奨する。
• PC でも商品の左右交互の配置はそのまま維持する。
• PC ではカルーセルを 2〜3 枚同時に見せてもよい。

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