--- version: alpha name: Pop Pastel Character Voting Event LP description: キャラクターの人気投票イベント向けのLP。パステル調の水色・黄色・ピンク・薄紫の地に、太い紺色の縁取りと丸ゴシックを合わせている。紙吹雪・星・雲の装飾で全体を賑やかに見せる。ボタンもカードも紺の太線とオフセット影で囲み、ステッカーのような立体感を出す。 colors: primary: '#073D80' dark-section: '#0264B3' cta: '#FDF202' on-cta: '#064792' background: '#FCFCFC' background-alt: '#DDF1F8' surface: '#FFFFFF' accent-1: '#D30629' tint-1: '#F3EFFE' tint-2: '#FFF4D6' accent-2: '#FEEDF5' accent-3: '#93DDE1' marker: '#FEF202' on-dark: '#E4F5FA' typography: display: fontFamily: Dela Gothic One fontSize: 48px fontWeight: 400 lineHeight: 1.1 headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: M PLUS Rounded 1c fontSize: 20px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.03em body-lg: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 2.0 letterSpacing: 0.08em body-md: fontFamily: M PLUS Rounded 1c fontSize: 13px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.03em note: fontFamily: M PLUS Rounded 1c fontSize: 10px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 8px md: 16px lg: 28px full: 999px spacing: unit: 8px card: 24px section: 64px components: page: backgroundColor: '{colors.background}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-secondary: backgroundColor: '{colors.accent-3}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 38px button-link: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 34px countdown: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 40px info-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 300px banner-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 80px sns-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 60px product-tile: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.note}' rounded: '{rounded.md}' height: 110px --- # DESIGN.md — 紺縁取り×パステルのポップな投票イベントLP（Pop Pastel Character Voting Event LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、かわいい、親しみ・手作り感 - **キーワード**: パステル・紺の太縁・紙吹雪・雲と星・ステッカー風・お祭り感 - **地の質感**: 地はフラット。ドットパターンや網点を薄く敷き、コミック風の質感を出す - **形**: 角丸の大きい白カード、ピル型ボタン、波形の雲でセクションを区切る - **温度感**: 明るく暖かい。子ども〜大人のファン向けの陽気さ ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#073D80` | 見出し・縁取り・本文の紺 | 6% | 画素の実測 | | `dark-section` | `#0264B3` | フッターの青地 | 6% | 画素の実測 | | `cta` | `#FDF202` | 主ボタンの黄色 | 1% | 画素の実測 | | `on-cta` | `#064792` | 主ボタン上の文字 | 0% | 画素の実測 | | `background` | `#FCFCFC` | ファーストビュー・ゲーム帯の生成りグレー | 12% | 画素の実測 | | `background-alt` | `#DDF1F8` | スケジュール・お知らせ帯の水色 | 20% | 画素の実測 | | `surface` | `#FFFFFF` | カード・ボタン地の白 | 17% | 画素の実測 | | `accent-1` | `#D30629` | 強調の赤（小見出し・数字） | 1% | 画素の実測 | | `tint-1` | `#F3EFFE` | 特別賞の薄紫の帯 | 6% | 画素の実測 | | `tint-2` | `#FFF4D6` | 楽しみ方・推奨環境帯のクリーム | 8% | 画素の実測 | | `accent-2` | `#FEEDF5` | 告知・動画帯の淡ピンク | 6% | 画素の実測 | | `accent-3` | `#93DDE1` | サブボタン・装飾の水色 | 1% | 画素の実測 | | `marker` | `#FEF202` | イベント説明帯の鮮黄 | 5% | 画素の実測 | | `on-dark` | `#E4F5FA` | フッター文字の白 | 0% | 画素の実測 | - セクションごとに地色をパステルの水色・グレー・薄紫・クリーム・ピンクで切り替える - 文字と線は紺で統一する。黒は使わない - 赤は小見出し・日付・数量の強調だけに使う - 主ボタンは黄地に紺の文字。サブボタンは水色または白 - 最下部だけは濃い青地に白文字で締める - 紙吹雪や星には赤・黄・水色・ピンク・紫を混ぜる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ロゴ風の大見出し（画像化した立体文字） | 装飾・ディスプレイ | Dela Gothic One | 400 | 48px | 1.1 | 0.0em | | `headline-lg` | セクション見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.4 | 0.05em | | `headline-md` | カード内の小見出し（赤） | 丸ゴシック | M PLUS Rounded 1c | 800 | 20px | 1.4 | 0.03em | | `body-lg` | 中央揃えのリード文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 2.0 | 0.08em | | `body-md` | 日程表やリストの本文 | 丸ゴシック | M PLUS Rounded 1c | 700 | 13px | 1.8 | 0.03em | | `note` | ※から始まる注釈・著作権表記 | 丸ゴシック | M PLUS Rounded 1c | 700 | 10px | 1.6 | 0.03em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.2 | 0.1em | - 文字はすべて太めの丸ゴシックにする - リード文は中央揃えで短く改行し、行間を広めにとる - 見出しの左右に斜線のアクセント（\ //）を付けることがある - 語尾に♪や！を付け、話しかける口調にする - 大見出しは白い雲形と赤い立体文字の画像で表現する - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。グッズ紹介だけ 3 列グリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算） - セクションの上端を雲形の波で区切る - 白カードは左右 6% の余白をとって中央に置く - 見出しの横にキャラクターを重ねてはみ出させる - ボタンは中央揃えで幅 60〜90% - バナーリンクは横長カードを縦に積む ## Elevation & Depth - ぼかしのない影を使う。紺のベタ影を右下に 3〜4px ずらす - カードとボタンには紺の線を 2〜3px 引く - グラデーションの影やぼかした影は使わない ## Shapes - **角丸**: 小 8px ／ 中 16px ／ 大 28px。ボタンはピル型。 - **写真の切り抜き**: 商品は白地の角丸枠に置く。キャラクターは切り抜いてはみ出させる - **セクション境界**: 白またはパステルの雲形の波線 - ボタンはすべてピル型にして紺の縁を付ける - 情報カードは大きめの角丸で、紺の太線で囲む - SNSリンクはピル型の横長カードにし、左に丸アイコンを置く - 動画枠は角丸の長方形で中央に再生ボタンを置く ## Components - **黄色の主ボタン**（`button-primary`）: 黄色地のピル型に紺の縁とベタ影。左右に星のアイコンを置く - **水色のサブボタン**（`button-secondary`）: 水色地のピル型に紺の縁。主ボタンの下に置く - **白の矢印付きリンクボタン**（`button-link`）: 白地のピル型に紺の縁とベタ影。末尾に▶または外部リンクのアイコンを付ける - **残り日数の表示**（`countdown`）: 斜線で挟んだ一文の中で、数字だけを巨大な立体文字にする - **白の情報カード**（`info-card`）: 紺の縁の大きな角丸カード。赤い小見出しと紺の本文で日程などを並べる - **横長バナーカード**（`banner-card`）: ドット柄の地にキャラクター・紙吹雪・見出しを載せたリンク用バナー - **SNSリンクカード**（`sns-card`）: ピル型の白カード。左に黒丸のアイコン、右端に外部リンクのマークを置く - **グッズのタイル**（`product-tile`）: 3列並べる。商品は白い角丸枠に入れ、その下に紺の商品名を置く ## Do's and Don'ts **Do** - 紺の線とベタ影ですべての部品に統一感を持たせる - セクションごとにパステルの地色を変えてリズムを作る - 星・雲・紙吹雪を見出しの周りに散らす - 文章はやさしい話し言葉で中央揃えにする **Don't** - 黒文字や細い明朝体を使わない - ぼかした影やリアルなグラデーションを使わない - 角の立った四角いボタンにしない - 1 画面にくすんだ色や濃い色を広く使わない（フッターは例外） ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（イベントの賑わいとキービジュアルを見せる）: ロゴの下にキャラクターを集めたイラスト、立体文字のキャッチ、残り日数、黄色と水色のボタンを置く 2. **速報への導線**（最新の結果ページへ誘導する）: 白いドット地に短い見出しと、水色のピル型バナーを置く 3. **イベント概要**（企画の趣旨を説明する）: 集中線と黄色の爆発形の上に、中央揃えのリード文と白いリンクボタンを置く 4. **スケジュール**（期間と発表日を伝える）: 水色の地に白い角丸カードを置く。赤い小見出しの下に日付を表形式で並べる 5. **ミニゲーム**（参加特典を訴求する）: 立体文字のタイトル、赤で強調した数量、横長バナーを 2 つ置く 6. **特別賞**（記念企画を告知する）: 薄紫の地に見出し、中央揃えの説明、白いリンクボタンを置く 7. **関連コンテンツ**（ほかの楽しみ方へ誘導する）: クリーム色の地に、イラスト入りの横長バナーを 3 枚縦に積む 8. **お知らせ**（最新情報を一覧で見せる）: 白い角丸カードに日付とタイトルを並べる。キャラクターが端に顔を出す 9. **公式SNS**（フォローを促す）: 見出しの左右に集中線を置き、ピル型のSNSカードを 2 枚並べる 10. **おすすめグッズ**（物販へ送客する）: ドット柄の水色地に商品タイルを 3 列並べ、ショップへのボタンを置く 11. **推奨環境**（利用条件を案内する）: 白いカードに星アイコン付きの見出し、赤い OS 名、箇条書きを並べる 12. **新企画の告知と動画**（新しい投票方法を伝える）: ピンクの地に見出し、中央揃えの説明、角丸の動画枠を置く 13. **フッター**（問い合わせ先と権利表記）: 上辺がアーチ形の濃い青地に星柄を敷く。SNS の丸アイコン、白いボタン、白い小文字を置く ## Imagery - 2頭身のキャラクターを太い線と明るいベタ塗りで描き、網点の陰影を付ける - 四角や三角の紙吹雪、5角の星、もこもこの雲を画面全体に散らす - 集中線や爆発形の背景でお祭り感を出す - 見出し画像は白い雲形の中に赤い立体文字を入れ、紺で縁取る - 商品写真は白背景で切り抜いて使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCではSP版の1カラムを中央に置き、幅420〜480px程度に固定する - PCでは左右の余白にパステルの地色と装飾柄を敷く - グッズのタイルはPCで4列まで増やす - 文字サイズはSPの値を基準にし、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-49990b60`（元 LP の URL から採番） - **元 LP**: https://ranking.sanrio.co.jp/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（14/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。