--- version: alpha name: Vivid Banana Yellow Seasonal Cafe Drink LP description: 鮮やかなバナナイエローを全面の地に使い、焦がしカラメル色の太いセリフ英字と濃い赤茶のピルボタンで締める季節限定ドリンクLP。商品写真は切り抜きで散らし、途中にキャラメルの波模様のグラデーション帯を挟む。後半のフード・豆・グッズは、上下が弓なりに湾曲した細線の枠で囲んだカタロググリッドにする。 colors: background: '#FED929' primary: '#7D191E' cta: '#7B1A22' on-cta: '#FFEEEE' text: '#4A2A1A' secondary: '#BF6818' background-alt: '#FFEEDA' accent-1: '#DB9730' accent-2: '#C37A11' surface: '#EACC95' line: '#7A3326' accent-3: '#016444' tint-1: '#FFE26C' typography: display: fontFamily: Playfair Display fontSize: 56px fontWeight: 900 lineHeight: 1.0 headline-lg: fontFamily: Playfair Display fontSize: 44px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.01em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Zen Kaku Gothic New fontSize: 12px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 16px section: 96px 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: 40px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px arched-title: textColor: '{colors.secondary}' typography: '{typography.display}' height: 80px circle-ingredient: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 200px product-card: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 320px bow-frame: textColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 900px customize-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 300px promo-banner: backgroundColor: '{colors.on-cta}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 130px --- # DESIGN.md — バナナ黄×焦がしブラウンのカフェ季節限定LP（Vivid Banana Yellow Seasonal Cafe Drink LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: ポップ・元気、力強い・インパクト、親しみ・手作り感 - **キーワード**: バナナイエロー・焦がしカラメル・アーチ英字・切り抜き写真・波模様のグラデーション・弓なりの枠線 - **地の質感**: 地は単色のフラットな黄色。中盤だけキャラメルが流れるような波形グラデーション。英字には焼き色の粗い質感を付ける - **形**: 円形の写真マスク、ピル型ボタン、上下が弓なりに膨らんだ細線の枠、波形の境界 - **温度感**: 暖色だけで組んだ甘く温かい印象 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FED929` | 全体の地色（バナナイエロー） | 60% | 画素の実測 | | `primary` | `#7D191E` | 見出し英字・ボタンの赤茶 | 3% | 画素の実測 | | `cta` | `#7B1A22` | 主CTAボタンの面 | 2% | 画素の実測 | | `on-cta` | `#FFEEEE` | ボタン上の白文字 | 0% | 画素の実測 | | `text` | `#4A2A1A` | 本文と商品名の濃茶 | 2% | 推定 | | `secondary` | `#BF6818` | 焦がし英字ロゴの茶色 | 4% | 画素の主要色に補正 | | `background-alt` | `#FFEEDA` | 中盤の淡いクリーム地 | 6% | 画素の実測 | | `accent-1` | `#DB9730` | キャラメル波帯のオレンジ | 8% | 画素の主要色に補正 | | `accent-2` | `#C37A11` | グラデーションの濃いキャラメル色 | 3% | 画素の実測 | | `surface` | `#EACC95` | カスタマイズ枠の半透明ベージュ | 3% | 画素の実測 | | `line` | `#7A3326` | 弓なりの枠線・アウトラインボタンの線 | 0% | 画素の主要色に補正 | | `accent-3` | `#016444` | サブバナーの緑ボタン | 0% | 画素の実測 | | `tint-1` | `#FFE26C` | 円形写真背後の淡い黄 | 3% | 画素の実測 | - 地はページのほぼ全体を単色のバナナイエローにする - 見出し英字・ボタン・本文は赤茶から濃茶の暖色だけで組み、黒は使わない - 主CTAは濃い赤茶の面に白文字。一覧へのリンクは透明地に細線のアウトラインにする - 中盤の別商品の帯だけは、クリームからキャラメルへの波形グラデーションに切り替える - 緑はサブバナー内のボタン1点だけに使う - 写真の背後には淡い黄の円を敷き、奥行きを出す ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 商品名の大きな英字（アーチ状に配置） | 欧文セリフ | Playfair Display | 900 | 56px | 1.0 | 0.0em | | `headline-lg` | セクション英字見出し | 欧文セリフ | Playfair Display | 900 | 44px | 1.0 | -0.01em | | `headline-md` | 日本語のリードコピー | ゴシック | Zen Kaku Gothic New | 900 | 22px | 1.4 | 0.02em | | `headline-sm` | 商品名と価格 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.02em | | `body-md` | 商品説明の本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.7 | 0.03em | | `note` | 注釈（※） | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | 写真に添える注記（素材名） | ゴシック | Zen Kaku Gothic New | 700 | 12px | 1.4 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 14px | 1.0 | 0.05em | - 英字見出しは極太のセリフ体にし、アーチ状や波状に曲げて配置する - 日本語は太めのゴシックで中央揃えにし、短く改行する - 価格は数字だけ大きくし、サイズ表記は小さく添える - 焦がし色の英字には、焼き色のような濃淡テクスチャを重ねる - 本文は濃茶で小さめに組み、行間を広めにとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品グリッドは 2 カラム（PC はグッズを 3 カラム） - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 96px、基本単位 8px、カード内 16px（375px 幅換算） - 写真と注記を左右交互に配置し、ジグザグに視線を誘導する - 商品カードは写真・名前・価格・説明・ボタンを縦に積み、中央揃えにする - カテゴリごとに、上下が弓なりの細線枠で囲む - 枠の上端に英字見出しを重ねる - セクション間は余白を大きく取る ## Elevation & Depth - 基本はフラットで、影を付けない - サブバナーだけ白カードにオフセットのベタ影を付ける - 切り抜き写真には、ごく薄い接地影を付ける ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景なしの切り抜き。成分のアップは円形マスクにする - **セクション境界**: キャラメルが流れるような波形カーブ。カタログ部は弓なりの細線枠で区切る - ボタンはすべてピル型にする - 四角いカードは使わず、枠は曲線の線で表す - 円形の写真には太い縁取りの弧を添える ## Components - **商品詳細ボタン**（`button-primary`）: 赤茶の面に白太字を載せたピル型ボタン - **一覧リンクボタン**（`button-outline`）: 透明地に茶の細線と茶文字のピル型ボタン - **アーチ英字見出し**（`arched-title`）: 極太セリフ英字を弧状に並べ、焦がし色で表示する - **円形の成分写真**（`circle-ingredient`）: 円形マスクの写真に、矢印の曲線と素材の注記を添える - **商品カード**（`product-card`）: 切り抜き写真・商品名・価格・説明・ボタンを縦に並べる。右肩に丸いバッジを付ける - **弓なり枠**（`bow-frame`）: 上下が膨らんだ細線の枠でカテゴリを囲み、上端に英字見出しを重ねる - **カスタマイズ案内パネル**（`customize-panel`）: 半透明ベージュの面に番号付きの手順を2列で並べ、写真を＋でつなぐ - **白いサブバナー**（`promo-banner`）: 白カードに細い黄色の内枠とベタ影を付け、緑のボタンとイラストを置く ## Do's and Don'ts **Do** - 地は鮮やかな黄色を広く使う - 英字見出しを大きく曲げて置き、写真と絡める - 商品写真は切り抜きにして余白に散らす - ボタンは赤茶のピル型で統一する - 素材の説明は、手描き風の矢印と短い注記で示す **Don't** - 黒や寒色を主要色にしない - 角張った四角いカードを並べない - 写真を四角い枠に収めない - 長文の段落を入れない - ボタンの色を何色も混在させない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（新作ドリンクの存在感を伝える）: 中央にドリンクの切り抜き。上下にアーチ英字を置き、素材写真を周囲に散らす 2. **リードコピー**（味の魅力を一言で伝える）: 太ゴシックの2行コピーに、短い説明を3行添える 3. **素材紹介**（味の層を視覚的に説明する）: 円形のアップ写真を左右交互に置き、矢印と注記を添える 4. **取り組み紹介**（素材のストーリーを伝える）: 英字見出しと線画の円の中に短文と小ボタンを置く 5. **商品情報**（価格と詳細へ誘導する）: 左に写真、右に名前・価格・タグ・CTAを置き、下に注釈を添える 6. **別商品の紹介**（関連ドリンクを訴求する）: キャラメルの波形グラデーション帯に、英字見出しとドリンク写真、白ボタンを置く 7. **カスタマイズ提案**（アレンジでの注文を促す）: ベージュのパネルに番号付きの2例と注文ボタンを置く 8. **注文導線バナー**（アプリ注文へ誘導する）: 白カードにイラストと緑のボタンを置く 9. **フード一覧**（関連フードを紹介する）: 弓なり枠の中に2カラムの商品カードを並べる 10. **コーヒー豆一覧**（豆商品を紹介する）: 弓なり枠の中にパッケージ写真を2カラムで並べる 11. **グッズ一覧**（季節のグッズを紹介する）: 弓なり枠の中に3列のカードを並べ、一覧ボタンを置く ## Imagery - 商品は白背景で撮って切り抜き、柔らかい接地影を付ける - バナナの輪切りや焦がし面など、素材を単体で切り抜いて散らす - アップ写真は円形にトリミングし、キャラメルソースのツヤを強調する - 手描き風の細い曲線矢印で、写真と注記をつなぐ - 注文の流れなどの補助図は、シンプルなフラットイラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約480px幅のSP的な縦組みで、左右には地色の黄を広げる - SP では商品カードを2カラムのまま縮小し、グッズは2カラムに折り返す - 英字見出しは画面幅の約80%に収める - ジグザグに配置した写真は、SP では写真を約60%幅にして重なりを減らす ## 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-62c1931f`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/bananabrulee/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。