DESIGN.md — 青×オレンジのドット柄積立保険 LP（Pixel Mosaic Blue Orange Savings Insurance LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、親しみ・手作り感、情報量多め・訴求型、ポップ・元気
• キーワード: ピクセルモザイク・青×オレンジ・マーカー下線・線画人物イラスト・吹き出し対話・シミュレーション
• 地の質感: フラットな単色面だけで作る。小さな正方形タイルを散らしたドット柄で動きを出す
• 形: 四角いブロックが基本。吹き出しとカードは小さめの角丸。セクション境界は下向き V 字
• 温度感: クリームとオレンジで暖かくし、青で誠実さを足した中間よりやや暖かい温度

Colors

• 地は白を基本にする。特長セクションはクリーム、悩みと FAQ は淡い青にして交互に切り替える
• ブランド青は帯・ラベル・タブ・見出しに使う。オレンジはドットと番号、手書きのサブコピーに使う
• 赤は CTA ボタンと金額・強調語だけに使う
• 見出しの下には淡いオレンジのマーカー線を引く
• フッター帯だけ濃いグレーにして締める

Typography

• 見出しは極太ゴシックにし、キーワードだけ太字か赤文字にする
• 数字は欧文の太字で一回り大きくする
• ポイント番号ラベルは白抜きのカタカナを 1 文字ずつ青い四角に入れ、番号だけオレンジ地にする
• サブコピーはオレンジの手書き風書体にして、吹き出しのしっぽ付き下線を添える
• 本文の強調は太字だけで行い、色は増やさない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。シミュレーションのタブは 2〜3 列
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• ポイントのセクションはクリーム帯を全幅で敷き、中央にラベル→サブコピー→見出しの順で積む
• 吹き出しは人物イラストを左に置き、右側に角丸の枠を重ねる
• CTA はセクションの間に繰り返し置く
• FV の下に 4 つのポイントを横長のカードで縦に並べ、ページ内リンクにする

Elevation & Depth

• CTA ボタンだけに下方向の影を付けて立体感を出す
• カード・吹き出しは影なしでフラットにし、線か面で区切る
• FV の台座だけ淡いグレーのグラデーションと影を付ける

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 人物は線画の上半身イラストを切り抜きで使う。アイコンは青い線の円形バッジに入れる
• セクション境界: 悩みセクションの下端は下向きの V 字。FV の上下はピクセルドットの帯でつなぐ
• ボタンは角丸 4px 程度の横長長方形にする
• ラベルとタブは角を立てた四角にする
• 新発売バッジは十字型のピクセル形状にする
• アコーディオンは下線区切りにして右端に＋を置く

Components

• 資料請求 CTA（button-primary）: 赤のグラデーションの横長ボタン。右端に白いドット矢印を付ける
• ポイント番号ラベル（point-label）: 青い四角に 1 文字ずつ白抜きで入れ、番号だけオレンジの四角にする
• マーカー下線見出し（marker-heading）: 極太の見出しで、各行の下半分に淡いオレンジの帯を敷く
• 人物吹き出し（speech-bubble）: 白地に濃いグレーの枠を付けた角丸の吹き出し。左に悩む人物イラストを重ねる
• ポイント目次カード（point-index-card）: クリーム地の横長カード。左にラベル、右にオレンジの下向き矢印を置く
• 金額シミュレーションタブ（sim-tab）: 青い枠のタブ。選択中は青地に白文字にし、結果の金額は赤の大きな数字で出す
• FAQ アコーディオン（accordion）: 淡青地に青い Q 番号と青文字の質問。下線で区切り、右端に＋を置く
• ドットモザイク帯（pixel-band）: 青とオレンジの小さな正方形を密度を変えて並べた装飾の帯
• 告知帯（tv-band）: 全幅の青帯に、斜線で挟んだ白文字の告知を入れる。角にドットを置く

Do's and Don'ts

Do - 装飾は正方形ドットのモザイクで統一する - 特長は「番号ラベル→手書きサブコピー→マーカー見出し→吹き出し」の型で繰り返す - 数値（返戻率・金額）は大きく太くし、金額は赤にする - CTA は各ポイントの後に置き、同じデザインを繰り返す - 人物は線画に単色を塗ったシンプルなイラストにする

Don't - 写真を多用しない - 赤を CTA と金額以外に広げない - 大きな角丸やピル型ボタンにしない - グラデーション背景やぼかし影を多用しない - 青とオレンジ以外のアクセント色を増やさない

Page Structure

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

1. ヘッダー（企業ロゴの表示）: 白地の左上にロゴだけを置く
2. ファーストビュー（商品名とキャッチを示す）: 上部にドット柄を置く。青ラベル、太字キャッチ、ドット文字の商品名、十字の新発売バッジ、グレーの台座を重ねる
3. ポイント目次（4 つの特長を一覧で見せる）: クリームの横長カードを 4 枚縦に並べ、各カードにラベルと矢印を付ける
4. 告知帯（広告展開で信頼感を出す）: 全幅の青帯に白文字を入れる
5. 悩みの提起（資産形成への不安に共感する）: 淡い青地に白い円を置き、周りにアイコンを散らす。手書き風の赤黒キャッチと悩む男性を添え、下端は V 字にする
6. 解決提示（商品を解決策として紹介する）: 白地に青の太字キャッチと商品ロゴを置く
7. 特長（ポイント 1〜4）（特長を順に説明する）: クリーム帯に番号ラベル、サブコピー、マーカー見出しを置き、悩む人物の吹き出しと回答の吹き出しで対話させる
8. 給付イメージ（仕組みを図で示す）: 白いカードに青とオレンジの面グラフ、矢印、注釈を入れる
9. シミュレーション（金額別の受取額を体験させる）: 青い枠のタブで金額を切り替え、結果を赤の大きな数字で出す。お札と硬貨のイラストを添える
10. CTA（資料請求へ誘導する）: 中央に赤い横長ボタンを置く
11. 保険金の説明（支払条件を補足する）: 淡青地に青い四角付きの見出しとアコーディオンを置く
12. クロージング（商品名を再提示して最終 CTA を置く）: 白地にキャッチと商品ロゴ、赤ボタンを置く
13. よくある質問（不安を解消する）: 淡青地に Q 番号付きのアコーディオンを置く
14. 注意事項・フッター（法定表記と企業情報を示す）: 薄灰地に小さな注記を入れ、白地にスローガンとロゴを置く。最下部は濃いグレー帯にし、赤いページトップボタンを付ける

Imagery

• 人物は黒い線画に肌色と単色の服を塗ったフラットなイラストにする。悩み顔と、スーツで資料を持つ回答役を用意する
• アイコンは青い線のお金・カレンダー・貯金箱などを白い円の中に入れる
• 装飾は青とオレンジの正方形を散らしたピクセルモザイクにする
• お札・硬貨は淡いベージュの手描き風イラストにする
• グラフは青とオレンジの面を重ね、赤い矢印で増加を示す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央約 50% 幅のコンテンツにし、背景帯は全幅にする
• PC のポイント目次は 4 列のカードを横に並べる
• PC の吹き出しは悩み役を左、回答役を右に互い違いに置く
• PC のシミュレーションタブは 5 つを 1 行に並べる
• PC の CTA は小さめにして中央に置く

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