DESIGN.md — 白地に紺赤の斜線が走る周年記念サイト（Editorial Minimal Anniversary Timeline LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: シンプル・ミニマル、上品・高級、信頼・誠実、レトロ
• キーワード: 余白多め・欧文セリフ見出し・年号タイポ・斜線・モノクロ×カラー対比・タイムライン
• 地の質感: フラットな白地。影も質感もつけず、写真と細線だけで構成する。
• 形: 角丸なしの四角い写真。紺と赤の細い直線が画面を斜めに横切る。
• 温度感: 白とグレー中心で落ち着いた中間〜やや寒色寄り。赤と紺の差し色で記念らしい華やかさを出す。

Colors

• 地はほぼ白一色にする。色をつけるのは写真・年号・斜線だけにする。
• 過去は紺・青、未来は赤と色を分け、年号の数字で対比させる。
• 紺と赤の斜線は 1〜2px の細線で、ファーストビューにだけ大きく入れる。
• 濃いグレーの帯はページ末尾の制作物紹介にだけ使う。
• 本文はほぼ黒の濃いグレーで、英字の補足は中間グレーで小さく入れる。

Typography

• 全体を明朝と欧文セリフでそろえ、ゴシックはロゴ以外で使わない。
• 見出しは英字を大きく、その右下に和文ラベルを小さく添える。
• 年号はイタリックの欧文セリフで写真に重ねるくらい大きく入れる。
• 本文は 2〜3 行の短い文にとどめ、行間を広くとる。
• 英字の補足コピーは斜体で、和文の下か横に添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は中央 70% の幅で、写真とテキストを左右にずらして置く
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 96px、基本単位 8px、カード内 0px（375px 幅換算）
• 余白をたっぷりとり、セクション間は 80〜120px 空ける。
• 写真は左寄せ・右寄せを交互にして、ジグザグに流れを作る。
• 年号の数字は写真の端に重ねるように配置する。
• 年代の間は縦の点線でつなぎ、タイムラインを表す。
• ヘッダーは左にロゴ、右に小さな欧文ナビを置き、細く簡素に作る。

Elevation & Depth

• 影は使わず、すべて平面で作る。
• 重なりは年号の文字を写真に重ねるときだけにする。
• トップへ戻るボタンは丸いグレーの面だけで作り、影はつけない。

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長 3:2 前後
• セクション境界: 直線で切り替える。区切りは細い横線か縦の点線。末尾の濃色帯も直線で切る
• 装飾は細い直線（斜線・横線・点線）だけにする。
• 円形はトップへ戻るボタンだけにする。
• 写真に枠線はつけない。

Components

• 斜線入りファーストビュー（hero-diagonal-lines）: 白地に紺と赤の細線を斜めに交差させ、左上にロゴ、中央右にイラストを置く。下にスクロールの文字と縦線を添える。
• 英字＋和文ラベルの見出し（section-heading）: 大きな欧文セリフの英字の右下に、小さな明朝の和文ラベルを並べる。
• お知らせの行（news-row）: 上に日付、下にタイトルを置き、右端に外部リンクのアイコンを付ける。下に細い区切り線を引く。
• 年号ブロック（timeline-year）: 写真の端に斜体の大きな年号を重ね、横に 2 行の和文見出しと短い本文を置く。
• 縦の点線コネクタ（timeline-dots）: 年代のブロックどうしを薄いグレーの縦の点線でつなぐ。
• 中央寄せの告知文（centered-notice）: 波ダッシュで挟んだ和文の一文と、その下に英字の斜体を添えて中央に置く。
• 制作物の濃色帯（dark-works-band）: 濃いグレーの全幅の帯に、左は白の英字見出し、右は制作物の画像を 2 枚並べる。
• トップへ戻るボタン（back-to-top）: 右下に置くグレーの丸ボタン。中に白い上向き矢印を入れる。

Do's and Don'ts

Do - 余白を広くとり、1 画面に置く要素を少なくする。 - 過去はモノクロ写真と青の年号、現在はカラー写真と赤の年号で対比させる。 - 見出しは欧文セリフ、和文は明朝に統一する。 - 英字の斜体サブコピーを要所に添えて、雑誌のような雰囲気を出す。 - 斜線は細く、ファーストビューだけで大胆に使う。

Don't - 太いゴシックや派手なボタンを使わない。 - 角丸・影・グラデーションを入れない。 - 背景色をセクションごとに切り替えない。濃色は末尾の帯だけにする。 - 本文を長く書かない。 - 差し色を紺・赤・黄以外に増やさない。

Page Structure

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

1. ヘッダー（サイト名と移動先を示す）: 左に小さな欧文のサイト名、右に欧文ナビを 3 つ置く。下に細い区切り線を引く。
2. ファーストビュー（周年の記念らしさを印象づける）: 白地に紺と赤の斜線を交差させ、周年ロゴと線画風の車両イラストを置く。下にスクロールを促す縦線を入れる。
3. お知らせ（最新情報を伝える）: 英字見出しの下に、日付とタイトルの行を区切り線つきで 1 件並べる。
4. 沿革（過去）（創業時の歴史を見せる）: 左にモノクロ写真を大きく置き、青い斜体の年号を重ねる。右に 2 行の見出しと短い説明を入れる。
5. 追加予告（コンテンツを順次追加すると伝える）: 縦の点線のあいだに、中央寄せの和文と英字の斜体を置く。
6. 沿革（現在）（現在と未来への想いを伝える）: 見出しを左上、赤い斜体の年号を右上に置き、カラー写真を右寄せで配置する。下に英字の一言を添える。
7. ロゴ紹介（記念ロゴの意味を説明する）: 中央にロゴを大きく置き、下に英字の斜体コピーと 2 行の説明を入れる。
8. 制作物（ポスターなどの制作物を見せる）: 濃いグレーの全幅の帯にする。左に白の英字見出し、右に制作物の画像 2 枚を並べる。
9. フッター（コピーライトを表記する）: 白地の中央に小さなコピーライトだけを置き、右下にトップへ戻る丸ボタンを置く。

Imagery

• 過去の写真はざらつきのあるモノクロのアーカイブ写真を使う。
• 現在の写真は青空の下で撮った、明るく鮮やかなカラー写真を使う。
• メインビジュアルは、彩度を抑えた手描き調の線画イラストにする。
• ロゴは紺・赤・黄の幾何学図形を組み合わせたフラットなデザインにする。
• 制作物は、ポスターのデザインをそのままの見本として並べる。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は 1 カラムにして、写真を幅いっぱいに、年号は写真の下端に重ねる。
• PC は中央 70% 幅にして、写真とテキストを左右にずらして配置する。
• 見出しの英字は、SP 36px・PC 48px くらいにする。
• 制作物の帯は、SP では見出しを上、画像 2 枚を縦に並べる。
• ナビは SP でも 3 項目のテキストのまま右上に置く。

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