--- version: alpha name: Elegant Gold and Navy Luxury Travel LP description: 生成りやアイボリーの地に、大理石の質感と金の細い斜線を重ねた上品な観光列車の告知 LP。欧文セリフの紺見出しと金のグラデーション文字で、高級感と旅の優雅さを伝える。写真は余白を取ってずらして配置し、号車番号は黒×金のひし形バッジで示す。 colors: background: '#F6F1EE' background-alt: '#FFFFFF' surface: '#F6F5F1' primary: '#0C1A4E' secondary: '#4A3210' on-primary: '#FFFFFF' accent-1: '#AB8977' accent-2: '#8A7350' text: '#3A393B' text-muted: '#6E585A' line: '#8C8580' dark-section: '#111111' on-dark: '#F6F7F6' accent-3: '#020202' accent-2-accessible: '#826C4B' typography: display: fontFamily: Cormorant Garamond fontSize: 62px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.02em headline-lg: fontFamily: Cinzel fontSize: 36px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.03em headline-md: fontFamily: Shippori Mincho fontSize: 21px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.3em headline-sm: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.12em body-md: fontFamily: Noto Serif JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.05em accent: fontFamily: Cormorant Garamond fontSize: 24px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 20px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' nav-band: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 56px section-heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 90px ornament-divider: textColor: '{colors.accent-1}' height: 20px car-badge: backgroundColor: '{colors.accent-3}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 64px offset-photo: height: 280px coming-soon-box: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.accent}' height: 210px footer-links: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-dark}' typography: '{typography.note}' height: 32px related-banner: backgroundColor: '{colors.dark-section}' height: 115px --- # DESIGN.md — 生成り×金×紺の上品な観光列車 LP（Elegant Gold and Navy Luxury Travel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 上品・高級、シンプル・ミニマル、やさしい・柔らかい - **キーワード**: 大理石・金の細線・欧文セリフ・余白・明朝体・ずらし配置 - **地の質感**: 白い大理石の金脈と、金色の細い斜めストライプを薄く重ねたパール調の地 - **形**: 角丸なしの直線的な矩形。写真は段違いにずらし、ひし形バッジがアクセント - **温度感**: やや暖かい生成り寄りのニュートラル ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F6F1EE` | メインの生成り地 | 35% | 画素の実測 | | `background-alt` | `#FFFFFF` | 白セクション地 | 18% | 画素の実測 | | `surface` | `#F6F5F1` | 告知ボックスの面 | 4% | 画素の実測 | | `primary` | `#0C1A4E` | 欧文見出しの紺 | 2% | 画素の実測 | | `secondary` | `#4A3210` | ナビ帯の焦げ茶 | 2% | 画素の実測 | | `on-primary` | `#FFFFFF` | ナビ帯上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#AB8977` | 金の装飾線・金文字 | 3% | 画素の主要色に補正 | | `accent-2` | `#8A7350` | 欧文サブの金茶文字 | 0% | 推定 | | `text` | `#3A393B` | 見出し・本文の濃グレー | 2% | 画素の実測 | | `text-muted` | `#6E585A` | リード文の淡色 | 1% | 画素の主要色に補正 | | `line` | `#8C8580` | ボックス枠線 | 0% | 推定 | | `dark-section` | `#111111` | フッターの黒地 | 10% | 画素の実測 | | `on-dark` | `#F6F7F6` | フッター文字 | 0% | 画素の実測 | | `accent-3` | `#020202` | 号車バッジの黒 | 0% | 画素の実測 | | `accent-2-accessible` | `#826C4B` | AA を満たす補正値（計算） | | 計算 | - 地は生成りと白を交互に使い、セクションの区切りを色の切り替えだけで示す - 強調色は金。線・装飾・大きな数字のグラデーションだけに使い、面には塗らない - 欧文の大見出しは紺。日本語の小見出しは金茶にする - ナビ帯だけ焦げ茶の面を使い、文字は白にする - フッターは黒地で、ページの締めにだけ使う - 原色の強い CTA 色は使わない - `coming-soon-box` は文字 `#8A7350` × 背景 `#F6F5F1` のコントラスト比が 4.14:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#826C4B`、4.59:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の年号・DEBUT の金グラデーション文字 | 欧文セリフ | Cormorant Garamond | 500 | 62px | 1.1 | 0.02em | | `headline-lg` | セクションの欧文大見出し（イタリック体の紺） | 欧文セリフ | Cinzel | 400 | 36px | 1.2 | 0.03em | | `headline-md` | コンセプトの 2 行キャッチ | 明朝 | Shippori Mincho | 500 | 21px | 1.6 | 0.3em | | `headline-sm` | 席種名・欧文見出し下の和文 | 明朝 | Shippori Mincho | 600 | 15px | 1.5 | 0.12em | | `body-md` | 説明本文 | 明朝 | Noto Serif JP | 400 | 12px | 1.9 | 0.08em | | `note` | 注釈・コピーライト | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.05em | | `accent` | 準備中表示の欧文 | 欧文セリフ | Cormorant Garamond | 500 | 24px | 1.2 | 0.08em | | `label-button` | ナビ帯のリンク文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.1em | - 和文は明朝で統一し、字間を広め（0.08〜0.3em）に取る - セクション見出しは欧文セリフの大きな英字にし、その下に和文の小見出しを置く - 和文小見出しの左右に、金の二重線を伸ばす - FV の大きな文字は金のメタリックグラデーションにする - 本文は小さめで行間を広く取り、控えめに見せる - 太いゴシック体はナビとフッターだけに使う - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。写真は左右に段違いでずらして配置 - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - コンセプト文は中央揃えにし、上下に大きな余白を取る - 写真は幅 75〜90% で左右交互に寄せ、余白に大理石の断片を重ねる - 席種の説明は左揃えで、写真の直下に置く - セクションの上下余白は 70〜100px にする - フッターの関連バナーは横幅いっぱいに縦積みする ## Elevation & Depth - 影はほぼ使わず、フラットに保つ - 奥行きは写真と大理石片の重なりで作る - 車両の切り抜き画像だけ、接地面に淡い影を付ける ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。商品・車両は背景を抜いた切り抜き - **セクション境界**: 直線で背景色を切り替える。境界に装飾は付けない - 角丸は使わない - 号車のラベルは、黒地に金縁を付けた 45 度回転のひし形にする - 装飾線は 1px の金の細線か二重線にする - 告知ボックスは細い枠線の矩形にする ## Components - **アンカーナビ帯**（`nav-band`）: 焦げ茶の全幅の帯。白文字のリンク 2 つを縦線で区切り、下向きの小さな三角を添える - **欧文＋和文の見出し**（`section-heading`）: 紺のイタリック体の欧文大見出しの下に、金茶の和文を置き、左右に金の二重線を伸ばす - **金の唐草装飾線**（`ornament-divider`）: ロゴの上下に置く、中央に飾りが付いた金の細線 - **号車ひし形バッジ**（`car-badge`）: 写真の右下に重ねる、黒地に金縁のひし形。白い明朝で番号を入れる - **ずらし写真＋大理石片**（`offset-photo`）: 矩形の写真の背後に、少しずらして白い大理石の矩形を重ねる - **準備中ボックス**（`coming-soon-box`）: 細い枠線の矩形の中央に、金茶の欧文を置く - **フッターリンク**（`footer-links`）: 黒地に細い区切り線を入れ、三角マーク付きの白いリンクを縦に並べる - **関連バナー**（`related-banner`）: 関連サービスの横長バナー。全幅で縦に積む ## Do's and Don'ts **Do** - 地に大理石と金の斜線を薄く敷き、パールのような光沢を出す - 和文は明朝体で字間を広く取る - 写真は段違いにずらし、余白を贅沢に使う - 欧文の見出しと和文の小見出しを必ずセットで置く - 金は線や文字のアクセントにとどめる **Don't** - 角丸のピル型ボタンや派手な色の CTA を置かない - 太いゴシック体で見出しを作らない - 濃い影やグラデーションのカードを使わない - 写真をすき間なく敷き詰めない - 赤や黄色の値引き訴求バッジを使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（ブランドの世界観と開始時期を告知する）: 上部中央に装飾線で挟んだロゴを置く。正面向きの車両の切り抜きに、金グラデーションの大きな年号を重ねる 2. **アンカーナビ**（主要セクションへ誘導する）: 焦げ茶の全幅の帯に、白文字のリンクを 2 つ並べる 3. **コンセプト**（旅の価値を情緒的に伝える）: 中央揃えの明朝で 2 行のキャッチと 4 行のリードを置き、上下の余白を大きく取る 4. **イメージギャラリー**（料理・客室・車両の魅力を見せる）: 料理・皿・乗客・車両の写真を左右にずらして配置し、大理石片を重ねる 5. **車内のご案内**（席種と車両ごとの特徴を紹介する）: 欧文見出しを置き、写真と号車バッジ、席種名、説明文を 1 組にして縦に繰り返す 6. **運行情報・料金**（詳細情報を掲載する（現在は準備中））: 白地に欧文見出しを置き、枠線のボックスに準備中の表記を入れる 7. **フッター**（関連サイトや他の商品へ回遊させる）: 黒地にリンクリスト、関連バナー 3 本、ロゴ、コピーライトを並べる ## Imagery - 料理は白背景の俯瞰、または背景を抜いた器の切り抜きで、明るく清潔に撮る - 客室は自然光が入る窓辺で、上品な服装の大人の乗客を写す - 車両は斜めアングルの切り抜きにし、接地に淡い影を付ける - 装飾は白い大理石の金脈と、金の細い斜めストライプにする - 人物は穏やかな笑顔の 40〜60 代を中心にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は FV を左右に分け、左に車両と年号、右にロゴ・ナビ・コンセプト文を置く - PC のナビ帯は右カラム内の小さな焦げ茶ボックスになる - PC はギャラリー写真を幅 40〜50% にし、左右交互の段違いを強める - PC の席種紹介は幅 55〜70% の写真を左右交互に寄せる - PC のフッターはリンクを横並び、関連バナーを 3 列にする ## 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-8a36f9ee`（元 LP の URL から採番） - **元 LP**: https://www.kintetsu.co.jp/senden/les-saveurs-shima/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。