--- version: alpha name: Pastel Gradient Anime Character Campaign LP description: ピンクから水色へのグラデーションと黒の帯・縁取りを組み合わせた、アニメキャラクターの世界観を見せる企画 LP。細い欧文見出しを傾けた黒いラベルに入れ、アーチ型のキャラクターカードやハッシュタグのピル型チップで、ポップでありながら引き締まった印象にしている。 colors: primary: '#5BABC2' secondary: '#E495BD' accent-1: '#F26BC4' accent-2: '#A68BE0' accent-3: '#80B9CD' background: '#FFFFFF' background-alt: '#ECF9FA' dark-section: '#000000' on-dark: '#E1E4E0' text: '#000000' cta: '#FEFEFE' on-cta: '#030207' tint-1: '#E4E9EE' line: '#888888' accent-2-accessible: '#845FD4' typography: display: fontFamily: Josefin Sans fontSize: 62px fontWeight: 200 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Josefin Sans fontSize: 48px fontWeight: 300 lineHeight: 1.1 letterSpacing: 0.02em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 900 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.2em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 2.1 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.1 letterSpacing: 0.08em accent: fontFamily: DotGothic16 fontSize: 10px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em rounded: sm: 4px md: 12px lg: 999px full: 999px spacing: unit: 8px card: 8px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-tilted-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px hashtag-ticker: backgroundColor: '{colors.dark-section}' textColor: '{colors.accent-1}' typography: '{typography.accent}' height: 26px character-arch-card: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 290px hashtag-chip: backgroundColor: '{colors.background}' textColor: '{colors.accent-2}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px photo-tag-tile: textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 130px slider-carousel: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' height: 340px share-button: backgroundColor: '{colors.background}' textColor: '{colors.text}' rounded: '{rounded.full}' height: 60px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' height: 52px footer-dark: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 340px --- # DESIGN.md — ピンク×水色グラデのキャラクター企画 LP（Pastel Gradient Anime Character Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: クール・先進的、ポップ・元気、かわいい - **キーワード**: ピンク→水色グラデ・黒の帯とフチ・アーチ型カード・ハッシュタグ・細い欧文・架空都市 - **地の質感**: 白地とすりガラス風にぼかした都市写真に、パステルグラデと黒の太いフチを重ねる。全体はフラットで、影は黒いずらし影だけを使う - **形**: アーチ型の窓枠、傾けた長方形ラベル、ピル型チップ、正方形の写真を散らして置く - **温度感**: やや涼しい。ピンクで甘さを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#5BABC2` | グラデーション終点の水色。地図や見出しに使う | 8% | 画素の実測 | | `secondary` | `#E495BD` | グラデーション始点のピンク | 3% | 画素の実測 | | `accent-1` | `#F26BC4` | 見出しラベル後ろのマゼンタ板 | 1% | 推定 | | `accent-2` | `#A68BE0` | 見出しラベル後ろのラベンダー板 | 1% | 推定 | | `accent-3` | `#80B9CD` | ラベル後ろの空色板 | 1% | 画素の主要色に補正 | | `background` | `#FFFFFF` | 基本の白地 | 30% | 画素の実測 | | `background-alt` | `#ECF9FA` | 淡いミントがかったグラデ地（特典エリア） | 6% | 画素の実測 | | `dark-section` | `#000000` | フッターとハッシュタグ帯、カードのフチの黒 | 10% | 画素の実測 | | `on-dark` | `#E1E4E0` | 黒地の上の白文字 | 1% | 画素の実測 | | `text` | `#000000` | 本文と見出しの黒文字 | 2% | 画素の主要色に補正 | | `cta` | `#FEFEFE` | アプリ DL 枠ボタンの白地 | 1% | 画素の実測 | | `on-cta` | `#030207` | DL ボタンの文字と枠線 | 0% | 画素の主要色に補正 | | `tint-1` | `#E4E9EE` | 地図や都市写真に重ねる淡いグレー青 | 5% | 画素の実測 | | `line` | `#888888` | フッターの区切り線 | 0% | 推定 | | `accent-2-accessible` | `#845FD4` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にし、物語のセクションだけ水色がかった都市写真を全面に敷く - グラデーションはピンクから水色の一方向にそろえ、見出し文字・地図・ビジュアルに使う - 黒は帯・カードの縁取り・名前プレート・フッターで締め色として使う - 見出しラベルの後ろに差し色の板を 1 枚置き、セクションごとにマゼンタ・ラベンダー・空色を替える - ハッシュタグチップは文字と枠をパステルの各色にし、黒いずらし影を付ける - CTA は派手な色にせず、白地＋黒枠と黒いストアバッジで落ち着かせる - `hashtag-chip` は文字 `#A68BE0` × 背景 `#FFFFFF` のコントラスト比が 2.84:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#845FD4`、4.6:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の英字コピー（極細・巨大） | 欧文サンセリフ | Josefin Sans | 200 | 62px | 1.1 | 0.02em | | `headline-lg` | セクション英字見出し（グラデ文字） | 欧文サンセリフ | Josefin Sans | 300 | 48px | 1.1 | 0.02em | | `headline-md` | FV の和文キャッチ（白帯の上の太字） | ゴシック | Zen Kaku Gothic New | 900 | 24px | 1.5 | 0.1em | | `headline-sm` | キャラクター名プレート | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.3 | 0.2em | | `body-lg` | ストーリーの中央揃え本文 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 2.1 | 0.12em | | `body-md` | 説明文（左揃え） | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.1 | 0.08em | | `accent` | ハッシュタグ帯の等幅英字・写真上の縦書きタグ | 装飾・ディスプレイ | DotGothic16 | 400 | 10px | 1.2 | 0.05em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 500 | 10px | 1.7 | 0.03em | - 英字見出しは極細ジオメトリック書体にし、ピンク→水色のグラデで塗る - 和文は太めのゴシックで字間を広めにとる - 物語のセクションは中央揃え・短い改行で詩のように組む - 写真上のタグは # 付きの英字を縦に回転させて添える - 名前プレートは黒地に白の太字で、字間を広くとる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。キャラクターカードは主役 2 人を 1 列、その他を 2 列で並べる - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 8px（375px 幅換算） - 見出しラベルは中央付近に置き、-5° 前後傾ける - セクションの切り替えに黒いハッシュタグ帯（高さ約 26px）を横流しで挟む - 地域写真は左右交互にずらし、ジグザグに散らして置く - キャラクターカードは同じ大きさのアーチ型でグリッドに並べる - ハッシュタグのチップ帯を 2 段で横に流し、セクションの区切りにする ## Elevation & Depth - チップと SNS ボタンには、黒い塗りの影を右下に約 4px ずらして付ける（ぼかしなし） - 地域写真には淡いソフトシャドウを付ける - キャラクターカードの下に薄いグレーの影 - それ以外はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 999px。ボタンはピル型。 - **写真の切り抜き**: キャラクターは上辺が半円のアーチ窓で切り抜き、太い黒フチを付ける。地域写真は正方形に近い長方形 - **セクション境界**: 直線で切り替え、黒いハッシュタグ帯を境目に挟む - 見出しは傾けた長方形 2 枚（黒または白のラベル＋色板）を重ねて作る - 名前プレートは角を内側にえぐった装飾フレーム - チップと SNS ボタンは白地＋細い黒枠＋ずらし影 - DL ボタンは角丸なしの長方形の枠 ## Components - **傾き見出しラベル**（`heading-tilted-label`）: 黒か白の長方形を傾け、その中に極細グラデの英字を入れる。後ろに色板をずらして重ねる - **ハッシュタグ帯**（`hashtag-ticker`）: 黒い細帯に、ネオンカラーの等幅英字ハッシュタグを横に流す - **アーチ型キャラカード**（`character-arch-card`）: 黒い太フチのアーチ窓に、キャラごとの単色背景と立ち絵を入れる。下部に名前プレートを重ねる - **ハッシュタグチップ**（`hashtag-chip`）: 白いピル型にパステル色の枠と文字、黒いずらし影を付けたタグ。2 段で横に流す - **地域写真タイル**（`photo-tag-tile`）: 正方形の写真の左端に、縦書きの白い #地名 を重ねて散らす - **特典カルーセル**（`slider-carousel`）: 中央の縦長ビジュアルの左右に次の画像を覗かせる。丸い矢印ボタンとバー型のインジケーターを付ける - **シェア丸ボタン**（`share-button`）: 白い円に黒アイコンと黒いずらし影を付け、3 つ並べる - **アプリ DL ボタン**（`button-primary`）: 白地に黒の細枠の長方形で、太字の和文を中央に置く。下に黒いストアバッジを 2 つ並べる - **黒フッター**（`footer-dark`）: 黒地に白の太字リンクを縦に並べ、区切り線の下にコピーライトを置く ## Do's and Don'ts **Do** - グラデはピンク→水色に統一する - 黒フチ・黒帯・ずらし影で、パステルの甘さを引き締める - 英字見出しは極細書体を傾けたラベルに入れる - キャラクターごとに背景色を変え、カードの形はそろえる - セクションの境目にハッシュタグ帯を挟んでリズムを作る **Don't** - ぼかしの強いドロップシャドウや立体的なボタンは使わない - 原色の赤や黄色を CTA に使わない - 見出しを太い和文だけで作らない - カードの形を不揃いにしない - 情報を詰め込みすぎず、余白を十分とる ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャラクター全員で世界観を一目で伝える）: ピンク→水色のグラデ地に大きな極細英字を敷き、キャラの立ち絵を 2 段で配置する。中央に白帯の和文キャッチを置く 2. **区切り帯**（テーマを示すハッシュタグでつなぐ）: 黒い細帯にネオン色の英字タグを流す 3. **ストーリー**（物語の設定を伝える）: ぼかした水色の都市写真の上に傾き見出しを置き、白い太字の本文を中央揃えにする 4. **舞台エリア紹介**（物語の舞台になる地域を見せる）: グラデで塗った地図の下に、#地名付きの写真を左右交互に散らす 5. **キャラクター一覧**（登場人物を紹介する）: 白地に傾き見出しを置き、主役 2 人は大きく、他は 2 列でアーチ型カードを並べる 6. **タグ帯**（関連キーワードを見せる）: パステル色のピル型チップを 2 段で横に流す 7. **スペシャル**（特別コンテンツへ誘導する）: 傾き見出しと左揃えの説明文の下に、縦長ビジュアルのカルーセルを置く 8. **シェア・DL**（拡散とアプリのダウンロードを促す）: 丸いシェアボタンを 3 つ並べ、その下に枠線の DL ボタンとストアバッジを置く 9. **フッター**（規約などへのリンクを置く）: 黒地に白リンクを縦に並べ、コピーライトを添える ## Imagery - イラストは線のはっきりしたアニメ調の全身立ち絵。ストリート系の服装でポーズを付ける - キャラごとに背景を単色で塗り分け、薄い幾何学の窓枠模様を重ねる - 都市写真はモザイク調・すりガラス風にぼかし、水色に寄せる - 地域写真は青空や夜景など彩度の高いものを正方形で使う - 地図はブロック状に簡略化し、グラデで塗る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では FV のキャラを横一列に並べ、キャッチを 1 行にする - PC のストーリーは、中央の本文の周りに地図と写真を散らして置く - PC のキャラカードは主役 2 枚を中央に、他を 5 列で並べる - PC の特典は見出しを左、説明文を右に置き、カルーセルで 3 枚を見せる - PC のシェアと DL は左右 2 カラムに分け、上にキャラのイラストを覗かせる - 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-b7bfa311`（元 LP の URL から採番） - **元 LP**: https://wespo.westjr.co.jp/831 - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。