DESIGN.md — 漆黒×金×臙脂の和モダン観光列車 LP（Heritage Gold Japanese Limited Express LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、上品・高級、ラグジュアリー・ダーク
• キーワード: 漆黒と金・和柄の帯・紋章モチーフ・縦書き明朝・欧文セリフの大文字・古都の物語
• 地の質感: 黒の平面に、金の線画紋章や和柄の帯、ダマスク調の地紋、和紙のような淡い波模様を重ねる
• 形: 角丸なしの直線的な矩形。金の細枠ボタン。区切りには金の点線と和柄の帯を使う
• 温度感: 暗くて温かい。金と臙脂が温かみを、スレートとセージが落ち着きを足す

Colors

• 地は漆黒を基本にし、コンセプト部分だけを白い和紙地にして明暗の緩急をつける
• 金は紋章・ロゴ・ボタン枠・箇条書きの菱形の印だけに使い、面を広く塗らない
• 2 つの車両のテーマ色（臙脂とスレート）は見出しの色面に限って使い、描き分けに使う
• お知らせ欄はセージ色のパネルをチャコールの地紋の上に載せ、目を休める場所にする
• セクションの境目には赤・緑・金の和柄の帯を入れる

Typography

• 和文はすべて明朝体で統一し、格調を保つ
• コンセプト文は縦書きにして、右から左へ流す
• 英字見出しは大文字のセリフ体で字間を広く取り、左右に鳥の金のイラストを添える
• 黒地の背景にはセクション名の欧文を特大の暗いグレーで透かしとして敷く
• 黒地の本文は行間を 2 以上に取り、ゆったり読ませる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。色面の見出しの右に小さなリンク一覧を置く
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは〈和柄の帯 → 英字見出し → 色面の和文見出しとボタン → 写真 → 本文 → 紋章と透かし文字〉の順で繰り返す
• 写真は画面いっぱいの幅で載せ、余白を取らない
• 2 両の写真は左右に半分ずつ並べて対比させる
• 紋章は右側に大きくはみ出させて置く
• お知らせは日付と見出しを左右 2 列にし、細い罫線で行を区切る

Elevation & Depth

• 影は使わず、すべて平面で表現する
• 奥行きは、透かし文字・地紋・紋章を重ねて出す
• お知らせのパネルは地紋の上に載せ、縁の細い装飾柄で浮かせる

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。画面いっぱいの幅か、半分の幅で切る
• セクション境界: 赤・緑・金の和柄の帯と、金の点線
• ボタンは角丸なしの矩形で、金の 1px の枠で囲む
• 紋章は花びら形の縁取りがある円形にする
• 角丸は一切使わない

Components

• Read More ボタン（button-read-more）: 暗い地に金の細枠を付け、白文字と右向きの二重矢印を入れる
• 英字見出しと鳥の装飾（heading-en-ornament）: 黒地の中央に大文字のセリフ体を置き、左右に枝をくわえた鳥の金色イラストを対称に添える
• 色面の和文見出し（heading-color-block）: 臙脂またはスレートの面の左に大きな明朝見出しを置き、右端は少し濃い色の帯にする
• 和柄の帯（pattern-band）: 赤と緑の花文様が連続する、高さ 30px ほどの区切りの帯
• 菱形付きのリンク一覧（link-diamond-list）: 金の 4 つの菱形を頭に付けた、小さな明朝のリンク
• 紋章と透かし文字（emblem-watermark）: 黒地に金の線画の円形紋章を置き、背後に特大の欧文を暗いグレーで敷く
• お知らせパネル（news-panel）: セージ色のパネルを地紋の上に載せ、縁に縦の装飾柄を入れる。日付と見出しを罫線で区切った一覧にする
• ページ内ナビ（anchor-nav）: 白地に金の菱形付きの項目を 3 列に並べ、下を金の点線で区切る

Do's and Don'ts

Do - 和文は明朝体、英字は字間の広いセリフ体の大文字にする - 金は線と紋章だけに使い、上品に効かせる - セクションの境目には和柄の帯と鳥の装飾をセットで入れる - 2 つのテーマ色で対になるものを描き分ける - 黒地の背景に透かしの欧文と紋章を重ねて奥行きを出す

Don't - 丸ゴシックやポップな書体を使わない - 角丸のボタン、ピル型、影を使わない - 金を広い面のベタ塗りにしない - 彩度の高い原色を新しく足さない - 写真に余白や枠をつけて小さく収めない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ファーストビュー（2 つの車両とデビュー時期を印象づける）: 左右に色の違う 2 両を並べ、中央に明朝のキャッチコピー、下に欧文のデビュー時期と紋章を置く
2. ページ内ナビ（各セクションへ移動させる）: 白地に菱形付きのリンクを並べ、金の点線で区切る
3. コンセプト（名前の由来と世界観を語る）: 白い和紙地に金の筆文字ロゴを置き、横書きのリードと縦書きの本文を並べる。下に白い花と蝶を淡く描く
4. シンボルマーク（紋章の意味を伝える）: 夕焼けのクリーム地に金の紋章を大きく置き、下に短い説明文を添える
5. 動画（走行シーンで体験を想像させる）: 黒地の中央に横長の動画を埋め込む
6. 車両紹介（2 両のデザインを紹介し、詳細ページへ誘導する）: 和柄の帯と英字見出しを置き、臙脂の色面に見出しとボタン、2 両の写真、白文字の本文、紋章と透かし文字を続ける
7. 運行情報（運転日や料金の確認へ誘導する）: 車両紹介と同じ型を、スレートの色面と車内の写真で組む
8. お知らせ（最新のトピックを伝える）: 地紋の上にセージ色のパネルを置き、日付と見出しの一覧を並べる

Imagery

• 車両は正面に近い角度から撮り、夕焼けや山並みの暖色の空と合わせる
• 背景には金の線画で鹿・鳥・唐草などの古都のモチーフを描く
• コンセプト部分は白とグレーの花・蝶・鳥の線画を淡く配置する
• 車内は通路の奥へ抜ける一点透視の構図で撮る
• ダマスク調の花の地紋と、赤緑の和柄の帯を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC のファーストビューは横長にし、キャッチコピーを中央に縦書きで置く
• PC のコンセプトは縦書きの本文とリードを左右に並べる
• PC のシンボルマークは紋章を左、説明を右の 2 カラムにする
• PC の車両紹介と運行情報は、色面の見出しと写真を横に並べ、本文とリンク一覧を横に並べる
• PC のお知らせは日付と見出しを 1 行に収める

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 行書くと起動時に読み込まれる。