--- version: alpha name: Pastel Spring Gift Campaign LP description: 水色の地に白い縦長カラムを置き、パステル4色の傾いた紙片カードを重ねた春のプレゼントキャンペーンLP。黒い極太イタリック英字見出しと赤のピル型CTAでメリハリを付けている。 colors: background: '#B1E7F3' surface: '#FEFEFD' background-alt: '#F2F2F2' primary: '#FE0000' cta: '#F72E36' on-cta: '#FFFFFF' text: '#191919' text-body: '#333333' accent-1: '#FDE27D' accent-2: '#F2B5BA' accent-3: '#83CDCA' tint-1: '#9FC2E2' line: '#222222' cta-accessible: '#EC0912' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.15 letterSpacing: 0.02em headline-lg: fontFamily: Montserrat fontSize: 36px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-md: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 900 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 8px md: 14px lg: 24px full: 999px spacing: unit: 8px card: 16px section: 24px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.full}' height: 36px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px anchor-nav: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 32px section-title: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 60px prize-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 180px step-block: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 110px message-card: backgroundColor: '{colors.accent-1}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 160px date-band: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 40px --- # DESIGN.md — 水色×パステル紙片の春ギフトキャンペーンLP（Pastel Spring Gift Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: ポップ・元気、やさしい・柔らかい、親しみ・手作り感 - **キーワード**: 水色の地・白い縦長カラム・傾いたパステル紙片・極太イタリック英字・赤のピルCTA・手紙・ギフト - **地の質感**: フラットな塗りに、紙片カードの柔らかいドロップシャドウ。グラデーションは使わない - **形**: 角丸の大きい白カラム、数度傾けた角丸カード、ピル型ボタン - **温度感**: 春らしく明るい。赤がアクセントになったやや暖かめのパステル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#B1E7F3` | ページ全体の地の水色 | 42% | 画素の実測 | | `surface` | `#FEFEFD` | 中央の白いコンテンツカラム | 16% | 画素の実測 | | `background-alt` | `#F2F2F2` | ステップのアイコン枠、Wチャンス面のグレー | 8% | 画素の実測 | | `primary` | `#FE0000` | ロゴ、FVの強調文字、帯 | 3% | 画素の実測 | | `cta` | `#F72E36` | 主ボタンの赤 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 赤ボタン上の文字 | 0% | 画素の主要色に補正 | | `text` | `#191919` | 見出し・英字見出し | 2% | 画素の実測 | | `text-body` | `#333333` | 本文 | 2% | 推定 | | `accent-1` | `#FDE27D` | 紙片の黄色、A賞の面 | 5% | 画素の実測 | | `accent-2` | `#F2B5BA` | 紙片のピンク、B賞の面 | 5% | 推定 | | `accent-3` | `#83CDCA` | 紙片のミントグリーン、C賞の面 | 4% | 画素の実測 | | `tint-1` | `#9FC2E2` | 紙片のくすみブルー | 3% | 画素の実測 | | `line` | `#222222` | 区切り線・アウトラインボタン枠 | 0% | 推定 | | `cta-accessible` | `#EC0912` | AA を満たす補正値（計算） | | 計算 | - ページの地は全面水色。コンテンツは中央の白カラムにまとめる - 黄・ピンク・ミント・ブルーのパステル4色を紙片やカードに順番に使う - 赤はロゴ、FVの強調語、CTAボタン、矢印丸アイコンに限る - 見出しは黒、本文は濃いグレー。色付きの文字は使わない - 賞ごとに面の色を変えて区切る（A黄、Bピンク、Cミント） - メッセージカードは4色を順番に使い、文字の下に同系色の罫線を引く - `button-primary` は文字 `#FFFFFF` × 背景 `#F72E36` のコントラスト比が 3.89:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#EC0912`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのメインタイトル | ゴシック | Dela Gothic One | 900 | 44px | 1.15 | 0.02em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Montserrat | 900 | 36px | 1.0 | -0.02em | | `headline-md` | リード見出し・賞名 | ゴシック | Noto Sans JP | 700 | 17px | 1.5 | 0.02em | | `headline-sm` | 英字見出しの下の和文サブ見出し、ステップ名 | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.8 | 0.03em | | `note` | 注釈・スペック | ゴシック | Noto Sans JP | 400 | 9px | 1.6 | 0.02em | | `accent` | ステップ番号・賞のアルファベット | 欧文サンセリフ | Montserrat | 900 | 30px | 1.0 | 0.0em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 12px | 1.2 | 0.03em | - セクション見出しは極太イタリックの英字1語。下に小さい和文の太字サブ見出しを添える - FVのタイトルは極太ゴシック。強調語だけ赤にする - 本文は12px前後の細めのゴシックで、行間を広めに取る - ステップ番号は極太イタリックの2桁数字にし、枠の右上にかぶせる - 見出しも本文も左揃えにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。白カラムは幅約 68% で中央に置き、左右に水色の余白を残す - **本文ブロックの幅**: 画面幅の約 68% - **余白**: セクション間 24px、基本単位 8px、カード内 16px（375px 幅換算） - 白カラムは角丸の縦長パネル。セクションごとに区切って縦に並べる - カラムの外側にはパステルの紙片をはみ出させて重ねる - 賞のブロックは景品カードとギフトセットカードを×印でつなぐ2段構成 - 手順は、グレーのアイコン枠、見出し、本文、ボタンの順で縦に並べる - カラム内の余白は左右約 16px ## Elevation & Depth - 紙片や景品カードには、ぼかし大きめで薄いグレーの影を下方向に付ける - 白カラムには影を付けず、フラットにする - QUOカード風の白タイルにも柔らかい影を付ける ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 商品は切り抜きにし、白フチと影を付けて少し傾ける。人物はイラストの丸アイコンにする - **セクション境界**: 角丸の白パネルの切れ目と、賞の色面の上辺にある波形のカーブ - カードは±3〜8度ランダムに傾ける - ボタンは全てピル型。右端に丸い矢印アイコンを付ける - アイコン枠はグレーの角丸四角にする ## Components - **赤ピルCTA**（`button-primary`）: 赤地に白い太字。右端に白丸の黒矢印アイコンを付け、幅はカラムいっぱいにする - **アウトラインボタン**（`button-outline`）: 白地に黒い枠線と黒文字。右端に黒丸の白矢印を付ける。規約などのサブ導線に使う - **アンカー目次ボタン**（`anchor-nav`）: 白いピル型に黒い太字を置き、右端に赤丸の下矢印を付ける。パステルの紙片の上に4つ縦に並べる - **英字見出しセット**（`section-title`）: 極太イタリックの英字の下に、和文の太字サブ見出しを置く - **景品カード**（`prize-card`）: 白い傾いたカードに、切り抜きの商品写真、人物アイコン、名称、スペックを並べる - **手順ブロック**（`step-block`）: グレーの枠に赤×黒の線画アイコンを置き、右上に極太イタリックの番号を付ける - **メッセージ紙片**（`message-card`）: パステルの角丸カードを傾け、罫線の上に手紙風の文を載せる。影を付ける - **期間表示**（`date-band`）: 水色地の上に、極太イタリックの数字で期間を大きく表示する ## Do's and Don'ts **Do** - 地は水色、内容は白カラムという2層構造を守る - パステル4色の紙片を傾けて重ね、手紙のような軽さを出す - 英字見出しは極太イタリックで統一する - CTAは赤のピル型に右矢印の丸アイコンを付ける - 商品は切り抜き写真に白フチと影を付けて傾ける **Don't** - 赤を広い面に使わない（FVの帯とボタンに限る） - 濃い色の背景セクションを入れない - カードを全部水平に揃えない - 明朝体や細い英字を見出しに使わない - グラデーションや光沢の表現を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名とプレゼントの魅力を伝える）: 水色地に桜の装飾を散らし、極太タイトルの強調語を赤にする。下に人物イラストと景品の写真を置き、赤い帯を横に通す 2. **応募期間**（期間を明示する）: 極太イタリックの数字で中央に大きく置く 3. **導入・目次**（趣旨の説明と各セクションへの導線）: 白カラムにリード見出しと本文を置く。パステルの紙片の上に白いピルのアンカーボタンを4つ並べる 4. **プレゼント紹介**（賞の内容と当選者数を示す）: 英字見出しと説明イラストの後に、賞ごとに色面を変える。景品カードとギフトカードを×でつなぐ 5. **応募方法**（3ステップで手順を説明する）: 番号付きのグレー枠アイコン、見出し、本文の順で縦に並べる。1つ目のステップの下に赤いCTAを置き、最後は注釈とアウトラインボタンで締める 6. **Wチャンス**（SNSキャンペーンへ誘導する）: グレーのパネルに、傾いたカードのタイルをびっしり並べる。下に赤いCTAを置く 7. **寄せられたメッセージ**（共感を生み、参加を促す）: パステルの罫線入りカードを左右に傾けながら縦に積み重ねる 8. **シェア**（拡散を促す）: イタリックの英字見出しの下に、SNSの丸アイコンを3つ並べる ## Imagery - 人物は線画にパステルで塗った、太めの線の手描き風イラストにする - アイコンは黒い線画で、要所だけ赤く塗る - 桜の花びらは白とピンクのフラットなシルエットで散らす - 商品は切り抜きにし、白フチと影を付けて少し傾け、重ねて置く - 封筒やハートの小物を周りに散らす - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はファーストビューのタイトルとイラストを画面の左側に固定する - PC でも SP と同じ幅の白カラムを右寄りに置いてスクロールさせる - PC の背景は全面水色のまま。カラム以外は装飾を最小限にする - カラム内の構成と文字サイズは SP とほぼ同じにする ## 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-8eea0c3b`（元 LP の URL から採番） - **元 LP**: https://www.nichireifoods.co.jp/nichireisai/index.html - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。