--- version: alpha name: Heritage Gold Japanese Limited Express LP description: 漆黒の地に金の紋章と和柄の帯を重ねた、古都の格調を感じさせる観光列車の特設 LP。明朝体の縦書きと欧文セリフの大文字見出しで、上品で物語性のある雰囲気をつくる。臙脂とスレートの色面で 2 つの車両を描き分ける。 colors: background: '#000000' primary: '#C9A227' secondary: '#68272D' dark-section: '#3D4140' background-alt: '#FFFFFF' surface: '#959E85' accent-1: '#454245' on-dark: '#FFFFFF' text: '#171A1C' text-muted: '#171A1C' line: '#CBAF6B' tint-1: '#F6E1B3' cta: '#C9A227' on-cta: '#FEF5F4' typography: display: fontFamily: Shippori Mincho fontSize: 34px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Serif JP fontSize: 19px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.03em accent: fontFamily: Cormorant Garamond fontSize: 16px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.15em body-md: fontFamily: Noto Serif JP fontSize: 13px fontWeight: 500 lineHeight: 2.2 letterSpacing: 0.05em note: fontFamily: Noto Serif JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em label-button: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.02em rounded: sm: 0px md: 0px 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}' button-read-more: textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 46px heading-en-ornament: backgroundColor: '{colors.background}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 70px heading-color-block: backgroundColor: '{colors.secondary}' textColor: '{colors.on-dark}' typography: '{typography.headline-lg}' height: 175px pattern-band: backgroundColor: '{colors.accent-1}' height: 32px link-diamond-list: textColor: '{colors.on-dark}' typography: '{typography.note}' height: 24px emblem-watermark: backgroundColor: '{colors.background}' textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 260px news-panel: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 420px anchor-nav: backgroundColor: '{colors.background-alt}' textColor: '{colors.text}' typography: '{typography.note}' height: 90px --- # DESIGN.md — 漆黒×金×臙脂の和モダン観光列車 LP（Heritage Gold Japanese Limited Express LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、ラグジュアリー・ダーク - **キーワード**: 漆黒と金・和柄の帯・紋章モチーフ・縦書き明朝・欧文セリフの大文字・古都の物語 - **地の質感**: 黒の平面に、金の線画紋章や和柄の帯、ダマスク調の地紋、和紙のような淡い波模様を重ねる - **形**: 角丸なしの直線的な矩形。金の細枠ボタン。区切りには金の点線と和柄の帯を使う - **温度感**: 暗くて温かい。金と臙脂が温かみを、スレートとセージが落ち着きを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#000000` | ページの基本地（漆黒） | 30% | 画素の実測 | | `primary` | `#C9A227` | 紋章・ロゴ・見出しの金 | 4% | 推定 | | `secondary` | `#68272D` | 1 両目の車両セクションの臙脂の色面 | 6% | 画素の実測 | | `dark-section` | `#3D4140` | 2 両目の運行情報セクションのスレートの色面 | 6% | 画素の実測 | | `background-alt` | `#FFFFFF` | コンセプト部分の白い和紙地 | 10% | 画素の実測 | | `surface` | `#959E85` | お知らせ欄のセージ色のパネル | 7% | 画素の主要色に補正 | | `accent-1` | `#454245` | お知らせ欄背景のダマスク調地紋（チャコール） | 5% | 画素の実測 | | `on-dark` | `#FFFFFF` | 黒地の上の本文の白文字 | 2% | 画素の主要色に補正 | | `text` | `#171A1C` | 白地の上の見出し・本文の墨色 | 2% | 画素の主要色に補正 | | `text-muted` | `#171A1C` | 背景に大きく敷く透かしの欧文 | 2% | 画素の主要色に補正 | | `line` | `#CBAF6B` | 区切りの金の点線と枠線 | 1% | 画素の主要色に補正 | | `tint-1` | `#F6E1B3` | 夕焼けの淡いクリーム地 | 4% | 画素の主要色に補正 | | `cta` | `#C9A227` | Read More ボタンの金の枠 | 0% | 推定 | | `on-cta` | `#FEF5F4` | Read More ボタンの白文字 | 0% | 画素の実測 | - 地は漆黒を基本にし、コンセプト部分だけを白い和紙地にして明暗の緩急をつける - 金は紋章・ロゴ・ボタン枠・箇条書きの菱形の印だけに使い、面を広く塗らない - 2 つの車両のテーマ色（臙脂とスレート）は見出しの色面に限って使い、描き分けに使う - お知らせ欄はセージ色のパネルをチャコールの地紋の上に載せ、目を休める場所にする - セクションの境目には赤・緑・金の和柄の帯を入れる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの大きなキャッチコピー | 明朝 | Shippori Mincho | 700 | 34px | 1.4 | 0.08em | | `headline-lg` | セクションの和文見出し（色面の上） | 明朝 | Shippori Mincho | 600 | 30px | 1.3 | 0.05em | | `headline-md` | コンセプトの横書きリード文 | 明朝 | Noto Serif JP | 700 | 19px | 1.9 | 0.03em | | `accent` | 欧文大文字の英字見出し・透かしの欧文 | 欧文セリフ | Cormorant Garamond | 500 | 16px | 1.3 | 0.15em | | `body-md` | 本文（縦書きのコンセプト文・黒地の説明文） | 明朝 | Noto Serif JP | 500 | 13px | 2.2 | 0.05em | | `note` | 注釈・日付 | 明朝 | Noto Serif JP | 400 | 10px | 1.6 | 0.03em | | `label-button` | Read More ボタンの文字 | 欧文サンセリフ | Noto Sans JP | 500 | 14px | 1.0 | 0.02em | - 和文はすべて明朝体で統一し、格調を保つ - コンセプト文は縦書きにして、右から左へ流す - 英字見出しは大文字のセリフ体で字間を広く取り、左右に鳥の金のイラストを添える - 黒地の背景にはセクション名の欧文を特大の暗いグレーで透かしとして敷く - 黒地の本文は行間を 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 ```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-15eee89d`（元 LP の URL から採番） - **元 LP**: https://www.jr-odekake.net/railroad/mahorobalimitedexpress/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（6/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。