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

• 物語を語るセクションは濃紺地、情報を見せるセクションは白い格子地にして交互に並べる
• 金は額縁・見出し枠・英字ラベルに使い、紺地と白地をつなぐ色にする
• 赤系統の情報は赤、青系統の情報は青で統一する。ラベル・枠線・アクセントすべてに適用する
• 金の塗りはフッターのナビボタンとプランバッジだけに使う
• 本文は黒寄りのグレーにする。紺地の上の文字は白にする
• 地図だけは淡い緑を使い、ほかの色と混ぜない
• 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

• セクション見出しは字間を 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。