--- version: alpha name: French Tricolore Watercolor Dessert LP description: 白地の左右を青と赤の縦帯で挟み、フランス国旗を連想させるフレームにした LP。フルーツや花の水彩にじみを余白に散らし、円形の写真切り抜き、円形の文字ロゴ、縦書きの欧文セリフ見出しで上品なスイーツ感を出している。商品カードはフレーバーごとに淡い色で塗り分けている。 colors: background: '#FFFFFF' primary: '#012495' secondary: '#ED2839' cta: '#24539D' on-cta: '#FFFFFF' text: '#002496' text-body: '#333333' tint-1: '#FBD7DB' tint-2: '#FCECCB' background-alt: '#F4CDAE' accent-1: '#1493CC' accent-2: '#B12237' line: '#888888' typography: display: fontFamily: Playfair Display fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: 0.02em headline-lg: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.2em headline-md: fontFamily: Noto Serif JP fontSize: 24px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.3em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Playfair Display fontSize: 10px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.02em rounded: sm: 8px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 100px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' frame-tricolore: backgroundColor: '{colors.primary}' typography: '{typography.accent}' heading-dual-underline: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 50px vertical-label: textColor: '{colors.primary}' typography: '{typography.display}' height: 260px circle-copy-panel: backgroundColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 320px flavor-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 380px button-circle-more: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 68px button-outline-store: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 38px circular-text-badge: textColor: '{colors.text-body}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px feature-callout: textColor: '{colors.text}' typography: '{typography.body-md}' height: 120px --- # DESIGN.md — 青白赤トリコロールと水彩のチーズスイーツ LP（French Tricolore Watercolor Dessert LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、やさしい・柔らかい、清潔・爽やか - **キーワード**: トリコロール・水彩にじみ・円形切り抜き・縦書き欧文・フレーバー色分け・フランス産 - **地の質感**: 白い地に水彩絵の具のにじみとフルーツ写真を重ね、紙に描いたような柔らかい質感にしている - **形**: 円・楕円・しずく型の有機的な形が中心。カードは角丸の長方形 - **温度感**: 白と紺で涼しく清潔に見せつつ、苺・バニラ・キャラメルの暖色で甘さを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FFFFFF` | ページの地色 | 44% | 画素の実測 | | `primary` | `#012495` | 左側の青帯・見出し・円形コピー面 | 10% | 画素の実測 | | `secondary` | `#ED2839` | 右側の赤帯・見出し下線の赤 | 4% | 画素の実測 | | `cta` | `#24539D` | 矢印付き円形 MORE ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | 円形ボタン上の矢印 | 0% | 画素の主要色に補正 | | `text` | `#002496` | 見出し・商品説明の紺文字 | 1% | 画素の主要色に補正 | | `text-body` | `#333333` | 本文・箇条書き | 2% | 推定 | | `tint-1` | `#FBD7DB` | 苺フレーバーカードの地 | 3% | 画素の実測 | | `tint-2` | `#FCECCB` | バニラフレーバーカードの地 | 3% | 画素の実測 | | `background-alt` | `#F4CDAE` | キャラメルフレーバーカードの地 | 3% | 画素の実測 | | `accent-1` | `#1493CC` | 協業紹介のしずく型パネル | 4% | 画素の実測 | | `accent-2` | `#B12237` | フレーバー名ラベルの文字 | 0% | 画素の主要色に補正 | | `line` | `#888888` | 店舗検索ボタンの枠線 | 0% | 推定 | - 画面の左右端に青と赤の細い縦帯を全ページ通して入れ、国旗のようなフレームにする - 地は白に統一し、色面は円形パネルと商品カードだけに絞る - 見出しは紺文字にし、下線は左を青・右を赤に分ける - 商品カードはフレーバーの色に合わせた淡い色で塗り分ける - 水彩にじみは苺の赤・バニラの黄・キャラメルのオレンジで余白に配置する - 企業紹介ブロックだけ明るい青のしずく型パネルを使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 縦書きのセクション英字・ロゴ下の英字タイトル | 欧文セリフ | Playfair Display | 900 | 44px | 1.0 | 0.02em | | `headline-lg` | FV のキャッチ（明朝・字間広め） | 明朝 | Shippori Mincho | 500 | 22px | 1.7 | 0.2em | | `headline-md` | セクション見出し（二色下線付き） | 明朝 | Noto Serif JP | 800 | 24px | 1.3 | 0.3em | | `headline-sm` | 特長の小見出し・商品キャッチ | ゴシック | Noto Sans JP | 700 | 16px | 1.6 | 0.03em | | `body-md` | 本文・箇条書き | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.03em | | `accent` | 円形に配置する装飾英字・MORE ラベル | 欧文セリフ | Playfair Display | 700 | 10px | 1.2 | 0.1em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `label-button` | 店舗検索・SNS ボタン | ゴシック | Noto Sans JP | 700 | 11px | 1.3 | 0.02em | - 見出しは明朝で字間を広くとり、上品に見せる - 英字の装飾は太いディドー系セリフを縦書きにして左帯に沿わせる - 本文はゴシックで中央揃えにし、行間を広めにとる - 円形パネル内のコピーは白い太字ゴシックを中央に組む - 淡色の大きな英字を背景透かしとして横一列に流す - 書体は画像からの推定で、フォント名は近い印象の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-0863ae73`（元 LP の URL から採番） - **元 LP**: https://www.meiji.co.jp/products/brand/meiji-savencia/stmoret/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。