DESIGN.md — 青白赤トリコロールと水彩のチーズスイーツ LP（French Tricolore Watercolor Dessert LP）

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

Overview

• 業種: 菓子・スイーツ ／ 雰囲気: 上品・高級、やさしい・柔らかい、清潔・爽やか
• キーワード: トリコロール・水彩にじみ・円形切り抜き・縦書き欧文・フレーバー色分け・フランス産
• 地の質感: 白い地に水彩絵の具のにじみとフルーツ写真を重ね、紙に描いたような柔らかい質感にしている
• 形: 円・楕円・しずく型の有機的な形が中心。カードは角丸の長方形
• 温度感: 白と紺で涼しく清潔に見せつつ、苺・バニラ・キャラメルの暖色で甘さを足している

Colors

• 画面の左右端に青と赤の細い縦帯を全ページ通して入れ、国旗のようなフレームにする
• 地は白に統一し、色面は円形パネルと商品カードだけに絞る
• 見出しは紺文字にし、下線は左を青・右を赤に分ける
• 商品カードはフレーバーの色に合わせた淡い色で塗り分ける
• 水彩にじみは苺の赤・バニラの黄・キャラメルのオレンジで余白に配置する
• 企業紹介ブロックだけ明るい青のしずく型パネルを使う

Typography

• 見出しは明朝で字間を広くとり、上品に見せる
• 英字の装飾は太いディドー系セリフを縦書きにして左帯に沿わせる
• 本文はゴシックで中央揃えにし、行間を広めにとる
• 円形パネル内のコピーは白い太字ゴシックを中央に組む
• 淡色の大きな英字を背景透かしとして横一列に流す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、左右に約 12px の縦帯
• 本文ブロックの幅: 画面幅の約 78%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• 縦帯の内側で中央揃えにする
• セクション見出しは中央、縦書き英字は左帯に重ねる
• 商品カードはパッケージ画像をカード上端からはみ出させる
• 特長はリード線つきの注釈を左右に振り分けて配置する
• 余白を広くとり、水彩装飾を余白に浮かべる

Elevation & Depth

• 影はほぼ使わず平面的に見せる
• 商品写真は切り抜いて白地に浮かせる
• 奥行きは水彩と写真を重ねて出す

Shapes

• 角丸: 小 8px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 円形・クリームの形・しずく型で切り抜く。商品は切り抜き
• セクション境界: 直線の区切りは使わず、余白と水彩装飾でセクションをつなぐ
• 主ボタンは真円にする
• フレーバー名ラベルは左右がフェードするピル型にする
• 円形写真の外周に英字を円周状に配置する
• 店舗検索ボタンは細枠の角丸長方形にする

Components

• 左右縦帯フレーム（frame-tricolore）: 左に青、右に赤の細い帯を全高で固定し、右帯には縦書きの小さい英字を入れる
• 二色下線見出し（heading-dual-underline）: 明朝の見出しの下に、左は青・右は赤の太い短線を引く
• 縦書きセクション英字（vertical-label）: 太いセリフ英字を縦書きにし、左帯に重ねる
• 円形コピーパネル（circle-copy-panel）: 濃紺の円の中に白文字のリードと本文を中央揃えで入れ、写真に重ねる
• フレーバー商品カード（flavor-card）: 淡色の角丸カード。上にパッケージをはみ出させ、ピル型ラベル、紺の説明文、円形ボタンの順に並べる
• 円形 MORE ボタン（button-circle-more）: 青い真円に白い矢印を入れ、下に小さなセリフ英字を添える
• 店舗検索ボタン（button-outline-store）: 白地にグレーの細枠。アイコン、ラベル、外部リンク記号を並べる
• 円周テキスト装飾（circular-text-badge）: 黒のセリフ英字を円周状に並べ、写真や見出しの脇に置く
• リード線つき特長注釈（feature-callout）: 商品写真から小さな丸と細線を引き出し、紺の小見出しと箇条書きを添える

Do's and Don'ts

Do - 左右の青・赤の縦帯は全ページで途切れさせない - 見出しは明朝＋二色下線の型を揃える - 水彩の果物や花を余白の端に散らす - 写真は円形や有機的な形に切り抜く - フレーバーごとに淡い色を割り当てる

Don't - 濃い色の面を大きく広げない - 影の強いカードや立体的なボタンを使わない - ポップな丸ゴシックの見出しにしない - 原色の赤を地色として広く使わない - 四角い写真を枠いっぱいに並べるだけで終わらせない

Page Structure

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

1. ヘッダーナビ（セクション間を移動させる）: 小さな国旗アイコンと英字メニューを横に並べ、右端に SNS アイコンを置く
2. ファーストビュー（ブランドと商品の世界観を一目で伝える）: ロゴ、セリフ英字タイトル、明朝キャッチの下に、商品の切り抜きと円形に切り抜いた人物写真を並べ、周りを水彩で飾る
3. Web動画（動画で使用シーンを見せる）: 二色下線の見出し、縦書き英字、円周テキスト。16:9 の動画に円形の再生ボタンを重ねる
4. 商品コンセプト（商品の魅力を情緒的に伝える）: 円形に切り抜いた俯瞰の商品写真に、濃紺の円形コピーパネルを重ねる
5. 特長（食感と包装の利点を示す）: 背景に透かし英字を流し、商品写真から 2 つのリード線注釈を出す
6. 商品ラインナップ（フレーバーごとの紹介と購入導線）: フレーバー色のカードを縦に並べ、それぞれの下に円形 MORE ボタンと店舗検索ボタンを置く
7. SNS誘導（公式アカウントへ誘導する）: グラデーションのアイコン帯と商品写真を組み合わせた横長のバナーにする
8. 企業紹介（メーカーの信頼性を伝える）: 2 社のロゴを×で並べ、チーズの写真に明るい青のしずく型パネルと白文字を重ねる
9. 協業について（取り組みの背景を説明する）: 青と赤の線で挟んだ紺の見出しの下に、中央揃えの本文を置き、隅に苺の水彩を添える

Imagery

• 果物・花・キャラメルに水彩絵の具のにじみを合わせた素材を、画面の端で切れるように置く
• 商品は白背景で切り抜き、金色の包装の光沢を見せる
• 人物は目を閉じて味わう横顔を、柔らかい自然光で撮る
• 大理石や木の天板に商品を並べた俯瞰写真を円形に切り抜く
• チーズの盛り合わせはダークな背景で撮り、質感を見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも左右の縦帯と縦書き英字は残す
• PC の FV はキャッチと商品を左、人物の円形写真を右に置く横組みにする
• 商品コンセプトは円形写真と円形パネルを左右に並べる
• フレーバーカードは PC で 3 カラムにする
• 特長の注釈は PC で商品の左右に振り分ける
• 企業紹介の写真は 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 行書くと起動時に読み込まれる。