--- version: alpha name: Teal Railway Anime Collaboration Campaign LP description: 白地にくすみティールの帯見出しを並べ、複数の企画を順番に説明する鉄道×アニメのコラボ周遊キャンペーンLP。キャラ立ち絵、路線図、STEP図、賞品カードで参加方法を図解し、情報量は多いが整理されて読みやすい。 colors: primary: '#63C0B5' secondary: '#2FA89E' tint-1: '#CBDEDD' tint-2: '#DFE7E3' background: '#FEFEFE' background-alt: '#FFFFFF' text: '#171A21' accent-1: '#D99F27' marker: '#FDE200' accent-2: '#01ACEB' accent-3: '#F9C270' cta: '#2FA89E' on-cta: '#FFFFFF' dark-section: '#171A21' line: '#2FA89E' cta-accessible: '#24827A' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 800 lineHeight: 1.1 headline-lg: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.15em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.03em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 16px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' campaign-band: backgroundColor: '{colors.primary}' typography: '{typography.headline-lg}' rounded: '{rounded.md}' height: 72px ribbon-heading: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 32px period-label: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 32px step-panel: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 80px prize-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 160px button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.label-button}' height: 36px step-number: backgroundColor: '{colors.secondary}' rounded: '{rounded.full}' height: 28px notice-box: backgroundColor: '{colors.dark-section}' typography: '{typography.note}' height: 160px --- # DESIGN.md — ティール×白のアニメコラボ鉄道周遊キャンペーンLP（Teal Railway Anime Collaboration Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: キャンペーン・プレゼント ／ **雰囲気**: 情報量多め・訴求型、清潔・爽やか、信頼・誠実 - **キーワード**: ティール帯見出し・白地・キャラ立ち絵・路線図・マップ・STEP図解・賞品枠カード - **地の質感**: フラットな単色の面と細い枠線。グラデーションや影はほとんど使わない - **形**: 角丸の大きい帯見出し、ピル型ラベル、五角形の矢印型STEPパネル、直角の枠カード - **温度感**: ややクール。ティールと白の爽やかさに、黄色の期間ラベルとオレンジの駅マーカーで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#63C0B5` | 企画見出し帯・ブランド色 | 5% | 画素の実測 | | `secondary` | `#2FA89E` | 見出し帯の濃いティール・STEPリボン | 2% | 画素の主要色に補正 | | `tint-1` | `#CBDEDD` | STEPパネル・路線図の地 | 4% | 画素の主要色に補正 | | `tint-2` | `#DFE7E3` | 賞品カードの見出し帯 | 4% | 画素の主要色に補正 | | `background` | `#FEFEFE` | ページ地色 | 62% | 画素の実測 | | `background-alt` | `#FFFFFF` | 左右の外側の地 | 2% | 画素の実測 | | `text` | `#171A21` | 見出し・本文 | 3% | 画素の主要色に補正 | | `accent-1` | `#D99F27` | 駅マーカー・注目色 | 0% | 画素の実測 | | `marker` | `#FDE200` | 実施期間ラベル | 0% | 画素の実測 | | `accent-2` | `#01ACEB` | 特別企画の帯・ボタン | 1% | 画素の実測 | | `accent-3` | `#F9C270` | お知らせセクションの帯 | 1% | 画素の実測 | | `cta` | `#2FA89E` | 強調文字・リンクボタン | 1% | 画素の主要色に補正 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `dark-section` | `#171A21` | 注意事項の見出し | 0% | 画素の主要色に補正 | | `line` | `#2FA89E` | カード枠線 | 0% | 画素の主要色に補正 | | `cta-accessible` | `#24827A` | AA を満たす補正値（計算） | | 計算 | - 地は白で統一し、企画ごとの帯見出しだけをくすみティールで塗る - 重要な語は濃いティールの太字にして本文の黒と区別する - 期間ラベルは黄色の地に黒文字で、日付と組み合わせる - 駅やスポットはオレンジのリング型マーカーで示す - 番外の企画は水色、お知らせはオレンジと、帯色を変えて区切る - 注意事項の見出しは黒地に白文字にする - `button-primary` は文字 `#FFFFFF` × 背景 `#2FA89E` のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#24827A`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの日付の数字 | 明朝 | Shippori Mincho | 800 | 30px | 1.1 | 0.0em | | `headline-lg` | 帯見出し・セクション見出し | ゴシック | Noto Sans JP | 900 | 20px | 1.4 | 0.05em | | `headline-md` | カード名・小見出し | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.02em | | `accent` | 企画番号の欧文ピル | 欧文サンセリフ | Montserrat | 500 | 13px | 1.2 | 0.15em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.0em | | `note` | 注釈・※書き | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタン・リンクの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.03em | - 見出しはすべて太いゴシックで、中央揃えにする - 強調語はひと回り大きくし、ティールで塗る - キャラ名などの難読語にはルビを振る - 注釈は小さな文字で※から始め、左揃えにする - 日付は数字だけを大きな明朝にして目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。STEP図と路線図は縦に並べ直す。賞品カードの中は2分割まで - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 企画ごとに帯見出し、説明、図解、ボタンの順で組む - キャラ立ち絵は見出しや説明の左右に添える - 賞品カードは細い枠と上部の見出し帯でそろえる - 期間ラベルは各企画の最初か最後に置く - 本文は中央揃えにし、注釈だけ左揃えにする ## Elevation & Depth - 影は基本的に使わず、枠線と面の色で階層をつける - スマホのモックアップだけ黒い縁で立体感を出す ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: キャラは背景を抜いた全身や半身の立ち絵。ポスターやアプリ画面は長方形のまま載せる - **セクション境界**: 直線で区切り、角丸の帯見出しで切り替える - 企画番号は白いピル型にする - STEPは五角形の矢印型パネルで流れを示す - 手順番号はティールの丸に白い数字 - サブボタンは細い枠の長方形に▶を付ける ## Components - **企画帯見出し**（`campaign-band`）: 角丸のティール帯。上に白いピルで企画番号、下に白文字の企画名、右端に横線の飾り - **リボン見出し**（`ribbon-heading`）: 左右に伸びる横線と、中央の濃いティールの太字見出しの帯 - **実施期間ラベル**（`period-label`）: 黄色の地に「期間」の文字、右側を枠で囲んで日付を入れる - **STEPパネル**（`step-panel`）: 淡いティール地の五角形矢印。STEP番号と手順を短く入れる - **賞品カード**（`prize-card`）: ティールの細い枠と淡色の見出し帯。条件、下向き矢印、獲得ラベルとキャラ絵を入れる - **ピル型リンクボタン**（`button-primary`）: ティールのピル型で、白文字の詳細リンクを入れる - **枠線ボタン**（`button-outline`）: 白地に細い黒枠の長方形で、▶付きの文字を入れる - **番号付き手順**（`step-number`）: ティールの丸に白い数字。その下に手順名とスマホ画面のイラスト - **注意事項ボックス**（`notice-box`）: 黒い見出し帯と、スクロールする枠内に小さな箇条書きを入れる ## Do's and Don'ts **Do** - 企画は番号付きの帯見出しで明確に区切る - 参加の流れはSTEP図、路線図、矢印で図解する - 強調語だけをティールの太字にする - 期間・注釈・リンクは企画ごとに必ず添える - キャラ立ち絵を余白に配置し、にぎやかさを出す **Don't** - 強い影やグラデーションを入れない - ティール以外の色を広い面に使わない（番外企画の帯は除く） - 本文を左右いっぱいに詰め込まない - 見出し書体を混ぜすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボの内容と開催期間を一目で伝える）: 色分けした縦帯にキャラを並べ、下にロゴ、企画名、大きな日付を置く 2. **企画1 説明**（ラッピング車両を紹介する）: 帯見出しの下に、キャラ立ち絵、説明文、路線図を並べる。車両の横長イラストとピルボタンを添える 3. **企画2 参加手順**（アプリでの参加方法を示す）: 番号付きの4手順と、スマホのモックアップを横に並べる 4. **参加方法・ルート**（周遊ルートと達成条件を示す）: 中央に縦の路線図と駅マーカー、左右にSTEPパネルを置く 5. **賞品引換**（賞品と引換場所を案内する）: ティール枠のボックスに2列の店舗情報、ボタン、賞品写真を入れる 6. **企画3 エリアマップ**（対象駅と担当キャラを示す）: 地図の周りに、エリアごとの駅一覧表を配置する 7. **賞の一覧**（達成条件ごとの賞を見せる）: 賞品カードを縦に積み、カードの間に中見出しを挟む 8. **注意事項**（規約を伝える）: 黒い見出し帯とスクロールする枠に箇条書きを入れる 9. **特別企画**（展示物の設置駅を案内する）: 水色のリボン見出しとカード、青いボタン、駅リンクを並べる 10. **インフォメーション**（関連する放送情報を告知する）: オレンジの帯見出しの下に、ビジュアルと中央揃えの情報を置く 11. **フッター**（共有と権利表記）: SNSアイコンを並べ、緑の細い帯にコピーライトを入れる ## Imagery - アニメ調のキャラ全身立ち絵を背景透過で使う - 日本地図と路線は、淡いグレーの線とティールの路線、オレンジの丸で描く - スマホ画面はフラットなモックアップで描き、画面例を入れる - 賞品は正面から撮った実物写真か画像で見せる - アイコンは単色のフラットなものにする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCも中央約900px幅に1カラムで組み、両端は淡いグレー地にする - SPではSTEPパネルと路線図を縦に並べる - SPでは横並びの4手順を2×2に組み直す - キャラ立ち絵はSPでは小さくするか、見出しの上に移す - 賞品カード内の2分割は、SPでは縦積みにする ## 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-f0b93117`（元 LP の URL から採番） - **元 LP**: https://www.jreast.co.jp/jujutsukaisen-jreastkaiyu/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（7/15 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。