---
version: alpha
name: Gradient Orb Creator Agency LP
description: 淡いラベンダー地に白い角丸カードを重ねて組む、SNSコマース向けのクリエイター支援エージェンシーLP。青〜紫〜マゼンタのグラデーション球体と大きな欧文ロゴタイプで先進的に見せる。本文はシンプルな情報設計で、最後に企業向けの青とクリエイター向けのマゼンタ、2つの問い合わせ導線に分けている。
colors:
  background: '#EAEAF6'
  surface: '#FFFFFF'
  primary: '#3D64EB'
  on-primary: '#FFFFFF'
  secondary: '#2594ED'
  cta: '#FF006E'
  on-cta: '#FEFEFE'
  text: '#212124'
  text-muted: '#7A7F90'
  line: '#DEDDE5'
  accent-1: '#9A4FD8'
  accent-2: '#FAC9B2'
  accent-3: '#F0306E'
  secondary-accessible: '#1179CC'
typography:
  display:
    fontFamily: Montserrat
    fontSize: 52px
    fontWeight: 800
    lineHeight: 1.1
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Noto Sans JP
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.4
  headline-md:
    fontFamily: Noto Sans JP
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.6
  headline-sm:
    fontFamily: Noto Sans JP
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
  body-md:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 500
    lineHeight: 2.0
    letterSpacing: 0.02em
  note:
    fontFamily: Noto Sans JP
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.6
  accent:
    fontFamily: Montserrat
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.02em
  label-button:
    fontFamily: Noto Sans JP
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.02em
rounded:
  sm: 4px
  md: 12px
  lg: 24px
  full: 999px
spacing:
  unit: 8px
  card: 24px
  section: 56px
components:
  page:
    backgroundColor: '{colors.background}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
  heading:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
  section-heading-dot:
    textColor: '{colors.text}'
    typography: '{typography.headline-lg}'
    height: 40px
  content-card:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 600px
  pill-tab:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.full}'
    height: 64px
  tab-panel:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.md}'
    height: 500px
  feature-label:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-sm}'
    rounded: '{rounded.sm}'
    height: 56px
  info-table:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.text}'
    typography: '{typography.body-md}'
    rounded: '{rounded.lg}'
    height: 90px
  contact-block:
    backgroundColor: '{colors.secondary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.headline-md}'
    rounded: '{rounded.lg}'
    height: 230px
  button-primary:
    backgroundColor: '{colors.on-cta}'
    textColor: '{colors.text}'
    typography: '{typography.label-button}'
    rounded: '{rounded.sm}'
    height: 64px
  footer-pill:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.primary}'
    typography: '{typography.note}'
    rounded: '{rounded.full}'
    height: 56px
---

# 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

| Token | HEX | 役割 | 面積の目安 | 値の出どころ |
|---|---|---|---|---|
| `background` | `#EAEAF6` | ページ地のラベンダー | 30% | 画素の実測 |
| `surface` | `#FFFFFF` | コンテンツカード | 37% | 画素の実測 |
| `primary` | `#3D64EB` | ブランドのロイヤルブルー（タブ・パネル） | 11% | 画素の実測 |
| `on-primary` | `#FFFFFF` | 青い面の上の白文字 | 1% | 画素の主要色に補正 |
| `secondary` | `#2594ED` | 企業向け問い合わせブロックのスカイブルー | 3% | 画素の実測 |
| `cta` | `#FF006E` | クリエイター応募ブロックのマゼンタ | 3% | 画素の実測 |
| `on-cta` | `#FEFEFE` | CTAボタンの白地 | 1% | 画素の実測 |
| `text` | `#212124` | 見出し・本文の濃い墨色 | 4% | 画素の実測 |
| `text-muted` | `#7A7F90` | 説明の小さなグレー文字 | 1% | 推定 |
| `line` | `#DEDDE5` | 表の区切り線 | 1% | 画素の主要色に補正 |
| `accent-1` | `#9A4FD8` | グラデーション球体の紫 | 4% | 推定 |
| `accent-2` | `#FAC9B2` | 球体の淡いピーチ | 2% | 画素の実測 |
| `accent-3` | `#F0306E` | ロゴタイプのピンク | 1% | 推定 |
| `secondary-accessible` | `#1179CC` | AA を満たす補正値（計算） |  | 計算 |

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

## Typography

| Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 |
|---|---|---|---|---|---|---|---|
| `display` | FVの大きな欧文ロゴタイプ（グラデ文字） | 欧文サンセリフ | Montserrat | 800 | 52px | 1.1 | -0.01em |
| `headline-lg` | セクション見出し（左に青い丸） | ゴシック | Noto Sans JP | 700 | 28px | 1.4 | 0.0em |
| `headline-md` | カード内のリード見出し | ゴシック | Noto Sans JP | 700 | 20px | 1.6 | 0.0em |
| `headline-sm` | タブ名・ブロック見出し | ゴシック | Noto Sans JP | 700 | 14px | 1.4 | 0.0em |
| `body-md` | 本文 | ゴシック | Noto Sans JP | 500 | 13px | 2.0 | 0.02em |
| `note` | 機能の説明・フッター | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em |
| `accent` | 番号（01・02） | 欧文サンセリフ | Montserrat | 400 | 28px | 1.0 | 0.02em |
| `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.4 | 0.02em |

- 欧文の大見出しは太い幾何学サンセリフにし、青→紫→ピンクのグラデーションで塗る
- 和文はすべてゴシック体で、見出しは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

```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-f5c5cd0d`（元 LP の URL から採番）
- **元 LP**: https://shopineat.jp/
- **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照）
- **確度**: 色 高（8/13 色を画素から実測）、書体 中、余白 中
- **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠）
- **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。