DESIGN.md — 朱赤の疾走ラインと生成り地の銀行ブランドLP（Vermilion Speed-Line Corporate Brand LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、力強い・インパクト、上品・高級、シンプル・ミニマル
• キーワード: 朱赤の疾走ライン・生成り地・明朝の語りかけ・英字コンデンス見出し・大きな余白・ブランドムービー
• 地の質感: マットな生成り紙のような無地。FV の写真には網点・ハーフトーン加工をかける。図版の背景には薄い方眼グリッドを敷く
• 形: 角丸なしの直線的な面と、3本の平行線が一本に収束する大きな曲線ライン
• 温度感: 温かみのある朱赤と生成りを、チャコールで引き締めた中間〜やや暖色

Colors

• 基本地は生成りグレージュにして、純白は使わない
• 朱赤は曲線ライン、ステートメントのベタ面、明朝コピー、図版の名称に限って使う
• 動画セクションは暗い赤茶の地にチャコールの太い斜めストライプを重ね、場面を転換する
• 英字見出しはチャコールで落ち着かせる。朱赤の見出しは主役コピーと図版名だけにする
• 朱赤ベタ面の上の文字は白だけにする
• 色数は朱赤・生成り・チャコール・赤茶の4系統に絞る
• slogan-grid-box は文字 #E8390E × 背景 #F1ECE6 のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C9310C、4.55:1）を使う。
• statement-band は文字 #F3F0EA × 背景 #E8390E のコントラスト比が 3.68:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C9310C、4.61:1）を使う。
• element-figure は文字 #E8390E × 背景 #F1ECE6 のコントラスト比が 3.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C9310C、4.55:1）を使う。

Typography

• スローガンは明朝の細めのウェイトで、字間を広く取る
• 見出しは英字コンデンスの大文字にし、下に小さな日本語を添えて2段にする
• 冒頭の語りかけ文は朱赤の明朝で、1行ずつ短く改行し、行間を広く取る
• 本文はゴシックで、字間 0.08em 以上・行間 2 前後にする
• 太字の多用や装飾的な書体は避ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。動画のサムネイルだけ 2 列
• 本文ブロックの幅: 画面幅の約 75%
• 余白: セクション間 110px、基本単位 8px、カード内 24px（375px 幅換算）
• 本文は左揃えにして、左右に大きな余白を取る
• 語りかけ文の段落の間に、朱赤の曲線ラインを画面幅いっぱいに挟む
• 見出しは中央揃え
• セクションの上下にたっぷり余白を取る（100px 以上）
• 図版は方眼の背景を敷いた枠に中央配置する

Elevation & Depth

• 影は使わず、すべてフラットにする
• 奥行きは、ベタ面の色の切り替えと斜めストライプで出す

Shapes

• 角丸: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。
• 写真の切り抜き: FV は画面幅いっぱいの全面写真で、網点加工をかける。動画は 16:9 で全幅
• セクション境界: 朱赤の曲線ラインが地を斜めに横切ってつなぐ。暗色帯と朱赤帯とは直線で切り替える
• 角丸は一切使わない
• 3本の平行な曲線が1本に収束するラインを主なモチーフにする
• ラインは画面端からはみ出すように大きく描く

Components

• 朱赤の曲線ライン区切り（speed-line-divider）: 3本の平行線が流れるように曲がり、細くなって収束していく装飾。段落の間とセクションの間に置く
• 英字＋和文の2段見出し（section-heading-en）: チャコールの英字コンデンス大文字の下に、小さな日本語を添えて中央揃えにする
• 方眼背景のスローガン枠（slogan-grid-box）: 薄い方眼グリッドの面の中央に、朱赤の明朝スローガンを置く
• 朱赤ベタのステートメント帯（statement-band）: 全幅の朱赤の面に、小さな英字ラベルと白のゴシック本文を置く
• 斜めストライプの動画セクション（movie-section）: 暗い赤茶の地にグレーの斜め帯を重ね、全幅のメイン動画とサブ動画2本を並べる
• 要素解説の図版＋名称（element-figure）: 方眼背景の図版、朱赤の英字名称、括弧で囲んだ読み仮名、解説本文の順に並べる
• FV の英字ラベル（fv-label）: 朱赤の下線付きの小さな英字ラベルを、スローガンの上に置く

Do's and Don'ts

Do - 朱赤の曲線ラインで、ページ全体に流れと勢いを持たせる - 生成りの地に大きな余白を取り、言葉を一行ずつ読ませる - 英字見出しはコンデンス体の大文字に統一する - 写真には網点やハーフトーンの質感を加え、広告的な鮮やかさを抑える - 締めにはロゴを中央に置き、静かに終える

Don't - 角丸のカードやピル型ボタンを使わない - 朱赤以外の鮮やかな色を足さない - 影やグラデーションの装飾を入れない - 本文を詰め込まない（行間 2 未満にしない） - 地を純白にしない

Page Structure

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

1. ファーストビュー（スローガンで印象づける）: 全面の網点加工写真の上に、英字ラベルと朱赤の明朝スローガンを重ねる
2. ブランドメッセージ本文（想いを詩的に語る）: 生成り地に朱赤の明朝で短い行を並べ、段落の間に曲線ラインを挟む
3. ロゴの区切り（前半を締めくくる）: 左寄せのロゴと、画面端から大きく流れ込む朱赤のライン
4. ブランドムービー（動画で世界観を伝える）: 暗い赤茶の地に斜めのグレー帯を重ね、全幅の動画と小さな動画2本を並べる
5. ブランドステートメント（ブランドを再定義した背景を説明する）: 朱赤のベタ面に白の本文を、行間を広く取って置く
6. スローガン解説（スローガンの意味を伝える）: 英字＋和文の見出し、方眼枠のスローガン、解説本文の順に並べる
7. ブランド要素解説（シンボルの意味を伝える）: 方眼背景の図版、朱赤の名称、解説本文の順に並べる
8. フッター（ブランドで締める）: 広い余白の中央にロゴだけを置く

Imagery

• 人物の足元や上半身のスナップ写真に、網点やハーフトーン加工をかける
• 白飛び気味の明るい背景で、被写体に動きのある瞬間を切り取る
• 朱赤の太い帯や放射状のラインを写真に重ね、躍動感を出す
• 図版は朱赤の単色ベクターで描き、薄い方眼の上に置く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC も 1 カラムの縦構成は変えず、本文幅を約 70% に保つ
• PC の FV は人物写真を左寄せにし、朱赤の帯の上にスローガンを横長に重ねる
• 朱赤のステートメント本文は、PC では1行を長くして行数を減らす
• 曲線ラインは PC でも画面幅いっぱいに伸ばす
• 見出しサイズは PC で約 1.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 行書くと起動時に読み込まれる。