--- version: alpha name: French Tricolor Classic Confectionery LP description: フランス国旗のトリコロールリボンと、ダマスク柄の紺・金・赤の地を重ねたクラシックな菓子の商品紹介 LP。生成りの額縁カードに筆記体の欧文見出しと明朝の本文を入れ、上品で落ち着いたサロン風の雰囲気を出している。中盤は額縁付きのレシピカードを縦に並べ、日常的な使い方の幅を見せる構成。 colors: primary: '#142A82' secondary: '#BAA265' accent-1: '#BD0714' background: '#FAFAFC' surface: '#F7F6F2' text: '#3A1A14' cta: '#B50B15' on-cta: '#FEFDFC' accent-2: '#E50112' line: '#CDB68F' on-dark: '#FEF2EB' accent-3: '#C2101C' secondary-accessible: '#E1D6BB' accent-2-accessible: '#E20112' typography: display: fontFamily: Great Vibes fontSize: 48px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Shippori Mincho fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em headline-sm: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.1em headline-lg: fontFamily: Shippori Mincho fontSize: 24px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 500 lineHeight: 2.4 letterSpacing: 0.03em label-button: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 0px md: 0px lg: 24px full: 999px spacing: unit: 8px card: 24px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' frame-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 700px script-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 110px recipe-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 360px button-pill: backgroundColor: '{colors.on-cta}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 30px flavor-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' height: 28px ribbon-divider: height: 60px sns-tile: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 100px --- # DESIGN.md — 紺×金×赤の仏トリコロール洋菓子 LP（French Tricolor Classic Confectionery LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 菓子・スイーツ ／ **雰囲気**: 上品・高級、レトロ、やさしい・柔らかい - **キーワード**: トリコロール・ダマスク柄・額縁フレーム・筆記体・明朝・大理石 - **地の質感**: 薄い大理石風の地紋と、同色濃淡のダマスク・百合紋の繰り返し柄。紙のような生成りカード。 - **形**: 唐草飾りの付いた細線の額縁、波打つリボンのセクション境界、ピル型の白いボタン。 - **温度感**: 紺で締め、金で温める。赤はアクセントに使い、全体はやや暖かく格調がある。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#142A82` | ダマスク柄の紺の地・レシピ名の帯 | 13% | 画素の実測 | | `secondary` | `#BAA265` | 金のダマスク地・カード下段 | 11% | 画素の実測 | | `accent-1` | `#BD0714` | ラインナップの赤い地 | 11% | 画素の実測 | | `background` | `#FAFAFC` | 大理石風のページ地 | 20% | 画素の実測 | | `surface` | `#F7F6F2` | 額縁カード内の生成り | 10% | 画素の実測 | | `text` | `#3A1A14` | 本文・筆記体見出しのこげ茶 | 2% | 推定 | | `cta` | `#B50B15` | ボタン内の丸プラスアイコンの赤 | 0% | 画素の実測 | | `on-cta` | `#FEFDFC` | 白ピルボタンの地 | 1% | 画素の実測 | | `accent-2` | `#E50112` | ヘッダー・フッターの鮮やかな赤 | 2% | 画素の実測 | | `line` | `#CDB68F` | 額縁の金の細線 | 1% | 画素の主要色に補正 | | `on-dark` | `#FEF2EB` | 紺帯・赤地の上の白文字 | 1% | 画素の実測 | | `accent-3` | `#C2101C` | 見出しのリボン罫の赤 | 0% | 画素の主要色に補正 | | `secondary-accessible` | `#E1D6BB` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#E20112` | AA を満たす補正値（計算） | | 計算 | - セクションの地を紺→金→大理石の白→赤の順に切り替え、トリコロールのリズムを作る - 地の色には同じ色の濃淡でダマスク柄や百合紋を薄く敷く - 本文は必ず生成りの額縁カードの中に置き、こげ茶の文字で書く - サブ見出しの和文は赤と紺を二色に分け、両側に赤白紺の三本罫を付ける - ボタンは白いピル型にし、赤（または紺）の丸プラスアイコンを添える - レシピ名の帯は紺の地に白文字、その下段は金の地で揃える - `flavor-tag` は文字 `#BD0714` × 背景 `#BAA265` のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#E1D6BB`、4.54:1）を使う。 - `sns-tile` は文字 `#FEF2EB` × 背景 `#E50112` のコントラスト比が 4.4:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#E20112`、4.5:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション冒頭の欧文の筆記体見出し | 欧文スクリプト | Great Vibes | 400 | 48px | 1.2 | 0.0em | | `headline-md` | 三本罫で挟んだ和文のサブ見出し | 明朝 | Shippori Mincho | 700 | 18px | 1.4 | 0.12em | | `headline-sm` | 紺帯の中のレシピ名 | 明朝 | Shippori Mincho | 600 | 20px | 1.4 | 0.1em | | `headline-lg` | ラインナップの商品名 | 明朝 | Shippori Mincho | 500 | 24px | 1.5 | 0.05em | | `body-md` | カード内に中央揃えで置く本文 | 明朝 | Noto Serif JP | 500 | 14px | 2.4 | 0.03em | | `label-button` | ピルボタンの文字 | 明朝 | Noto Serif JP | 500 | 12px | 1.0 | 0.05em | | `note` | 注釈・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 見出しは欧文の筆記体を大きく置き、その下に和文の明朝を小さく添える 2 段構成にする - 本文は明朝で中央揃えにし、1 行を短く区切って行間を広く取る - ゴシック体はフッターや SNS まわりに限って使う - サブ見出しは一部の語を赤、残りを紺にして色を分ける - 筆記体見出しの両脇には唐草飾りや星のきらめきを添えてよい - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。レシピカードも 1 列で縦に並べる - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算） - 額縁カードは画面幅の約 86% で中央に置き、背景の柄を左右に見せる - カード同士の間は 32〜40px 空ける - レシピカードは写真・紺帯・金の下段の 3 層で組む - ラインナップは左に商品パッケージ、右に商品名・味の帯・ボタンを並べる - 商品と商品の間を金の唐草罫で区切る ## Elevation & Depth - 影はほとんど使わず、額縁の線で奥行きを出す - 切り抜いた商品パッケージにだけ柔らかい落ち影を付ける - ピルボタンは平面のまま ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は額縁内で角丸なしの長方形に切る。商品は背景を抜いて置く - **セクション境界**: 赤白紺のリボンが波打つ帯、またはゆるい波線で区切る - カードの角は直角にし、四隅に金の唐草飾りを置く - 額縁は外側に金、内側に紺の細い二重線を引く - 丸いのはボタンとアイコンだけにする ## Components - **額縁カード**（`frame-card`）: 生成りの地に金と紺の二重細線を引き、四隅に唐草飾りを付けた本文カード - **筆記体見出しとトリコロール罫**（`script-heading`）: 大きな欧文の筆記体の下に、赤白紺の三本罫で挟んだ和文のサブ見出しを置く - **レシピカード**（`recipe-card`）: 写真、紺帯のレシピ名、金のダマスク地にボタンという 3 段のカード。周りを額縁で囲む - **白ピルボタン**（`button-pill`）: 白いピル型のボタン。右端に赤い丸プラスアイコンを付ける - **味の帯ラベル**（`flavor-tag`）: 赤地の上に置く金の長方形ラベル。中に赤字で味の名前を入れる - **リボン区切り**（`ribbon-divider`）: 赤白紺のリボンが波打ちながら横切るセクション境界 - **SNS タイル**（`sns-tile`）: 各サービスの色を使った大きな角丸タイルを 2 列で並べる ## Do's and Don'ts **Do** - 紺・金・赤の地には必ず同色濃淡のダマスク柄を薄く敷く - 見出しは筆記体の欧文と明朝の和文を組み合わせる - 本文は額縁カードの中で中央揃えにする - トリコロールのリボンをファーストビューとセクション境界で繰り返す - 写真は白い器と明るい自然光で、カフェ風に撮る **Don't** - 本文や見出しに太いゴシック体を使わない - ネオン系の色や原色のグラデーションを持ち込まない - カードを大きな角丸にしたり、強い影を付けたりしない - 柄のない無地のベタ面を広く取らない - 赤を本文の文字色にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（企業ロゴとメニューを示す）: 赤い帯で下端を波形にし、右にメニューボタンを置く 2. **ファーストビュー**（商品の世界観と商品パッケージを見せる）: 大理石の地に、金の額縁で囲んだティータイムの写真を置く。上に商品ロゴとパッケージを重ね、トリコロールのリボンを巻き付ける 3. **商品について**（こだわりと食感を伝える）: 紺のダマスク地に額縁カードを置き、筆記体の見出し、明朝の本文、パッケージ画像を中央に並べる 4. **楽しみ方の提案**（日常のいろいろな場面で使えることを訴える）: 金のダマスク地に同じ形式の額縁カードを置き、商品の切り抜き写真と短い文を並べる 5. **アレンジレシピ**（商品を使ったスイーツ例を見せて回遊させる）: 大理石の地に、写真・紺帯・金の下段とボタンでできたレシピカードを 9 枚、縦に並べる 6. **商品ラインナップ**（シリーズ商品の詳細ページへ送る）: 赤の百合紋の地に、筆記体の見出しと商品を 2 点置く。左に画像、右に名前・味の帯・白ピルボタンを並べ、金の唐草罫で区切る 7. **SNS・関連リンク**（公式アカウントや通販へ送る）: 白地に各サービスの色の角丸タイルを 2 列で並べる 8. **フッター**（規約リンクと著作権を表示する）: キャラクターロゴの下に、上端が波形の赤帯を置き、白の小さな文字を入れる ## Imagery - 料理写真は白い器や銀のカトラリー、リネンを使い、明るい自然光で斜め上から撮る - 商品パッケージや菓子は背景を抜き、軽い落ち影を付ける - 装飾として赤白紺の立体的なリボンと、金の唐草・きらめき星を使う - 背景には淡い大理石のテクスチャと、ダマスク・百合紋の地紋を敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューを横長の額縁写真にし、リボンを左右に広げる - PC でも本文の額縁カードは幅約 45% で中央に置き、両脇に柄の地を広く見せる - PC のレシピカードは 3 列のグリッドにする - PC のラインナップは 2 商品を横に並べる - PC の SNS タイルは 1 行に 6 個並べる ## 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-4ce75824`（元 LP の URL から採番） - **元 LP**: https://www.oyatsu.co.jp/product/frenchrusk/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。