--- version: alpha name: Deep Navy Teal Youth Campaign LP description: 濃紺の地にティールと中紺の帯セクションを重ね、黄色のピル型ボタンとマーカーで要所を強調する、若者向けの食品キャンペーン LP。中央寄せの 1 カラムに白いカード、動画サムネイル、線画アイコンの 3 ステップを並べる構成。 colors: primary: '#00287D' secondary: '#0B9F93' background-alt: '#104881' cta: '#FDEC01' on-cta: '#00287D' surface: '#FEFEFE' accent-1: '#2B7DB4' accent-2: '#13948C' on-dark: '#FCFDF2' dark-section: '#010101' text: '#1A1A1A' background: '#FFFFFF' typography: display: fontFamily: Dela Gothic One fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 900 lineHeight: 1.2 headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.05em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em accent: fontFamily: Montserrat fontSize: 36px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em rounded: sm: 2px md: 6px lg: 10px full: 999px spacing: unit: 8px card: 16px section: 56px 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.full}' height: 44px campaign-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 200px corner-tag: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 28px marker-highlight: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' height: 22px step-icons: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 120px announce-box: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px video-thumb: textColor: '{colors.on-dark}' height: 200px share-buttons: textColor: '{colors.on-dark}' rounded: '{rounded.full}' height: 32px --- # DESIGN.md — 紺×ティール×黄の学生応援キャンペーン LP（Deep Navy Teal Youth Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 力強い・インパクト、ポップ・元気、スポーティ - **キーワード**: 濃紺ベース・ティールの帯・黄色マーカー・中央寄せ 1 カラム・動画中心・太い白見出し - **地の質感**: ベタ塗りのフラットな面。グラデーションや質感は使わない。 - **形**: 角丸の白カード、ピル型ボタン、角ばった黄色タグ。 - **温度感**: 寒色ベースに黄色で熱を足す。若く元気な印象。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00287D` | ページの基本地色（濃紺） | 39% | 画素の実測 | | `secondary` | `#0B9F93` | 第 2 キャンペーンの帯セクション地色（ティール） | 13% | 画素の実測 | | `background-alt` | `#104881` | 第 1 キャンペーンの帯セクション地色（中紺） | 13% | 画素の実測 | | `cta` | `#FDEC01` | ピル型ボタン・マーカー・タグの黄色 | 2% | 画素の実測 | | `on-cta` | `#00287D` | 黄色ボタン上の文字色 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | 案内カードの白い面 | 5% | 画素の実測 | | `accent-1` | `#2B7DB4` | カード内の青系見出し・ボタン | 0% | 画素の実測 | | `accent-2` | `#13948C` | カード内のティール見出し・ボタン | 0% | 画素の実測 | | `on-dark` | `#FCFDF2` | 濃色地上の白文字 | 2% | 画素の主要色に補正 | | `dark-section` | `#010101` | 告知用の黒いボックス | 2% | 画素の実測 | | `text` | `#1A1A1A` | 白カード上の本文黒 | 0% | 推定 | | `background` | `#FFFFFF` | フッターの淡いグレー地 | 1% | 画素の実測 | - 基本地は濃紺。企画ごとにティールと中紺の全幅帯で区切る。 - 黄色はボタン・マーカー・角ばったタグだけに使う。 - 濃色地では文字をすべて白にする。 - 白カードの中は黒文字。企画ごとにティールか青を見出しとボタンに使う。 - 黒ボックスは最重要の告知だけに使う。 - フッターだけ淡いグレー地にする。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し（筆圧の強い太字） | 装飾・ディスプレイ | Dela Gothic One | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | セクションのロゴ型見出し | ゴシック | Noto Sans JP | 900 | 30px | 1.2 | 0.0em | | `headline-md` | キャンペーン名・小見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.05em | | `headline-sm` | 概要や動画タイトル | ゴシック | Noto Sans JP | 700 | 15px | 1.5 | 0.03em | | `body-md` | 本文・期間表記 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.03em | | `note` | 注釈・ステップ説明 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ピル型ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.1em | | `accent` | 英字ロゴ風の大きな文字 | 欧文サンセリフ | Montserrat | 900 | 36px | 1.0 | -0.02em | - 見出しも本文もすべて中央寄せにする。 - 見出しは極太ゴシックで、白抜きにする。 - 強調する語は黄色マーカー帯の上に紺文字で置く。 - ボタン文字は太字にして、字間を広めにとる。 - 注釈は 10px 程度に小さくし、ステップの下へ添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。ステップアイコンだけ 3 列に並べる。 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 56px、基本単位 8px、カード内 16px（375px 幅換算） - 本文ブロックは中央に寄せ、幅を狭めに保つ。 - 企画セクションは右上に黄色タグを置き、帯の上端に接して配置する。 - 動画サムネイルはコンテンツ幅いっぱいに置く。 - セクションの末尾にピル型ボタンを 1 つ置く。 - カードは縦に 16px 間隔で積む。 ## Elevation & Depth - 影はほぼ使わず、フラットにする。 - 白カードは影なしの角丸だけで、地色との差で浮かせる。 ## Shapes - **角丸**: 小 2px ／ 中 6px ／ 大 10px。ボタンはピル型。 - **写真の切り抜き**: 16:9 の動画枠。角丸はなし。 - **セクション境界**: 直線で全幅の色帯を切り替える。 - ボタンはすべてピル型にする。 - タグは角ばった長方形にする。 - 吹き出しバッジは白い楕円にする。 ## Components - **黄色ピルボタン**（`button-primary`）: セクション末尾に置く主 CTA。 - **企画案内カード**（`campaign-card`）: 白地の角丸カード。ロゴ型見出し・説明・色付きピルボタンを入れ、右上に弾数タグを付ける。 - **角タグ**（`corner-tag`）: セクション右上やカード右上に付ける、開催状況のラベル。 - **黄色マーカー**（`marker-highlight`）: 景品など重要な語の背面に敷く黄色の帯。 - **3 ステップ線画アイコン**（`step-icons`）: 白い線画アイコンを 3 列に並べ、下に番号付きの説明を添える。 - **黒い告知ボックス**（`announce-box`）: 黒地の角丸に、ロゴと白い太字の宣言文を入れる。 - **動画サムネイル**（`video-thumb`）: 中央に白い再生アイコンを置く 16:9 の枠。 - **SNS シェア丸ボタン**（`share-buttons`）: 黒・緑・青の丸アイコンを 3 つ横に並べる。 ## Do's and Don'ts **Do** - 濃紺を基本の地にし、企画ごとにティールと中紺の帯で区切る。 - CTA とマーカーは黄色に統一する。 - 要素はすべて中央寄せにする。 - 動画は再生アイコン付きの 16:9 枠で見せる。 - 手順は白い線画アイコンを 3 列に並べて見せる。 **Don't** - パステル色やグラデーションを使わない。 - 黄色を広い面に塗らない。 - 左寄せの長文レイアウトにしない。 - 角ばったボタンにしない。 - 白地のセクションを多用しない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ロゴと企画のリンクを置く）: 濃紺の細い帯の左にロゴ、右に縦線区切りのテキストリンクを並べる。 2. **ファーストビュー**（企画の趣旨をひと目で伝える）: 屋外の全幅写真の上に、白い極太の大見出しとロゴ見出しを重ねる。 3. **企画案内カード**（各企画へ誘導する）: 濃紺地に白カードを 2 枚、縦に積む。 4. **第 2 企画の詳細**（募集内容を説明する）: ティールの帯に角タグ・ロゴ見出し・動画・マーカー付きの説明を置く。 5. **キャンペーン概要**（期間と手順を示す）: 期間のテキストと 3 ステップの線画アイコンを並べ、黒い告知ボックスと黄色ボタンで締める。 6. **第 1 企画の詳細**（過去企画の報告）: 中紺の帯に、同じ構成でステップ・告知ボックス・動画・ボタンを並べる。 7. **出演者紹介**（起用人物を紹介する）: 写真 2 枚の間に小さな白文字のプロフィール文を挟む。 8. **シェア・商品ラインナップ**（拡散と商品の訴求）: SNS の丸ボタンを並べ、白枠のロゴの下に商品パッケージを 2 段で並べる。 9. **お問い合わせ**（事務局の案内）: 電話番号と受付時間を、白文字の中央寄せで小さく並べる。 10. **コンセプト・再案内**（趣旨を語り、再び誘導する）: 見出しとリード文、動画を置き、案内カードを 2 枚並べる。 11. **フッター**（規約と著作権表記）: 淡いグレー地の左に小さなリンク、右に社名を置く。 ## Imagery - 屋外の青空の下で撮った、ハイコントラストで彩度高めの写真。 - 被写体が商品を飲むなど、動きのある瞬間を切り取る。 - アイコンは白い太線の線画で、塗りは使わない。 - 商品パッケージは切り抜いて横一列に並べる。 - 手書き風のロゴ文字を写真に重ねて動きを出す。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - 元の PC 版も中央寄せの狭い 1 カラムで、SP とほぼ同じ構成になっている。 - SP では本文の幅を 88% 程度に広げる。 - SP ではヘッダーのリンクを省略するか、ハンバーガーメニューにまとめる。 - 商品パッケージの並びは SP で 4 列程度に折り返す。 - FV の見出しは SP で 40px 程度に縮める。 ## 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-0f344e28`（元 LP の URL から採番） - **元 LP**: https://www.morinaga.co.jp/in/know/gakko/ - **解析に使った画像**: PC（PC版） - **確度**: 色 高（9/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。