--- version: alpha name: Seasonal Fruit Plaster Texture Beverage LP description: 生成りの漆喰風テクスチャを地に、葡萄色とラベンダーで季節感を出したカフェ系ドリンクの縦長 LP。明朝の詩的なコピー、筆記体風の大見出し、丸い写真の切り抜きと浮遊する果実写真で、上品でしっとりした雰囲気を作る。 colors: background: '#F6F1EB' background-alt: '#EBE1D7' primary: '#7C0324' secondary: '#3D1833' tint-1: '#D6C3E0' tint-2: '#E2B1BC' accent-1: '#EEE1ED' text: '#221F1D' cta: '#FEFEFE' on-cta: '#060405' on-dark: '#FCF9F2' line: '#3A3436' typography: display: fontFamily: Shippori Mincho fontSize: 110px fontWeight: 300 lineHeight: 1.0 headline-lg: fontFamily: Klee One fontSize: 40px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.02em headline-md: fontFamily: Noto Serif JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em body-lg: fontFamily: Noto Serif JP fontSize: 17px fontWeight: 400 lineHeight: 2.6 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 17px fontWeight: 600 lineHeight: 1.3 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 24px 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: 52px button-outline: textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px link-underline: textColor: '{colors.text}' height: 24px heading-brush-band: backgroundColor: '{colors.tint-1}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 120px circle-photo: backgroundColor: '{colors.tint-2}' rounded: '{rounded.full}' height: 360px product-card-gradient: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 920px badge-note: textColor: '{colors.on-dark}' rounded: '{rounded.sm}' height: 18px price-block: textColor: '{colors.text}' typography: '{typography.headline-md}' height: 90px --- # DESIGN.md — 漆喰質感×葡萄色の季節ドリンク LP（Seasonal Fruit Plaster Texture Beverage LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 上品・高級、やさしい・柔らかい、ナチュラル - **キーワード**: 漆喰テクスチャ・葡萄色・ラベンダー・明朝の詩的コピー・浮遊する果実・円形切り抜き - **地の質感**: ひび割れのある白い漆喰壁のような地。写真は水滴や氷のつやを強調したシズル感。 - **形**: 円形の写真マスク、角丸カード、ピル型ボタン。直線的な区切りは使わない。 - **温度感**: やや暖かい生成り地に、冷たい紫〜ワインレッドの差し色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F1EB` | 漆喰風の生成り地 | 55% | 画素の実測 | | `background-alt` | `#EBE1D7` | PC 両サイドのベージュ地 | 10% | 画素の実測 | | `primary` | `#7C0324` | 葡萄色・カード下部のワインレッド | 7% | 画素の実測 | | `secondary` | `#3D1833` | 大見出しの葡萄紫文字 | 1% | 画素の実測 | | `tint-1` | `#D6C3E0` | 見出し下のラベンダー帯 | 1% | 推定 | | `tint-2` | `#E2B1BC` | 円形写真背後のピンク紫 | 4% | 画素の実測 | | `accent-1` | `#EEE1ED` | カード上部のライラック地 | 4% | 画素の実測 | | `text` | `#221F1D` | 見出し・本文の濃い墨色 | 2% | 画素の実測 | | `cta` | `#FEFEFE` | 白いピル型ボタン | 2% | 画素の実測 | | `on-cta` | `#060405` | ボタン文字 | 0% | 画素の実測 | | `on-dark` | `#FCF9F2` | ワイン地上の白文字 | 0% | 画素の主要色に補正 | | `line` | `#3A3436` | 枠線ボタン・下線リンクの線 | 0% | 推定 | - 地は漆喰テクスチャの生成り一色で通す。 - 見出し文字は葡萄紫、本文は墨色にする。 - 季節の差し色はラベンダー〜ワインレッドのグラデーションで、商品カードだけに使う。 - 濃色カードの上では文字を白にし、ボタンは白地に黒文字にする。 - 原色の赤や青は使わない。ロゴの緑は写真内だけにする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦置き大漢字 | 明朝 | Shippori Mincho | 300 | 110px | 1.0 | 0.0em | | `headline-lg` | 筆記体風の大見出し（2 行） | 手書き・筆 | Klee One | 400 | 40px | 1.3 | 0.02em | | `headline-md` | 商品名 | 明朝 | Noto Serif JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | 特長の小見出し（素材×素材） | 明朝 | Noto Serif JP | 700 | 17px | 1.6 | 0.02em | | `body-lg` | 中央揃えの導入コピー | 明朝 | Noto Serif JP | 400 | 17px | 2.6 | 0.05em | | `body-md` | 説明本文 | 明朝 | Noto Serif JP | 400 | 14px | 1.75 | 0.02em | | `accent` | サイズと価格表記 | 欧文サンセリフ | Montserrat | 600 | 17px | 1.3 | 0.0em | | `label-button` | ボタン・リンク文字 | ゴシック | Noto Sans JP | 500 | 15px | 1.4 | 0.05em | - 本文と見出しは明朝体で統一し、しっとりした印象にする。 - 大見出しは手書き風の斜体にして、背後に斜めのラベンダー帯を敷く。 - 導入コピーは中央揃えで、行間を 2.5 前後と広くとる。 - 価格は欧文サンセリフで太めに書く。 - ボタンだけはゴシック体にして可読性を確保する。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真とテキストを左右に互い違いでずらして置く - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 96px、基本単位 8px、カード内 24px（375px 幅換算） - テキストブロックは左寄せと右寄せを交互に置き、写真と重ねる。 - 果実写真は画面端からはみ出させて浮遊感を出す。 - 商品カードは左右に約 8% の余白をとった角丸ブロックにする。 - ボタンは幅 80% で中央に置く。 - PC も SP 幅の縦長カラムを中央に置く。 ## Elevation & Depth - 影はほとんど使わず、平面的に構成する。 - 果実やグラスの切り抜き写真に薄い落ち影をつける程度にする。 - カードは影なしで、色面とグラデーションだけで浮かせる。 ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 商品のアップ写真は大きな円形マスクで切り抜き、画面端で途切れさせる。果実は背景を抜く。 - **セクション境界**: 境界線は引かず、テクスチャの地が続く中で余白と写真で区切る。 - 円・角丸・ピルの柔らかな形だけを使う。 - 見出し帯は斜めにカットした平行四辺形にする。 - 注記バッジは細い枠線の角丸小矩形にする。 ## Components - **白ピル型ボタン**（`button-primary`）: 白地に黒文字、中央寄せの詳細リンク。濃色カード上でも使う。 - **枠線ボタン**（`button-outline`）: 透明地に細い黒枠をつけた一覧リンク。 - **下線テキストリンク**（`link-underline`）: 注記情報への小さなリンク。下に細い線を引く。 - **帯付き手書き見出し**（`heading-brush-band`）: 2 行の斜体見出しの背後に、斜めにカットしたラベンダー帯を敷く。 - **円形写真**（`circle-photo`）: ピンク紫の円の中にドリンクのアップを入れ、端からはみ出させる。 - **グラデーション商品カード**（`product-card-gradient`）: 上はライラック、下はワインレッドへのグラデーション。見出し・写真・白文字の説明・ボタンを収める。 - **枠線バッジ**（`badge-note`）: 価格の横に置く小さな属性表示。細い枠線をつける。 - **商品名＋価格**（`price-block`）: 明朝の商品名 2 行の下に、欧文の価格を置く。 ## Do's and Don'ts **Do** - 漆喰テクスチャの地をページ全体に敷く。 - 果実やグラスは水滴つきの切り抜き写真で浮かせて配置する。 - 見出しは手書き風の斜体と帯で季節感を出す。 - 文章は短い行で改行し、詩的なリズムにする。 - 差し色は季節のフルーツの色からとる。 **Don't** - ゴシック体の太い見出しや原色の CTA を使わない。 - セクションを直線や色ベタで区切らない。 - 影の強いカードや立体的なボタンを使わない。 - 情報を詰め込まず、余白を削らない。 - PC で多カラムに広げない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節の素材と商品を印象づける）: 果実を口に運ぶ人物写真に、縦置きの大きな明朝漢字を重ねる。下部に商品 2 つと小さな商品名を置く。 2. **導入コピー**（季節の情緒を伝える）: テクスチャの地に、明朝の短い行を中央揃え・広い行間で並べる。 3. **商品 1 の見出し**（商品のコンセプトを示す）: 手書き風の斜体 2 行に、ラベンダーの斜め帯を敷く。 4. **特長 1**（ベースの味を説明する）: 左寄せの小見出しと本文を置き、右に浮遊する果実、下に円形のアップ写真を置く。 5. **特長 2**（具材と食感を説明する）: 円形写真を左上にはみ出させ、右寄せでテキストを置く。 6. **商品紹介 1**（商品名・価格・詳細へ誘導する）: 切り抜きのグラスと果実の下に、商品名・価格・説明・白ピルボタンを置く。 7. **商品紹介 2（カード）**（2 品目を独立して訴求する）: ライラックからワインレッドへのグラデーションの角丸カードに、見出し・写真・白文字の説明・ボタンをまとめる。 8. **フッターリンク**（一覧と成分情報へ誘導する）: 枠線ピルボタンと下線テキストリンクを中央に縦に並べる。 ## Imagery - グラスは正面やや上から撮り、霜・水滴・氷のつやを強調する。 - 果実は房や粒を背景から切り抜き、周りに散らして浮遊させる。 - 人物は柔らかい自然光で目を閉じた陶酔感のある表情にし、白い布をまとわせる。 - 背景はひび模様のある白い漆喰壁のテクスチャにする。 - 炭酸の泡や水しぶきの粒を写真の上に散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも SP と同じ幅（約 400px 相当）の縦長カラムを中央に固定する。 - PC のカラム外側はベージュの無地にし、左上に記念ロゴを置く。 - カラム内のレイアウトと文字サイズは SP をそのまま縮小して流用する。 - カラムの左右端に薄い影をつけて、紙のように浮かせる。 ## 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-f9c9858e`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/kyoho/ - **解析に使った画像**: 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/）からご連絡ください。