DESIGN.md — 和紙地×紫と朱の和柄ホビー商品LP（Japanese Washi Pattern Collectible Doll LP）

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

Overview

• 業種: エンタメ・ゲーム・アプリ ／ 雰囲気: 和風、上品・高級、情報量多め・訴求型
• キーワード: 和紙・和柄・墨のにじみ・縦書き明朝・雲形・紫と朱
• 地の質感: 和紙の繊維とうすい墨のにじみ。青海波・七宝・麻の葉・雲の文様を重ねる
• 形: 円形の切り抜き、雲形、斜めの帯、黒い縦長の見出し札
• 温度感: 落ち着いた中間色の地に、鮮やかな暖色と寒色を差す

Colors

• 地は和紙調の灰白にする。白の面は表とカードに限って使う
• 紫を主役の色として、見出し札・帯・主ボタンに使う
• 水色はサブのボタンと2つ目の見出し札に使い、紫と対にする
• 朱色は和柄の帯と受注情報の見出しに使い、ページの区切りを示す
• 情報ボックスの見出しバーは朱・橙・赤と色を変えて、内容の種類を分ける
• 黒は縦書きの札と表の見出しセルだけに使い、画面を引き締める
• button-secondary は文字 #FFFFFE × 背景 #43ACDB のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#207DA7、4.61:1）を使う。
• release-badge は文字 #FFFFFE × 背景 #F25A25 のコントラスト比が 3.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#D7410D、4.51:1）を使う。

Typography

• 世界観を伝える部分は明朝体で組む。手続き情報はゴシック体で組む
• キャッチと特長は縦書きの白い短冊にして、写真の上に置く
• 本文は行間を2.0前後にし、文字は小さめに静かに組む
• 日付・価格は太字にし、大きいサイズで強調する
• 見出し札の下には英字の小さなラベルを添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。詳細写真は2列のグリッドにする
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と本文を左右交互にずらして、余白に和柄を置く
• 情報ボックスは幅をそろえ、縦に積む
• 表は左を黒い見出しセル、右を白い値セルにした2列にする
• 予約CTAの帯はページ中盤と末尾の2か所に置く

Elevation & Depth

• 影はほぼ使わず、平面で構成する
• カードは細い罫線と白い面で地から浮かせる
• ボタンには薄い落ち影だけを付ける

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: メインは円形、詳細写真は四角。雲形と墨にじみのマスクも使う
• セクション境界: 青海波・七宝などの和柄の帯と、斜めに切った面で区切る
• ボタンは角丸が小さい長方形にし、右端に矢印を付ける
• 雲形と斜めの帯を装飾として重ねる
• 見出し札は縦長の長方形にし、下を和柄で飾る

Components

• 予約ボタン（紫）（button-primary）: 紫の長方形ボタン。左に小さな支払い区分ラベル、右に矢印を付ける
• 予約ボタン（水色）（button-secondary）: 水色で、紫ボタンと横に並べる対のボタン
• 縦書き見出し札（section-tag）: 紫・水色・朱の縦長の札。白い縦書きの明朝に、下に英字を添える
• 縦書き短冊（vertical-caption）: 写真の上に置く白い縦長の帯。特長を短い言葉で縦書きにする
• 発売日バッジ（release-badge）: 朱色の円形バッジ。日付を大きく入れる
• パーツ詳細カード（detail-card）: 四角い写真の左上に黒い縦書きラベルを置き、下に小さな詳細ボタンを付ける
• 色見出し付き情報ボックス（info-box）: 上部に色付きの見出しバーを置く白いボックス。中に日程や支払い方法の帯を並べる
• 予約ステップ（step-flow）: 番号入りの白いカード4つを矢印でつなぐ。各カードにアイコンを入れる
• 製品情報表（spec-table）: 左は黒い見出しセル、右は白い値セル。行は細い罫線で区切る

Do's and Don'ts

Do - 和紙の質感と和柄を、地に必ず敷く - 見出しは縦書きの札か短冊で示す - 紫と水色のボタンをセットで並べる - 写真は円形や雲形で切り抜いて重ねる - 手続き情報は色付きの見出しバーで分けて整理する

Don't - ポップなゴシックの大見出しを使わない - 地を純白の無地にしない - ピル型やグラデーションのボタンにしない - 和柄を除いた、平坦なレイアウトにしない - 鮮やかな色を広い面積に塗らない（帯と札に限る）

Page Structure

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

1. ファーストビュー（世界観と発売日を一目で伝える）: 円形に切り抜いたメイン写真に、縦書きのロゴ札、朱の日付バッジ、縦書きのキャッチを重ねる
2. 導入ストーリー（商品化の背景を語る）: 中央に明朝の見出しを置き、両脇に全身写真、中央に本文を配置する
3. お知らせ（最新情報を伝える）: 縦書きのラベルを付けた白い枠に、日付と本文を並べる
4. 特長（造形の魅力を訴える）: 朱の和柄の背景に大きな写真を置き、縦書きの短冊を3本並べる
5. CTA帯（予約へ誘導する）: ロゴ・日付・紫と水色のボタン2つを横に並べ、下を和柄の帯で区切る
6. ディテール（パーツごとの作り込みを見せる）: 紫の見出し札を置き、斜めの帯の地に四角い詳細写真をグリッドで並べる
7. 製品情報（仕様と価格を示す）: 全幅の写真の下に水色の見出し札を置き、黒白2列の表を続ける
8. 販売情報（予約方法を説明する）: 朱の見出し札を置き、予約ステップ、受注期間、支払い方法のボックスを順に並べる
9. 注意事項（購入前の注意点を伝える）: 赤い見出しバーのボックスに、小見出しと箇条書きを入れる
10. 締めCTA・フッター（最終的な予約を促す）: CTA帯を再び置き、ロゴ・SNSアイコン・著作権表記を和柄の地にのせる

Imagery

• 人形を和装の小道具と一緒に、鮮やかな背景で撮る
• 顔のアップと全身の写真を交互に配置する
• パーツは寄りで撮り、正方形にそろえる
• 青海波・七宝・麻の葉・唐草の線画を、淡い色で背景に敷く
• 墨のにじみ・金箔の小さな四角・雲形を装飾に散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央に約480px相当の幅で組み、余白に和柄を広く見せる
• SPでは縦書きの短冊を写真の上に重ねたまま、写真を縮小する
• SPでは2つのボタンを縦に積み、全幅にする
• SPでは詳細写真を2列にし、表は見出しセルを細くする
• SPでは予約ステップを2×2に組み替える

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