--- version: alpha name: Vivid Toy Train Catalog LP description: 白地をベースに、青・赤・水色・緑・黄のはっきりした色面でセクションを分けた子ども向け玩具 LP。斜体の太いゴシック見出し、番号付きの 2 カラムカード、ふりがな付きの本文、オレンジのカートアイコン付き購入ボタンをくり返して、カタログのように情報を積み上げる。 colors: primary: '#0169B6' background: '#FFFFFF' cta: '#F0B030' on-cta: '#FFFFFF' secondary: '#E40214' accent-1: '#1EA0DC' accent-2: '#5AB331' accent-3: '#EE7701' marker: '#FFE000' tint-1: '#FFF4C8' dark-section: '#2E3182' text: '#1A1A1A' tint-2: '#E2F5FB' background-alt: '#FFFFFF' cta-accessible: '#9D6C0B' typography: display: fontFamily: Dela Gothic One fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS 1p fontSize: 24px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 note: fontFamily: Noto Sans JP fontSize: 9px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Montserrat fontSize: 26px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em label-button: fontFamily: Noto Sans JP fontSize: 22px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 12px section: 48px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 58px heading-band: backgroundColor: '{colors.primary}' typography: '{typography.display}' height: 44px panel-framed: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 160px numbered-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 200px pill-link: backgroundColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 36px badge-circle: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px character-bubble: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px label-tag: backgroundColor: '{colors.dark-section}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 28px --- # DESIGN.md — 青×黄×赤の元気な鉄道玩具カタログ LP（Vivid Toy Train Catalog LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: エンタメ・ゲーム・アプリ ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、かわいい - **キーワード**: 原色・斜体の極太見出し・番号付きカード・ふりがな・カタログ型・子ども向け - **地の質感**: グラデーションは最小限にしたフラットな色面に、商品の切り抜き写真と光沢のある見出しロゴを重ねる - **形**: 中くらいの角丸の枠カードと太い色の帯。斜めに傾けた帯見出しとピル型の小ボタンを組み合わせる - **温度感**: 明るく賑やか。暖色の CTA と寒色の青ブランド色を並べて対比させる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0169B6` | ブランドの青（帯見出し・枠） | 7% | 画素の実測 | | `background` | `#FFFFFF` | ページの地 | 38% | 画素の実測 | | `cta` | `#F0B030` | 購入ボタンのオレンジ | 2% | 推定 | | `on-cta` | `#FFFFFF` | 購入ボタンの文字 | 0% | 画素の主要色に補正 | | `secondary` | `#E40214` | 赤い枠・セクションの地 | 4% | 画素の実測 | | `accent-1` | `#1EA0DC` | レール紹介セクションの水色の地 | 4% | 推定 | | `accent-2` | `#5AB331` | 情景紹介セクションの緑の地 | 3% | 画素の実測 | | `accent-3` | `#EE7701` | 車両紹介セクションのオレンジの枠 | 2% | 画素の実測 | | `marker` | `#FFE000` | 見出しの強調文字・黄色の帯 | 2% | 推定 | | `tint-1` | `#FFF4C8` | 番号カードの淡いクリーム色の地 | 3% | 推定 | | `dark-section` | `#2E3182` | 吹き出し・ラベルの紺 | 2% | 画素の実測 | | `text` | `#1A1A1A` | 見出しと本文の文字 | 2% | 推定 | | `tint-2` | `#E2F5FB` | キャッチコピーを載せる淡い水色の帯 | 0% | 画素の実測 | | `background-alt` | `#FFFFFF` | ページ両端の淡いグレー | 1% | 画素の実測 | | `cta-accessible` | `#9D6C0B` | AA を満たす補正値（計算） | | 計算 | - 地は白にし、商品群ごとにセクション全体を赤・水色・緑の単色面で塗り分ける - 大見出しは青の帯の上に白い斜体文字。強調語だけ黄色にする - 購入ボタンだけオレンジのグラデーションにし、他の要素にオレンジを使わない - 番号カードは原色の番号ブロック＋クリーム色の説明エリアにする - キャラクターの吹き出しやラベルは紺の面に白文字にする - セクションの小見出し帯は内容に合わせて赤・紺・黄・水色を使い分ける - `button-primary` は文字 `#FFFFFF` × 背景 `#F0B030` のコントラスト比が 1.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#9D6C0B`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 帯見出し（斜体・縁取り） | 装飾・ディスプレイ | Dela Gothic One | 900 | 26px | 1.3 | 0.02em | | `headline-lg` | セクション見出し（白抜き） | ゴシック | M PLUS 1p | 900 | 24px | 1.3 | 0.05em | | `headline-md` | カードやパネルのタイトル | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.02em | | `headline-sm` | 番号カードの項目名・小見出し | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.0em | | `body-md` | ふりがな付きの説明文 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.0em | | `note` | 注釈・別売の表示 | ゴシック | Noto Sans JP | 400 | 9px | 1.5 | 0.0em | | `accent` | 番号（01〜04） | 欧文サンセリフ | Montserrat | 900 | 26px | 1.0 | -0.02em | | `label-button` | 購入ボタン・ピル型リンク | ゴシック | Noto Sans JP | 700 | 22px | 1.2 | 0.05em | - 大見出しは斜体のように傾けた極太ゴシックにし、白い縁取りやドロップシャドウを付ける - 子ども向けなので本文の漢字にはふりがなを付ける - 語尾は「〜だよ！」「〜しよう！」のような呼びかけの短文にする - 見出しは 1〜2 行に収め、強調語だけ色を変える - 数字やスペックは大きく太くして目立たせる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。番号カードと商品の並びは 2〜3 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 48px、基本単位 8px、カード内 12px（375px 幅換算） - 左右 5% の余白を取った枠付きパネルを縦に積む - 機能紹介は 01〜04 の番号カードを 2×2 で並べる - セクションの区切りに購入ボタンを何度も挟む - セット内容は部品の切り抜き写真に「×数量」を添えて格子状に並べる - キャラクターと吹き出しを組み合わせて関連ページへ誘導する ## Elevation & Depth - 購入ボタンは下側に濃い影を付けた立体的なボタンにする - 商品写真のカードは薄いグレーの影で少し浮かせる - 見出し文字にはドロップシャドウと縁取りを付けて立体感を出す - それ以外の色面はフラットにする ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。 - **写真の切り抜き**: 商品は白抜きの切り抜き写真。シーン写真は角丸の四角 - **セクション境界**: 直線で色面を切り替えるだけにする。見出し帯は水平な太いバー - 購入ボタンは角丸 8px の横長長方形にし、左にカートアイコンの区画を置く - サブリンクはピル型の赤・黄ボタンにして右向きの三角を付ける - パネルは 3〜4px の太い色枠＋角丸 12〜20px - 吹き出しは角丸の長方形に三角のしっぽを付ける ## Components - **カート付き購入ボタン**（`button-primary`）: オレンジのグラデーションボタン。左側に区切られたカートアイコン、右側に白い太字 - **青帯の見出し**（`heading-band`）: 画面幅いっぱいの青い太帯に、白い斜体の極太文字を載せる。強調語は黄色 - **色枠のパネル**（`panel-framed`）: 赤・青・黄の太い枠で囲んだ角丸パネル。上部の色帯にタイトルを入れる - **番号付き機能カード**（`numbered-card`）: 上半分が写真。下段は原色の番号ブロックとクリーム色の説明エリアを並べる - **ピル型の関連リンク**（`pill-link`）: 赤または黄のピル型ボタンに白文字と ▶ を付ける - **吹き出しバッジ**（`badge-circle`）: 赤い縁取りの白い円に赤文字を入れ、写真に重ねて注意を引く - **キャラクター吹き出し**（`character-bubble`）: 左に人物イラストと紺の名札、右に紺の吹き出しと白文字を置く - **キャッチの帯ラベル**（`label-tag`）: 商品名の上に、角丸の小さな色帯で一言の訴求を載せる ## Do's and Don'ts **Do** - 原色のセクションごとに商品カテゴリを分け、色で内容がわかるようにする - 番号カードは 2×2 で揃え、番号と短い説明を必ず組み合わせる - 購入ボタンは主要なセクションのあとに毎回置く - 本文には子ども向けのふりがなと呼びかけの語尾を使う - 商品写真はきれいに切り抜き、白地または色面の上に置く **Don't** - くすんだ色や中間色を地に使わない - 細い明朝体や繊細な書体を使わない - 長文を詰め込まない。2〜3 行の短い説明にする - 購入ボタン以外にオレンジのグラデーションを使わない - 余白の多いミニマルな構成にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（商品の全体像と発売情報を伝える）: 黄色の地にセット全体を写した写真を置き、限定バッジ・ロゴ・価格を重ねる 2. **購入 CTA**（すぐに購入できる導線を置く）: 中央にオレンジのカート付きボタンを置く 3. **動画**（遊んでいる様子を見せる）: 青帯の見出しの下に 16:9 の動画を埋め込む 4. **セットの価値訴求**（オールインワンであることを伝える）: 2 段の青帯見出し、赤枠の遊びシーン写真、拡張パーツ 3 点を並べた色枠パネル 5. **車両紹介**（主役の車両の魅力と設定を伝える）: オレンジ枠のパネルに写真・説明・引き出し線付きの解説図・スペック数値を載せる 6. **ギミック紹介**（動きの手順を見せる）: 赤い地に 01〜04 の手順カードを 2×2 で並べ、関連シリーズのパネルとピル型リンクを続ける 7. **レール紹介**（レールの種類と遊び方を伝える）: 水色の地に番号付きの 2×2 カードを並べる 8. **情景紹介**（情景部品で遊びが広がることを伝える）: 緑の地に番号付きの 2×2 カードを並べる 9. **セット内容**（部品の種類と数を明示する）: 部品の切り抜き写真に「×数量」を添えて格子状に並べる 10. **レイアウト例**（組み合わせの多さを示す）: レールの俯瞰図に集中線の装飾を添え、黄色のピル型ボタンと吹き出しを置く 11. **パッケージ・拡張提案**（売り場で探しやすくし、追加購入を促す）: 箱の写真に続けて、緑・黄の色面カードで別売り品を紹介する 12. **ブランド説明**（世界観を伝える）: 青枠のパネルにロゴ・キャラクター・赤い吹き出しを置き、ふりがな付きの本文を載せる 13. **関連車両と購入**（ほかの車両の購入を促す）: 色帯ラベル・品番・切り抜き写真・購入ボタンをくり返す 14. **関連ページへの誘導**（回遊を促す）: キャラクターの吹き出しとバナー、3 カラムのリンクカードを並べる ## Imagery - 商品は明るいスタジオ照明で撮り、影の少ない切り抜き写真にする - シーン写真はやや低い視点から撮り、背景をぼかした街並みでスピード感を出す - 子どもが床で遊ぶ様子は明るい室内で自然な笑顔を撮る - 制服姿の人物を等身の低いフラットなイラストで描く - 黄色の集中線や星形などの装飾で賑やかさを足す - レイアウト図は真上から見た俯瞰図にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC では中央に 750px ほどの固定幅カラムを置き、両端は淡いグレーで埋める - 番号カードは PC で 4 カラムに広げてもよい - 見出し帯は PC でもカラム幅いっぱいに保つ - 購入ボタンは最大幅 360px ほどで中央に置く ## 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-c201b8ad`（元 LP の URL から採番） - **元 LP**: https://www.takaratomy.co.jp/products/plarail/tettei/set/bestselection2025/ - **解析に使った画像**: SP（スマホ版） - **確度**: 色 高（8/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。