DESIGN.md — 桜ピンク×金リボンのミニチュア手芸定期購読 LP（Pastel Pink Gold Ribbon Miniature Craft Collection LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: かわいい、上品・高級、やさしい・柔らかい、情報量多め・訴求型
• キーワード: ピーチ地・くすみピンク・金リボン・リボン格子柄・切り抜き作品写真・雲形吹き出し
• 地の質感: リボンを結んだ菱形格子の淡い地模様と、金箔風グラデーションの装飾フレーム。ほかの面はフラットに塗る
• 形: 波形のセクション境界、有機的な不定形ブロブ、雲形吹き出し、端に穴のあいたタグ型ボタン、金の飾り枠
• 温度感: 暖色寄り。ピーチとピンクに金と焦げ茶を合わせ、甘いお菓子の温かさを出す

Colors

• ベースはピーチ（#FCEADF）にする。商品ラインナップは白地＋リボン格子柄、作品紹介はくすみピンクの面にして、セクションごとに地の色を切り替える
• 見出しの装飾は金のリボン帯と金の飾り枠に限定する
• 文字とシルエットは焦げ茶を基本にし、真っ黒は本文だけに使う
• 申込ボックスは黄色地に赤の『送料無料』を載せ、ページ内で一番目立たせる
• ピンク面の上の文字は白にし、白い雲形の吹き出しには金茶の文字を使う
• button-primary は文字 #FEFCF2 × 背景 #A57C53 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#916D49、4.55:1）を使う。
• ribbon-heading は文字 #7A4438 × 背景 #C9A13B のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DDC483、4.54:1）を使う。
• cloud-bubble は文字 #C9A13B × 背景 #FEFEFE のコントラスト比が 2.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DDC483、4.58:1）を使う。
• issue-badge は文字 #7A4438 × 背景 #C9A13B のコントラスト比が 3.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#DDC483、4.54:1）を使う。
• benefit-card は文字 #E198A6 × 背景 #FBEDC0 のコントラスト比が 1.94:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら text-muted-accessible（#C13853、4.54:1）を使う。
• pink-ribbon-label は文字 #FEFCF2 × 背景 #D46A80 のコントラスト比が 3.31:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#C94460、4.56:1）を使う。

Typography

• リード文は短い行で改行し、中央揃え・広い行間（2.4前後）で詩のように見せる
• 見出しは字間を広め（0.1〜0.15em）にとり、柔らかく見せる
• 金リボン上のシリーズ名は手書き風の明朝で、焦げ茶にする
• 作品名のキャプションは小さなゴシックで、写真の直下に置く
• 日付・価格は数字を大きく、曜日は小さくする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。作品一覧は 3〜4 列のグリッドで、主役の号だけ大きく置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 作品写真は白皿ごと切り抜き、大小をつけて千鳥に並べる
• シリーズごとに『金リボン見出し→額縁付きジオラマ写真→作品グリッド』の順で繰り返す
• ピンク面では不定形ブロブの上に写真と吹き出しを重ねる
• 特典カードは角丸のクリーム地にし、左上に茶色の円形番号を置く
• 申込ボックスは画面幅いっぱい近くまで広げ、メリットを 4 つ横に並べる

Elevation & Depth

• 基本はフラットで、影はほとんど使わない
• タグ型ボタンは、ピンクの線をずらして重ね、影のように見せる
• 写真には白フチや金の飾り枠をつけ、立体感の代わりにする
• 切り抜き作品には、うっすら接地影をつける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンは角丸の長方形。
• 写真の切り抜き: 作品は切り抜き。ジオラマ写真は、四隅を内側に丸めた金の額縁で囲む
• セクション境界: 大きな波形カーブ、またはなだらかなアーチで地の色を切り替える
• ボタンは角丸を小さくした長方形、または両端に穴のあいたタグ型にする
• 吹き出しは雲形にする
• ピンク面の背景には有機的なブロブを置く
• 見出しは、端を燕尾に切った金リボン帯にする

Components

• 定期購読ボタン（button-primary）: 茶色の角丸長方形に白文字。右に白い小さな送料無料ラベルを添える
• タグ型動画ボタン（tag-button）: 白地にピンクの枠線、両端に穴の装飾。金の唐草を左右に置き、下に小さな英字を添える
• 金リボン見出し（ribbon-heading）: 金のグラデーション帯の左に焦げ茶のキャラクターシルエットを重ね、シリーズ名を置く
• 雲形吹き出し（cloud-bubble）: 白地に金茶の線で描いた雲形。中に短い付属品の訴求を入れる
• 号数リボンバッジ（issue-badge）: 作品の下に置く金の小リボン。号数を入れる
• 特典カード（benefit-card）: クリーム地の角丸カード。左上に茶の円形番号、ピンクの見出し、右下に拡大アイコン
• 期限付き特典ラベル（pink-ribbon-label）: 右端を燕尾に切ったローズ色の帯に、白文字で期限を書く
• 黄色申込ボックス（cta-box）: 黄色地に赤の送料無料ラベルと見出しを置き、白地に黒枠のメリットボタンを 4 つ並べる
• 額縁見出し（frame-heading）: 薄ピーチ地を金の飾り枠で囲み、焦げ茶の丸ゴシックを広い字間で置く

Do's and Don'ts

Do - 作品写真は白皿ごと切り抜き、大小をつけて並べる - 金のリボンや飾り枠でシリーズの区切りを示す - セクションの境は波形にし、ピーチとピンクの地を交互にする - 焦げ茶のキャラクターシルエットを装飾として配置する - リード文は短い行に分け、中央揃えにする

Don't - 寒色や彩度の高い原色を広い面に使わない（黄色は申込ボックスだけ） - 角ばった硬いゴシックで見出しを組まない - 写真を四角いまま無装飾で並べない - 影の強いカードや立体ボタンを使わない - 真っ黒の太い罫線を多用しない

Page Structure

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

1. ファーストビュー（作品の世界観と発売日・創刊号価格を伝える）: ジオラマ写真を全面に敷き、商品パッケージと金の円形価格バッジを重ねる。下にピンクの波帯を置き、白抜きで日付を載せる
2. CTA・ログイン導線（すぐに申し込めるようにする）: 作品写真を 2 枚並べ、茶色の申込ボタン、ログインリンク、キャンペーンバナーを続ける
3. SNSシェア（拡散を促す）: ピンクの帯の上に SNS アイコンとシェアボタンを置く
4. コンセプト（作れるものと楽しみ方を伝える）: ピーチ地に、きらめき付きの切り抜き作品、雲形吹き出し、中央揃えのリード文を並べる
5. 動画導線（CMやつくり方動画へ誘導する）: タグ型ボタンを縦に 3 つ並べる
6. ラインナップ（シリーズごとの作品を一覧で見せる）: リボン格子柄の地に、金リボン見出し、額縁写真、作品グリッドの順で 4 シリーズを繰り返す
7. 申込特典（期限付きプレゼントで申込を促す）: ローズ色の燕尾ラベルと大きな見出しを置き、番号付きのクリーム色カードを 2 枚並べる
8. 上位プラン案内（上位プランの付属品を見せる）: ベージュ地を金の飾り枠で囲み、上部に金リボン見出し。中は写真のグリッド
9. 申込ボックス（最終的な申込に誘導する）: 黄色のボックスにメリットを 4 つ並べ、下に FAQ リンクを置く
10. セット内容（材料と付属品を説明する）: ピンク地にシルエット、額縁見出し、ブロブ上の写真と吹き出し、LEARN MORE を置く
11. 監修者紹介（信頼感を出す）: 細い焦げ茶の枠の中に、人物写真・肩書・名前・経歴文を並べる
12. マガジン内容（冊子の中身を紹介する）: ブロブを左右交互に置き、誌面写真と雲形吹き出しを重ねる。最後に収納ボックスを白カードで見せる
13. 特典・CTA再掲（もう一度申込を促す）: 特典、上位プラン、申込ボックスを同じ構成でもう一度置く

Imagery

• ミニチュア菓子やパンは白い小皿やレースペーパーにのせ、真上〜斜め上から明るく撮影して切り抜く
• ジオラマは木製の台に作品を並べ、浅い被写界深度で撮る。背景はシリーズごとの世界観の色にする
• 作品の周りに金色の十字型きらめきを散らす
• キャラクターは焦げ茶一色のシルエットにして装飾に使う
• 道具や付属品は白背景で切り抜き、線付きのラベルで名前を示す
• 地模様はリボンで結んだ菱形格子を淡いピンクで描く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央のコンテンツ幅を約 900px にし、作品グリッドを 7〜8 列に広げる
• PC の FV は横長の写真にし、左にサムネイルの縦列を加える
• PC のコンセプトはリード文を中央に置き、作品写真を左右に振り分ける
• PC の特典カードは 2 枚を横に並べる
• 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 行書くと起動時に読み込まれる。