--- version: alpha name: Pastel Aqua Bokeh Seasonal Gift Campaign LP description: 水色〜ティールの水彩・ボケ背景に、マカロンやキャンディ、ギフト箱の3D写真が浮かぶ季節イベント特集LP。白の細いセリフ体ロゴと、ティールのグラデーション台形リボン見出しで区切り、店舗別の商品サムネイルを4列グリッドで並べる。最後に通販サイトへのバナーを置いて回遊させる。 colors: primary: '#5BA4AB' background: '#D4FCF5' background-alt: '#B3E4E9' secondary: '#73CAD2' on-primary: '#FFFFFF' surface: '#FDFDFD' text: '#4A5A5C' accent-1: '#F08FB0' accent-2: '#1E8CC8' accent-3: '#F2D54A' dark-section: '#2F6E74' primary-accessible: '#447F85' accent-2-accessible: '#1B7CB2' typography: display: fontFamily: Playfair Display fontSize: 48px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.01em accent: fontFamily: Playfair Display fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.06em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.02em rounded: sm: 2px md: 4px lg: 8px full: 999px spacing: unit: 8px card: 0px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' hero-logo: backgroundColor: '{colors.background}' textColor: '{colors.on-primary}' typography: '{typography.display}' height: 400px ribbon-heading: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 44px product-thumb: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 160px floating-sweets: height: 120px bokeh-bg: backgroundColor: '{colors.background-alt}' rounded: '{rounded.full}' ec-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 200px --- # DESIGN.md — 水色ボケ背景のパステル季節ギフト特集LP（Pastel Aqua Bokeh Seasonal Gift Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、清潔・爽やか、ポップ・元気、やさしい・柔らかい - **キーワード**: 水色グラデーション・ボケ玉・浮遊するお菓子・台形リボン見出し・サムネイルグリッド・季節イベント - **地の質感**: 水彩のにじみと光のボケ玉が重なる、透明感のあるグラデーション背景 - **形**: 角丸の小さい正方形サムネイルと、左右が斜めに切れたリボン型の見出し帯 - **温度感**: 涼しく爽やかだが、パステルのお菓子で甘さと温かみを足している ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5BA4AB` | 見出しリボンのティール | 3% | 画素の実測 | | `background` | `#D4FCF5` | 上部の淡い水色地 | 25% | 画素の実測 | | `background-alt` | `#B3E4E9` | 中盤の水色地 | 30% | 画素の実測 | | `secondary` | `#73CAD2` | 下部の濃いめアクア地 | 25% | 画素の実測 | | `on-primary` | `#FFFFFF` | リボン上・背景上の白文字 | 2% | 推定 | | `surface` | `#FDFDFD` | サムネイルの白地 | 6% | 画素の実測 | | `text` | `#4A5A5C` | 店舗名の小さい文字 | 1% | 推定 | | `accent-1` | `#F08FB0` | マカロンのピンク | 2% | 推定 | | `accent-2` | `#1E8CC8` | バナーのブルー | 3% | 推定 | | `accent-3` | `#F2D54A` | マカロンのイエロー | 1% | 推定 | | `dark-section` | `#2F6E74` | リボン端の濃いティール | 1% | 推定 | | `primary-accessible` | `#447F85` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#1B7CB2` | AA を満たす補正値（計算） | | 計算 | - 地はすべて水色〜アクアのグラデーション。下にいくほど少し濃くする。 - 白文字は背景の上に直接のせ、薄い影で読みやすくする。 - 見出し帯はティールのグラデーションにして、端だけ濃く塗る。 - 強調色はお菓子写真のピンク・黄・オレンジで出し、文字には使わない。 - 商品サムネイルは白か写真のままにして、色の枠は付けない。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#5BA4AB` のコントラスト比が 2.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#447F85`、4.55:1）を使う。 - `ec-banner` は文字 `#FFFFFF` × 背景 `#1E8CC8` のコントラスト比が 3.72:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#1B7CB2`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | イベント名の欧文ロゴ | 欧文セリフ | Playfair Display | 400 | 48px | 1.1 | -0.01em | | `accent` | ロゴ上の筆記体の飾り文字 | 欧文スクリプト | Playfair Display | 400 | 20px | 1.2 | 0.02em | | `headline-lg` | ロゴ下のキャッチ | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.08em | | `headline-md` | リボン見出しの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.06em | | `body-md` | 日付と短いリード文 | ゴシック | Noto Sans JP | 700 | 14px | 1.7 | 0.04em | | `note` | サムネイル下の店舗名 | ゴシック | Noto Sans JP | 400 | 10px | 1.4 | 0.02em | - 欧文ロゴは細めのセリフ体にして、白で大きく置く。 - 和文はすべてゴシック体で、太字・中央揃えにする。 - リード文は2〜3行までにして、字間を少し広く取る。 - 店舗名はサムネイル下に左揃えで小さく書く。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 2 カラム、PC は中央に 4 カラムのサムネイルグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 0px（375px 幅換算） - 中身は中央に寄せ、左右に装飾が飛び出す余白を取る。 - サムネイルは正方形で揃え、間隔は8〜12px。 - 最後の行が埋まらなくても左詰めのままにする。 - 見出しリボンはグリッドの上に中央配置し、上下に24pxほど空ける。 ## Elevation & Depth - サムネイルには影をつけず平面のまま見せる。 - 見出しリボンにはごく薄いドロップシャドウを付けて浮かせる。 - 浮遊するお菓子は写真の陰影だけで立体感を出す。 ## Shapes - **角丸**: 小 2px ／ 中 4px ／ 大 8px。ボタンは角丸の長方形。 - **写真の切り抜き**: 正方形に切り抜き、角は小さく丸める - **セクション境界**: 境界線は引かない。グラデーション背景が続く中にリボン見出しを置いて区切る - 見出し帯は左右の端を斜めに切った台形にする。 - 装飾のお菓子は画面の端で切れてもよい。 - バナーは横長の長方形で、角は丸めない。 ## Components - **欧文ロゴのファーストビュー**（`hero-logo`）: お菓子があふれ出る写真の下に、筆記体と大きなセリフ体のロゴを白で重ねる。 - **台形リボン見出し**（`ribbon-heading`）: ティールのグラデーションに白文字。左右の端を斜めに切り、片方の端に小物写真を添える。 - **店舗別商品サムネイル**（`product-thumb`）: 正方形の商品写真の下に店舗名を小さく書く。リンク付きのカード。 - **浮遊するお菓子の装飾**（`floating-sweets`）: マカロン・キャンディ・ギフト箱の切り抜き写真を左右の端に大きく散らす。 - **ボケ玉の背景**（`bokeh-bg`）: 水色のグラデーションの上に、半透明の白・黄緑の丸を散らす。 - **通販誘導バナー**（`ec-banner`）: 青地に白抜きの欧文タイトルと商品写真を組んだ横長バナー。 ## Do's and Don'ts **Do** - 背景は水色のグラデーションとボケ玉で、透明感をずっと保つ。 - パステルのお菓子写真を画面の端に浮かべて楽しさを出す。 - 見出しはすべて同じ台形リボンで統一する。 - サムネイルの大きさと間隔をきっちり揃える。 **Don't** - 濃い色や黒の面でセクションを区切らない。 - サムネイルに太い枠や強い影を付けない。 - 長い本文を入れない。リードは数行にとどめる。 - 見出しを丸ゴシックやピル型ボタンにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（季節イベントの華やかさを一目で伝える）: ガラス器からお菓子があふれる写真に、白のセリフ体ロゴを重ねる。 2. **リード**（日付と贈る気持ちを短く伝える）: 白の太字で中央揃え。キャッチ、日付、2行の説明の順に並べる。 3. **スイーツ特集**（店舗ごとのおすすめ菓子へ誘導する）: リボン見出しの下に、正方形サムネイルを4列で並べる。 4. **ギフト特集**（雑貨ギフトへ誘導する）: スイーツ特集と同じ型のリボン見出しとグリッドを使う。 5. **通販誘導**（ネット通販の特集ページへ送る）: 2行のリボン見出しの下に、横長の青いバナーを1枚置く。 ## Imagery - マカロン・キャンディ・ハート菓子・リボン付きの箱を、白背景で切り抜いた3D風の写真で用意する。 - 装飾は大小をつけて斜めに浮かべ、一部は画面の外へはみ出させる。 - 商品写真は明るい自然光で、白や淡い色の背景で撮る。 - 背景には水彩のにじみと光のボケを重ねる。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央に約60%幅の列を取り、サムネイルを4列で並べる。 - SPではサムネイルを2列にし、見出しリボンは画面幅の85%にする。 - SPでは装飾のお菓子を小さく・少なくし、本文に重ならないようにする。 - SPではロゴを画面幅の80%程度に縮める。 ## 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-7b5705bc`（元 LP の URL から採番） - **元 LP**: https://www.0101.co.jp/whiteday/?sp=1 - **解析に使った画像**: PC（PC版） - **確度**: 色 高（5/11 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。