--- version: alpha name: Aqua-to-Pink Gradient Anniversary Campaign LP description: 水色〜青〜ラベンダー〜ピンクの横グラデーション帯と白地を交互に置く、菓子ブランドの周年キャンペーン LP。斜体の欧文見出しと鮮やかなシアン文字で、爽快感とお祭り感を出す。イベントやキャンペーン、歴史の紹介をカード型ナビで並べ、各セクションへ誘導する。 colors: primary: '#0BADE9' background: '#FFFFFF' background-alt: '#F2FAFD' secondary: '#2D97DF' accent-1: '#E48ADA' tint-1: '#C2E6F9' cta: '#3A6FE0' on-cta: '#FFFFFF' accent-2: '#235ABD' text-body: '#222222' text-muted: '#C4C4C4' marker: '#F5F05A' on-dark: '#FFFFFF' dark-section: '#07317F' primary-accessible: '#087EAA' text-muted-accessible: '#767676' typography: display: fontFamily: Montserrat fontSize: 40px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.06em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-lg: fontFamily: Noto Sans JP fontSize: 17px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.04em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.08em rounded: sm: 8px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' nav-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 58px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-disabled: backgroundColor: '{colors.text-muted}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-heading: textColor: '{colors.primary}' typography: '{typography.display}' height: 120px info-box: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 200px label-pill: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px rotating-text: textColor: '{colors.tint-1}' typography: '{typography.note}' height: 140px sns-card: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.md}' height: 380px --- # DESIGN.md — 水色×ピンクのグラデ周年キャンペーン LP（Aqua-to-Pink Gradient Anniversary Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 清潔・爽やか、ポップ・元気、クール・先進的 - **キーワード**: 横グラデーション・斜体欧文見出し・シアン文字・白カードナビ・円形回転テキスト・爽快感 - **地の質感**: フラットな白地に、水色→青→紫→ピンクの横グラデ帯を重ねる。カードはやわらかい影で軽く浮かせる - **形**: 角丸 12px 前後のカード、ピル型ボタン、円形の SNS アイコン - **温度感**: クール寄りだが、ピンクで華やかさを足した明るい温度感 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0BADE9` | 見出し・本文・情報ボックスに使うブランドシアン | 7% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 37% | 画素の実測 | | `background-alt` | `#F2FAFD` | 歴史紹介・商品一覧の淡い水色地 | 9% | 画素の実測 | | `secondary` | `#2D97DF` | グラデ帯の中央の青 | 6% | 画素の主要色に補正 | | `accent-1` | `#E48ADA` | グラデ帯の右端のピンク紫 | 6% | 画素の実測 | | `tint-1` | `#C2E6F9` | グラデ帯の左端の淡い水色 | 4% | 画素の実測 | | `cta` | `#3A6FE0` | 詳細ボタン（水色→青→ピンクのグラデ）の中心色 | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#235ABD` | スライダー上の濃紺ピルラベル | 1% | 画素の実測 | | `text-body` | `#222222` | 歴史説明などの黒系本文 | 0% | 推定 | | `text-muted` | `#C4C4C4` | 準備中ボタン・準備中ボックスのグレー | 2% | 画素の実測 | | `marker` | `#F5F05A` | 数字を強調する黄色マーカー | 0% | 推定 | | `on-dark` | `#FFFFFF` | グラデ帯の上の白文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#07317F` | フッターのロゴ・リンクに使う濃紺 | 0% | 画素の実測 | | `primary-accessible` | `#087EAA` | AA を満たす補正値（計算） | | 計算 | | `text-muted-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | - 地は白が基本。ナビとキャンペーン告知は、左右の端まで届く水色→青→紫→ピンクの横グラデ帯にする - 見出し・日付・本文・リード文はシアン 1 色でそろえ、黒は歴史説明の本文だけに使う - グラデ帯の上の文字はすべて白にする - 情報ボックスはシアンの塗り＋白文字。準備中の要素はグレーのグラデにする - 数字の強調には黄色マーカーを 1 か所だけ使う - 濃紺はラベルピルとフッターだけに限定する - `nav-card` は文字 `#0BADE9` × 背景 `#FFFFFF` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#087EAA`、4.59:1）を使う。 - `button-disabled` は文字 `#FFFFFF` × 背景 `#C4C4C4` のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-muted-accessible`（`#767676`、4.54:1）を使う。 - `info-box` は文字 `#FFFFFF` × 背景 `#0BADE9` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#087EAA`、4.59:1）を使う。 - `sns-card` は文字 `#0BADE9` × 背景 `#FFFFFF` のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#087EAA`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの欧文見出し（斜体） | 欧文サンセリフ | Montserrat | 800 | 40px | 1.1 | 0.06em | | `headline-md` | セクションのサブタイトル（日本語） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.05em | | `headline-sm` | 日付表記 | 欧文サンセリフ | Noto Sans JP | 700 | 15px | 1.4 | 0.08em | | `body-lg` | 中央寄せのリード文 | ゴシック | Noto Sans JP | 500 | 17px | 1.7 | 0.05em | | `body-md` | シアン本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.8 | 0.04em | | `note` | ※注釈 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.02em | | `accent` | ナビカードの欧文ラベル（斜体） | 欧文サンセリフ | Montserrat | 700 | 17px | 1.2 | 0.02em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.0 | 0.08em | - 欧文見出しは太い斜体にし、字間を少し広げる - 見出しの左寄せ・右寄せをセクションごとに交互に入れ替え、リズムを作る - 見出しの下には日付、その下に日本語サブタイトルの順で置く - 本文もシアンで書き、黒は使いすぎない - グラデ帯の中の文字は中央揃えにする - グラデ帯の背景に、半透明の大きな欧文の透かし文字を置く - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ナビカードは 2 列グリッド、商品一覧は 4 列 - **本文ブロックの幅**: 画面幅の約 93% - **余白**: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は約 13px と狭め - セクションの区切りに、円形に回転する欧文テキストを配置する - グラデ帯は画面幅いっぱい、カードは内側の幅に収める - 画像とボックスは幅いっぱいの角丸カードにする - ボタンは横幅約 85% で中央に置く ## Elevation & Depth - 白カードにやわらかい影（0 4px 12px rgba(0,0,0,0.1)） - ボタンにも薄い影を付ける - 商品画像は影なしで並べる - 装飾として 3D の白いタブレット粒を浮かせる ## Shapes - **角丸**: 小 8px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 角丸の長方形。商品は切り抜きで配置 - **セクション境界**: 直線で切り替える（グラデ帯と白地の境界） - ボタンはピル型で、右端に＞矢印を付ける - ナビカードは角丸 10px の白カードにし、淡色の線画アイコンを透かしで入れる - SNS アイコンはシアンの塗りの円にする - 終了済みの項目には、斜めのピンクのスタンプを付ける ## Components - **セクションナビカード**（`nav-card`）: 白カードの中に斜体の欧文ラベルと短い日本語説明を置き、右に矢印を付ける。2 列で並べる - **グラデピルボタン**（`button-primary`）: 水色→青→ピンクのグラデーションのピル型ボタン。白文字で、右に矢印を付ける - **準備中ボタン**（`button-disabled`）: グレーのグラデーションのピル型ボタン - **斜体の欧文見出しブロック**（`section-heading`）: 大きなシアンの斜体の欧文見出し、日付、日本語サブタイトルの 3 段で構成する - **シアンの情報ボックス**（`info-box`）: シアンで塗った角丸ボックス。白の見出しとアイコン、または画像を中央に置く - **濃紺ラベルピル**（`label-pill`）: スライダー内で年代などを示す濃紺のピル - **円形の回転欧文**（`rotating-text`）: セクション名を円周に沿って並べた淡色の装飾テキスト - **SNS フォローカード**（`sns-card`）: キービジュアル画像の下に、シアンの円形 SNS アイコンを横に並べた線枠カード ## Do's and Don'ts **Do** - 見出しは斜体の太い欧文と日付をセットにする - グラデ帯は水色→青→紫→ピンクの順を守る - 文字の基本色はシアンにする - セクションの区切りに回転テキストや浮遊する粒を添える - 見出しの左寄せ・右寄せを交互に入れ替える **Don't** - 暖色の赤やオレンジを主役にしない - 明朝体を使わない - グラデ帯の上に濃い色の文字を置かない - ボタンを角張った四角にしない - 黒い背景のセクションを作らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（周年の世界観を伝える）: 青紫の空と雪山のイラストに、白の周年ロゴと短いコピーを重ねる。右上にハンバーガーメニュー 2. **コンテンツナビ**（各企画への入口を一覧で見せる）: グラデ帯の上に白の見出しを置き、白カードを 2 列で 9 個並べる。下部に大きな透かし欧文 3. **イベント**（体験イベントを告知する）: 左寄せの斜体見出し、日付、概要、角丸のゲーム画像、グラデボタンの順に置く 4. **サンプリング**（来場特典を伝える）: 右寄せの見出しの下に、シアンのボックスと「？」のシークレット画像を置く 5. **区切り帯**（リズムを切り替える）: 細いグラデ帯の上に、商品の切り抜きを斜めに配置する 6. **限定アイテム**（グッズ発売を告知する）: 見出しの下にシアンの本文、注釈、角丸の告知バナーを置く 7. **SNS キャンペーン**（SNS 応募企画を予告する）: シアンのボックスに SNS ロゴを入れ、下にグレーの準備中ボタンを置く 8. **グッズキャンペーン**（第 1 弾・第 2 弾の企画を告知する）: 全面グラデ帯の上に白文字を中央揃えで置き、バナーと準備中ボックスを縦に並べる 9. **ブランドヒストリー**（歴史を伝えて愛着を高める）: 白カードのスライダーに濃紺のピルラベルを付け、矢印ボタンと黒の本文、円形バッジを添える 10. **商品アーカイブ**（歴代商品の多さを見せる）: 淡い水色地にリード文を中央揃えで置き、黄色マーカーで数字を強調。商品画像を 4 列のグリッドで並べる 11. **SNS 誘導・フッター**（フォローを促す）: キービジュアル付きのカードに SNS アイコンを並べ、その下にリンクと社名ロゴ ## Imagery - 空・雪山・オーロラ風の光を描いた、青紫系のアニメ調背景イラスト - 商品パッケージは白背景の切り抜きで、斜めに傾けて浮かせる - 3D の白いタブレット粒を装飾として散らす - ナビカードには、淡いシアンの線画アイコン（再生・音符・ギフトなど）を透かしで入れる - 告知バナーは青基調の三角パターン背景に、太字の斜体日本語を載せる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央に約 60% 幅のコンテンツを置き、ナビカードは 4 列にする - PC では見出し・本文と画像を左右 2 カラムに並べ、セクションごとに左右を入れ替える - グラデ帯は PC でも画面幅いっぱいにする - 商品アーカイブは PC で 2 ブロックを横に並べ、8 列相当にする - ヒストリーは PC でスライダーと本文を横並びにする ## 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-8e25837a`（元 LP の URL から採番） - **元 LP**: https://www.mintia.jp/30th/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。