DESIGN.md — 水彩の森と若葉色の動物雑貨コラボ LP（Watercolor Jungle Walk Merchandise LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: ナチュラル、やさしい・柔らかい、親しみ・手作り感、かわいい
• キーワード: 水彩の森・若葉色・有機的な曲線・縦書きコピー・手描き動物・散歩感
• 地の質感: 和紙のような細かい紙目の地。水彩のにじみがあるイラスト背景
• 形: 大きめの角丸写真、丸い動物アイコン、波のような曲線でセクションを区切る
• 温度感: あたたかみのある中間色。緑系だが黄みを帯びたやわらかい印象

Colors

• 地の色は若葉グリーン・生成り・黄緑・水色を商品ごとに切り替え、境目は波形の曲線にする
• 購入ボタンは全部同じ紺紫のピル型で統一し、ほかの要素には紺紫をほとんど使わない
• ピンクは素材バッジ・FV見出し・小見出し帯のアクセントだけに使う
• 説明文は白カードにのせ、墨色の文字で読みやすくする
• 純黒は避け、墨色やグレーで文字をやわらかく見せる
• フッターの進捗バーにだけ深緑と黄色を使い、遊び心を出す
• badge-feature は文字 #FDFCFF × 背景 #CC5B83 のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C54673、4.57:1）を使う。
• heading-bar は文字 #FDFCFF × 背景 #CC5B83 のコントラスト比が 3.81:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C54673、4.57:1）を使う。
• progress-footer は文字 #F5FE36 × 背景 #43A692 のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら dark-section-accessible（#327C6D、4.51:1）を使う。

Typography

• 写真のキャッチコピーは縦書きにし、1行ごとに白帯を敷いて2行並べる
• 商品名と価格は中央揃えの2行にし、税込表記は小さくする
• 本文は小さめの細い文字で、行間を広めにとる
• 英字のボタンラベルは太いサンセリフで短くする
• FVのキャッチコピーだけ丸みのある書体を大きく使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品の補足画像だけ 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 90px、基本単位 8px、カード内 14px（375px 幅換算）
• 商品写真は左右に約11%の余白をとって中央に置く
• 1商品は「角丸写真＋縦書きコピー→point カード→補足画像→商品名・価格→BUY」の順にする
• 商品と商品の間に、切り抜いた人物写真と吹き出しをはさんで散歩しているような流れを作る
• 丸い動物アイコンは写真の左上にはみ出させて重ねる
• 装飾の植物イラストは画面の端からはみ出させる

Elevation & Depth

• 影はほぼ使わず、平面的に見せる
• 丸い動物アイコンは白い太枠で地から浮かせる
• 奥行きはイラストや植物を前後に重ねて出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品写真は大きめの角丸の長方形。動物写真は白枠付きの正円。人物と小物は背景を抜いて切り抜く
• セクション境界: 水彩のようにゆるやかな波形の曲線で、地の色を切り替える
• ボタンは横長のピル型にし、右端に細い矢印を付ける
• 素材や特徴のバッジはピンクの正円にする
• 説明カードは角丸なしの白い長方形にし、上部に三角の吹き出しを付ける
• 情報カードはわずかに角丸の白い半透明面にする

Components

• 購入ボタン（button-buy）: 紺紫のピル型。中央に BUY、右端に細い山形矢印。幅は約50%
• 縦書きコピー帯（vertical-copy）: 写真の右上に、白い縦長の帯を2列重ねて置く縦書きコピー
• point 説明カード（point-card）: 白い長方形のカード。左上に三角の吹き出し、右上に紺の point ラベル
• 丸い動物リンク（animal-circle）: 暗めの動物写真を白枠の円で切り抜き、白文字の名前と矢印アイコンを重ねる
• 素材バッジ（badge-feature）: ピンクの正円に白文字2行で、素材や付属品を示す
• 人物の吹き出し（speech-bubble）: 切り抜いた人物の横に、斜めの線ではさんだ手書き風の短い一言を置く
• 情報カード（info-card）: イラスト背景の上にのせる白い半透明カード。中央に見出し、本文、右寄せのピンクのリンク
• 小見出し帯（heading-bar）: ローズピンクの角丸の横長帯に白文字を中央揃え
• 進捗フッター（progress-footer）: 深緑の固定帯の上に、START から GOAL へ伸びる黄色の線と人物アイコンを置く

Do's and Don'ts

Do - 商品ごとに地の色を変え、境目は波形の曲線にする - BUY ボタンは全商品で同じ形・同じ色にする - 手描きの動物や植物のイラストを端からはみ出させて散らす - 写真のコピーは縦書きの白帯で添える - 切り抜いた人物と短い吹き出しで、商品の間をつなぐ

Don't - 濃い原色や蛍光色を広い面に使わない - 直線のきっちりした区切りでセクションを分けない - ボタンの色をセクションごとに変えない - 強いドロップシャドウや光沢を付けない - 本文を太字や大きな文字で詰め込まない

Page Structure

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

1. ファーストビュー（コラボの世界観を一目で伝える）: 水彩の森のイラストを全面に敷き、上部に黒地のロゴ板、ピンクの大きな3行コピー、中央揃えのリード文、注記を置く。動物イラストを周囲に配置する
2. 商品紹介1（主力）（主力商品の魅力と価格を示す）: 若葉グリーン地に角丸写真、縦書きコピー、ピンクの素材バッジ、丸い動物リンクを重ねる。下に商品名・価格・BUY を置く
3. 派生商品（関連商品やサイズ違いを案内する）: 斜線ではさんだ小見出しのあとに、商品名・価格・BUY を並べる
4. 商品紹介2〜4（こだわりを詳しく説明する）: 生成り・黄緑・グリーンの地を波形で切り替え、角丸写真＋point カード＋2カラムの補足画像を置く
5. バリエーション紹介（柄違いを一覧で見せる）: 切り抜いた商品を、キャプション付きで千鳥配置にする
6. 商品紹介5〜6（小物商品を楽しく見せる）: 切り抜いた商品を斜めに散らし、丸い動物リンクを縦に2つ並べる
7. 支援活動の説明（売上の寄付先を伝えて信頼を得る）: 水彩の森の背景に白い半透明カードをのせ、見出し・本文・ピンクのリンクを置く
8. パートナー紹介・メッセージ（コラボ先の思いを伝える）: 白カードにロゴ・説明文・ピンクの小見出し帯・メッセージ文を順に置く
9. 進捗フッター（スクロールの進み具合を遊び心で示す）: 深緑の帯に黄色の線を引き、START・GOAL と人物アイコンを置く

Imagery

• 背景は、水彩のにじみがある淡い緑と水色の森や山の風景イラスト
• 動物は、鉛筆と水彩で写実的に描いたイラストを背景なしで散らす
• 商品写真は白やグレーの明るいスタジオで、親子や男女のモデルが自然な笑顔で着用する
• 人物の全身を小さく切り抜き、手をつないで歩く姿を吹き出しと一緒に配置する
• 葉や植物のシルエットのイラストを画面の端から差し込む
• 動物の実写写真は円形に切り抜き、少し暗くして文字を重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では SP と同じ1カラムのコンテンツを、幅約40%の中央の帯で表示する
• PC の FV は横長の水彩森イラストを全幅に広げ、キャッチコピーは2行にする
• PC では FV より下の左右の余白を白にし、左にロゴ、右に商品目次のナビゲーションを固定する
• 目次は小さな動物アイコンと商品名を縦に並べ、現在地を黄色のマーカーで示す

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