DESIGN.md — 青紫グラデと球体装飾のクリエイター支援LP（Gradient Orb Creator Agency LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: クール・先進的、ポップ・元気、シンプル・ミニマル
• キーワード: グラデーション球体・ラベンダー地・白カード・ロイヤルブルー・マゼンタ・SNS世代
• 地の質感: フラットな面に、光沢のあるグラデーション球体と細かいドット模様を重ねる
• 形: 大きな角丸カード、ピル型タブ、円形の写真切り抜き
• 温度感: クール寄りだが、マゼンタで華やかさを足す

Colors

• 地はラベンダー一色にし、情報はすべて白い角丸カードに載せる
• ブランドのアクセントはロイヤルブルー一色に絞り、タブ・見出しの丸・ラベルに使う
• グラデーション（シアン→青→紫→ピーチ/マゼンタ）は球体装飾とロゴタイプだけに使う
• 問い合わせは企業向けを青、クリエイター向けをマゼンタに色分けする
• 本文は墨色、補足説明はグレーにして階層をつける
• contact-block は文字 #FFFFFF × 背景 #2594ED のコントラスト比が 3.21:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1179CC、4.53:1）を使う。

Typography

• 欧文の大見出しは太い幾何学サンセリフにし、青→紫→ピンクのグラデーションで塗る
• 和文はすべてゴシック体で、見出しは700にする
• 番号は細めの欧文で大きく、ラベルは太字で小さくして対比をつける
• 本文は行間を2.0前後まで広くとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、機能一覧は「ラベル＋説明」の 2 列
• 本文ブロックの幅: 画面幅の約 91%
• 余白: セクション間 56px、基本単位 8px、カード内 24px（375px 幅換算）
• 白カードは左右16px程度の余白をとって置く
• セクション見出しはカードの外、ラベンダー地の上に置く
• カード内のテキストは左揃えにする
• 球体装飾はカードの背後にはみ出させる

Elevation & Depth

• カードは影なしのフラットにし、地との色差で浮かせる
• ピル型タブには青みのある薄い影をつける
• 球体は内側の光沢グラデーションで立体感を出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 24px。ボタンはピル型。
• 写真の切り抜き: 人物は円形、スマホ画面は角丸の端末フレーム、説明写真は角丸の正方形
• セクション境界: 直線の区切りは使わず、角丸カードの間のラベンダー地で区切る
• タブはピル型（未選択は青い枠線、選択中は青塗り）
• 展開パネルは角丸12pxで、上辺に吹き出しの三角をつける
• 機能ラベルは角丸4pxの小さな青い矩形にする

Components

• 青丸付きセクション見出し（section-heading-dot）: 見出しの左に小さな青い丸を置く
• 白い角丸カード（content-card）: ラベンダー地に載せる大きな白カード
• 番号付きピルタブ（pill-tab）: 番号と見出しを2段に組む。未選択は青枠
• 青い展開パネル（tab-panel）: 吹き出しの三角付き。画像と白文字の説明を入れる
• 機能ラベル行（feature-label）: 左に青グラデの短いラベル、右にグレーの説明
• 会社概要リスト（info-table）: 項目名と値を縦に並べ、細線で区切る
• 2色の問い合わせブロック（contact-block）: 青とマゼンタの面に白文字の見出しと白ボタンを置く
• 白い矢印ボタン（button-primary）: 白地・角丸小・中央に太字、右端に小さな矢印
• フッターのピルボタン（footer-pill）: 白いピル型に青文字

Do's and Don'ts

Do - 地はラベンダー、情報は白い角丸カードに統一する - グラデーション球体を画面の端からはみ出すように配置する - 強みはピルタブと展開パネルで切り替え式に見せる - 問い合わせは対象別に2色で分ける - 見出しの頭には必ず青丸をつける

Don't - 本文やカードの背景にグラデーションを敷かない - 明朝体や手書き系の書体を使わない - 濃い影や枠線の太いカードにしない - ブランド色以外の原色を増やさない - 角の立った四角いカードにしない

Page Structure

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

1. ヘッダー（ロゴとメニューを示す）: 白い角丸の浮遊バーに、ロゴとハンバーガーメニューを置く
2. ファーストビュー（サービスの世界観を伝える）: スマホ画面の写真、円形の人物写真、グラデーション球体、青い吹き出しのキャッチ、大きなグラデのロゴタイプ
3. サービス紹介（何を支援するかを説明する）: 白カードに3行のリード見出し、本文、フラットなイラストを置く
4. 強み（選ばれる理由を3つ示す）: 番号付きのピルタブ3つと、青い展開パネル（画像＋説明）
5. プラットフォーム解説（前提となる仕組みを説明する）: 欧文＋和文の見出し、角丸写真、本文、機能ラベル一覧
6. 会社概要（信頼性を示す）: 白カード内に、項目と値を細線区切りで並べる
7. お問い合わせ（対象別に行動を促す）: 青（企業向け）とマゼンタ（クリエイター向け）のブロックに白ボタンを置く
8. フッター（ナビゲーションと補助導線）: ロゴを中央に置き、リンク行と白いピルボタン2つ、社名表記を並べる

Imagery

• 人物は明るい屋内で撮った笑顔の若年層。円形に切り抜く
• メイン写真はスマホ端末のフレームの中に、配信中の画面風に収める
• 球体はシアン・青・紫・ピーチのグラデーションに光沢をつけ、大小を散らす
• イラストはフラットなベクターで、青・ピンク系。ライブ配信の道具を描く
• 背景には極小のドットパターンを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央寄せのカード幅を約60%に絞り、左右はラベンダー地と大きな球体で埋める
• PCではFVのロゴタイプを横並びで写真と重ね、ヘッダーにテキストメニューとマゼンタのボタンを出す
• PCではタブ3つを横並びにし、紹介文とイラストは左右2カラムにする
• 機能一覧はPCで2列×3行のグリッドにする
• 問い合わせの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 行書くと起動時に読み込まれる。