--- version: alpha name: Bright Sky Blue Premium Dressing LP description: 空色の地に素材写真を散らしたファーストビュー、白地に縦書き明朝の情緒的なコピー、斜めに切ったフルブリード写真帯で特長を見せる構成。金色の細い罫線とラベル、筆記体の欧文見出し、細い枠線の商品カードで、上品さと爽やかさを両立した食品 LP。 colors: primary: '#55A0D7' secondary: '#46B0EE' background: '#FFFFFF' dark-section: '#614F41' accent-1: '#B79A63' accent-2: '#E4D4A2' background-alt: '#959394' text: '#2F2A2A' text-body: '#555555' line: '#333333' on-dark: '#FFFFFF' surface: '#EBEEF2' accent-1-accessible: '#8D7241' typography: display: fontFamily: Shippori Mincho fontSize: 26px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.12em accent: fontFamily: Mrs Saint Delafield fontSize: 44px fontWeight: 400 lineHeight: 1.2 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em note: fontFamily: Zen Kaku Gothic New fontSize: 10px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.1em label-button: fontFamily: Barlow fontSize: 11px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 90px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' script-heading: textColor: '{colors.text}' typography: '{typography.accent}' height: 56px vertical-lead: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.display}' height: 340px feature-band: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 340px gold-label-rule: textColor: '{colors.accent-1}' typography: '{typography.note}' height: 30px product-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 480px ingredient-tag: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.full}' height: 40px more-link: textColor: '{colors.text}' typography: '{typography.label-button}' height: 24px premium-emblem: textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 100px --- # DESIGN.md — 空色×金の斜め帯 高級調味料 LP（Bright Sky Blue Premium Dressing LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 食品・飲料 ／ **雰囲気**: 上品・高級、清潔・爽やか、ナチュラル、シンプル・ミニマル - **キーワード**: 空色・金の細罫・縦書き明朝・斜め帯・筆記体見出し・余白多め - **地の質感**: フラットな単色面と明るく柔らかい自然光の料理写真。装飾は細線と筆記体のみで軽い。 - **形**: 角丸なしの四角。セクション境界は斜めに傾けた帯。商品上の素材タグだけ白い円。 - **温度感**: 爽やかでやや涼しい。茶色の帯で大地の温かみを足す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#55A0D7` | FV・特長帯の空色 | 7% | 画素の実測 | | `secondary` | `#46B0EE` | 特長帯の明るい空色 | 4% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 40% | 画素の実測 | | `dark-section` | `#614F41` | 大地の特長帯の茶色 | 6% | 画素の実測 | | `accent-1` | `#B79A63` | 金色のラベル文字・罫線 | 1% | 推定 | | `accent-2` | `#E4D4A2` | 帯境界の金色の斜めライン | 1% | 画素の実測 | | `background-alt` | `#959394` | オイル帯のグレー | 4% | 画素の実測 | | `text` | `#2F2A2A` | 見出し・商品名の文字 | 1% | 画素の実測 | | `text-body` | `#555555` | 本文のグレー文字 | 2% | 推定 | | `line` | `#333333` | 商品カードの細枠 | 0% | 推定 | | `on-dark` | `#FFFFFF` | 色帯上の白文字 | 1% | 画素の主要色に補正 | | `surface` | `#EBEEF2` | 写真内の薄グレー面 | 6% | 画素の実測 | | `accent-1-accessible` | `#8D7241` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本に、FV と特長帯だけ色面を使う。 - 空色はブランドの顔。FV と最後の特長帯に置く。 - 特長帯は茶・グレー・空色と素材ごとに地色を変える。 - 金色は小ラベル、細い罫線、帯の境界線に限定する。 - 色帯上の文字は白。白地の文字は濃いグレー。 - 原色の赤や派手な強調色は使わない。 - `ingredient-tag` は文字 `#B79A63` × 背景 `#FFFFFF` のコントラスト比が 2.69:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#8D7241`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のキャッチ・縦書きのリード | 明朝 | Shippori Mincho | 500 | 26px | 1.5 | 0.12em | | `accent` | Features・Lineup などの筆記体見出し | 欧文スクリプト | Mrs Saint Delafield | 400 | 44px | 1.2 | 0.0em | | `headline-md` | 特長の見出し | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.5 | 0.05em | | `headline-sm` | 商品名 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.03em | | `note` | 金色の小ラベル | ゴシック | Zen Kaku Gothic New | 500 | 10px | 1.5 | 0.08em | | `body-md` | 本文・商品説明 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 2.0 | 0.1em | | `label-button` | MORE リンク | 欧文サンセリフ | Barlow | 600 | 11px | 1.2 | 0.05em | - 情緒的なリードは縦書きの明朝で大きく置く。 - 本文は細めのゴシックで字間広め、行間 2 前後。 - コンセプト文は中央揃えで、段落ごとに 1 行空ける。 - セクション見出しは筆記体の英単語 1 語だけにする。 - 特長は金ラベル→金罫線→太字見出し→本文の順。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真と縦書きコピーは左右にずらして重ねる - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 90px、基本単位 8px、カード内 20px（375px 幅換算） - 余白を大きく取り、1 画面の情報は少なくする。 - 特長帯は画面幅いっぱいに広げ、文字は左寄せ。 - 商品カードは縦に並べ、間隔は約 16px。 - 縦書きコピーの両脇に小さな料理写真を互い違いに置く。 - 最後は料理写真 3 枚を隙間なく横に並べて締める。 ## Elevation & Depth - 影は使わない。 - カードは細い 1px の枠線で区切る。 - 奥行きは写真と色帯を斜めに重ねて出す。 ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 四角の切り抜き。商品写真は余白の多い白背景。帯の写真は斜めに切る。 - **セクション境界**: 約 3〜5 度傾けた斜め帯と、金色の細い斜めライン - 角丸はつけない。 - 円は素材タグだけに使う。 - 斜め帯は傾きをそろえ、交互に向きを変えてもよい。 ## Components - **筆記体見出し**（`script-heading`）: 中央または左寄せに細い筆記体の英単語を置き、帯に一部重ねる。 - **縦書きリード**（`vertical-lead`）: 明朝の縦書き 3 行。左右に小さな写真をずらして置く。 - **斜め特長帯**（`feature-band`）: 全幅の写真に斜めの色面を重ね、金ラベル・罫線・白見出し・本文を載せる。 - **金ラベルと罫線**（`gold-label-rule`）: 金色の小さな文字の下に、幅 7 割ほどの金色細線を引く。 - **商品カード**（`product-card`）: 細い黒枠の中に大きな商品写真、金ラベル、商品名、説明文、MORE を縦に並べる。 - **素材タグ**（`ingredient-tag`）: 写真右上に置く白い円。中に産地と素材名を 2 行の小さな金色文字で入れる。 - **MORE リンク**（`more-link`）: 中央揃えの英字と、黒い円の矢印アイコン。 - **月桂冠エンブレム**（`premium-emblem`）: 金色の月桂樹と星で囲んだ英字のバッジ。写真の右上角に重ねる。 ## Do's and Don'ts **Do** - 余白を大きく取り、静かな高級感を保つ。 - 金色は細い線と小さい文字に限って使う。 - 特長帯は斜めに切り、写真を画面いっぱいに見せる。 - 素材が主役の写真を明るく爽やかに見せる。 - 見出しの英単語は筆記体 1 語にとどめる。 **Don't** - 大きな塗りボタンや派手な CTA を置かない。 - 角丸や影を多用しない。 - 太いゴシックで本文を詰め込まない。 - 赤や黄色の値引きバッジを使わない。 - 斜め帯の角度をバラバラにしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品と世界観を一目で伝える）: 空色の全面に商品ボトルを中央に置き、素材の切り抜きを散らす。ロゴ、明朝のキャッチ、SCROLL を添える。 2. **商品集合写真**（シリーズ全体を見せる）: 白背景に 3 本並べた写真。右上に金のエンブレムを重ねる。 3. **コンセプト**（開発の思いを情緒的に語る）: 縦書きの明朝リードと料理写真 2 枚を互い違いに置く。続けて中央揃えの本文と料理写真を置く。 4. **特長**（こだわりを 3 つ示す）: 筆記体見出しのあと、茶・グレー・空色の斜め写真帯を 3 枚重ねる。 5. **商品ラインナップ**（各商品の味と素材を伝える）: 筆記体見出しの下に、細枠のカードを縦に 3 枚並べる。カードには素材タグと MORE を入れる。 6. **料理写真ギャラリー**（使用シーンで締める）: 料理写真 3 枚を隙間なく横に並べた帯。 ## Imagery - 素材（柑橘・玉ねぎ・根菜）は切り抜きで、色面の上に浮かせて散らす。 - 商品は白〜薄グレーの布背景で、柔らかい自然光で撮る。 - 料理は真俯瞰か斜め上から撮る。明るく彩度高めで、淡い色の器を使う。 - 特長帯は畑・オイル・果樹など素材の背景を広角で撮る。 - 装飾は金の月桂冠と細線のみ。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC の FV は 3 色（空色・黄緑・山吹）の縦 3 分割にし、各色に商品を 1 本ずつ置く。 - PC の特長帯は写真を右、文字を左に置き、金ラベルは縦書きにする。 - PC の商品カードは 3 カラム横並び。 - PC のコンセプトは写真と縦書き・本文を左右 2 列に分ける。 - PC はコンテンツ幅を約 70% に絞り、余白を広げる。 ## 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-bb65d710`（元 LP の URL から採番） - **元 LP**: https://www.bulldog.co.jp/special/and_bulldog_premium/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（8/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。