DESIGN.md — 緑×サーモン×チャコールの波形キャラ雑貨 LP（Playful Wavy Color-Block Character Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、ポップ・元気、やさしい・柔らかい、親しみ・手作り感
• キーワード: 波形の色帯・耳付きカプセル写真・左右交互の商品紹介・丸ゴシック・ドット柄の地
• 地の質感: フラットな単色の面。白地には薄いグレーの水玉を敷き、影はほぼ使わない
• 形: 波線の境界、縦長カプセル、丸い耳、ピル型ボタン、角丸の小さなサムネイル
• 温度感: 暖かく親しみやすい。中間トーンの多色でにぎやかだが、落ち着きもある

Colors

• 商品セクションの地は、緑→サーモン→ベージュ→チャコールの順に波形の境界で切り替える。
• ボタンの色は帯色より濃い同系色にする（緑の帯→濃い緑、サーモン→赤、ベージュ→黒、チャコール→黒）。
• 緑・サーモン・チャコールの帯では見出しと本文を白、ベージュと白地では濃いグレーにする。
• 写真は白いカプセルで切り抜き、帯色から浮かせる。
• ページの最初と最後は水玉柄の白地で挟み、テーマの緑で見出しを強調する。
• button-detail は文字 #FFFFFF × 背景 #138C74 のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#12856E、4.56:1）を使う。
• ribbon-tag は文字 #FFFFFF × 背景 #F38382 のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#E91D1C、4.51:1）を使う。
• donation-card は文字 #138E6E × 背景 #FDFEFE のコントラスト比が 4.06:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#128567、4.54:1）を使う。
• link-button-pair は文字 #FFFFFF × 背景 #F47296 のコントラスト比が 2.73:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#E9124E、4.51:1）を使う。

Typography

• 見出しは丸ゴシックの中央揃えにし、2〜3 行に改行して語尾を伸ばすような柔らかい口調にする。
• 価格は「単位 + ¥金額 +（税込み）」の形にし、金額だけを大きくする。
• 特長の説明は 2 行程度の小さい文字にし、サムネイルの横に置く。
• 欧文の見出しは太いサンセリフで、テーマの緑にする。
• 本文は大きくしすぎない。情報は写真で伝える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストの 2 カラムを左右交互に並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 1 セクションにつき 1 商品を載せ、写真→見出し→特長 1〜2 個→商品名→価格→ボタンの順に並べる。
• PC では写真の位置を左右交互に変える。
• 特長は、小さな角丸サムネイルと 2 行の説明を左右交互に並べる。
• 波形の境界の上下には 40〜60px の余白を取る。
• ボタンは幅 240px 前後で中央に置く。

Elevation & Depth

• 影はほぼ使わない。色の面の切り替えで奥行きを出す。
• 吹き出しは白地に細い黒線で縁取り、影は付けない。
• 寄付ブロックは白地に太いグレー線のカプセル枠で囲む。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 120px。ボタンはピル型。
• 写真の切り抜き: 上下が半円の縦長カプセル。上の左右に動物の耳の黒丸を付ける。円形やスタジアム型にすることもある
• セクション境界: うねりのある大きな波線（帯ごとに波形を変える）
• メイン写真は必ずカプセル型＋耳 2 つにする。
• サムネイルは 8px 角丸の正方形にする。
• ボタンは完全なピル型にする。
• セクションの境界は直線にしない。

Components

• 詳細ボタン（button-detail）: 帯色より濃い同系色のピル型ボタン。白文字の右に » を付ける
• 耳付きカプセル写真（photo-capsule-ears）: 白い縦長カプセルで写真を切り抜き、上の左右に黒い丸耳を付ける
• 特長サムネイル（feature-thumb）: 角丸の正方形写真と 2 行の説明を並べたもの
• 注釈の吹き出し（speech-balloon）: 白地に細い黒線の四角い吹き出し。写真の上に小さな文字で載せる
• 価格表示（price-line）: 小さな単位、大きな金額、小さな（税込み）を中央揃えで並べる
• サブタイトル帯（ribbon-tag）: タイトルの上に置くサーモン色のピル型ラベル（白文字）
• 寄付案内カプセル（donation-card）: 白いカプセルを太いグレーの線で囲み、緑の見出しと写真 2 枚を入れる
• 外部リンクボタン（link-button-pair）: ピンクと緑の大きなピル型ボタンを 2 つ並べ、上に小さな見出しを付ける

Do's and Don'ts

Do - 帯の色は 4 色を順番にローテーションする。 - メイン写真には必ず耳付きのカプセル型を使う。 - セクションの境界は波線にする。 - ボタンの色は帯色に合わせて変える。 - 小さな動物イラストを波の縁に配置する。 - 見出しはやわらかい丸ゴシックにする。

Don't - 直線や鋭角でセクションを区切らない。 - 原色の鮮やかすぎる色を使わない（トーンを落とした色を保つ）。 - 写真を四角いまま大きく置かない。 - ドロップシャドウやグラデーションを多用しない。 - 1 セクションに複数の商品を詰め込まない。 - 明朝体などの硬い書体を見出しに使わない。

Page Structure

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

1. ファーストビュー（特集のテーマと世界観を伝える）: 白地に緑の波を上下に配置する。人物とぬいぐるみの写真を中央に置き、周りに商品の切り抜き、水玉や斜線の円の装飾を散らす。上に丸ゴシックの大きな緑のタイトル、その上にピンクのラベルを置く
2. 社会貢献の告知（売上の一部が寄付されることを伝える）: 水玉柄の白地に、左に緑の欧文見出しと短い説明とロゴ、右に円形の写真を置く
3. 商品紹介（緑の帯）（看板商品を訴求する）: 耳付きカプセル写真と、見出し・特長サムネイル・商品名・価格・濃い緑のボタンを並べる
4. 商品紹介（サーモンの帯）（2 つ目の商品を紹介する）: 左右を入れ替えた配置にし、写真に注釈の吹き出しを載せる。ボタンは赤
5. 商品紹介（ベージュの帯）（アパレル商品を紹介する）: 暗い文字にし、ボタンは黒にする
6. 商品紹介（チャコールの帯）（柄物の商品を紹介する）: 白文字にし、波の縁に小さな動物イラストを置く
7. 商品紹介の繰り返し（ほかの商品を紹介する）: 4 色の帯をローテーションしながら同じ型を繰り返す
8. 寄付の詳細（寄付先と使い道を説明する）: 水玉柄の白地に太線で囲んだカプセルカードを置く。中に緑の 3 行見出し、写真 2 枚、説明文を入れる
9. 外部リンク（関連ブランドや基金のページへ誘導する）: ピンクと緑のピル型ボタンを 2 つ並べ、それぞれの上に小さな見出しを付ける

Imagery

• 人物写真は自然光で撮った明るい笑顔のモデル。白や生成りの背景にする。
• 商品は切り抜いて白背景に置くか、生活シーンで撮る。
• ディテールの寄り写真を小さな角丸サムネイルにする。
• 小さなキャラクターのぬいぐるみの切り抜きを波の縁にあしらう。
• ファーストビューには水玉の円、斜線の円、放射線などのポップな幾何学模様を散らす。
• 白地には薄いグレーの水玉パターンを敷く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では写真を上、テキストを下の 1 カラムに積み、左右交互の配置はやめる。
• カプセル写真は SP 幅の 80% 程度にする。
• 波の境界は SP でも維持し、振幅を小さくする。
• 外部リンクのボタン 2 つは、SP では縦に積む。
• PC では中央に約 900px 幅の 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 行書くと起動時に読み込まれる。