DESIGN.md — ピンク×群青と雲の玩具風お菓子メーカーLP（Pop Pink Cloud Toy-World Confectionery Site）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: 蛍光ピンク・群青・もこもこ雲・虹・3Dキャラ・絵本の世界
• 地の質感: 光沢のある3DCG風キャラと、柔らかい影の白い雲。地の面はフラットな単色。
• 形: 雲形の波でセクションを区切る。カードは角丸、ボタンはピル型。
• 温度感: 暖かく明るい。ピンクで熱量を出し、群青で引き締める。

Colors

• 地はピンクと白を交互に切り替え、境目には必ず白い雲の波を挟む
• 見出しとボタンは群青に統一する。ピンク地の上でも群青の見出しを使う
• 虹色（赤・橙・黄・緑・青・紫）は装飾とメインコピーの文字色だけに使う
• フッターは群青ベタ塗りに白文字
• 本文は白地に黒、日付はグレーにする

Typography

• 見出しは太字で、字間を広めにとる
• 見出しの上に小さな英字を弧状に配置し、薄いグレーかピンクで添える
• メインコピーは1文字ずつ色を変え、一部の文字だけ白い雲の上に乗せる
• 本文の字間は0.1emでゆったり取る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品・ブランド・ピックアップは横スクロールのカルーセルにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションは中央揃えの見出しから始める
• カルーセルは左右のカードを画面外に少しはみ出させて見せる
• 一覧ボタンはセクションの末尾に中央配置し、幅は約70%
• ニュースは区切り線で仕切ったリストにする
• キャラクターはコンテンツの左右の余白に重ねて置く

Elevation & Depth

• カードには淡いぼかしの影と白い太縁をつける
• 雲には下側にグレーの柔らかい陰影をつけ、立体的に見せる
• ボタンに影はつけない（フラット）

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 商品パッケージは切り抜いて白い雲の台座に乗せる。バナーは角丸のカードに収める
• セクション境界: もこもこした雲形の波
• 直線の区切りはリストの罫線だけにする
• セクション境界はすべて雲の形にする
• ナビやスライダーのドットは円形にする

Components

• 群青のピルボタン（button-primary）: 一覧ページへ送るボタン。中央に配置し、白の太字ラベルを置く
• 弧状英字付き見出し（section-heading）: 小さな英字を弧状に配置し、その下に群青の大見出しを置く
• 雲の区切り（cloud-divider）: ピンク面と白面の境目に置く、陰影付きの雲の帯
• ブランドカード（brand-card）: 白い角丸カードの上にブランド名、下に商品パッケージを置き、横スクロールで並べる
• 雲台座リンク（cloud-link）: 3Dの建物イラストの下に雲形のボタンを置き、群青の文字でリンク名を入れる
• ニュースリスト（news-list）: グレーの日付とタイトルを1行ずつ置き、罫線で区切る
• スライダードット（carousel-dots）: 紫系の丸ドット。現在地は濃い群青にする
• フッターアコーディオン（footer-accordion）: 群青地に白の太字メニューを並べ、右端に＋か＞を置き、細線で区切る

Do's and Don'ts

Do - ピンクと白の面は雲の波で交互に切り替える - 見出し・ボタン・フッターは群青で統一する - 3Dキャラ・虹・気球を画面の端にちりばめる - 商品は切り抜いて雲の台座に乗せる - ボタンは必ずピル型にする

Don't - 直線や角ばった区切りでセクションを分けない - くすんだ色や暗いグレーを地色に使わない - 明朝体など堅い書体を使わない - 虹色を本文に使わない - ボタンの色を群青以外にしない

Page Structure

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

1. ヘッダー（ロゴとナビゲーションを置く）: 白地の左にロゴ、右に言語切替のピル・検索・メニューのアイコン
2. ファーストビュー（世界観と主力商品を印象づける）: ピンク地に虹色のコピーを置き、商品写真のスライダーと大きなキャラの顔を重ね、周囲を動物キャラと雲で囲む
3. 新商品（新しい商品を紹介する）: 白地に弧状英字付きの見出し、雲に乗せた商品のカルーセル、商品名、一覧ボタン
4. ブランド紹介（主要ブランドを一覧で見せる）: 上下を雲で縁取ったピンク地に、白い角丸カードを横スクロールで並べ、虹の帯を斜めに通す
5. ニュース（プレスリリースとお知らせを載せる）: 白地の罫線リスト2ブロック。それぞれの末尾に群青のピルボタン
6. ピックアップ（キャンペーンを告知する）: ピンク地に角丸のバナーカードのスライダーとドット
7. コンテンツリンク（楽しめるコンテンツや通販へ誘導する）: 3Dの建物イラストと雲台座のボタンを縦に3つ並べ、上に弧状の英字を添える
8. フッター（サイト全体のナビゲーションを置く）: 群青地にロゴ、アコーディオンメニュー、SNSアイコン、コピーライト

Imagery

• 光沢のある3DCGの動物キャラ（ソフビ人形風）を雲の上に座らせる
• 白くもこもこした雲には下側に淡いグレーの陰影をつける
• 立体的な虹のリボンを画面の端から曲線で流す
• ストライプ柄の気球や星などの小物を添える
• 建物は丸みのあるミニチュア風の3Dイラストにする
• 商品パッケージは正面から撮って切り抜く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCでも雲の区切りとピンク・白の交互構成はそのまま保つ
• PCではカルーセルに4〜7枚を同時に表示し、左右に丸い矢印ボタンを置く
• PCのニュースはプレスリリースとお知らせを2カラムで並べる
• PCではコンテンツリンクを横に3つ並べる
• PCのフッターはメニューを4カラムに展開する（アコーディオンにしない）
• 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 行書くと起動時に読み込まれる。