DESIGN.md — モノクロ写真×朱赤線の鉄道周年記念 LP（Nostalgic Monochrome Railway Anniversary LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: レトロ、和風、信頼・誠実、やさしい・柔らかい
• キーワード: 郷愁・記念・年表・紅葉・モノクロ写真・朱赤
• 地の質感: 生成り地に紅葉・銀杏の小さな散らし模様。年表は粗いモノクロ写真を薄く敷く
• 形: 角丸はほぼ使わない。四角いカードと細い赤線、白丸のノードで組む
• 温度感: 温かみのある中間〜やや暖色

Colors

• 地色は白→生成り→灰色写真→生成りの順に切り替え、セクションの区切りにする
• 朱赤は見出しの下線、年表の縦線、年号だけに使う
• 月表記は金茶色、和暦は灰色にして年号との強弱をつける
• CTA は焦げ茶の面に白い明朝体を載せ、落ち着いた印象にする
• 写真の上には色をかぶせず、モノクロのトーンをそのまま見せる
• era-tab は文字 #8E6E60 × 背景 #F9F2D9 のコントラスト比が 4.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#86685B、4.52:1）を使う。
• menu-button は文字 #F3F0E6 × 背景 #8E6E60 のコントラスト比が 4.05:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#86685B、4.51:1）を使う。

Typography

• FV のキャッチだけ手書き風にし、懐かしさを出す
• セクション見出しは中央揃えにし、下に短い朱赤線を引く
• 年号は大きい数字、和暦は小さい灰色にして横に並べる
• 本文は小さめのゴシックで情報量を詰める
• 公式サイトへのボタンだけ明朝体にして格を出す
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、イベントとギャラリーは 2〜3 列グリッド
• 本文ブロックの幅: 画面幅の約 94%
• 余白: セクション間 48px、基本単位 8px、カード内 8px（375px 幅換算）
• 見出しはセクション上部の中央に置き、下線との間を 8px あける
• イベントカードは 2 列、カードどうしの間隔は 6px 程度
• 年表は左端に縦線を引き、カードは右に寄せて並べる
• フォトギャラリーは 3 列の正方形に近いサムネイルで隙間を詰める
• 時代切替タブは 3 等分の横並びにする

Elevation & Depth

• カードは影をごく薄く、またはつけずに白面で浮かせる
• 年表カードは灰色の写真地の上に白い面で置き、コントラストで分ける
• 時代タブには細い茶色の枠線を引く

Shapes

• 角丸: 小 0px ／ 中 2px ／ 大 4px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの矩形。カードの写真は横長、ギャラリーは 4:3
• セクション境界: 直線で地色を切り替える
• 年表のノードは灰色の小丸、時代の起点と終点は赤い輪の大丸にする
• ボタンもカードも角は立てたまま
• 見出し下線は幅 50% 程度・太さ 2px の朱赤線

Components

• 下線付き中央見出し（section-heading）: 中央揃えの丸ゴシック見出し。下に朱赤の短い線を引く
• イベントカード（event-card）: 上に写真、下に太字タイトルと説明を置く白カード
• 時代切替タブ（era-tab）: ベージュ地に茶枠を引いた 3 等分のタブ。下向きの山形アイコン付き
• 縦線年表（timeline）: 左に赤い縦線と丸ノードを置き、右の白カードに赤い年号・和暦・月・出来事を並べる
• 時代見出し（era-label）: 大きな年＋〜と時代名の 2 段。赤い輪の起点マーク付き
• 写真ギャラリー（photo-grid）: 古い写真を 3 列で隙間なく並べるサムネイル
• 公式サイト誘導ボタン（button-primary）: 焦げ茶の横長ボタン。白い明朝文字と右端の丸矢印
• ハンバーガーメニュー（menu-button）: 右上に固定する茶色の正方形ボタン

Do's and Don'ts

Do - FV はモノクロの古写真を全面に敷き、白い手書き風の文字を中央に置く - 生成りと白のセクションには紅葉や銀杏を小さく散らす - 年表は年号・和暦・月・出来事の順で整然と並べる - 朱赤は線と年号だけに絞る - 路線図などは線画イラストにして朱赤でつなぐ

Don't - 鮮やかなグラデーションや派手な影を使わない - ボタンやカードを大きな角丸・ピル型にしない - 朱赤を広い面の塗りに使わない - 年表の背景写真を濃くして文字を読みにくくしない - ポップな丸ゴシックの装飾を使いすぎない

Page Structure

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

1. ファーストビュー（周年の節目を印象づける）: モノクロの古写真を全面に敷き、中央に白い手書き風のキャッチを 2 行で置く
2. 周年のあいさつ（沿線と歴史の概要を伝える）: 白地に紅葉を散らし、路線図の線画と記念ロゴを並べ、下に本文を置く
3. イベント情報（記念企画を一覧で見せる）: 生成り地に写真付きの白カードを 2 列で並べる
4. 年表（これまでの歩みを時代ごとに示す）: 灰色の写真地に時代タブを置き、赤い縦線と白カードで年ごとの出来事を並べる
5. フォトギャラリー（歴代車両の写真で郷愁を誘う）: 生成り地に古写真を 3 列で隙間なく並べる
6. CTA・フッター（公式サイトへ誘導する）: 焦げ茶の明朝ボタンとコピーライトを中央に置く

Imagery

• FV は粒子の粗いモノクロ写真。高コントラストで古い車両やホームを写す
• ギャラリーはカラーとモノクロの古写真を混ぜ、退色したトーンを残す
• 背景には紅葉・銀杏の小さなシルエットを淡く散らす
• 路線図は細い朱赤線に白丸の駅ノードを付けた線画にする
• 年表の背景は灰色に薄めたモノクロ写真を帯状に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV の下に茶色のアンカーナビを 4 項目で横並びにする
• PC のイベントカードは 4 列
• PC の年表は中央付近に縦線を引き、左に時代名、右にカードを置く
• PC のギャラリーは 4 列で、コンテンツ幅は約 70%
• PC のあいさつはイラストと本文を左右 2 カラムにする

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