DESIGN.md — マゼンタ×紫×水色のトロピカル雑貨 LP（Tropical Pop Collab Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい
• キーワード: トロピカル・夏・ビビッド・コラボ・雑貨カタログ・レトロポップ
• 地の質感: フラットな単色の面。黒い主線のイラストとロゴのパターン柄で賑やかさを出す
• 形: 角丸カード、ピル型ボタン、ラベル型の小タグ
• 温度感: 高温。熱帯の明るく陽気なトーン

Colors

• セクションごとに地色を変える。順に水色→マゼンタ→紫→水色。
• 商品カードは白地。枠線は紫かオレンジを交互に使う。
• VIEW MORE ボタンも紫とオレンジを交互にし、リズムを出す。
• 商品名タグはカードの枠線と同じ色にする。
• 濃い色の地の上の見出しと本文は白にする。
• 水色の地の上のボタンはオレンジ、文字は白にする。
• button-view-more は文字 #FFFFFF × 背景 #EA581E のコントラスト比が 3.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#CE4813、4.6:1）を使う。

Typography

• 英字の見出しは細めのセリフ体の白文字にし、上品さとポップさを両立させる。
• カテゴリ見出しは「#英単語」の形にして左に揃える。
• 和文は太字のゴシックで中央に揃える。
• 発売日や特集名は、黒い縁取りと影を付けた太い装飾書体にする。
• 価格は太字。税込表記だけ小さくする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は横スクロールのカルーセル。復刻アイテムは 2 カラムのグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 60px、基本単位 8px、カード内 16px（375px 幅換算）
• 左右の余白は約 20px。
• カルーセルは次のカードの端が見えるようにし、スクロールできると分かるようにする。
• カルーセルの下に細い進捗バーを置き、その下にボタンを置く。
• カテゴリごとの間隔は約 50px。

Elevation & Depth

• 影はほぼ使わない。
• ボタンの右下に白い細線のずらし影を付け、浮いて見せる。
• 装飾文字には黒いドロップシャドウを付ける。

Shapes

• 角丸: 小 4px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品は白地に切り抜いて配置。スタッフ写真は角丸なしの矩形
• セクション境界: 直線で地色を切り替える。ロゴを繰り返したパターン帯を区切りに挟む
• カードは角丸 14px で、3px の色付き枠線を付ける。
• 商品名タグは角丸 4px の塗りのラベルにする。
• ボタンは全幅のピル型にする。

Components

• VIEW MORE ボタン（button-view-more）: 全幅のピル型。紫とオレンジを交互に使い、右下に白いずらし線を付ける
• 商品カード（product-card）: 白地に色枠を付けた角丸カード。中に商品の切り抜き画像、名前のタグ、価格を入れる
• 商品名タグ（name-tag）: 塗りの小さなラベル。文字は白
• ハッシュタグ見出し（hashtag-heading）: #付きの英字を左に揃えた白いセリフ体
• 一覧導線ボタン（brand-list-button）: 紫のピル型。和文 2 段の白文字
• スクロール進捗バー（carousel-progress）: 細い線。白が現在位置、色付きが残りを示す
• キャンペーンバナー（campaign-banner）: 白地に太字のロゴ書体と写真を組んだバナー。応募期間のバッジを付ける
• 斜線で挟む見出し（slash-heading）: 中央の太字見出しを左右の斜線で挟む

Do's and Don'ts

Do - 地色はセクション単位で、ビビッドな単色を大胆に切り替える。 - カードの枠とボタンの色は、紫とオレンジで交互に揃える。 - 商品画像は白地に切り抜いて、中央に置く。 - 英字の見出しにはセリフ体の白文字を使う。 - 最初と最後にトロピカルなイラストを置いて、ページを挟む。

Don't - くすんだ色や低彩度の色は使わない。 - ボタンを角張った形にしない。 - カードに重い影を付けない。 - 本文を細いウェイトにしない。 - 商品写真に生活シーンの背景を入れない。

Page Structure

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

1. ファーストビュー（夏とリゾートの世界観を一目で伝える）: 全面のフラットイラスト。中央に、縁取り付きの装飾書体でタイトルを置く
2. リード・発売告知（発売日と企画の概要を伝える）: 水色の地に雲のイラスト。装飾書体の日付と、中央揃えの太字本文、注釈を置く
3. ブランド切替タブ（コラボ相手ごとの導線を示す）: 角丸タブにロゴを並べる。下にピル型のボタン
4. コラボ概要カード（商品群の全体像を見せる）: 柄の地の上に白い角丸カードを置き、中にロゴ・集合写真・説明文を入れる
5. カテゴリ別商品一覧（テーマごとに商品を見せる）: マゼンタの地。ハッシュタグ見出し、横スクロールのカード、進捗バー、VIEW MORE の順に繰り返す
6. 復刻アイテム（再販商品で購買を促す）: 紫の地に大きなセリフ体の見出し。2 カラムのグリッドに MORE ボタンを付ける
7. 一覧導線帯（全アイテムへ送客する）: ロゴのパターン帯の上に、紫のピル型ボタンを重ねる
8. プレゼントキャンペーン（購入特典を訴求する）: 白い枠のバナー。太字の書体で条件を示し、プレゼントの画像を載せる
9. 特別キャンペーン・特集（抽選企画と読み物へ誘導する）: 横長のバナーと、斜線で挟んだ見出し。写真のコラージュを添える
10. 提携ブランド紹介（関連ブランドの商品を見せる）: 水色の地に白い大きなロゴ、短い説明、切り抜き商品、オレンジのボタン
11. 全アイテムCTAと注意事項（最後の送客と注記）: マゼンタのピル型ボタンに装飾書体の文字。下に注釈と、締めのイラスト

Imagery

• 黒い主線で描くフラットなレトロポップ調のイラスト。ヤシ・ハイビスカス・フラダンサー・飛行機・虹などのモチーフを使う。
• 商品は白背景で切り抜き、真上か正面から撮る。
• 集合写真はオレンジの背景に商品を並べた俯瞰の物撮り。
• ロゴや大きな花柄を繰り返した、ビビッドなパターンの地。
• 人物写真は自然光で撮った、明るいライフスタイル写真。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像はないため、以下は推奨。PC では中央に 1000px 前後のコンテナを置く。
• カルーセルは PC で 3〜4 枚同時に見せる。
• 復刻アイテムのグリッドは PC で 4 カラムにする。
• ファーストビューのイラストは、横長に再構成するか中央に固定する。

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