--- version: alpha name: Navy and Sky Blue Pet Campaign LP description: 淡い水色の地に白いカードを並べ、濃紺の見出しと鮮やかな水色のアクセントで構成したSNS投稿キャンペーンLP。犬の写真をカプセル型や角丸フレームで見せ、STEPカード・参考動画グリッド・規約スクロール枠・問い合わせ表と、情報を順に積み上げていく。 colors: primary: '#272C65' background: '#E4F4FE' surface: '#FFFFFE' accent-1: '#019DE1' marker: '#ECEA62' background-alt: '#F6F5E9' tint-1: '#EAEFF2' dark-section: '#152348' secondary: '#0561AE' accent-2: '#DC7C00' text-body: '#333344' accent-3: '#083129' on-dark: '#FBFEFF' accent-1-accessible: '#017DB3' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 40px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.04em body-lg: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em rounded: sm: 6px md: 12px lg: 28px full: 999px spacing: unit: 8px card: 20px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' anchor-nav: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 40px hashtag-marker: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' height: 28px step-card: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 300px step-badge: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 70px monitor-heading: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px comment-bubble: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 270px video-card: backgroundColor: '{colors.accent-1}' rounded: '{rounded.md}' height: 260px paw-list: textColor: '{colors.text-body}' typography: '{typography.body-md}' height: 24px terms-scroll: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.md}' height: 280px contact-table: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 30px --- # DESIGN.md — 紺×水色の愛犬向け投稿キャンペーンLP（Navy and Sky Blue Pet Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 親しみ・手作り感、清潔・爽やか、信頼・誠実、ポップ・元気 - **キーワード**: 濃紺見出し・水色アクセント・白カード・肉球装飾・カプセル型写真・SNS投稿 - **地の質感**: フラットな単色面。グラデーションはFVとハッシュタグ帯に限る - **形**: 角丸の大きいカード、カプセル型写真枠、丸いSTEPバッジ - **温度感**: やや涼しい。犬の写真とオレンジの差し色で温かさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#272C65` | 見出し・STEPカード・問い合わせ面の濃紺 | 9% | 画素の実測 | | `background` | `#E4F4FE` | ページ地の淡い水色 | 20% | 画素の実測 | | `surface` | `#FFFFFE` | セクションカードの白 | 30% | 画素の実測 | | `accent-1` | `#019DE1` | ハッシュタグのマーカー・吹き出し・動画枠の水色 | 5% | 画素の実測 | | `marker` | `#ECEA62` | 濃紺帯上の強調文字の黄色 | 0% | 画素の実測 | | `background-alt` | `#F6F5E9` | 参考動画セクションの生成り | 4% | 画素の実測 | | `tint-1` | `#EAEFF2` | プロフィール枠の薄いグレー | 2% | 画素の実測 | | `dark-section` | `#152348` | 商品紹介ブロックの濃紺 | 6% | 画素の実測 | | `secondary` | `#0561AE` | FV・Instagram案内面の青 | 6% | 画素の実測 | | `accent-2` | `#DC7C00` | ナビの矢印・CMバッジのオレンジ | 0% | 画素の実測 | | `text-body` | `#333344` | 本文の濃紺グレー | 2% | 推定 | | `accent-3` | `#083129` | フッターの深緑 | 9% | 画素の実測 | | `on-dark` | `#FBFEFF` | 濃色面上の白文字 | 1% | 画素の実測 | | `accent-1-accessible` | `#017DB3` | AA を満たす補正値（計算） | | 計算 | - 地は淡い水色、各セクションは白カードに載せる - 見出しは全て濃紺で統一 - ハッシュタグ・キーワードは水色ベタに白文字のマーカーで強調 - 濃紺帯の上の強調語は黄色 - オレンジは小さな矢印やバッジだけに使う - 参考例セクションだけ生成り地にしてリズムを変える - フッターはコーポレートの深緑で本編と分ける - `hashtag-marker` は文字 `#FBFEFF` × 背景 `#019DE1` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#017DB3`、4.52:1）を使う。 - `comment-bubble` は文字 `#FBFEFF` × 背景 `#019DE1` のコントラスト比が 3.0:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#017DB3`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのキャンペーン名 | ゴシック | Zen Kaku Gothic New | 900 | 40px | 1.3 | 0.02em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.4 | 0.08em | | `headline-md` | STEPカードの説明・小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.04em | | `body-lg` | 概要の本文 | ゴシック | Noto Sans JP | 400 | 15px | 2.2 | 0.03em | | `body-md` | プロフィール・コメント本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.02em | | `note` | 注意事項・規約 | ゴシック | Noto Sans JP | 400 | 10px | 1.9 | 0.02em | | `label-button` | アンカーナビのボタン | ゴシック | Noto Sans JP | 700 | 14px | 1.3 | 0.1em | - 見出しは極太の濃紺ゴシックで字間を少し広げる - 見出しは中央揃え、本文は左揃え - 本文は行間を広くとる - ハッシュタグは本文中でもマーカー付きの太字にする - 注意事項は小さい文字で箇条書きにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。参考動画のみ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右4%の余白で水色地に浮かせる - カードの内側に左右20px程度のパディング - STEPカードは縦に積む - アンカーナビは2+3の白ボタンを青地に並べる - 規約は高さ固定のスクロール枠に入れる ## Elevation & Depth - 影はほぼ使わずフラット - 階層は面の色の差（水色地/白カード/濃紺面）で示す - 写真枠は水色の太い枠線で浮かせる ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 28px。ボタンは角丸の長方形。 - **写真の切り抜き**: 縦長カプセル型・角丸長方形の写真に水色の太枠 - **セクション境界**: 直線。白カードの間に水色地のすき間を挟む - STEPカードは大きい角丸で濃紺の枠と下部帯 - STEP番号は濃紺の円で、カード左上にはみ出して置く - ナビボタンは小さめの角丸 - 商品紹介ブロックは大きい角丸の濃紺パネル ## Components - **アンカーナビボタン**（`anchor-nav`）: 青地に白い角丸ボタン、下中央にオレンジの小さい三角 - **ハッシュタグマーカー**（`hashtag-marker`）: 水色ベタに白太字のタグ表示 - **STEPカード**（`step-card`）: 写真の上部と濃紺の説明帯、左上に丸いSTEP番号 - **STEP番号バッジ**（`step-badge`）: 濃紺の円に小さいSTEPと大きい数字 - **モニター型見出し**（`monitor-heading`）: テレビ型の濃紺枠に告知文、角に星型のオレンジバッジ - **コメント吹き出し**（`comment-bubble`）: 水色の角丸吹き出しに白の小さい文字 - **参考動画カード**（`video-card`）: 縦長動画サムネイルを水色の太枠で囲む - **肉球アイコン箇条書き**（`paw-list`）: 水色の肉球アイコンを先頭に置いた注記 - **規約スクロール枠**（`terms-scroll`）: 濃紺細線の角丸枠の中に高さ固定でスクロールする本文 - **問い合わせ表**（`contact-table`）: 濃紺面に白枠のラベルと白文字の値を並べる ## Do's and Don'ts **Do** - 見出しは濃紺の極太ゴシックで中央に置く - キーワードは水色のマーカーで目立たせる - 犬の写真は表情がわかる寄りのアングルで使う - 肉球アイコンを箇条書きや余白の飾りに使う - セクションは白カードにまとめ、水色地のすき間で区切る **Don't** - 赤や黒を強調色に使わない - カードに濃いドロップシャドウを付けない - 写真を枠なしの四角で置かない - 本文の行間を詰めない - オレンジを大きい面に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（企業サイトの一部であることを示す）: 深緑の帯にロゴとハンバーガーメニュー、下にパンくず 2. **ファーストビュー**（キャンペーン名と応募期間を伝える）: 濃紺〜青のグラデーション地に極太の白文字、犬の写真を4枚並べ、下に期間の帯 3. **アンカーナビ**（各セクションへ移動させる）: 青地に白い角丸ボタンを2+3で並べる 4. **キャンペーン概要**（参加方法と特典を簡潔に伝える）: 白カードに本文、ハッシュタグのマーカー、カプセル型写真2枚、モニター型の特典告知 5. **出演者紹介**（起用人物で期待感を高める）: グレーの枠にプロフィールと人物写真、水色の吹き出しコメント 6. **応募方法**（手順をSTEPで示す）: 写真と濃紺帯のSTEPカードを縦に並べ、肉球アイコンの注記を付ける 7. **参考例**（投稿のイメージを持たせる）: 生成り地に縦長動画を水色の枠で2×2に並べる 8. **注意事項**（応募条件を伝える）: 白カードに小さい文字の箇条書き 9. **公式SNS案内**（アカウントのフォローを促す）: 青の角丸パネルにスマホのモックとQRコード 10. **応募規約**（規約全文を載せる）: 高さ固定のスクロール枠 11. **問い合わせ**（事務局の情報を示す）: 濃紺面に白枠ラベルの表 12. **商品紹介**（商品の認知につなげる）: 濃紺の角丸パネルにロゴ、白丸アイコン、商品パッケージ、保証のバナー 13. **フッター**（企業サイト内を回遊させる）: 深緑地にアコーディオン型のリンク一覧 ## Imagery - 室内や屋外の自然光で、犬がおやつを食べる瞬間を寄りで撮る - 飼い主の手を入れて親しみを出す - 写真にハッシュタグ風の白い付箋ラベルを斜めに重ねる - 水色の肉球アイコンを背景にまばらに散らす - 害虫などは白丸の中に紺色のシルエットで描く - SNSの画面はスマホのモックアップで見せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの白カード（幅約80%）を水色地に置く - PCのFVは写真のコラージュを左右に広げ、中央にタイトルを置く - PCのアンカーナビは縦線区切りで5項目を横一列に並べる - PCではSTEPカードを2列、参考動画を4列にする - PCの見出しは左右に細い横線を添える - PCの商品紹介ブロックはロゴと商品画像を左右2カラムにする ## 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-ac753e5b`（元 LP の URL から採番） - **元 LP**: https://animal-health.boehringer-ingelheim.jp/campaign/26nexgard - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。