DESIGN.md — マルーン×金の上質な鉄道座席サービスLP（Maroon and Gold Premium Rail Service LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 上品・高級、ラグジュアリー・ダーク、シンプル・ミニマル
• キーワード: マルーン・金の曲線・生成り・明朝の広い字間・クラシカル・余白
• 地の質感: フラットな単色面とクリーム色のグラデーション。光沢感は金色の曲線だけで出す
• 形: 大きく流れる筆記体風の金色の曲線と、大きな角丸で切り抜いた生成り色のパネル
• 温度感: 温かく落ち着いた暖色系のダークトーン

Colors

• 地の色は「マルーン→生成り→マルーン」の順に交互に切り替え、リズムを作る
• 金色は曲線装飾・ロゴ・路線帯・TOPボタンだけに使い、本文には使わない
• マルーン地の上の文字は生成り色にし、純白は帯や料金ボックスだけに限る
• 生成り地の上の見出しはマルーン、締めのコピーは金茶にする
• 原色やビビッドな色は使わない。彩りは写真の素材色に任せる
• button-top は文字 #FFF3E3 × 背景 #C49A5E のコントラスト比が 2.36:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#8D6834、4.61:1）を使う。

Typography

• 見出しとコンセプト文は明朝にし、字間を広く取る（0.1〜0.4em）
• 説明文と注釈はゴシックにして読みやすくする
• 英字はセリフ体のイタリックや大文字で、ホテル風の品を出す
• コンセプト文は中央揃えで、短く改行する
• 太字はほとんど使わず、細めのウェイトで統一する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は全幅で縦に積む
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• テキストのセクションは上下に 60〜80px の余白を取る
• 写真は端まで敷き詰め、写真同士の間は空けない
• 区切り線は内容幅いっぱいに引き、小見出しのブロックを分ける
• 料金は白い四角のボックスに入れて中央に置く
• 路線図は縦の点線と、駅を表すカプセル型の枠で描く

Elevation & Depth

• 影はほぼ使わず、フラットな面の重なりで奥行きを出す
• 写真キャプションの帯は半透明の白で写真に重ねる
• PC の帯にはメタリック調のグラデーションを入れる

Shapes

• 角丸: 小 0px ／ 中 12px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 全幅の長方形。角丸なし
• セクション境界: 有機的な曲線と、大きな角丸の生成りパネルでマルーン地を切り取る
• 料金ボックスと写真キャプションの帯は角丸なしにする
• 駅の表示はピル型の枠にする
• TOPボタンは金茶の円にする
• 装飾は流れるような金色の太い曲線だけにする

Components

• 金色の曲線のFV（hero-gold-swirl）: マルーン地に金色の巨大な曲線を描き、人物の切り抜き写真をそこに腰掛けるように配置する
• 下線付きの明朝コピー（heading-underline）: 字間の広い明朝コピーの下に細い金線を引く。左の線は画面外から伸ばす
• 白帯のサービス名（band-white）: マルーン地の間に挟む白い帯。マルーン文字を中央に置く
• 生成りのコンセプトパネル（concept-panel）: クリーム色のグラデーションの面。下の角を大きく丸め、中央揃えの明朝本文を入れる
• 写真キャプションの帯（photo-caption）: 全幅写真の上部に置く半透明の白い帯。中に明朝の一文を入れる
• 料金ボックス（price-box）: 白い四角の中に、マルーンの見出しと価格を中央揃えで置く
• 路線図（route-map）: 縦の点線を並べ、停車駅は枠付きピルに金色の帯を入れて示す。駅名はダーク地に生成り色で書く
• TOPボタン（button-top）: 右下に置く金茶の円形ボタン。中にセリフ体で文字を入れる

Do's and Don'ts

Do - マルーン・金・生成りの3色を中心に構成する - 明朝の見出しは字間を広く取り、余白をたっぷり取る - 写真は全幅で並べ、上質な素材感を見せる - 生成りのセクションは大きな角丸や曲線で切り取る - 注釈は※付きの小さなゴシックで添える

Don't - 鮮やかな赤や青のCTAボタンを置かない - 太いゴシックで目立たせる訴求表現を使わない - 影や立体的なボタンを多用しない - 金色を本文の色や広い面に使わない - アイコンやイラストを賑やかに並べない

Page Structure

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

1. ファーストビュー（世界観を一瞬で伝える）: マルーン地に明朝コピーとロゴを置き、金の曲線に人物写真を重ねる。円形の英字でスクロールを誘導する
2. サービス名の帯（何のサービスかを明示する）: 白い帯にマルーン文字を中央揃えで置く
3. デビュー告知（開始時期を伝える）: 鉤括弧で囲んだ名称と下線、英字セリフ体の大きな告知、日付を順に置く
4. コンセプト（ブランドの思いを語る）: 生成りのパネルに中央揃えの明朝本文を入れ、最後に金茶の締めのコピーとロゴを置く
5. 車両・空間の写真（上質さを視覚で訴える）: 全幅写真を4枚縦に積み、それぞれに半透明のキャプション帯を付ける
6. 特長の説明（空間の特長を説明する）: マルーン地に生成り色の本文を左揃えで置き、明朝の締めのコピーを入れる
7. 予約と料金（予約方法と価格を伝える）: 生成り地に明朝の見出し、説明文、白い料金ボックス、注釈を順に置く
8. 設備・サービス（機能を列挙する）: 区切り線の下に明朝の見出しを置き、中央揃えの本文と注釈リンクを続ける
9. 利用シーン・運行頻度（使える場面を示す）: 明朝の3行見出しと説明文、注釈を置く
10. 路線図（停車駅を示す）: ダーク地に縦の点線とピル型の駅表示を並べる。英字の路線名を添える
11. 動画（PVを見せる）: 細い生成り色の枠で囲んだ動画を置く
12. フッター（会社情報とリンク）: 車両写真の帯を置き、その下に黒地でロゴ・リンク・コピーライトを並べる

Imagery

• 人物はベージュ系の服を着た女性。読書などくつろぐ姿を切り抜き、白い背景は使わない
• 車両や空間は暗めの照明で撮ったCG風の写真。木目と深緑のシートで温かみを出す
• 金色の装飾は筆記体の頭文字のような太い曲線にする
• 写真には加工した色を乗せず、素材そのものの色を見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はFVで人物と曲線を右に、コピーを左に横並びにする
• PC は写真を2×2のグリッドに並べる
• PC の路線図は横向きにし、駅名を縦書きにする
• 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 行書くと起動時に読み込まれる。