--- version: alpha name: Autumn Plaid Campaign Water Service LP description: 前半はオレンジ・からし・紺のチェック柄とテラコッタ赤、オリーブ緑で秋らしい温かさを出したプレゼント訴求。後半は落ち着いた青と淡い水色の地に切り替え、料金・機種・特長・申込の流れを清潔で信頼感のあるトーンで整理する。キャンペーン型の宅配水サービスLP。 colors: primary: '#4C79B1' cta: '#FC5E43' on-cta: '#FFF8F3' background: '#FFFFFF' background-alt: '#FCF7DA' tint-1: '#F4F7FC' tint-2: '#F4F3ED' secondary: '#DC5E45' accent-1: '#949725' accent-2: '#F58A1F' dark-section: '#425873' text: '#333333' line: '#F4F7FC' accent-3: '#F4A6AC' cta-accessible: '#E02404' secondary-accessible: '#CD4226' primary-accessible: '#4B78AF' accent-2-accessible: '#B55F08' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 48px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 32px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.03em headline-sm: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.06em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Josefin Sans fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 64px 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.sm}' height: 64px button-product: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 60px price-banner: backgroundColor: '{colors.dark-section}' typography: '{typography.display}' rounded: '{rounded.md}' height: 200px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 380px plan-table: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.headline-sm}' height: 620px feature-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 230px step-item: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 160px contact-box: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' height: 340px --- # DESIGN.md — 秋のチェック柄×青の宅配水キャンペーンLP（Autumn Plaid Campaign Water Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 親しみ・手作り感、信頼・誠実、情報量多め・訴求型、清潔・爽やか - **キーワード**: 秋のチェック柄・テラコッタ赤・オリーブ緑・落ち着いた青・価格の大きな数字・特典カード - **地の質感**: 前半は布のようなタータンチェック柄と淡い格子の地。後半は無地の淡い水色と白カードでフラット。 - **形**: 角丸は小さめ。商品写真は不定形・ひし形に切り抜き、線の縁取りを添える。ボタンはズレた影付きの長方形。 - **温度感**: 前半は暖かい秋色、後半は爽やかな寒色。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4C79B1` | ブランドの青。見出し・特長カード・帯 | 4% | 画素の実測 | | `cta` | `#FC5E43` | 申込ボタンの朱色 | 3% | 画素の実測 | | `on-cta` | `#FFF8F3` | ボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 25% | 画素の実測 | | `background-alt` | `#FCF7DA` | 特典・プランの淡いクリーム地 | 12% | 画素の実測 | | `tint-1` | `#F4F7FC` | 機種・特長セクションの淡い水色地 | 12% | 画素の実測 | | `tint-2` | `#F4F3ED` | FV下の生成りの帯 | 8% | 画素の実測 | | `secondary` | `#DC5E45` | 商品紹介のテラコッタ赤ボタン・ロゴ色 | 3% | 画素の実測 | | `accent-1` | `#949725` | 商品紹介のオリーブ緑ボタン・線 | 2% | 画素の実測 | | `accent-2` | `#F58A1F` | 価格数字のオレンジ | 1% | 推定 | | `dark-section` | `#425873` | 特典見出しの紺のテクスチャ帯 | 2% | 画素の主要色に補正 | | `text` | `#333333` | 本文の濃いグレー | 2% | 推定 | | `line` | `#F4F7FC` | 表の罫線・カード地の灰色 | 1% | 画素の主要色に補正 | | `accent-3` | `#F4A6AC` | 子育てプランのピンク | 1% | 画素の実測 | | `cta-accessible` | `#E02404` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#CD4226` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#4B78AF` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#B55F08` | AA を満たす補正値（計算） | | 計算 | - 前半のプレゼント訴求は暖色チェック柄と淡いピンク／クリーム地で秋を表現する。 - 後半の料金・機種・特長は青と淡い水色地に切り替え、信頼感を出す。 - 申込ボタンは全セクション共通で朱色に統一し、他の要素には使わない。 - 価格の数字はオレンジで特大にし、税込などの注記は小さく添える。 - 商品ごとにブランド色（赤・オリーブ）をボタンと縁取り線に使い分ける。 - セクションの境目にチェック柄の帯を挟んで区切る。 - `button-primary` は文字 `#FFF8F3` × 背景 `#FC5E43` のコントラスト比が 2.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E02404`、4.52:1）を使う。 - `button-product` は文字 `#FFF8F3` × 背景 `#DC5E45` のコントラスト比が 3.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#CD4226`、4.54:1）を使う。 - `benefit-card` は文字 `#4C79B1` × 背景 `#FFFFFF` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4B78AF`、4.56:1）を使う。 - `plan-table` は文字 `#F58A1F` × 背景 `#FFFFFF` のコントラスト比が 2.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#B55F08`、4.56:1）を使う。 - `feature-card` は文字 `#4C79B1` × 背景 `#FFFFFF` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4B78AF`、4.56:1）を使う。 - `contact-box` は文字 `#4C79B1` × 背景 `#FFFFFF` のコントラスト比が 4.49:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#4B78AF`、4.56:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの大見出し・価格数字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 48px | 1.1 | 0.02em | | `headline-lg` | セクション見出し（青） | 丸ゴシック | Zen Maru Gothic | 700 | 32px | 1.3 | 0.03em | | `headline-md` | 商品名・特典カードの見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.03em | | `headline-sm` | 特長カード・小見出し | ゴシック | Noto Sans JP | 500 | 17px | 1.5 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.06em | | `note` | 注釈・規約 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.02em | | `accent` | Step・feature・SELECTなどの欧文ラベル | 欧文サンセリフ | Josefin Sans | 400 | 22px | 1.2 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.3 | 0.05em | - 見出しは重要な語を大きく、助詞を小さくして強弱をつける。 - 価格は数字だけを特大にし、「円」は中くらい、税込注記は小さく括弧書き。 - 強調したい語はオレンジ文字にする。 - 番号ラベルは細い欧文で大きく書く。 - 本文は字間を広めにとり中央揃えか左揃えにする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。プラン比較のみ 2 列の表。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - カードは画面幅の約88%で中央に置く。 - セクションごとにCTAボタンを入れる。 - 特長カードは左に青い番号帯、右に本文と図。 - 申込の流れは左にテキスト、右に丸いイラストを置き、下向き三角で繋ぐ。 - 規約はスクロールできる枠に収める。 ## Elevation & Depth - CTAボタンは右下に淡い同系色の影をずらして重ねる（ぼかしなし）。 - カードは影なしで白い面と細い線だけで分ける。 - FVの告知パネルには薄いドロップシャドウ。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品写真は不定形の丸みやひし形に切り抜き、少しずらした色の縁取り線を重ねる。 - **セクション境界**: チェック柄の帯や、ゆるい波の形でセクションを区切る。 - 主CTAは角丸ごく小さめの長方形。 - 特長カード内の「詳しく見る」はピル型。 - 特典番号はリボン型のタブ。 - 機種選択タブは角丸の正方形。 ## Components - **申込ボタン**（`button-primary`）: 朱色の長方形で、再生アイコン＋文字＋書類アイコン。右下にずれた淡い影。 - **商品詳細ボタン**（`button-product`）: 商品のブランド色の帯ボタン。右端に＋、ずれた影付き。 - **特典価格バナー**（`price-banner`）: 紺のテクスチャ帯に白い見出しとオレンジの特大価格、丸い「初回限定」バッジ。 - **特典カード**（`benefit-card`）: 白いカードの左上に青いリボン型の番号タブ。図と灰色の料金ボックス。 - **プラン比較表**（`plan-table`）: 2列の表。列見出しは水色とピンクの色帯、イラスト入り。料金はオレンジ。 - **特長カード**（`feature-card`）: 左に青い縦帯で番号、右に青・オレンジの見出しと図、下にピル型の青ボタン。 - **申込の流れ**（`step-item`）: Stepの欧文番号と本文、右に丸い白背景のイラスト。間を水色の下向き三角で繋ぐ。 - **問い合わせ枠**（`contact-box`）: 青い見出し帯と青枠の箱。WEBと電話を点線で上下に分ける。 ## Do's and Don'ts **Do** - 前半は暖色チェック柄、後半は青系に切り替えて訴求と信頼を分ける。 - 価格の数字はオレンジで特大にし、注記を小さく添える。 - 朱色のCTAを各セクションの終わりに入れる。 - 商品写真には不定形の切り抜きと色の縁取り線を使う。 - イラストは青い線と淡い色のフラットなものにそろえる。 **Don't** - CTAの朱色を見出しや装飾に使わない。 - 後半の情報セクションにチェック柄を広げない。 - 影をぼかして強くしない。 - 本文を詰めすぎない。 - 原色の強いグラデーションを使わない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（必ずもらえるプレゼントと期間・価格を伝える）: 食卓の写真の上に告知パネル（期間・初回価格）と、2つの商品の六角形ラベルを重ねる。 2. **キャンペーン概要とナビ**（条件を伝え、ページ内を案内する）: 生成り地にチェック柄の縁、商品名をマーカー強調。下に4つのアンカーと朱色CTA。 3. **プレゼント商品紹介**（選べる2商品の魅力を伝える）: 商品ごとに不定形の写真、ロゴ、説明、ブランド色の詳細ボタン。間をチェック柄の帯で区切る。 4. **新規特典**（初回価格と特典の内容で得を示す）: 紺の価格バナー、番号タブ付き特典カード2枚、合計のお得額を大きく。 5. **プラン比較**（2つのプランの違いを示す）: 2列の比較表。色帯の見出しとイラスト、料金はオレンジ、下に注釈。 6. **機種紹介**（サーバーとボトルの選択肢を示す）: 水色地に白カード。角丸タブで機種を選び、スライダーで写真・説明・月額を表示。 7. **サービスの特長**（品質と安心を伝える）: 青い番号帯付きの横長カードを3枚縦に並べる。 8. **申込の流れ**（手続きの簡単さを示す）: 3ステップを丸いイラストと三角矢印で繋ぎ、最後にCTA。 9. **キャンペーン規約**（条件と注意事項を示す）: 白地に中央見出し、スクロール枠の規約文。 10. **問い合わせ・フッター**（相談窓口と会社情報を示す）: 青枠の問い合わせ箱、ロゴとSNS丸アイコン、リンク一覧、青いコピーライト帯。 ## Imagery - 商品は木のテーブルにチェックのランナーを敷き、果物・炭酸水・料理と並べた秋の食卓写真にする。 - 商品単体は白い背景の切り抜きで正面から撮る。 - 人物とアイコンは青い線のフラットイラスト、肌と髪は淡い色。 - スタッフは制服姿で笑顔、丸い水色背景に切り抜く。 - 装飾として小さな丸の線や点線の吹き出しを散らす。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅約900pxで中央に置く。 - 商品紹介は写真とテキストの左右2カラムにし、交互に並べる。 - 特典カードと特長カードは横に2〜3枚並べる。 - 申込の流れは3ステップを横に並べ、右向き三角で繋ぐ。 - 問い合わせ枠はWEBと電話を左右に分ける。 - FVは横長の写真の中央に告知パネルを置き、ナビの右にCTAを並べる。 ## 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-b729a62e`（元 LP の URL から採番） - **元 LP**: https://www.aquaclara.co.jp/ndg/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。