DESIGN.md — コーラル×水引の祝い引き出物ギフトLP（Festive Coral Gift Selection LP）

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

Overview

• 業種: ウェディング・冠婚葬祭 ／ 雰囲気: ポップ・元気、やさしい・柔らかい、親しみ・手作り感、上品・高級
• キーワード: 祝い・水引・コーラル・厳選ギフト・手書き吹き出し・商品カード
• 地の質感: フラットな単色面。影やグラデーションは使わず、切り抜き商品写真を面からはみ出させて立体感を出す
• 形: 角丸小さめのカード面、ピル型ボタン、手書きの曲線吹き出し、梅結びの線画
• 温度感: 暖色寄りで華やか。白地で余白を広くとり軽さを保つ

Colors

• 地は白を基本に、カテゴリごとに淡ピンク・山吹色のカード面を切り替える
• ボタン色はカード面と同系の濃色（ピンク面→コーラル、黄面→山吹）にそろえる
• 主ボタン「もっと見る」だけは純赤で目立たせる
• 見出しの数字・価格・水引ラインは赤で統一する
• メッセージ帯はコーラル全面に白文字・白線画と白ボタンを置く
• 梅結び装飾はカテゴリ面色の淡い版で背景的に置く
• button-primary は文字 #FFFFFF × 背景 #FC0202 のコントラスト比が 4.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#ED0202、4.55:1）を使う。
• button-card は文字 #FFFFFF × 背景 #FE7A65 のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E72102、4.55:1）を使う。

Typography

• 見出しは明朝で、数字だけ赤く約2倍の大きさにする
• 吹き出しコピーは手書き書体で1〜2行に収める
• 商品ラベル（Pick up）は小さな赤の欧文で商品名の上に置く
• 価格は赤の太字欧文、税込表記は小さく下に添える
• 本文は明朝の細字で行間を広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC は商品カード 3 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• 商品写真は白地に置き、カード面は写真の下半分から始めて重ねる
• カード内は中央揃え：水引ライン→ラベル→商品名→価格→ボタン
• 各カテゴリの最後に中央の「もっと見る」ボタンを置く
• カテゴリ見出しの上下は余白を大きくとる

Elevation & Depth

• 影はほぼ使わない
• 立体感は切り抜き写真がカード面の上端からはみ出すことで出す

Shapes

• 角丸: 小 4px ／ 中 6px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 背景を抜いた商品の切り抜き写真
• セクション境界: 直線で色面を切り替える
• ボタンはすべて完全なピル型
• カードの角丸は控えめにする
• 吹き出しは閉じない手書きの曲線にする
• 赤い水引の結びをカード内の区切り線に使う

Components

• もっと見るボタン（button-primary）: 純赤のピル型、白太字に右向き矢印
• 商品詳細ボタン（button-card）: カード面と同系の濃色ピル、白文字と矢印
• カテゴリ見出し（heading-category）: 明朝の見出しに赤の大きな数字、上に赤いリボン、横に淡い梅結び
• 手書き吹き出し（speech-handwritten）: 商品の上に手書き曲線の吹き出しとひと言コピー
• 商品カード（card-product）: 淡色面に水引ライン、Pick upラベル、商品名、赤い価格、ボタン
• 水引ライン（divider-mizuhiki）: 細い赤線の中央に蝶結びのモチーフ
• メッセージ帯（section-message）: コーラル面に赤の欧文見出し、明朝本文、白線画イラストと吹き出し、白ボタン
• 相談ボタン（button-white）: 白いピル型にコーラル文字、上に斜線つきの小さな誘導文

Do's and Don'ts

Do - カテゴリごとにカード面の色とボタン色を同系でそろえる - 価格と見出し数字は赤で強調する - 商品写真は切り抜きにしてカード面から浮かせる - 手書き吹き出しで商品ごとに短いひと言を添える - 水引や梅結びで祝いのモチーフを控えめに入れる

Don't - 濃い影やグラデーションを使わない - 寒色を強調色に使わない - 角張ったボタンにしない - 吹き出しを長文にしない - 装飾を写真より目立たせない

Page Structure

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

1. ヘッダー（サイトの導線）: 白地にロゴ、アイコンとメニュー、下にパンくず
2. ファーストビュー（企画テーマを伝える）: コーラル全面に中央の明朝大見出し、左右に商品の切り抜きを散らす
3. カテゴリ1見出し（メインギフトの紹介開始）: 明朝の見出しに赤い大きな数字、リボンと梅結び
4. 商品紹介（メイン）（商品を1つずつ見せる）: 吹き出し→切り抜き写真→淡ピンクのカード
5. 一覧CTA（全商品へ誘導）: 中央の赤いピルボタン
6. カテゴリ2見出し・商品紹介（食品ギフトの紹介）: 同じ型で山吹色のカードに切り替え
7. メッセージ（考え方を伝え相談へつなぐ）: コーラル帯に明朝本文、悩む人物の線画と吹き出し、白ボタン
8. フッター（SNSとサイト内リンク）: 薄グレー地にSNSアイコン、＋つきアコーディオン、規約リンク

Imagery

• 商品は背景を抜いた切り抜き写真で、やや上から撮った明るい商品撮影
• 人物は白一色の細い線画で、ゆるい手描きタッチにする
• 吹き出しは黒の手描き曲線で、端を開いたままにする
• 装飾は赤い水引の蝶結びと淡色の梅結びの線画
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは商品カードを3カラムで並べ、写真と吹き出しを縮小する
• PCではFVを横長にして商品を左右に広く配置する
• PCのメッセージ帯は本文を中央揃えの狭い幅にまとめる
• 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 行書くと起動時に読み込まれる。