DESIGN.md — 黄×青の左右分割で見せる鉄道記念 LP（Split Yellow and Blue Farewell Commemoration LP）

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

Overview

• 業種: キャンペーン・プレゼント ／ 雰囲気: ポップ・元気、力強い・インパクト、親しみ・手作り感
• キーワード: 左右2色分割・フラットイラスト・中央揃えの詩的コピー・感謝・記念・白カード重ね
• 地の質感: グラデーションや影のないベタ塗り。イラストもフラット
• 形: 角が直線のバナーと、大きめ角丸の白カードを組み合わせる。右下に青い矢印タブを付ける
• 温度感: 明るく温かい。黄色の元気さを濃紺で引き締める

Colors

• 背景は画面中央で縦に分け、左を黄色、右を青にする。ページの上・中・下でこの分割をくり返す
• 分割背景の上には白い太字だけを置く。黒文字は使わない
• コンテンツは白い地か白いカードにまとめ、そこでは見出しを黒、強調を青にする
• 対になる2つの要素には、黄系と青系を片方ずつ割り当てる
• 濃紺はラベル・矢印タブ・イラストの輪郭など、締めたい場所だけに使う
• split-hero は文字 #FFFFFF × 背景 #FFB60F のコントラスト比が 1.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#9B6C00、4.63:1）を使う。

Typography

• 文字はほぼすべて中央揃え。詩的なコピーは短く改行し、行間を広く取る
• 見出しには字間を 0.08〜0.12em 付ける
• 呼びかけの言葉は縦書きにして、画面の左右の端に大きく置く
• 見出しは「」のかぎ括弧で挟むか、左右の斜線で挟んで飾る
• 英字タイトルは細めの幾何学的なサンセリフ体にし、小さな年号を右上に添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。2 枚並びのパネルと写真だけ 2 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 24px（375px 幅換算）
• 分割背景のセクションと白地のセクションを交互に置く
• バナーは画面幅の約 92% で、中央に置く
• 各バナーの下に、2 行の中央揃えキャプションを付ける
• 詩的なコピーの後には、上下に大きな余白を取る
• 最後はファーストビューと同じイラストで締める

Elevation & Depth

• 影はほぼ使わない。フラットにする
• 白カードは、色の違う背景の上に重ねることで浮いて見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: バナーは角のない長方形。写真は太い色付きの枠と角丸 8px で囲む
• セクション境界: 直線で切り替える。PC では白カードの外周を波形にする
• お知らせのラベルはピル型にする
• リンク付きのバナーには、右下に青い長方形の矢印タブを付ける
• 白い告知カードは角丸 24px にする

Components

• 左右分割のファーストビュー（split-hero）: 左が黄・右が青の背景の中央に車両の正面イラストを置き、欧文タイトルを重ねる。両端には縦書きの呼びかけを置く
• お知らせ行（news-item）: 日付と濃紺のピル型ラベルを横に並べ、その下に下線付きの青いリンクを置く
• カテゴリのピル型ラベル（label-pill）: 濃紺の地に白い太字を置いたピル型
• コンテンツへ誘導するバナー（banner-card）: 水色または黄色の長方形に、右下の青い矢印タブを付ける。下に 2 行のキャプションを置く
• 矢印タブ（arrow-tab）: 青い長方形の中に、白の細い横線の矢印を描く
• 斜線で挟む見出し（heading-slash）: 小さな英字ラベルの下に、左右を青い斜線で挟んだ青い太字の見出しを置く
• 白い告知カード（announce-card）: 分割背景の上に重ねる角丸の白いカード。本文と、太枠で囲んだ写真 2 枚を入れる
• 縦書きの見出し（vertical-title）: 見出しを縦書きの大きな文字にし、細い線で囲んだ小さな縦書きラベルを添える
• カルーセルのドット（carousel-dots）: 白丸のドットで黒丸が現在位置。右端に黒丸の一時停止ボタンを置く

Do's and Don'ts

Do - 中央で縦に分けた黄と青の背景を、ページの象徴としてくり返し使う - 対になる2つの要素には、黄系と青系の色を片方ずつ割り当てる - コピーは短い行に分け、中央揃えで行間を広く取る - イラストはベタ塗りのフラットな表現にする - リンク付きのバナーには、必ず右下に青い矢印タブを付ける

Don't - グラデーションやドロップシャドウを使わない - 分割背景の上に黒文字や細い文字を置かない - 黄と青以外の強い色を追加しない - 本文を左揃えで長く詰め込まない（カード内の説明文は除く） - 写真を分割背景の上にそのまま置かない

Page Structure

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

1. ヘッダー（ロゴの表示と、メニューへの導線）: 白地の中央にロゴ、左右に記念マーク、右端に青い四角のハンバーガーボタンを置く
2. ファーストビュー（記念企画であることを一目で伝える）: 左右分割の背景に、車両の正面イラストと欧文タイトル、縦書きの呼びかけを置く
3. メッセージ（感謝の思いを伝える）: 分割背景に白い太字で、見出しと短い行の詩的なコピーを中央揃えで置く
4. お知らせ（最新情報を伝える）: 淡い水色の地に、日付・ピル型ラベル・リンクを縦に並べ、右側にスクロールバーを付ける
5. 特集カルーセル（主要コンテンツを回遊させる）: 白地に横長のバナーを置き、下にドットと一時停止ボタンを付ける
6. 対談企画（出演者のコンテンツへ誘導する）: かぎ括弧付きの見出しの下に、丸い顔写真を並べたバナーと 2 行のキャプションを置く
7. 思い出メッセージ（関係者の声へ誘導する）: 手書き風の吹き出し見出しの下に、文字が多いコラージュ風の水色バナーを置く
8. 解説コンテンツ（2つの対象を比較・解説する）: 縦書きの見出しの下に、黄と青紫の 2 枚のパネルにイラストを置いて並べる
9. 告知（記念企画の告知）: 分割背景の上に角丸の白いカードを重ね、斜線で挟んだ見出し・本文・枠付きの写真 2 枚を入れる
10. エンディングコピー（余韻を残す）: 分割背景に、4 段落に分けた詩的な白文字を中央揃えで置く
11. クロージングビジュアル（ファーストビューと対にして締める）: 車両の正面イラストを大きく置き、欧文タイトルと縦書きの呼びかけを重ねる

Imagery

• 乗り物の正面をデフォルメしたフラットイラスト。黄・濃紺・クリーム色で描く
• イラストは左右で色を変え、分割背景と色をそろえる
• 人物写真は丸く切り抜き、淡い色の輪で囲む
• 実物の写真は太い黄や青の枠で囲み、注釈を添える
• 手書き風の線や吹き出しで、親しみのある見出しを作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも背景の左右分割は保ち、中央に幅約 70% のコンテンツカードを縦に並べる
• PC では各カードの右側に、縦書きのキャプションを置く
• PC のファーストビューでは、お知らせとカルーセルを横に並べ、イラストに重ねる
• PC の告知カードは外周を波形にして、装飾を強める
• ヘッダーのメニューは、PC では青いボタンに英字を添える

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