--- version: alpha name: Navy and Gold Lattice Luxury Train LP description: 濃紺の地に金の額縁と格子柄を重ねた、クラシックで高級感のある観光列車の告知 LP。白い格子柄のセクションでは赤と青の 2 系統で車両を色分けし、イラストの車内図を金の額縁に入れて並べる。運行計画は白いカードに路線図を載せて情報を整理する。 colors: primary: '#192B61' secondary: '#A88C5C' background: '#FEFEFC' surface: '#FFFFFF' accent-1: '#D20015' accent-2: '#3D46BC' cta: '#DAA501' on-cta: '#FFFFFF' text: '#121211' on-dark: '#EEF4F9' background-alt: '#F0EFEA' dark-section: '#242424' tint-1: '#AAC9AA' cta-accessible: '#957101' typography: display: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.8 letterSpacing: 0.05em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.3em accent: fontFamily: Montserrat fontSize: 13px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.3em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.5 body-lg: fontFamily: Noto Serif JP fontSize: 15px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.9 note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.5 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 6px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' heading-frame: backgroundColor: '{colors.primary}' textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 64px concept-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.body-md}' height: 600px framed-image: backgroundColor: '{colors.secondary}' height: 220px line-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 22px accordion-route: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.label-button}' height: 84px plan-badge: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' height: 30px subhead-bar: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 26px route-diagram: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 90px nav-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 64px --- # DESIGN.md — 紺×金の格子柄 観光列車ティザー LP（Navy and Gold Lattice Luxury Train LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 上品・高級、和風、信頼・誠実、情報量多め・訴求型 - **キーワード**: 濃紺と金・格子柄・額縁・赤と青の 2 系統・クラシック・旅の告知 - **地の質感**: 細い線の幾何学的な格子パターンを全面に敷く。紺地には濃い紺の線、白地には薄いグレーの線を使う。 - **形**: 角を斜めに落とした八角形の見出し枠と CTA。二重の金線で囲む額縁。写真は角丸なしの長方形にする。 - **温度感**: 落ち着いた冷色の紺に、温かみのある金と赤を差す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#192B61` | コンセプト・車両紹介の濃紺地 | 20% | 画素の主要色に補正 | | `secondary` | `#A88C5C` | 金の額縁・見出し枠・英字ラベル | 6% | 推定 | | `background` | `#FEFEFC` | 白い格子柄の地 | 35% | 画素の実測 | | `surface` | `#FFFFFF` | 運行計画の白いカード | 15% | 画素の実測 | | `accent-1` | `#D20015` | 赤系統のラベル・アコーディオン | 3% | 画素の実測 | | `accent-2` | `#3D46BC` | 青系統のラベル・アコーディオン | 2% | 画素の実測 | | `cta` | `#DAA501` | フッターのナビボタン・プランバッジ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | 金ボタン上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#121211` | 見出し・本文の濃い文字 | 3% | 画素の実測 | | `on-dark` | `#EEF4F9` | 紺地の上の白文字 | 2% | 画素の実測 | | `background-alt` | `#F0EFEA` | 小見出し帯の薄いグレー | 2% | 画素の実測 | | `dark-section` | `#242424` | フッター・ご乗車のみバッジの黒 | 2% | 画素の実測 | | `tint-1` | `#AAC9AA` | 路線地図の淡い緑 | 2% | 画素の実測 | | `cta-accessible` | `#957101` | AA を満たす補正値（計算） | | 計算 | - 物語を語るセクションは濃紺地、情報を見せるセクションは白い格子地にして交互に並べる - 金は額縁・見出し枠・英字ラベルに使い、紺地と白地をつなぐ色にする - 赤系統の情報は赤、青系統の情報は青で統一する。ラベル・枠線・アクセントすべてに適用する - 金の塗りはフッターのナビボタンとプランバッジだけに使う - 本文は黒寄りのグレーにする。紺地の上の文字は白にする - 地図だけは淡い緑を使い、ほかの色と混ぜない - `heading-frame` は文字 `#A88C5C` × 背景 `#192B61` のコントラスト比が 4.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。 - `plan-badge` は文字 `#FFFFFF` × 背景 `#DAA501` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#957101`、4.53:1）を使う。 - `nav-button` は文字 `#FFFFFF` × 背景 `#DAA501` のコントラスト比が 2.24:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#957101`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 紺地の上のキャッチコピー | 明朝 | Shippori Mincho | 700 | 22px | 1.8 | 0.05em | | `headline-lg` | 額縁の中のセクション見出し（金色） | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.3em | | `accent` | 見出しの上に置く英字ラベル | 欧文サンセリフ | Montserrat | 600 | 13px | 1.2 | 0.3em | | `headline-md` | 車両・プランの名前 | ゴシック | Noto Sans JP | 700 | 18px | 1.5 | 0.0em | | `body-lg` | プランの説明文 | 明朝 | Noto Serif JP | 500 | 15px | 1.8 | 0.02em | | `body-md` | 通常の本文・紺地の本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.9 | 0.0em | | `note` | 注釈・路線図の時刻 | ゴシック | Noto Sans JP | 500 | 11px | 1.5 | 0.0em | | `label-button` | アコーディオン・ナビボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0.05em | - セクション見出しは字間を 0.3em と広く取り、金色で額縁に入れる - 英字ラベルは大文字にし、字間を広げて見出しの上に置く - 紺地のキャッチコピーは明朝にして格調を出す - プランの説明文だけを明朝にし、仕様の部分はゴシックにする - 本文は行間を 1.8 以上取り、ゆったり読ませる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。車両編成図だけ横長の画像を全幅で縦に並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 紺地のパネルは左右に約 20px の余白を取り、金の二重線で囲む - 見出しの額縁はパネルの上辺にまたがるように重ねる - 車内画像は金の額縁で囲み、右下にグレーの影をずらして付ける - 運行計画は白カードを縦に積み、カード同士の間から格子柄の地を見せる - カード内は灰色帯の小見出しで区切る。帯の左端に系統色の縦線を入れる ## Elevation & Depth - 額縁の画像は右下に 6〜8px ずらした灰色のベタ影を付ける - 見出しの額縁も同じく右下にベタ影を付ける - 白カードは影をごく弱くするか付けず、格子地との色差で浮かせる - ぼかしの強いドロップシャドウは使わない ## Shapes - **角丸**: 小 0px ／ 中 6px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの長方形を金の額縁に入れる - **セクション境界**: 直線で区切る。FV の下端だけ鍵盤状のストライプ柄にする - アコーディオンとナビボタンは角を斜めに落とした八角形にし、内側に細い白線を入れる - 見出しの枠は紺の塗りに金の二重線を重ねる - 路線図の始発駅と終着駅は円、途中駅は小さな角丸の四角にする - 開閉アイコンは白いひし形の中に矢印、または円の中に＋を入れる ## Components - **額縁見出し**（`heading-frame`）: 上に英字ラベルを置き、紺の塗りに金の二重線の枠を付け、金色の字間の広い見出しを入れる - **紺地物語パネル**（`concept-panel`）: 金線で囲んだ紺のパネル。明朝のキャッチコピーと白い本文を入れる - **金額縁画像**（`framed-image`）: 車内イラストを金の額縁で囲み、ベタ影を付ける - **系統ラベル**（`line-badge`）: 系統名を白地に色付きの枠で、号車番号を色付きの塗りで見せる二連のラベル - **八角形アコーディオン**（`accordion-route`）: 赤または青で塗った八角形のボタン。内側に白線を入れ、右端に白いひし形の開閉アイコンを置く - **プランバッジ**（`plan-badge`）: 金の塗りの四角いバッジと、黒い塗りの四角いバッジを並べる - **左線つき小見出し帯**（`subhead-bar`）: 灰色の帯に系統色の縦線を付けた、カード内の項目見出し - **路線図**（`route-diagram`）: 円で示した始発駅と終着駅を線でつなぎ、途中駅を縦書きの小さな四角で並べる。下に時刻を入れる - **フッターナビ**（`nav-button`）: 金の八角形ボタンを 2 列に並べる。英字と日本語を 2 段で入れる ## Do's and Don'ts **Do** - 紺・金・白の 3 色で骨格を作り、赤と青は系統の区別だけに使う - 全面に細い格子柄を敷いて質感を出す - 画像は必ず金の額縁とベタ影で見せる - 情報量の多い部分は白カードと灰色帯で整理する - 見出しは英字ラベル・額縁・日本語の 3 点セットで統一する **Don't** - ピル型のボタンや大きな角丸を使わない - グラデーションや柔らかいぼかし影を使わない - 赤と青の系統色を入れ替えたり混ぜたりしない - ポップな原色の多用やイラスト調の吹き出しを入れない - 格子柄を濃くしすぎて本文の読みやすさを落とさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドを示し、ナビゲーションを置く）: 白地に左ロゴ、中央に 2 系統のロゴ、右に金のメニューボタンを置く 2. **ファーストビュー**（2 両の列車と運行開始時期を印象づける）: 多色ストライプの地の中央に、金の格子枠のポスターを置く。紺のリボンに開始時期を入れる 3. **新着情報**（告知を更新する）: 白い格子地を金の上下線で挟み、日付とリンクのリストを並べる。PDF アイコンを添える 4. **コンセプト**（列車に込めた物語を伝える）: 紺の格子地に額縁見出しと物語パネルを置き、下に車内画像を横スクロールで並べる 5. **車両紹介（赤）**（1 つ目の車両の魅力を伝える）: 紺のパネルに明朝のコピー・本文・車両イラストを入れる 6. **車両編成図と各車の紹介（赤）**（各号車の設備を見せる）: 白い格子地に編成図を並べる。額縁画像・系統ラベル・名前・説明を 1 組にして繰り返す 7. **車両紹介と編成（青）**（2 つ目の車両を紹介する）: 赤の章と同じ構成で、色だけ青に替える 8. **運行計画**（ルートと時期を示す）: 額縁見出しと導入文の下に、赤・青の八角形アコーディオンを 4 つ並べる 9. **プラン詳細**（列車名・時期・時刻を具体的に示す）: 地図のイラストに続けて白カードを置き、バッジ・明朝の説明・小見出し帯・路線図を入れる 10. **フッター**（回遊させ、注記を示す）: 2 系統のロゴと金のナビボタン 4 つを置く。黒帯にコピーライトを入れる ## Imagery - 車両や車内は写真ではなく、緻密な線画をフラットに塗ったイラストにする - 車内はクラシックな木目・ステンドグラス・柄物の布張りで高級感を出す - 車両は斜め前方から見た 3/4 アングルで描く - 星の紋章や星型のエンブレムを金の線画で装飾に使う - 地図は淡い緑のシルエットに系統色の路線を引く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は紺パネル内を 2 カラムにし、左にコピー、右に本文または車両を置く - PC では車内画像を 2 列のグリッドで並べる - PC の新着情報は額縁で囲んだ横長のボックスにする - PC のアコーディオンは 4 つを横一列に並べる - PC のプラン詳細は左に地図、右にカードの 2 カラムにする - PC のフッターナビは 4 つを横一列に並べる ## 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-9469ff2d`（元 LP の URL から採番） - **元 LP**: https://www.jrhokkaido.co.jp/startrain/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。