--- version: alpha name: Strawberry Red Pink SNS Campaign LP description: 深い苺レッドと淡いピンクを交互に敷き、SNS 風のオレンジ〜紫グラデーションのボタンを効かせた投稿キャンペーン LP。欧文の筆記体見出しと黄色の下線テキストで、華やかで親しみやすい雰囲気にしている。 colors: primary: '#C30D23' background: '#FFFFFF' background-alt: '#F3CFD3' cta: '#BC2D85' on-cta: '#FFFFFF' accent-1: '#FEE925' secondary: '#36B3D8' text: '#333333' accent-2: '#C30D24' surface: '#FDFDFD' tint-1: '#EBB5BC' line: '#555555' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 36px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.02em accent: fontFamily: Yellowtail fontSize: 44px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.1em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 14px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-sns: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-red: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 48px more-banner: backgroundColor: '{colors.primary}' typography: '{typography.accent}' height: 72px script-heading: textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 100px check-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.primary}' typography: '{typography.note}' height: 24px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 320px prize-card: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 760px article-card: textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.md}' height: 300px --- # DESIGN.md — 苺レッド×桜ピンクのSNS投稿キャンペーンLP（Strawberry Red Pink SNS Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、ポップ・元気、情報量多め・訴求型 - **キーワード**: 苺レッド・淡ピンク地・SNSグラデーション・筆記体見出し・丸切り抜き写真・月替わりプレゼント - **地の質感**: ほぼフラットな単色面。FV だけピンクのストライプ地に写真をコラージュしている - **形**: 角丸カード、ピル型ボタン、円形の写真切り抜き、細い斜線の飾り - **温度感**: 暖色寄りで甘く華やか ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#C30D23` | 苺レッドのセクション地・カード | 13% | 画素の実測 | | `background` | `#FFFFFF` | 白の基本地 | 25% | 画素の実測 | | `background-alt` | `#F3CFD3` | 淡ピンクのセクション地 | 30% | 画素の実測 | | `cta` | `#BC2D85` | SNS風グラデーションボタンの中心色 | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#FEE925` | 赤地に乗る強調の黄色文字・下線 | 1% | 画素の実測 | | `secondary` | `#36B3D8` | ロゴや公式リンクの水色 | 1% | 推定 | | `text` | `#333333` | 見出し・本文の濃グレー文字 | 2% | 推定 | | `accent-2` | `#C30D24` | 見出しの赤文字・筆記体 | 0% | 画素の主要色に補正 | | `surface` | `#FDFDFD` | 白カード（応募方法枠） | 4% | 画素の実測 | | `tint-1` | `#EBB5BC` | 苺アイコンの薄ピンク装飾 | 0% | 画素の実測 | | `line` | `#555555` | カード枠線・区切り線 | 0% | 推定 | - 地の色は白→淡ピンク→苺レッドを交互に入れ替えて、セクションの区切りを色で示す - 赤地の上では白文字を基本にし、特に強調したい語だけ黄色＋下線にする - フォロー・投稿系の主ボタンはオレンジ→マゼンタ→紫のSNS風グラデーションにする - 見出しの小装飾や筆記体の英字は苺レッドの単色にする - 水色はロゴと公式リンクだけに使い、それ以外には広げない - 淡ピンク地の規約文は濃グレーの小さい文字で読ませる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのハッシュタグ大見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 36px | 1.2 | 0.02em | | `accent` | Point!/Present! など英字の筆記体見出し | 欧文スクリプト | Yellowtail | 400 | 44px | 1.1 | 0.0em | | `headline-lg` | 赤地の強調見出し・タグ表記 | 丸ゴシック | M PLUS Rounded 1c | 700 | 28px | 1.3 | 0.03em | | `headline-md` | セクション副見出し | 丸ゴシック | Zen Maru Gothic | 500 | 22px | 1.4 | 0.1em | | `body-md` | 説明本文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.03em | | `note` | 応募規約・店舗情報 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタン文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 20px | 1.2 | 0.05em | - 見出しは丸ゴシックでやわらかく見せる - 英字の筆記体と日本語の副見出しを上下に並べてセットにする - 本文の大事な語には下線を引いて強調する - 副見出しは字間を広めにとる - ボタン内では主語を大きく、補足語を小さく組む - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。関連記事と投稿写真だけ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - セクションは全幅の色帯で区切る - 見出しは中央揃え、規約文だけ左揃え - プレゼントは赤の角丸カードに、写真・数量バッジ・店舗情報をまとめる - 応募方法は白い角丸枠に番号付きの手順を書き、▼で次へつなぐ - セクションの上下には余白を広めにとる ## Elevation & Depth - ほぼフラットに作る - グラデーションのボタンにだけ、下側へ薄い影または濃い縁取りを付ける - カードは影なしで、枠線か色面で区切る ## Shapes - **角丸**: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: FVの写真は円形、投稿グリッドは角丸の正方形、主写真は白フチの長方形 - **セクション境界**: 直線で色を切り替える - ボタンはピル型 - 数量バッジは黄色の線で描いた円 - 見出しの両脇に細い斜線を置く - 吹き出しは手描き風の線で描く ## Components - **SNSグラデーションボタン**（`button-sns`）: オレンジ→紫のピル型ボタン。左にSNSアイコン、右に▶を置き、下に濃い影を付ける - **赤のサブボタン**（`button-red`）: 苺レッドのピル型ボタン。店舗アカウントへのリンクに使う - **moreバナー**（`more-banner`）: 赤の帯に白の筆記体 more と日本語の説明を重ねる - **筆記体見出しセット**（`script-heading`）: 赤の筆記体の英字の下に日本語の副見出しを置き、横に手描きの吹き出しを添える - **CHECKタグ**（`check-tag`）: 斜めに傾けた黄色の小ラベル。赤地の見出しの左上に重ねる - **応募方法カード**（`step-card`）: 白の角丸枠。赤のピル型見出し、丸数字の手順、▼の矢印、苺アイコンで構成する - **プレゼントカード**（`prize-card`）: 赤の角丸カード。黄色の下線付きタイトル、写真、黄色の円の数量バッジ、店舗情報を入れる - **関連記事カード**（`article-card`）: 角丸のサムネイルの下に小さい説明を中央揃えで置き、下に赤の細線を引く ## Do's and Don'ts **Do** - 赤とピンクを交互に使って、テンポよく区切る - 強調語は黄色＋波線や下線で目立たせる - 英字の筆記体見出しで手書きの華やかさを出す - 写真は苺や季節の素材を明るく彩度高めに見せる - 手順は番号と▼で一目でわかるようにする **Don't** - 寒色を広い面に使わない - グラデーションを主ボタン以外に乱用しない - 明朝体で硬い印象にしない - 赤地に黒文字を置かない - 角張ったボタンにしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名とプレゼントを一目で伝える）: ピンクのストライプ地に円形の写真と苺の素材を散らす。中央にロゴ、リボン帯、ハッシュタグの大見出し、黄色の円バッジを置く 2. **今月のテーマ**（月替わりのタグと当選率アップを訴える）: 赤の全幅地にCHECKタグを置く。白と黄色の文字に波線を添え、白フチの写真を載せる 3. **応募方法**（参加の手順を示す）: 淡ピンク地に白の角丸カードを置き、番号付きの手順とSNSボタンを入れる 4. **投稿のポイント**（投稿内容の例を示す）: 白地に筆記体の見出しと吹き出し、下線付きの本文、グラデーションボタン、手描きの指イラストを置く 5. **今月のプレゼント**（賞品の魅力を伝える）: 淡ピンク地に赤のカードを置き、写真、数量バッジ、店舗情報、赤ボタンを入れる 6. **フォロー誘導**（公式アカウントのフォローを促す）: 白地に赤の見出し、短い説明、SNSボタンを置く 7. **関連記事**（関連コンテンツへ回遊させる）: 淡ピンク地に斜線飾り付きの見出しを置く。2列の角丸サムネイルを並べ、下に more バナーを置く 8. **実績・投稿ギャラリー**（投稿数と雰囲気で参加意欲を高める）: グラデーションの帯で期間を告知し、横長の写真帯と2列の角丸グリッドを置く 9. **応募規約**（規約を明示する）: 淡ピンク地に小さい文字を左揃えで組み、番号付きの小見出しで区切る 10. **フッター**（運営元とリンクを示す）: 白地にロゴ、問い合わせ先、水色の下線リンクを中央揃えで置く ## Imagery - 苺やスイーツを明るい自然光でアップに撮り、彩度を高めにする - 人物は子どもや家族の笑顔を、体験中のスナップとして撮る - FVは切り抜いた苺と円形の写真をコラージュする - 線画の指や吹き出しなど、手描き風のアクセントを添える - 観光地や季節イベントの写真を角丸のグリッドで並べる - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは中央寄せの約760px幅で、セクションの色帯は全幅のまま - PCでは関連記事を3列、投稿グリッドを4列にする - PCの more バナーは横長の帯で、筆記体と文字を横に並べる - FVはPCで横長にし、写真を左右に散らす - 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-98eca7f1`（元 LP の URL から採番） - **元 LP**: https://verygoodlocal-tochigi.jp/tochigi-kibun/campaign25-26/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（7/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。