DESIGN.md — 紺×金の会員特典・通信サービス LP（Navy and Gold Premium Membership LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 上品・高級、信頼・誠実、ラグジュアリー・ダーク
• キーワード: 紺グラデーション・シャンパンゴールド・月桂樹の飾り・白い角丸カード・会員ランク・斜めの光の帯
• 地の質感: 紺地に斜めの半透明の光の帯とドット網点を重ねる。ボタンは金のグラデーションで、柔らかい影を付ける
• 形: 角丸カード、ピル型ボタン、FV 下端は V 字の切り欠き、見出し写真は片側を大きく丸めて切り抜く
• 温度感: やや寒色寄り。金で温かみと特別感を足す

Colors

• 地の色は、上から紺 → 黒 → 紺 → ラベンダー → 紺の順で切り替える
• 主ボタンは金のグラデーション＋紺文字だけにする。金を面で広く使わない
• 紺の地は左上が暗く右下が明るい斜めのグラデーションにする
• 金は小見出し・月桂樹・ボタン・イラストの背景に絞って使う
• 明るい地では見出しを紺、ボタンを白地に紺の線にする
• 外部アプリの帯（ティール）など、他ブランドの色は単独のバナーの中だけで使う

Typography

• 見出しはすべて太字のゴシックで、中央揃えにする
• セクション見出しの下に、金の月桂樹の飾りを左右対称に置く
• 特典見出しは「金の小見出し＋白の大見出し」の 2 段にする
• リード文は細めの 400 で、見出しの下に 1〜2 行だけ置く
• カードのタイトルは紺の太字で、2〜3 行に収める
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特典カードは横スクロールのカルーセル
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 特典セクションは細い白の枠線で囲み、その内側にカードを並べる
• リスト型カードは左に画像、中央にテキスト、右に矢印の 3 分割にする
• カルーセルの下には金と暗色のプログレスバーを置く
• 主 CTA は、FV と後半の利用案内の 2 か所に繰り返し置く
• アウトラインボタンは縦に 4 本並べ、間隔を 12px 程度にする

Elevation & Depth

• 金のボタンには、下方向にぼかした柔らかい影を付ける
• 白いカードには、紺地の上で薄い影を付ける
• ラベンダー地の上のカードは、影を付けずに白い面で区切る

Shapes

• 角丸: 小 8px ／ 中 14px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 見出しの背景写真は片側を大きな半円状に丸めて切り抜き、紺のドット網点を重ねる。カード内の写真は角丸の上辺に合わせる
• セクション境界: FV の下端は V 字（中央が下がる）の切り欠き。ほかのセクションはまっすぐ切り替える
• ボタンはすべてピル型にする
• ランク表示は、上の角だけ丸めたタブ型のラベルにする
• アイコンは細い白の線画で、円形モチーフを使う

Components

• 金のログインボタン（button-primary）: 金のグラデーションのピル型。2 行のラベルを置き、右端に紺の円に入ったログインアイコンを付ける
• もっと見るボタン（button-more）: 金のピル型で、文字は中央、右端に矢印を付ける。特典の枠線の下辺に重ねて置く
• 白のアウトラインボタン（button-outline）: 白地に紺の細い線のピル型。中央に文字、右に矢印を置く
• 月桂樹の飾り付き見出し（heading-laurel）: 白または紺の太字見出しの下に、金の月桂樹のラインを置く
• 横長の特典リストカード（card-list）: 白の角丸カード。左にイラストか写真、中央に紺の太字 3 行、右に紺の矢印を置く
• プレゼントカード（card-present）: 上にグレーのランクタブ、白地に写真、下に本文と矢印を置く
• サービス紹介のカルーセルカード（card-feature）: 白の角丸カードに金背景のイラストと紺の 2 行タイトルを入れる
• 問い合わせボックス（contact-box）: 上部の金の帯に白文字、下部の白地に金のボタンを置く

Do's and Don'ts

Do - 紺のグラデーション地に金を少量だけ差して、特別感を出す - セクション見出しには必ず月桂樹の飾りを付ける - カードは白の角丸で、右端に矢印を付けて、タップできることを示す - 主 CTA はページ内で 2 回以上繰り返す - 特典は「番号付きの小見出し＋見出し＋写真の背景」で始める

Don't - 金を背景の大きな面に使わない - 原色の赤やポップな配色を、地や装飾に持ち込まない - 角張ったボタンを使わない - 明朝体の見出しを混ぜない - 紺地に紺文字のカードを置くなど、コントラストを下げない

Page Structure

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

1. ファーストビュー（会員特典の価値を伝え、ログインへ誘導する）: 斜めに分割した写真のコラージュに光の粒を重ね、紺のグラデーション上に金のキャッチ・ロゴ・金ボタンを置く。下端は V 字にする
2. サービス概要（特典の全体像を 4 つで示す）: 黒帯に白の見出しと月桂樹を置き、金背景イラストのカードを横スクロールで並べる
3. 特典1（ポイント利用）（割引メニューを一覧で見せる）: 半円形に切り抜いた写真の見出しを置き、白枠の中に横長リストカードを 5 枚、最後にもっと見るボタンを置く
4. 特典2（イベント・プレゼント）（プレゼントで参加意欲を高める）: ランクタブ付きの写真カードを縦に並べる
5. 利用案内・CTA（ログインと各案内ページへ導く）: ラベンダー地に紺の見出し、金のログインボタン、アウトラインボタン 4 本、アプリのバナーを置く
6. お役立ち記事（関連コンテンツで理解を深める）: 金の丸付きの見出しを置き、白い記事カードを日付付きでカルーセルにする
7. よくある質問（サポートページへ誘導する）: 中央揃えの紺の見出しに、短い文とアウトラインボタンを付ける
8. お問い合わせ（連絡手段を示す）: 紺地に線画アイコンの見出し、金の帯付きボックス、SNS ごとのラベンダーのカードを置く

Imagery

• 家族・友人が笑顔で画面を見る、暖色のライフスタイル写真
• ライブ会場や会食などの特別体験の写真を、斜めの帯状に配置する
• 紺の線と金の塗りで描くフラットなイラスト（人物・ギフト・ポイント）
• 白の線画のアイコン（ポイント・的・吹き出しの？）を、見出しの上に置く
• 写真に紺のドット網点を重ね、文字が読めるようにする
• プレゼントの商品写真は、白か単色の背景の物撮りにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 900px で中央に置く
• サービス概要のカードは、PC では 4 列で並べる
• リストカードは、PC では 3 列に折り返して並べる
• プレゼントカードは、PC では 3 列で並べる
• アウトラインボタンと SNS のカードは、PC では 2 列にする
• 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 行書くと起動時に読み込まれる。