DESIGN.md — 緑×紫の紙吹雪が舞う鉄道周年記念 LP（Teal and Violet Railway Anniversary Celebration LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: 周年記念・紙吹雪・ティール×紫・斜め帯・年表・白カード
• 地の質感: フラットな淡グレー地にカラフルな紙吹雪を散らす。影は少なく、薄いグラデーションと色ベタの帯を重ねる。
• 形: 平行四辺形の斜め帯、角丸の白カード、二重線の枠、市松模様、三角形のガーランド。
• 温度感: やや涼しげな寒色系。金色のロゴと紫で華やかさを足す。

Colors

• 地は淡いグレーで統一し、情報は白カードに載せる。
• ティールは見出し帯・CTA・枠線に使い、ブランドの基調色にする。
• 紫は斜め帯・ガーランド・紙吹雪の差し色に限り、面積を広くしない。
• 金は周年ロゴと記念数字だけに使う。
• 割引率などの数字はティールの太字で強調する。
• 全幅のティール帯は区切りの告知に 1〜2 回だけ使う。
• section-heading-band は文字 #FFFFFF × 背景 #00997A のコントラスト比が 3.6:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#00856A、4.6:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #039474 のコントラスト比が 3.82:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#038568、4.61:1）を使う。

Typography

• 見出しは極太のゴシックにして、斜体や平行四辺形の帯で勢いを出す。
• 日付と年号は欧文の太い斜体で大きく見せる。
• 本文は中央揃えで短く改行する。
• 強調する語だけをティールの太字にする。
• 注釈は ※ を付けて小さい文字でカード下部にまとめる。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カード内の写真と文字は縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 各セクションの冒頭に周年ロゴとティール帯の見出しを中央に置く。
• 年表は中央 1 列にし、写真を左右に互い違いに配置する。
• 情報は白カードに入れ、二重線で囲む。
• 動画は 16:9 で幅いっぱいに入れ、市松模様の台座に載せる。
• 表は細線で区切り、見出しセルにティールの地を敷く。

Elevation & Depth

• 基本は影なしのフラット。
• ニュースカードとアーチ型の窓枠にだけ薄いぼかし影（0 4px 16px rgba(0,0,0,.06)）を付ける。
• 写真の背後に、ずらしたティールや紫の色ベタを敷いて奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 平行四辺形の斜め切り、または大きい角丸の窓（車窓モチーフ）で切り抜く
• セクション境界: 斜めのティール・紫の帯と、全幅の平らなティール帯
• 見出しの帯は左右を斜めにカットした平行四辺形にする。
• CTA はピル型にして、右端に外部リンクのアイコンを付ける。
• 人物は切り抜いてカードの枠からはみ出させる。
• バッジは丸か、ギザギザの星形（お祝いシール風）にする。
• 動画の下には紫×ティールの市松の床を敷く。

Components

• 斜め帯の見出し（section-heading-band）: ティールの平行四辺形の上に白の極太文字を載せる。上に周年ロゴを添える。
• キャンペーン CTA（button-primary）: ティールのピル型ボタンで、白文字の右に外部リンクのアイコンを付ける。
• お知らせカード（news-card）: 白い角丸カード。英字ラベル、大きい日付、本文、矢印を細線で区切った行に並べる。
• 年表の項目（timeline-item）: 淡いミントの大きな年号と、太字の月日、中央揃えの説明文を組む。
• 二重線の情報カード（info-card-double-border）: 白地をミントの二重線で囲み、ティールの見出し、本文、表を入れる。
• お祝いバッジ（celebration-badge）: 金や紫のギザギザ星形、または丸の中に短い文字を入れるシール。
• 割引運賃の表（price-table）: 細線の表。割引後の価格はティールの太字で、右に縦長の割引率ラベルを付ける。
• 車窓型カルーセル（window-carousel）: 大きい角丸の白い窓枠を横に並べる。中央の窓に告知を入れ、左右の窓は写真をのぞかせる。
• 三角ガーランド（garland）: 紫とティールの三角旗を見出しの左右に吊るす。

Do's and Don'ts

Do - 紙吹雪（紫・ティール・黄・ピンクの小片）をセクションの上部に散らす。 - 見出しは帯と周年ロゴをセットにして中央に置く。 - 日付・期間・割引率は大きく太く見せる。 - 写真は斜めにカットし、背後にずらした色ベタを敷く。 - 注釈は省略せず小さい文字で残す。

Don't - 暖色の原色を主役にしない。 - 紫を広い背景に使わない。 - 影を濃くしたり立体的なボタンにしたりしない。 - 本文を左右いっぱいに広げて詰め込まない。 - 見出しを細い書体にしない。

Page Structure

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

1. ファーストビュー（周年記念であることと、主役の車両と人物を印象づける）: 金色の周年ロゴ、車両の写真、制服の人物を並べ、紙吹雪を散らす。下に紫とティールの斜め帯を敷く。
2. メッセージ（感謝と未来への想いを伝える）: 極太の斜体コピーの横に人物を切り抜いて置き、短い行の本文で一部をティールで強調する。
3. お知らせ（最新情報を伝える）: 白い角丸カードに日付と見出しを細線で区切った行で並べる。
4. 年表（これまでの歩みを見せる）: 中央 1 列で年号と出来事を並べ、左右に斜めカットの写真を配置する。
5. 動画メッセージ（親しみのある案内役を紹介する）: 見出し帯、人物の切り抜き、動画を順に置き、市松模様の床に載せる。
6. キャンペーン・イベント（記念施策を告知する）: 二重線の情報カードを縦に並べ、表とお祝いバッジを添える。
7. タイアップ告知（外部キャンペーンへ誘導する）: 車窓型カルーセルにピル型 CTA を置き、下に車両の写真と全幅のティール帯を続ける。
8. イチオシ情報（割引商品を訴求する）: ティールの地のカードに大きい割引率を載せ、期間ボックスと運賃表を入れる。
9. 関連商品（記念グッズを案内する）: 白カードに見出し、条件の箇条、見本の画像を左右に並べる。

Imagery

• 車両は斜め前から撮り、光沢のあるシャープな写真にする。
• 人物は白背景で切り抜き、敬礼や指さしなど元気なポーズにする。
• 駅や式典の写真は平行四辺形にカットし、背後にずらした色ベタを敷く。
• 紙吹雪は多色の小さな長方形をランダムな角度で散らす。
• 装飾は市松模様・三角ガーランド・星形シールでお祝い感を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC 画像のみ。SP では幅 90% の 1 カラムにする。
• 年表の左右の写真は、SP では項目の間に全幅で挟む。
• 車窓型カルーセルは、SP では中央の 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 行書くと起動時に読み込まれる。