--- version: alpha name: Sakura Pink and Sky Blue Seasonal Cafe LP description: 桜色と空色を交互に敷き、波形の境界でつなぐ春の季節限定メニュー LP。手書き文字の見出しと白いピル型ボタン、紙のような質感の地で、やわらかく上品な世界観を作る。 colors: primary: '#D45168' background: '#F4BBC9' background-alt: '#ACDDE9' tint-1: '#FFCBCF' secondary: '#EDA3AA' tint-2: '#C2B7D9' surface: '#FEACB2' cta: '#FEFDFC' on-cta: '#E0566E' text-body: '#AF606A' on-dark: '#F3ECF0' line: '#C47E87' accent-1: '#2E7D5B' on-cta-accessible: '#DA3450' surface-accessible: '#D90312' typography: display: fontFamily: Yomogi fontSize: 30px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Montserrat fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em headline-sm: fontFamily: Yomogi fontSize: 17px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.04em accent: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' 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.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px text-link-underline: textColor: '{colors.text-body}' typography: '{typography.note}' height: 20px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 110px feature-cross-list: textColor: '{colors.primary}' typography: '{typography.body-md}' height: 200px customize-card: backgroundColor: '{colors.surface}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 200px badge-tag: textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 16px product-block: textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 260px --- # DESIGN.md — 桜ピンク×空色の季節限定カフェ LP（Sakura Pink and Sky Blue Seasonal Cafe LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 飲食店・レストラン ／ **雰囲気**: やさしい・柔らかい、かわいい、上品・高級、ナチュラル - **キーワード**: 桜・春の空・手書き文字・波形の区切り・紙の質感・季節限定 - **地の質感**: 和紙や画用紙のような細かい紙目を地に敷き、ベタ塗りにしない - **形**: ゆるい波形のセクション境界、白いピル型ボタン、角丸の大きいカスタマイズカード - **温度感**: 春らしい暖かさ。ピンクの甘さを空色で冷まして爽やかに保つ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D45168` | 見出し・商品名の桜色 | 2% | 画素の実測 | | `background` | `#F4BBC9` | 桜色の紙地 | 30% | 画素の実測 | | `background-alt` | `#ACDDE9` | 空色の紙地 | 25% | 画素の実測 | | `tint-1` | `#FFCBCF` | 淡い桜色の地 | 12% | 画素の実測 | | `secondary` | `#EDA3AA` | ラテ区画の濃い桜色 | 8% | 画素の実測 | | `tint-2` | `#C2B7D9` | 夜桜区画の薄紫グラデ上端 | 4% | 画素の実測 | | `surface` | `#FEACB2` | カスタマイズカードの面 | 3% | 画素の実測 | | `cta` | `#FEFDFC` | 商品情報ボタンの白 | 1% | 画素の実測 | | `on-cta` | `#E0566E` | ボタン上の文字 | 0% | 推定 | | `text-body` | `#AF606A` | 説明文の濃い桜色 | 1% | 画素の主要色に補正 | | `on-dark` | `#F3ECF0` | 写真や色面上の白文字 | 1% | 画素の主要色に補正 | | `line` | `#C47E87` | 一覧ボタンの枠線 | 0% | 画素の実測 | | `accent-1` | `#2E7D5B` | ロゴ・グリーンの差し色 | 0% | 推定 | | `on-cta-accessible` | `#DA3450` | AA を満たす補正値（計算） | | 計算 | | `surface-accessible` | `#D90312` | AA を満たす補正値（計算） | | 計算 | - 地は桜色と空色をセクションごとに交互に切り替える - 境界は直線にせず波形で色をつなぐ - 見出し・商品名・価格はすべて濃い桜色で統一する - ボタンは白地＋桜色文字、一覧導線は透明地＋桜色枠線 - 空色地の上の手書きコピーは白文字にする - 夜の商品は薄紫→白→ピンクの縦グラデで差別化 - 緑はロゴ程度にとどめ面で使わない - `page` は文字 `#AF606A` × 背景 `#F4BBC9` のコントラスト比が 2.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `button-primary` は文字 `#E0566E` × 背景 `#FEFDFC` のコントラスト比が 3.61:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-cta-accessible`（`#DA3450`、4.51:1）を使う。 - `customize-card` は文字 `#F3ECF0` × 背景 `#FEACB2` のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `surface-accessible`（`#D90312`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVと各区画の手書きキャッチ | 手書き・筆 | Yomogi | 400 | 30px | 1.4 | 0.08em | | `headline-lg` | FOOD等の英字セクション名 | 欧文サンセリフ | Montserrat | 500 | 34px | 1.2 | 0.15em | | `headline-sm` | 英字見出しの下の手書きサブコピー | 手書き・筆 | Yomogi | 400 | 17px | 1.4 | 0.05em | | `headline-md` | 商品名 | ゴシック | Noto Sans JP | 500 | 18px | 1.4 | 0.02em | | `body-md` | 商品説明・特長 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.04em | | `accent` | 価格・サイズ表記 | ゴシック | Noto Sans JP | 400 | 16px | 1.4 | 0.02em | | `note` | 果汁率などの注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `label-button` | ピル型ボタン | ゴシック | Noto Sans JP | 500 | 13px | 1.0 | 0.05em | - 情緒コピーは手書き、情報はゴシックと役割を分ける - 英字見出しは字間を大きく取り細めに組む - 英字見出しの直下に手書きの日本語サブを添える - コンセプト文は縦書きで右から並べる - 特長は短い句を×印でつないで縦に積む - 本文は細めで小さく、行間を広く取る - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。商品は写真と説明を上下に積む - **本文ブロックの幅**: 画面幅の約 86% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 商品は写真と説明を左右交互に配置（SPでは縦積み） - 各カテゴリ末尾に一覧への枠線ボタンを中央配置 - 余白を多めにとり1画面1商品を基本とする - 写真は背景に溶け込む切り抜きで配置 - 見出しは中央揃え、説明文は写真側に寄せる ## Elevation & Depth - 基本はフラット、カードに影はつけない - 切り抜き商品写真にのみ柔らかい接地影 - ボタンは影なしの白ベタ ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 商品は背景を抜いた切り抜き。FVは波形に切った写真 - **セクション境界**: 大きくうねる波形カーブで色を切り替える - ボタンはすべてピル型 - カスタマイズ情報は角丸大のピンクカード - ギフトカードは実物の角丸カード比率 - 花びら型など有機的な形をアクセントに ## Components - **商品情報ボタン**（`button-primary`）: 白ベタのピル型。桜色文字で商品詳細へ誘導 - **一覧導線ボタン**（`button-outline`）: 透明地に細い桜色枠のピル型。各区画の最後に中央配置 - **注釈リンク**（`text-link-underline`）: アレルゲン情報等の小さな下線リンク - **英字＋手書き見出し**（`section-heading`）: 小さな英字ラベル、大きな英字、手書きサブの3段構成 - **×でつなぐ特長**（`feature-cross-list`）: 短い特長句を×印で区切り縦に3つ並べる - **カスタマイズカード**（`customize-card`）: 角丸の桜色カードに手書き見出しと追加料金を2行で提示 - **属性タグ**（`badge-tag`）: 価格横の細枠の小さな角丸タグ - **商品ブロック**（`product-block`）: 切り抜き写真＋説明・商品名・価格・ボタンの組 ## Do's and Don'ts **Do** - 桜色と空色の地を交互に使い、境は波形にする - 情緒的なコピーは手書き体で書く - 地に紙の質感を薄く重ねる - 舞う花びらを余白に散らして動きを出す - ボタンは白ピル型に統一する - 注釈は小さく控えめに添える **Don't** - 濃い原色や黒の地を使わない - 直線や角ばった区切りを使わない - 太い極太ゴシックで見出しを組まない - ボタンに強い影やグラデをつけない - 1画面に商品を詰め込みすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節の世界観と主力商品を一目で伝える）: 左右に商品写真、中央に縦書き手書きコピー。下端を波形で切る 2. **コンセプト**（季節の想いを情緒的に伝える）: 青空と桜の背景に白の縦書き手書き見出しと縦書き本文 3. **主力商品紹介**（看板商品の味わいを伝える）: 手書きキャッチ、×でつなぐ特長3つ、大きな切り抜き商品 4. **カスタマイズ提案**（追加オプションで単価を上げる）: 角丸桜色カードに選択肢2つと価格 5. **商品詳細CTA**（詳細ページへ誘導）: 商品写真＋商品名・価格・注釈・白ピルボタン 6. **第2商品**（別ドリンクを紹介）: 濃い桜色の紙地に大きな写真、ホット/アイス2ボタン 7. **第3商品**（夜のイメージで差別化）: 薄紫→ピンクのグラデ地に白い玉ぼけ、一覧ボタン 8. **フード**（関連フードの紹介）: 英字見出し＋手書きサブ、写真と説明を左右交互 9. **グッズ**（季節グッズの販売）: 紙質感の桜色地に3商品を左右交互配置 10. **コーヒー豆**（季節の豆を紹介）: 淡い桜色地にパッケージ写真と説明 11. **ギフト**（ギフト需要の取り込み）: 空色の紙地に英字小見出しごとにカード画像と枠線ボタン ## Imagery - 商品は背景を抜いて柔らかい自然光で撮影 - 桜の花と花びらを切り抜いて余白に散らす - 春の青空と雲を背景写真に使う - 地は細かな紙目テクスチャを薄く敷く - 夜桜区画は白い丸いぼけを点在させる - 添え物の果物を商品横に置き味を示す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの狭めの幅で、SPに近い構成 - SPは写真と説明を左右交互から縦積みに変える - 縦書きコピーはSPでも縦書きを維持し文字を縮める - 波形境界はSPでも振幅をやや小さくして残す - ボタンはSPで幅を広げ最低44pxの高さを確保 ## 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-3548d71e`（元 LP の URL から採番） - **元 LP**: https://www.starbucks.co.jp/cafe/sakura/ - **解析に使った画像**: 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/）からご連絡ください。