--- version: alpha name: Summer Sky Blue Refresh Beverage LP description: 空色の地に赤い果実と紙パック商品を大きく置いた、夏向けの期間限定飲料LP。手書き風コピー、ドット柄、手描き枠の付箋カードで軽さと親しみを出す。白帯のセクションと紺の太字見出し、赤のピル型CTAで締める短い構成。 colors: background: '#A5DBF7' background-alt: '#FEFEFD' primary: '#E40213' cta: '#E40213' on-cta: '#FFEFEF' text: '#17014E' secondary: '#013995' tint-1: '#FFF9B1' tint-2: '#F9C49B' line: '#1E6EC8' marker: '#F5D63A' accent-1: '#E3502E' accent-2: '#FFFFFF' cta-accessible: '#DF0213' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 28px fontWeight: 800 lineHeight: 1.5 letterSpacing: 0.04em headline-md: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em headline-sm: fontFamily: Montserrat fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.02em accent: fontFamily: Yomogi fontSize: 26px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.04em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 32px section: 60px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px badge-limited: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 72px badge-ingredient: backgroundColor: '{colors.secondary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 64px card-sticky: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' height: 340px heading-underline: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px text-marker: backgroundColor: '{colors.marker}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 14px photo-tilted: typography: '{typography.accent}' height: 240px video-embed: backgroundColor: '{colors.background-alt}' height: 310px --- # DESIGN.md — 水色×トマト赤の爽やか飲料キャンペーンLP（Summer Sky Blue Refresh Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 清潔・爽やか、ポップ・元気、親しみ・手作り感 - **キーワード**: 空色・トマト赤・手書きコピー・付箋カード・ドット柄・期間限定 - **地の質感**: 水色の地に白いドットや細かい粒の質感を重ね、手描きの線と付箋の紙感を足す - **形**: 円形バッジ、少し傾けた写真、手描き風の二重線枠、ピル型ボタン - **温度感**: 涼しげな寒色の地に暖色の果実と赤を差した、夏らしいコントラスト ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#A5DBF7` | メインの空色の地 | 45% | 画素の主要色に補正 | | `background-alt` | `#FEFEFD` | 白帯セクションの地 | 18% | 画素の実測 | | `primary` | `#E40213` | ブランドを代表するトマト赤 | 7% | 画素の実測 | | `cta` | `#E40213` | 主CTAボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FFEFEF` | CTA上の文字とアイコン | 0% | 画素の実測 | | `text` | `#17014E` | 見出しの濃紺文字 | 3% | 画素の実測 | | `secondary` | `#013995` | 成分バッジや本文の紺 | 2% | 画素の実測 | | `tint-1` | `#FFF9B1` | 付箋カード（淡黄） | 6% | 画素の実測 | | `tint-2` | `#F9C49B` | 付箋カード（淡オレンジ） | 5% | 画素の実測 | | `line` | `#1E6EC8` | 手描き枠の青線 | 1% | 推定 | | `marker` | `#F5D63A` | キーワードの黄色マーカー | 0% | 推定 | | `accent-1` | `#E3502E` | 見出し下の朱色アンダーライン | 0% | 画素の実測 | | `accent-2` | `#FFFFFF` | ドット柄・手書き文字の白 | 3% | 画素の主要色に補正 | | `cta-accessible` | `#DF0213` | AA を満たす補正値（計算） | | 計算 | - 地は空色を基本にし、区切りのセクションだけ白帯にする - 赤は主CTAと強い訴求文字（白フチ付き）だけに使う - 見出し・本文は濃紺で書き、黒は使わない - 付箋カードは淡黄と淡オレンジの2色を交互に使う - キーワードには黄または水色のマーカーを文字下半分に引く - 見出し下に朱色の手描き風アンダーラインを添える - `button-primary` は文字 `#FFEFEF` × 背景 `#E40213` のコントラスト比が 4.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#DF0213`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの訴求コピー（赤文字・白フチ） | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.2 | 0.02em | | `headline-lg` | 白帯のセクション見出し | ゴシック | Noto Sans JP | 800 | 28px | 1.5 | 0.04em | | `headline-md` | 付箋カード内の大きめ説明文 | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.7 | 0.04em | | `headline-sm` | 英字・短い見出し（MOVIE等） | 欧文サンセリフ | Montserrat | 800 | 26px | 1.3 | 0.02em | | `accent` | 写真脇や商品脇の手書きコピー | 手書き・筆 | Yomogi | 400 | 26px | 1.4 | 0.05em | | `body-md` | 商品名・容量などの情報 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.0em | | `note` | 成分の注釈 | ゴシック | Noto Sans JP | 500 | 9px | 1.5 | 0.0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 17px | 1.2 | 0.04em | - 本文はすべて中央揃えで短く改行する - カード内の文は1行8〜12字で改行し、6行前後に収める - 手書き書体は写真やパッケージ横の添え文だけに使い、少し傾ける - 見出しの一部の語だけを太字・下線で強調する - FV訴求コピーは赤文字に白フチと薄い影で浮かせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム、中央揃え - **本文ブロックの幅**: 画面幅の約 85% - **余白**: セクション間 60px、基本単位 8px、カード内 32px（375px 幅換算） - FVは背景いっぱいに果実・商品・バッジを散らして配置 - 白帯の見出しセクションは上下約50pxの余白 - 付箋カードは画面幅の約75%で左右に少しずらして重ねる - 写真は傾けて白フチを付け、手書きコピーを重ねる - 動画は画面幅の約90%で16:9 - CTAは商品画像の直下に中央配置 ## Elevation & Depth - パッケージ画像に柔らかい落ち影 - 傾けた写真に白フチと薄い影 - 付箋カードに少しずらした手描き風の二重線枠 - FVコピーに白フチと影 ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品と果実は切り抜き、イメージ写真は白フチの四角で傾ける - **セクション境界**: 直線で空色と白帯を切り替える - 成分バッジは円形で紺地・白地を交互にする - 期間限定バッジは黄〜橙の円形 - カードの角は丸めず、手描き線の枠で囲む - CTAは完全なピル型で左に白丸の再生アイコン ## Components - **赤ピルCTA**（`button-primary`）: 赤地に白文字、左端に白丸と赤三角のアイコン - **期間限定バッジ**（`badge-limited`）: 黄〜橙グラデーションの円に紺の2行文字 - **成分丸バッジ**（`badge-ingredient`）: 紺地白文字と白地赤文字の円を3つ並べる - **付箋カード**（`card-sticky`）: 淡黄または淡オレンジの面を青い手描き二重線で囲み、中央揃えの紺文字 - **下線付き見出し**（`heading-underline`）: 紺の太字見出しの下に朱色の筆風カーブライン、左右に白い放射ダッシュ - **マーカー強調**（`text-marker`）: キーワードの下半分に黄か水色の帯 - **傾き写真**（`photo-tilted`）: 白フチ付き写真を数度傾け、白の手書きコピーを角に重ねる - **動画埋め込み**（`video-embed`）: 白地セクション内に16:9の動画 ## Do's and Don'ts **Do** - 地は空色にし、赤はCTAと強い訴求だけに絞る - 手書きコピーとドット柄で軽さを出す - 付箋カードは2色で少しずらして重ねる - 見出しには朱色の手描き下線を必ず付ける - 商品パッケージは切り抜いて大きく見せる **Don't** - 黒文字や濃いグレーの地を使わない - 角丸の大きいカードやグラデーションボタンで印象を変えない - 赤を広い背景に使わない - 長文の段落を詰め込まない - カードを等間隔の整列グリッドにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と季節の訴求を一目で伝える）: 空色の地にロゴ、手書き風英字、果実の切り抜き、成分丸バッジ3つ、商品パッケージ、赤の訴求コピーを配置 2. **導入見出し**（限定感を示して本文へつなぐ）: 白帯に紺の太字2行見出し、一部の語に朱色下線 3. **特長**（味わいの特徴と飲むシーンを伝える）: ドット柄の空色地に淡黄と淡オレンジの付箋カードを2枚ずらして重ね、マーカーで強調 4. **イメージ写真**（飲み心地を感覚的に見せる）: グラスに注ぐ写真を白フチで傾け、白い手書きコピーを添える 5. **動画**（CMで世界観を補強する）: 白地に英字見出しと朱色下線、16:9の動画 6. **商品情報・CTA**（商品詳細ページへ送る）: 空色地に下線見出し、パッケージ大写し、商品名と容量、赤ピルCTA、下端に液体のしぶき写真 ## Imagery - 果実は水滴付きのみずみずしい切り抜きで、明るい自然光 - 液体のしぶきを大きく切り抜き、ページ下部を飾る - イメージ写真はグラスに注ぐ瞬間の暖色アップ - 地に白い丸ドットのグラデーション柄やキラキラの白ダッシュを散らす - 手書き文字は白または紺で、軽い筆ペン風 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央約900px幅に収め、両側に空色の地を広げる - PCのFVは果実・ロゴ・商品を横3列に並べる - PCでは付箋カード2枚を横並びにし、写真をその下に配置 - PCの導入見出しは1行にまとめる - PCの商品情報は左にパッケージ、右に商品名とCTAの2カラム ## 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-ec3a1d74`（元 LP の URL から採番） - **元 LP**: https://www.kagome.co.jp/products/brand/tomatojuice/refresh/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。