--- version: alpha name: Floating Balloon Corporate Anniversary LP description: 白地にロイヤルブルーの面とカラフルな風船写真を散らした、企業の周年記念ブランドサイト型LP。極太ゴシックの大見出しと字間を広げたステートメントで始まる。そのあと青帯セクション、丸矢印の「Learn more」ボタン、数字パネル、ニュースカードが続く。 colors: primary: '#015FAE' background: '#FFFFFF' background-alt: '#EDF2F6' text: '#1C1311' text-body: '#34415C' secondary: '#05589F' on-primary: '#FDFEFD' cta: '#015EAE' on-cta: '#FFFFFF' accent-1: '#3CC8E0' accent-2: '#B5D82A' accent-3: '#ED7AC2' line: '#EDF2F6' tint-1: '#BCD8EF' accent-1-accessible: '#178092' typography: display: fontFamily: Dela Gothic One fontSize: 64px fontWeight: 900 lineHeight: 1.15 letterSpacing: -0.02em body-lg: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 2.6 letterSpacing: 0.2em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Montserrat fontSize: 64px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.02em body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.02em label-button: fontFamily: Montserrat fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 500 lineHeight: 1.6 rounded: sm: 0px md: 4px lg: 40px full: 999px spacing: unit: 8px card: 26px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-circle-arrow: backgroundColor: '{colors.on-primary}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 55px button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px section-heading: textColor: '{colors.text-body}' typography: '{typography.headline-lg}' height: 110px blue-band: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-lg}' height: 320px balloon-message: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' rounded: '{rounded.full}' height: 200px stat-panel: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 250px news-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 470px timeline: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 450px menu-button: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 42px --- # DESIGN.md — 青い風船が舞う企業周年ブランドLP（Floating Balloon Corporate Anniversary LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 住宅・不動産・リフォーム ／ **雰囲気**: ポップ・元気、信頼・誠実、清潔・爽やか、力強い・インパクト - **キーワード**: 風船・ロイヤルブルー・極太見出し・余白多め・周年記念・浮遊感 - **地の質感**: 白〜淡いグレーのフラットな地。リアルな風船写真のぼかしで奥行きを出す - **形**: 四角い面と真円の矢印ボタン、ピル型ボタン。カードは角丸なし - **温度感**: 爽やかでやや明るい。青を基調に黄緑・ピンクを差し色に使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#015FAE` | ブランドブルー（青帯セクション・ボタン） | 14% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 33% | 画素の実測 | | `background-alt` | `#EDF2F6` | 淡いブルーグレーのフッター・グラデ地 | 13% | 画素の実測 | | `text` | `#1C1311` | 見出し・ステートメントの黒 | 3% | 画素の実測 | | `text-body` | `#34415C` | 本文・セクション見出しの濃グレー | 2% | 画素の主要色に補正 | | `secondary` | `#05589F` | 英字ラベル・年号の青文字 | 1% | 画素の実測 | | `on-primary` | `#FDFEFD` | 青面の上の白文字・白丸ボタン | 2% | 画素の実測 | | `cta` | `#015EAE` | ピル型の一覧ボタン | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#3CC8E0` | シアンの風船 | 4% | 推定 | | `accent-2` | `#B5D82A` | 黄緑の風船 | 2% | 推定 | | `accent-3` | `#ED7AC2` | ピンクの風船 | 1% | 画素の実測 | | `line` | `#EDF2F6` | カード枠・区切り線 | 0% | 画素の主要色に補正 | | `tint-1` | `#BCD8EF` | 年表タイムラインの淡青ライン | 0% | 画素の実測 | | `accent-1-accessible` | `#178092` | AA を満たす補正値（計算） | | 計算 | - 地は白を基本にする。冒頭とフッターは白→淡いブルーグレーのグラデーションにする - ロイヤルブルーは全幅の帯セクション（特集・メッセージ・数字）の面に使う - 青面の文字はすべて白にする。矢印ボタンは白丸に青の矢印 - 白地では英字ラベルと年号を青にし、和文見出しは濃グレーにする - シアン・黄緑・ピンク・紫は風船写真だけで使い、文字や面には使わない - 数字パネルは青地で、白の細線で格子状に区切る - `balloon-message` は文字 `#FDFEFD` × 背景 `#3CC8E0` のコントラスト比が 1.97:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#178092`、4.58:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの2行コピー | ゴシック | Dela Gothic One | 900 | 64px | 1.15 | -0.02em | | `body-lg` | 字間の広い太字ステートメント | ゴシック | Zen Kaku Gothic New | 700 | 19px | 2.6 | 0.2em | | `headline-lg` | セクション和文見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.4 | 0.04em | | `accent` | 見出し上の英字ラベル | 欧文サンセリフ | Montserrat | 600 | 16px | 1.4 | 0.02em | | `headline-md` | 数字・年号の特大表示 | 欧文サンセリフ | Montserrat | 700 | 64px | 1.0 | -0.02em | | `body-md` | リード文・説明文 | ゴシック | Noto Sans JP | 400 | 15px | 1.7 | 0.02em | | `label-button` | Learn more・ボタン文字 | 欧文サンセリフ | Montserrat | 500 | 14px | 1.4 | 0.02em | | `note` | 日付・ニュース本文・注記 | ゴシック | Noto Sans JP | 500 | 11px | 1.6 | 0.0em | - 見出しは「英字ラベル（青・小）＋和文の極太見出し」の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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-51cb9207`（元 LP の URL から採番） - **元 LP**: https://www.cigr.co.jp/50th/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。