DESIGN.md — 青×黄レモン色のポップな飲料キャンペーンLP（Vivid Blue Yellow Pop Beverage Campaign LP）

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

Overview

• 業種: 酒類 ／ 雰囲気: ポップ・元気、力強い・インパクト、情報量多め・訴求型
• キーワード: 原色ブルー×イエロー・放射線背景・切り抜きコラージュ・極太立体見出し・角丸カード・マンガ的演出
• 地の質感: フラットな原色面に放射状の光線と雲・波の和柄、薄い英字ループ文字を重ねたにぎやかな質感
• 形: 大きめ角丸の白カード、片側だけ角を落とした青パネル、ピル型ボタンと円形矢印
• 温度感: 高温・陽気。夏っぽく明るい

Colors

• 青と黄をセクションごとに交互に全面で敷き、境界をはっきり切り替える
• 黄地には青文字、青地には白文字のみを使う
• 情報量の多い所は白の角丸カードに載せて読みやすくする
• 見出しは白文字に青の太縁取り＋影、または青文字に白縁取りで立体感を出す
• 濃紺は商品スペックパネルにだけ限定して使う
• 黒は使わず、テキストも青系で統一する

Typography

• 全体を太字（700以上）で統一し、細い書体は使わない
• 大見出しは白文字＋青の太い縁取り＋ずらし影で立体化
• 本文も中央寄せ・太字で短い行に区切る
• カードタイトルは白帯にのせて少し傾ける
• 英字はボールドの幾何学サンセリフで小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、カードはスライダーまたは縦積み
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白の大カードを画面幅いっぱい近くに置き、その中に青パネルを縦に積む
• 青パネルは左寄せで右端に切り抜き写真をはみ出させる
• 手順は大きな顔写真3つに番号丸を添えて三角配置
• トピック・イベントは左右矢印付き横スライダー
• セクション間は地色の切り替えで区切る

Elevation & Depth

• 影はほぼ使わずフラット
• 見出し文字だけに青のずらし影を付ける
• 切り抜き写真に軽いドロップシャドウ
• 白カードは影なしで地色とのコントラストで浮かせる

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物・料理・商品は背景を抜いた切り抜き、記事サムネは角丸矩形
• セクション境界: 直線で地色を切り替える。雲・波の和柄を境界に添える
• カード右下に円弧状の矢印タブを付ける
• スライダー矢印は白縁の円形ボタン
• 青パネルは右側だけ大きく角丸
• 吹き出しは白地に青太線の雲形

Components

• 商品画像付きピルボタン（button-brand-link）: 左に缶画像をはみ出させた青ピル。上に白い小ラベル、右端に白丸の外部リンクアイコン
• 立体縁取り見出し（heading-3d）: 白文字に青の太縁と影、放射線背景の上に置く
• 特長ブルーパネル（panel-feature）: 白文字の見出しと本文、右上に切り抜き写真がはみ出す
• 記事カード（card-article）: 黄地にサムネ、傾いた白帯タイトル、著者ラベル、日付、右下の白い円弧矢印
• トピックカード（card-topic）: 白地＋青太枠、左上に黄色の斜めカテゴリラベル
• 番号丸（step-number）: 青の小円に白数字、下に青太字の説明
• 雲形吹き出し（speech-bubble）: 白地に青太線の吹き出しで見出しを囲む
• スライダー矢印（slider-arrow）: 青地に白縁の円形ボタン
• 商品スペックパネル（spec-panel）: 濃紺の角丸に黄の手書き風商品名と成分数値

Do's and Don'ts

Do - 青と黄の原色面を大胆に切り替える - 人物・料理・レモンを切り抜きで画面端からはみ出させる - 見出しには縁取りと影で立体感を出す - 放射線や効果線でマンガ的な勢いを足す - 情報は白の角丸カードに整理する

Don't - くすんだ中間色や黒文字を使わない - 細字・明朝体を使わない - 写真を四角いまま平置きにしない - 余白を広く取りすぎて静かな印象にしない - 青・黄以外の主張色を増やさない

Page Structure

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

1. ファーストビュー（企画テーマと商品を一目で伝える）: 放射線の黄背景に人物と料理・商品のコラージュ、中央に立体見出し、外周に青帯の英字ループ
2. トピックス（最新記事への導線）: 白地に青枠カードの横スライダー、ドット送りと円形矢印
3. コンセプト説明（企画用語の意味を伝える）: 黄地に大きな立体見出しと中央寄せの青太字本文、周囲に料理の切り抜き
4. 楽しみ方（手順）（3ステップで体験を示す）: 放射線背景に大きな顔の切り抜き3つと番号丸
5. 商品の特長（商品の魅力を3点で訴求）: 白い大カード内に青パネルを縦積み、写真がはみ出す
6. 専門家の推薦（第三者の信頼付け）: 丸枠の人物写真、青の肩書きラベル、青文字のコメント
7. ブランドサイト誘導CTA（公式サイトへ送客）: 缶画像付き青ピルボタン
8. スペシャルコンテンツ（記事群で回遊させる）: 雲形吹き出し見出し、青地に薄い英字ループ、黄の記事カードを縦積み
9. イベント情報（体験イベントの開催施設を案内）: 青地に白文字見出し、黄枠の施設カードスライダーと詳細ピルボタン
10. 商品紹介（商品スペックの提示）: 黄地に缶とジョッキの写真、濃紺のスペックパネル、再度CTA
11. 投稿キャンペーン（参加型施策へ誘導）: 青地の白カードに青太字、区切り線、キーワードを青ベタ白抜き
12. フッター（運営ロゴとSNS）: 白地に青ロゴとSNSアイコン、小さなコピーライト

Imagery

• 人物は明るい表情の正面写真を背景ごと切り抜き、顔だけの大きな切り抜きも多用
• 料理・レモン・小物（アヒル、手桶など）を切り抜きで散らす
• 手前のレモンはぼかして奥行きを出す
• 背景に放射状の光線・きらめき・和柄の雲と波
• マンガのコマや効果音文字をアクセントに使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約1000pxに収め、地色は全幅で敷く
• 特長パネルは PC で3カラム横並び
• 記事カードは PC で3枚横並びスライダー
• イベントは PC で左に見出し・右に施設カードの2カラム
• ファーストビューは 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 行書くと起動時に読み込まれる。