DESIGN.md — 青い風船が舞う企業周年ブランドLP（Floating Balloon Corporate Anniversary LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、力強い・インパクト
• キーワード: 風船・ロイヤルブルー・極太見出し・余白多め・周年記念・浮遊感
• 地の質感: 白〜淡いグレーのフラットな地。リアルな風船写真のぼかしで奥行きを出す
• 形: 四角い面と真円の矢印ボタン、ピル型ボタン。カードは角丸なし
• 温度感: 爽やかでやや明るい。青を基調に黄緑・ピンクを差し色に使う

Colors

• 地は白を基本にする。冒頭とフッターは白→淡いブルーグレーのグラデーションにする
• ロイヤルブルーは全幅の帯セクション（特集・メッセージ・数字）の面に使う
• 青面の文字はすべて白にする。矢印ボタンは白丸に青の矢印
• 白地では英字ラベルと年号を青にし、和文見出しは濃グレーにする
• シアン・黄緑・ピンク・紫は風船写真だけで使い、文字や面には使わない
• 数字パネルは青地で、白の細線で格子状に区切る
• balloon-message は文字 #FDFEFD × 背景 #3CC8E0 のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#178092、4.58:1）を使う。

Typography

• 見出しは「英字ラベル（青・小）＋和文の極太見出し」の2段で組む
• ステートメントは太字で字間を0.2em前後に広げ、行間は2.5倍以上取る
• 数字は欧文の極太で特大に組む。単位（年・戸）は小さく右下に添える
• ボタン文字は英字の「Learn more」で統一する
• 白地の和文見出しは中央揃え。青帯のセクションでは左揃え
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。数字パネルだけ下段を 2 分割
• 本文ブロックの幅: 画面幅の約 82%
• 余白: セクション間 80px、基本単位 8px、カード内 26px（375px 幅換算）
• 写真と青帯は画面幅いっぱいに敷く
• 本文ブロックは左右に約34pxの余白
• 風船は画面端からはみ出す位置に配置して浮遊感を出す
• 青帯の中は左揃えで、ラベル→見出し→リード→丸ボタンの順に縦積み
• ニュースカードは縦に並べ、カード間を約28px空ける

Elevation & Depth

• 影はほぼ使わず、フラットに仕上げる
• ヘッダーだけ下に薄い影を付けて固定する
• 奥行きは風船写真のぼかし（被写界深度）で表現する

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 写真は四角で全幅か角丸なし。年表の写真だけ大きな円形にトリミングする
• セクション境界: 直線で切り替える。写真と青帯を直接つなげる
• Learn moreは直径約55pxの真円に矢印を入れる
• 一覧ボタンとメニューボタンはピル型
• カードは角丸なしで細い枠線
• ページトップボタンは青い真円

Components

• 丸矢印Learn more（button-circle-arrow）: 真円の中に右矢印を入れ、右に英字ラベルを添える。青地では白丸、白地では青丸
• 一覧へのピル型ボタン（button-pill）: 幅85%の青いピル型。左に細長い矢印を置き、白文字で一覧への誘導を書く
• 英字ラベル付き見出し（section-heading）: 青い英字ラベルの下に、濃グレーの極太和文見出しを中央に置く
• 青帯コンテンツブロック（blue-band）: 全幅の青面に、白のラベル・見出し・リード・丸ボタンを左揃えで並べる。上に全幅の写真を接続する
• 風船メッセージ（balloon-message）: 色違いの風船写真に、短い白文字の言葉を重ねてランダムに配置する
• 数字パネル（stat-panel）: 青地を白い細線で格子に区切る。アイソメトリックのイラストと特大の数字を組み合わせる
• ニュースカード（news-card）: 上に写真、下に日付・小さな本文・丸矢印を置く。細枠で角丸なし
• 横スクロール年表（timeline）: 淡青の横線に丸ノードを置き、青の特大年号と円形写真を並べる
• ヘッダーMENUボタン（menu-button）: 右上に置く青いピル型ボタン。ハンバーガーアイコン＋英字

Do's and Don'ts

Do - 風船写真を画面の端に散らし、一部をはみ出させる - 青帯と白地を交互に並べてリズムを作る - 英字ラベルと和文見出しを必ずセットにする - 数字は欧文の極太で大きく見せる - 余白をたっぷり取り、要素を詰め込まない

Don't - 差し色（黄緑・ピンク）を文字やボタンに使わない - カードに強い影や大きな角丸を付けない - 青を濃紺や水色に変えない - 見出しを細字にしない - 装飾を風船以外のモチーフに広げない

Page Structure

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

1. ファーストビュー（ブランドのスローガンを強く印象づける）: 白地に極太の2行コピーを置き、周囲にぼかした風船を散らす。右端に縦書きのScrollを添える
2. ステートメント（企業の想いを語る）: 字間の広い太字の長文を左揃えで組む。下は風船の群れが街から舞い上がるビジュアルで締める
3. ブランドムービー（動画で世界観を伝える）: 英字ラベル＋見出し＋小見出しの下に、再生ボタン付きのサムネイルを置く
4. 特集（社員）（社員の熱量を見せる）: 社員写真のグリッドに青帯をつなげ、見出し・リード・丸ボタンを置く
5. 応援メッセージ（外部からの評価を見せる）: 色違いの風船に短い言葉を重ねて並べ、ピル型ボタンで一覧へ誘導する
6. トップメッセージ（代表者の言葉へ誘導する）: 人物写真の下に青帯を置き、かぎ括弧付きのタイトル・肩書・丸ボタンを並べる。2名分を繰り返す
7. 沿革（歴史をたどらせる）: 見出しと丸ボタンの下に、横スクロールの年表（特大の年号＋円形写真）を置く
8. 数字で見る（実績を定量的に示す）: 青地の格子パネルに、アイソメトリックのイラストと特大の数字を並べる
9. ニュース（最新の取り組みを伝える）: 写真付きのカードを3件並べ、ピル型ボタンで一覧へ誘導する
10. 締めのメッセージ（感謝を伝えて締める）: 白地に太字2行を中央揃えで置く
11. フッター（サイト内の回遊とシェアを促す）: 淡いブルーグレー地に英字見出しのサイトマップ、SNSアイコン、規約リンク、青丸のページトップを置く

Imagery

• 光沢のあるリアルなゴム風船を、青系中心に黄緑・ピンク・オレンジを交えて使う
• 手前の風船は強くぼかし、被写界深度で浮遊感を出す
• 人物はグレー背景のスタジオ撮影で笑顔のバストアップ。手書きの吹き出しプレートを持たせる
• 数字パネルのイラストはアイソメトリックの建物と人物にし、紙吹雪を添える
• 物件写真は明るい自然光のインテリアや俯瞰の空撮を使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅を約60%に絞って中央寄せにし、風船を左右の余白いっぱいに散らす
• PCの青帯セクションは左半分を青テキスト、右半分を写真にした2分割にする
• トップメッセージはPCで写真と青面を左右交互に入れ替える
• 数字パネルはPCで左に見出し、右に格子パネルを置く
• ニュースはPCで3カラムに横並びにする
• ムービーは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 行書くと起動時に読み込まれる。