--- version: alpha name: Tomato Red Polka Dot Celebrity Beverage LP description: 真っ赤な水玉地と生成りのカードを交互に重ねた、明るくかわいい飲料ブランドのタレント起用 LP。手書き風の英字、白フチの赤い太字見出し、赤い点線枠のカード、平塗りのトマトイラストで親しみやすさを出す。 colors: primary: '#F3111E' accent-1: '#F3111F' background: '#FFFEEC' background-alt: '#FFD6C2' secondary: '#F44A41' text: '#412121' accent-2: '#C9222D' surface: '#FFFFFC' dark-section: '#DE3427' on-dark: '#FEFBF1' text-muted: '#6B4A44' line: '#D8261D' dark-section-accessible: '#DC2F22' typography: display: fontFamily: Yomogi fontSize: 44px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 32px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.06em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 28px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.12em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 2.4 letterSpacing: 0.06em accent: fontFamily: Caveat Brush fontSize: 30px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 6px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 90px video-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 280px profile-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 95px tab-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 1400px highlight-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 500px dotted-underline: textColor: '{colors.accent-2}' typography: '{typography.body-md}' height: 30px photo-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 185px lineup-banner: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 120px --- # DESIGN.md — トマト赤×水玉の野菜飲料タレント LP（Tomato Red Polka Dot Celebrity Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: トマトレッド・水玉・生成りカード・点線枠・手書き英字・タレント写真 - **地の質感**: 赤地に少し濃い赤の水玉を規則的に敷く。カードは生成りの平塗りで、影はほぼ付けない - **形**: 角丸カード、赤の点線の内枠、上辺が半円に盛り上がるタブ型カード、波形のセクション境界 - **温度感**: 暖色。赤と生成り、桃色系でまとめる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#F3111E` | 水玉セクションの赤地 | 22% | 画素の実測 | | `accent-1` | `#F3111F` | 水玉のドット・濃い赤 | 7% | 画素の実測 | | `background` | `#FFFEEC` | 生成りのカード地・最下部の地 | 37% | 画素の実測 | | `background-alt` | `#FFD6C2` | キャスト紹介の桃色地 | 12% | 画素の実測 | | `secondary` | `#F44A41` | 見出し文字・点線・枠線の赤 | 3% | 画素の実測 | | `text` | `#412121` | 本文・見出しの焦げ茶 | 3% | 画素の実測 | | `accent-2` | `#C9222D` | 強調語の赤文字 | 1% | 画素の実測 | | `surface` | `#FFFFFC` | カード白フチ | 2% | 画素の主要色に補正 | | `dark-section` | `#DE3427` | 数値訴求ボックスの赤 | 3% | 画素の実測 | | `on-dark` | `#FEFBF1` | 赤ボックス上の白文字 | 1% | 画素の実測 | | `text-muted` | `#6B4A44` | 注釈の文字 | 1% | 推定 | | `line` | `#D8261D` | バナーカードの細い枠線 | 1% | 画素の主要色に補正 | | `dark-section-accessible` | `#DC2F22` | AA を満たす補正値（計算） | | 計算 | - 地は赤の水玉、桃色、生成りの 3 段で切り替える - 赤地の上には必ず生成りのカードを重ね、本文は焦げ茶で組む - 本文中の強調語は赤文字にし、赤の点線の下線を付ける - 見出しは赤文字に白い太フチを付け、赤地でも桃色地でも読めるようにする - 数値訴求だけは赤い面に白文字を置いて目立たせる - 黒は使わない。文字色は焦げ茶で統一する - `highlight-box` は文字 `#FEFBF1` × 背景 `#DE3427` のコントラスト比が 4.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `dark-section-accessible`（`#DC2F22`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の手書きキャッチ | 手書き・筆 | Yomogi | 400 | 44px | 1.2 | 0.02em | | `headline-lg` | 白フチ付きの赤い太字セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 32px | 1.3 | 0.06em | | `headline-md` | カード内の大見出し（細めで字間広め） | ゴシック | Zen Kaku Gothic New | 500 | 28px | 1.6 | 0.12em | | `headline-sm` | プロフィール項目名・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.04em | | `body-md` | 中央揃えの本文 | ゴシック | Noto Sans JP | 500 | 14px | 2.4 | 0.06em | | `accent` | 見出し上の手書き英字ラベル | 欧文スクリプト | Caveat Brush | 400 | 30px | 1.1 | 0.02em | | `note` | 出典・注釈 | ゴシック | Noto Sans JP | 400 | 11px | 1.7 | 0.02em | | `label-button` | バナーリンク・ボタン文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.08em | - 本文は中央揃えで短く改行し、行間を 2 倍以上とってゆったり見せる - セクション見出しは赤い太字に白フチと薄い影を付ける - 見出しの左上に白い手書き英字を斜めに重ねる - 数値は大きくし、単位は小さくする - 細い明朝体は使わない - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。プロフィールは 2 カラムの小カード - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面幅いっぱいに近く配置し、左右の余白は約 10px - プロフィール項目は 2 列のグリッドに並べ、長文だけ 1 列で全幅にする - 大カードは赤地と桃色地の境目をまたいで置く - 縦の余白を多めにとり、本文の段落間は約 24px ## Elevation & Depth - 影はほぼ使わない。白フチと点線で浮いて見せる - バナーカードにだけ薄いドロップシャドウ（0 2px 6px 程度）を付ける - 見出し文字に白フチと薄い赤の影を付ける ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。人物写真は白フチ付きのカードに収める - **セクション境界**: FV の下は水玉地へ直線で切り替える。動画セクションの下端は中央が凹んだ大きな波形。生成りの大カードは上辺の中央を半円のタブ状に盛り上げる - カードの内側に赤の点線の枠を引く - 吹き出しラベルはピル型にし、下に小さな三角を付ける - 強調語の下線は点線にする ## Components - **白フチ赤見出し＋手書き英字**（`section-heading`）: 赤い太字の見出しに白い太フチを付け、左上に白い手書き英字を斜めに重ねる - **動画カード**（`video-card`）: 赤枠と白フチの生成りカードの中に、小さなタイトルと角丸の動画サムネイルを置く。中央に白丸の再生アイコン - **点線枠プロフィールカード**（`profile-card`）: 生成り地に白フチと赤の点線の内枠を付ける。左上に赤い項目名、中央に値を置く。角に平塗りのトマトを重ねる - **半円タブ付き大カード**（`tab-card`）: 上辺の中央が半円に盛り上がる生成りカード。タブ内に赤い小ラベルと 3 つのドットを置き、その下に大見出しを続ける - **赤い数値訴求ボックス**（`highlight-box`）: 赤地に白い点線の枠を付け、上辺にピル型の吹き出しラベルを重ねる。白い太字で数値を見せ、下に商品写真がはみ出す - **点線下線の強調語**（`dotted-underline`）: 本文中のキーワードを赤文字にし、赤の点線の下線を付ける - **写真付きリンクバナー**（`photo-banner`）: 上に写真、下に白帯の文字。赤い細枠で角丸にする - **商品ラインナップバナー**（`lineup-banner`）: 白地のカードで、左に 2 行の太字テキストと矢印、右に商品ボトルを並べる。薄い影を付ける ## Do's and Don'ts **Do** - 赤の水玉地と生成りカードの重なりで画面にリズムを作る - 平塗りのトマトイラストをカードの角に散らす - 見出しは白フチの赤い太字で統一する - 本文は中央揃えにし、行間をたっぷりとる - 点線をカード枠と下線の両方に使う **Don't** - 黒や寒色を使わない - 角張った無装飾の四角いカードにしない - 本文を左揃えでぎっしり詰めない - 濃い影やグラデーションのボタンを多用しない - 赤地の上に直接長い本文を置かない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（タレントと商品で一目で印象づける）: 赤背景に大きなトマトとグラスを持つ人物写真を置く。白い手書きキャッチを重ね、左下に商品と成分の丸バッジを配置する 2. **限定動画**（CM 動画へ誘導する）: 水玉の赤地に手書き英字と再生アイコンを付けた見出しを置く。その下に動画カードを配置し、下端を波形で桃色地に切り替える 3. **キャスト紹介**（タレントに親しみを持ってもらう）: 桃色地。写真と点線枠カードを 2 列のグリッドに並べ、最後にメッセージを全幅のカードで載せる。トマトイラストを散らす 4. **成分の説明**（成分の価値を伝える）: 半円タブ付きの大カードを桃色地から赤い水玉地にまたがせる。大見出しの下に中央揃えの本文を置き、強調語には点線の下線を付ける 5. **数値訴求**（含有量を具体的に示す）: 赤いボックスに吹き出しラベルと白い太字の数値を置く。商品パックの写真を下にはみ出させ、その下に注釈を続ける 6. **ブランドのこだわり**（原料と技術への信頼を高める）: 生成り地に、放射線の飾りを付けた赤い太字見出しを置く。短い本文の後に写真付きリンクバナーを配置する 7. **商品ラインナップ導線**（関連商品ページへ送る）: 左に文字、右に商品ボトルを並べた白いバナーカードを 1 枚置く ## Imagery - 人物は明るい自然光で撮り、白い服で笑顔。赤背景に溶け込ませる - トマトは水滴の付いたつややかな寄りのカットで、真っ赤に撮る - 装飾のトマトは輪郭線のない平塗りで、緑のヘタを付けて少し歪ませる - 畑の写真は青空と赤い実を、彩度高めで撮る - 商品パッケージは切り抜いて、カードからはみ出すように配置する - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を横長にし、人物を中央、キャッチを左、商品を右に置く - PC はカードの幅を約 65% に絞って中央に置き、左右には水玉地を見せる - PC のプロフィールは写真と項目のグリッドを横に組み直し、コンパクトにまとめる - PC は本文の改行を減らし、1 行を長くする - PC のバナーは幅約 45% で中央に置く ## 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-d7f6fcd6`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/products/brand/tomatojuice/tomaju/ - **解析に使った画像**: 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/）からご連絡ください。