--- version: alpha name: Soft Pink Character Collab Campaign LP description: 淡いピンクの地色に、山吹色の番号付きピル見出し・こげ茶の手順ボックス・水色のボタンを合わせたキャンペーン LP。丸みのある太いゴシックとゆるいキャラクターイラストで、かわいく親しみやすく見せる。 colors: primary: '#FDC24C' background: '#FFDDDE' background-alt: '#FFF1F1' surface: '#FEFEFE' secondary: '#ABD9F2' dark-section: '#766659' text: '#584B4B' on-dark: '#FEFEFA' cta: '#ABD9F2' on-cta: '#4A4040' accent-1: '#E60012' tint-1: '#FFDADF' accent-2: '#F08200' typography: display: fontFamily: Kosugi Maru fontSize: 28px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.12em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 30px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.02em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-sm: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.06em body-lg: fontFamily: Zen Maru Gothic fontSize: 16px fontWeight: 700 lineHeight: 1.7 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Fredoka fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.2em label-button: fontFamily: Zen Maru Gothic fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em rounded: sm: 12px md: 24px lg: 32px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-numbered-pill: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.full}' height: 84px step-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 420px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 88px button-accordion: backgroundColor: '{colors.secondary}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px button-outline: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 60px card-venue: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 440px notice-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.note}' rounded: '{rounded.md}' height: 380px label-chip: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px period-box: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 150px --- # DESIGN.md — 桜ピンク×山吹のキャラコラボ旅キャンペーン LP（Soft Pink Character Collab Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: かわいい、やさしい・柔らかい、ポップ・元気、親しみ・手作り感 - **キーワード**: 淡ピンク地・山吹のピル見出し・こげ茶の手順枠・水色ボタン・波形の区切り・ゆるキャラ - **地の質感**: ベタ塗りのフラットな面。影はほぼなく、白カードと淡いピンクの濃淡で段差をつける - **形**: 大きな角丸カード、ピル型ボタン、波形のセクション境界、破線のアーチ見出し - **温度感**: 暖かい。ピンクと山吹が中心で、水色を少しだけ差して爽やかさを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FDC24C` | 番号付き見出しピルの山吹色 | 3% | 画素の実測 | | `background` | `#FFDDDE` | メインのピンク地 | 30% | 画素の実測 | | `background-alt` | `#FFF1F1` | ごく淡いピンクのセクション地 | 30% | 画素の実測 | | `surface` | `#FEFEFE` | カード・手順ボックスの白 | 20% | 画素の実測 | | `secondary` | `#ABD9F2` | 水色のボタン・期間ボックスの枠 | 3% | 画素の実測 | | `dark-section` | `#766659` | 手順ボックスの見出し帯・枠線 | 3% | 画素の実測 | | `text` | `#584B4B` | 見出し・本文のこげ茶グレー | 4% | 画素の実測 | | `on-dark` | `#FEFEFA` | 茶色の帯の上の白文字 | 0% | 画素の実測 | | `cta` | `#ABD9F2` | 主 CTA の水色ボタン | 1% | 画素の実測 | | `on-cta` | `#4A4040` | CTA 上のこげ茶文字 | 0% | 推定 | | `accent-1` | `#E60012` | 注意書きの赤文字と赤枠 | 1% | 推定 | | `tint-1` | `#FFDADF` | 地域ラベル・下線の濃いピンク | 1% | 画素の主要色に補正 | | `accent-2` | `#F08200` | 上に戻るボタン・ロゴのオレンジ | 0% | 推定 | - 地色は濃いピンク（#FFDDDE）と淡いピンク（#FFF1F1）を大きなセクション単位で交互に使い、境目は波形にする - 企画ごとの大見出しには山吹色のピルを使い、ほかの場所では山吹色を多用しない - 手順ボックスは白地＋こげ茶の太枠とこげ茶の見出し帯で固定する - ボタンは水色の塗りか、白地＋こげ茶枠／水色枠の 2 系統だけにする - 文字は真っ黒を避け、温かみのあるこげ茶グレーで統一する - 赤は注意書きの文字と枠だけに使う ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 番号付きピル見出しのメイン行 | 丸ゴシック | Kosugi Maru | 700 | 28px | 1.3 | 0.12em | | `headline-lg` | 開催期間など大きな日付 | ゴシック | Zen Kaku Gothic New | 900 | 30px | 1.5 | 0.02em | | `headline-md` | 特典名・会場名の見出し | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.5 | 0.08em | | `headline-sm` | 手順の各ステップ文・帯見出し | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.5 | 0.06em | | `body-lg` | リード文（中央揃え） | 丸ゴシック | Zen Maru Gothic | 700 | 16px | 1.7 | 0.08em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.03em | | `accent` | 英字のアーチ見出し・STEP の表記 | 欧文サンセリフ | Fredoka | 600 | 14px | 1.2 | 0.2em | | `label-button` | ボタンの文字 | 丸ゴシック | Zen Maru Gothic | 700 | 17px | 1.4 | 0.08em | - 見出しとリード文は太い丸ゴシックで中央揃えにする - 見出しは字間を 0.08〜0.12em と広めにとり、ゆったり見せる - ピル見出しは小さなサブ行と大きなメイン行の 2 段にする - STEP の表記は欧文を小さくし、数字だけを大きくする - 注釈は 12px 前後で左揃えにし、行頭に※を付ける - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - カード・ボタンは左右に約 22px の余白をとって中央に置く - 大きなセクションの境目に波形の区切りとキャラクターを置く - カード同士の間は 16〜20px 空ける - ボタンの幅は画面の 60〜90% で中央に置く - メディア見出しは破線＋アーチ状の英字で区切る ## Elevation & Depth - 影はほぼ使わず、地色との差でカードを浮かせる - 期間ボックスだけ水色の太枠と紙めくれ風の角をつける - フレーム風の写真には小さな落ち影と白いフチを付けてもよい ## Shapes - **角丸**: 小 12px ／ 中 24px ／ 大 32px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸なしの四角。特典画像は切り抜きにし、背景に大きな円をしく - **セクション境界**: ゆるい波形の曲線。メディア見出しは破線がアーチ状に盛り上がる形 - ボタン・見出しはすべてピル型にする - カードは 24〜32px の大きな角丸にする - 番号は白い吹き出し型の円にし、ピルの左上に重ねる - 地域ラベルは淡いピンクの円形吹き出しにする ## Components - **番号付き企画見出し**（`heading-numbered-pill`）: 山吹色のピルに白フチを付け、左上に白い吹き出し型の番号を重ねる。文字は 2 段 - **手順ボックス**（`step-box`）: こげ茶の見出し帯＋白地の太枠ボックス。STEP の行をこげ茶の線で区切る - **主 CTA ボタン**（`button-primary`）: 水色の大きなピル。右に白い三角、上にキャラクターを乗せる - **開閉ボタン**（`button-accordion`）: 水色のピルに、文字＋下向き三角 - **外部リンクボタン**（`button-outline`）: 白地のピルにこげ茶か水色の枠線。左にピンの地図アイコン、右に別窓アイコン - **会場カード**（`card-venue`）: 白い角丸カード。左上に地域吹き出し、ピンクの下線付き見出し、時間、注釈を並べる - **注意ボックス**（`notice-box`）: 白地に赤い細枠の角丸。中の文字も赤 - **日付・回次チップ**（`label-chip`）: 白か淡いピンクの小さなピルに日付や第◯弾を入れる - **開催期間ボックス**（`period-box`）: 水色の太枠＋右下がめくれた紙風。上に水色のタブ見出しを付ける ## Do's and Don'ts **Do** - ピンク 2 色の地を交互に使い、境目は波形にする - 企画ごとに山吹の番号付きピルで始める - 手順は STEP1〜4 のこげ茶枠ボックスでまとめる - セクションの区切りにキャラクターイラストを 1 体置く - 画像の下に『※イメージ』などの注釈を小さく添える **Don't** - 純黒の文字や彩度の高い原色の面を使わない - 角張ったボタンやカードを作らない - 強い影やグラデーションを使わない - 山吹色を本文や細かい装飾に広げない - 赤を注意書き以外に使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（企画名と世界観を伝える）: 空と海と乗り物のイラストに、手書き風のオレンジのタイトルを重ねる。右上にハンバーガーメニュー 2. **導入と開催期間**（企画の趣旨と期間を示す）: 中央揃えのリード文と、紙めくれ風の期間ボックス 3. **コンテンツ目次**（3 つの企画へ移動させる）: アーチ状の英字＋破線の下に、番号付きの山吹ピルを 3 つ縦に並べ、右端に下向き三角 4. **企画 1 デジタル特典**（特典の内容と入手手順を説明する）: 大きな円の背景に特典画像を並べ、手順ボックス、水色の主 CTA、赤枠の注意を続ける 5. **企画 2 ノベルティ特典**（期間ごとのグッズを紹介する）: 白い角丸カードに回次チップ、品名、商品画像、引換期間をまとめる 6. **引換方法と会場**（引き換えの手順と場所を示す）: 手順ボックスの後に水色ピルの見出しを置き、地域別の会場カードを縦に積む 7. **注意事項**（規約を伝える）: 水色ピルの見出しと、小さい文字の注釈リスト 8. **企画 3 沿線イベント**（各地のイベントを紹介する）: 地域吹き出し＋下線見出し、日付チップ、写真、外部リンクボタンを繰り返す 9. **SNS プレゼント**（投稿キャンペーンへの参加を促す）: アーチ状の英字見出し、白カードに賞品画像、応募手順ボックス、応募ボタン 10. **関連情報**（関連作品と公式サイトへ誘導する）: 白カードにポスター画像を入れ、白いピル型の外部リンクを 2 つ置く 11. **フッター**（注記と問い合わせ先を示す）: 注釈文、下線リンク、オレンジの上に戻るボタン、灰色帯にコピーライト ## Imagery - 太い黒の輪郭線に頬のピンクを入れた、ゆるいキャラクターイラストを使う - セクションの区切りに、制服などテーマに合う衣装のキャラクターを 1 体ずつ置く - グッズは白背景の切り抜きにし、大きな淡ピンクの円の上に並べる - イベント写真は明るい実写を四角くトリミングし、虫眼鏡などの装飾を添える - 空は水色、雲は白のフラットな背景イラストにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では本文幅を約 700px に絞り、中央に置く - PC では目次ピルを 2＋1 の横並びにする - PC では手順ボックスを 4 列か 2×2 のグリッドにし、縦線で区切る - PC では特典を大きな円の中にまとめ、キャラクターを左右に散らす - PC では写真を 3 枚横に並べる ## 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-a464224c`（元 LP の URL から採番） - **元 LP**: https://recommend.jr-central.co.jp/tsutsuurauratabi/ - **解析に使った画像**: 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/）からご連絡ください。