DESIGN.md — 朱色×紺の浮世絵波 正月酒福袋 LP（Ukiyo-e Wave New Year Sake Lucky Bag LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: 和風、ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 浮世絵の波・正月・朱色と紺・ガチャ感・割引の数字を大きく・市松模様の帯
• 地の質感: ベタ塗りの平面的なイラストに、木版画のような波や雲の線を重ねる。紙のような生成り地も使う。
• 形: 紺の太い枠で囲んだ四角の見出しボックス。角丸は小さめ。白いカードには紺の影をずらして付ける。
• 温度感: 暖色の朱色が主役。紺と水色で引き締める

Colors

• 主なセクションは朱色の地にする。その上に白いカードを置き、紺の枠と紺の文字を使う。
• 情報を読ませるセクションは生成りのクリーム地にして、朱色のセクションと交互に並べる。
• 価格・割引率・本数などの数字は、朱色の極太文字で大きく見せる。
• 主ボタンは紺の地に白文字にする。
• 装飾の波には水色と白、雲には黄土色を使う。
• PC で中央カラムの外側にできる余白は、生成りから水色への横グラデーションにする。

Typography

• 見出しには極太のディスプレイ書体を使い、紺の文字に白い縁取りを付けて立体的に見せる。
• 数字は単位の 2〜3 倍の大きさにして、すぐ目に入るようにする。
• 見出しの一部を斜めに傾けて、勢いを出す。
• 本文は 14px 前後にし、行間は広めに取る。
• 小見出しの背景には、マーカーのような淡い帯を敷く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 375px 幅のカラムを置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションの境目には、紺と朱色の市松模様の帯を入れる。
• 特長は白いカードを縦に積み、各カードの左上に番号ラベルを付ける。
• お客様の声とおすすめ商品は、横スクロールのカードで見せる。
• ジャンル選択はピル型のタグを折り返して並べる。
• よくある質問は、朱色の地に白いアコーディオンを縦に並べる。

Elevation & Depth

• カードには紺の影を 4px ずらしてベタで付ける（ぼかさない）。
• 見出しボックスは紺の太い線で二重に囲む。
• 写真には影を付けず、平面的に見せる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 商品は切り抜きで見せる。人物や工場の写真は角丸なしの長方形にする。円形の切り抜きも併用する。
• セクション境界: 紺と朱色の市松模様の帯、または波のイラストで区切る
• 主ボタンはピル型にする。
• 見出しは角張った枠で囲む。
• 吹き出しは丸型にする。

Components

• 詳細ボタン（button-primary）: 紺の地に白文字のピル型。右端に矢印を付ける。
• 枠付きの見出し（heading-box）: 白い地を紺の二重線で囲み、中に極太の紺文字を置く。
• 特長カード（feature-card）: 白いカードに紺の影を付ける。左上には紺の番号ラベルを置く。
• ジャンルタグ（genre-tag）: 白いピル型に紺の太字を置く。折り返して並べる。
• プランカード（plan-card）: 画像、価格、割引率、ボタンを縦にまとめたカード。
• 市松模様の帯（checker-divider）: 紺と朱色の小さな四角を交互に並べた帯。セクションの区切りに使う。
• FAQ の項目（faq-item）: 朱色の地に置く白い角丸のバー。先頭に Q マーク、右端に＋を付ける。
• スタッフコメント（staff-comment）: 白いボックスに紺の枠を付け、円形のイラストのアイコンを添える。

Do's and Don'ts

Do - 浮世絵風の波・富士・雲のイラストで、正月らしさを出す。 - 割引率や本数は、朱色の極太の数字で大きく見せる。 - 朱色の地とクリーム地のセクションを交互に並べる。 - 紺の枠と、ずらした影でカードを立体的に見せる。 - ガチャ感を出すために、ランクや抽選の要素を図で見せる。

Don't - 淡いパステルや細い明朝体だけで組まない。 - 影にぼかしを使わない。 - 朱色と紺以外の強い色を主役にしない。 - PC で本文を横に広げすぎない。 - 装飾の波を写真や文字に重ねて、読みにくくしない。

Page Structure

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

1. ファーストビュー（正月の福袋であることを一目で伝える。）: 朱色の地と波のイラストの上に、極太のロゴ風の見出しと年号を置く。下に販売期間の帯と、商品を並べた写真を配置する。
2. サービス紹介（どんなサービスかを短く説明する。）: 紺の波の中に、朱色のボックスを置いて説明文を入れる。
3. 特長（お得さと当たりの魅力を伝える。）: 番号付きのカードを縦に積む。価格比較や大きな数字、商品の切り抜き写真を使う。
4. お届けの仕組み（好みに合うお酒が届く安心感を伝える。）: アプリ画面の円形の写真と、縦書きの吹き出しを交互に置く。
5. 購入特典（ページ限定の特典で購入を後押しする。）: 斜めに配置した見出しと、特典品の写真を見せる。
6. ランク紹介（当たりのランクを示す。）: ピラミッド状に段を並べ、各段に価格帯を添える。
7. 記念商品（ラインアップを見せる。）: ジャンルタグと、横スクロールの商品カードを置き、最後に紺のボタンを配置する。
8. プラン（購入プランを提示する。）: 黄土色の地に特典を 3 つ並べ、その下にプランカードを置く。
9. 実績（信頼を示す。）: 累計回数と満足度を巨大な数字で見せ、猫のイラストを添える。
10. お客様の声（社会的な証明を示す。）: SNS 投稿のカードを横スクロールで並べる。
11. スタッフコメント（作り手の想いを伝える。）: アイコン付きのコメントボックスを 2 つ置く。
12. こだわり（品質を伝える。）: クリーム地に右寄せの小見出しを置き、写真と本文を縦に繰り返す。
13. よくある質問（購入前の不安を解消する。）: 朱色の地に、白いアコーディオンを並べる。

Imagery

• 浮世絵風の大波・富士山・雲は、平面的なベタ塗りのイラストで描く。
• 酒瓶は白背景で切り抜き、横一列に並べる。
• 人物や酒蔵の写真は自然光で撮り、明るく親しみやすい雰囲気にする。
• マスコットは、太い線のシンプルなキャラクターにする。
• 盃や金色の雲で、縁起物らしい雰囲気を添える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は中央の約 375px 幅カラムのまま表示する。
• PC の左右の余白は、生成りから水色へのグラデーションで埋める。
• PC のファーストビューは横いっぱいに広げ、左に波と富士、右にロゴを大きく配置する。
• SP ではカラムを画面幅いっぱいにする。

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