DESIGN.md — ティール×マゼンタのイラスト系SNS運用代行LP（Teal and Magenta Flat Illustration SNS Agency LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、情報量多め・訴求型
• キーワード: ティール・マゼンタ・フラットイラスト・細線カード・幾何学パターン・BtoB
• 地の質感: グラデーションを使わないフラットな塗り。影はほぼなく、細い黒線とうすいグレー面で区切る
• 形: 角丸カード、ピル型ボタン、半円・四つ葉・星を組み合わせた幾何学タイル、楕円の大きな曲線背景
• 温度感: 白とグレーのクールな地に、マゼンタで暖かさと勢いを足した中間の温度

Colors

• 地は白とライトグレーを交互にし、理由セクションだけ大きなティールの楕円面で包む
• マゼンタは主CTA・おすすめプラン枠・強調数字に限って使う
• ティールは小見出しのピルラベル、イラストの差し色、課題の強調語に使う
• 資料DLボタンは白地にマゼンタの枠線とマゼンタ文字にし、主CTAと並べる
• 料金プランはプランごとにオリーブ・マゼンタ・濃ティールで色を分ける
• 最後のCTAは黒帯に白文字とし、ボタンだけをカラーにする
• pill-label は文字 #FFFFFF × 背景 #5AB9B1 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#37827C、4.52:1）を使う。
• reason-number は文字 #FFFFFF × 背景 #5AB9B1 のコントラスト比が 2.33:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#37827C、4.52:1）を使う。

Typography

• 見出しは太いゴシックを中央揃えにし、上に小さなピルラベルや下線付きの小見出しを付ける
• 強調語は色を変えて改行し、目立たせる（ティールかマゼンタ）
• 金額は数字を大きくし、単位と税表記は小さくする
• 本文は13px前後のグレー寄りの黒で、行間を広めに取る
• 書体はゴシック1系統に揃え、明朝は使わない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は課題 2 列、事例・料金・フロー 3 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは中央見出しから始め、下に 32px 空ける
• 白カードは黒の細線か白ベタで囲み、ゆとりのある内側余白を取る
• 理由は大きな白カードの中でイラストと説明文を交互に並べる
• サービス内容はアイコンと短文の 2 列リストにする
• フローは番号付きのカードを矢印でつなぐ

Elevation & Depth

• 影はほぼ使わず、細線と面の色の差で階層を作る
• 料金カードは白地に、ごく淡い影か影なしにする
• おすすめプランだけマゼンタの太枠と上部の帯ラベルで浮かせる

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: スマホ画面のモックアップか、角丸の四角で切り抜く
• セクション境界: 直線の色の切り替えが基本。理由セクションだけ上下を楕円の曲線にする
• ボタンとラベルはピル型にする
• カードの角丸は 10〜16px にする
• FV 下部に半円・星・四つ葉のタイル帯を敷く
• 番号は黒い丸の中に白の数字を入れる

Components

• お問い合わせボタン（button-primary）: マゼンタのピル型。左にメールアイコンを付ける
• 資料DLボタン（button-outline）: 白地にマゼンタの枠線と文字。左に資料アイコンを付ける
• 見出し上ラベル（pill-label）: ティールのピルに白文字。カード上端に吹き出しのように掛ける
• 月桂樹の実績バッジ（badge-laurel）: 金色の月桂樹の中に実績の数字を置く
• 細線カード（card-outline）: 白地を黒い細線で囲む角丸カード。課題とサービスに使う
• 料金プランカード（pricing-card）: プラン色の見出しと大きな金額、チェックリスト、色付きのボタンで構成する
• フローカード（step-card）: 上端に黒丸の番号、ティールのアイコン、短い説明文
• FAQ行（faq-item）: 黒丸のQアイコン、質問文、右端に下向きの矢印。行の間を細線で区切る
• 理由番号ラベル（reason-number）: ティールの小さな角丸ラベルに番号を入れる

Do's and Don'ts

Do - 色はティール・マゼンタ・黒線の3つを軸にする - イラストは線画に2色の差し色で統一する - 主CTAと資料DLを必ず並べて置く - 実績の数字は大きく、ラベルは小さくする - セクションごとに地色を白とグレーで切り替える

Don't - グラデーションや強い影を使わない - マゼンタを広い面に使わない - 写真ばかりで構成しない。イラストを主役にする - 明朝体や手書き書体を混ぜない - 角が尖ったボタンを使わない

Page Structure

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

1. ファーストビュー（サービスの対象と内容、実績を一目で伝える）: 左に対象・サービス名・実績バッジ・2つのボタン、右にスマホのモック。下に幾何学タイルの帯
2. 悩みの提起（顧客の課題を2つに分けて共感を得る）: 細線カードを2つ並べ、上にピルラベル、イラスト、強調語をティールにした短文を置く
3. 原因と理由（課題の原因を示し、解決できる理由を3つ示す）: ティールの楕円面に白見出し。白い大きなカードの中でイラストと番号付きの説明を交互に並べる
4. サービス内容（対応範囲を網羅して示す）: 細線カード内に、上はイラストと見出し、下はアイコン付きの6項目を2列で並べる
5. 導入事例（業種別の成果で信頼を得る）: 3列カード。画像、業種ラベル、成果の見出し、グレーのラベルと数値の表
6. 料金プラン（価格を比較して選ばせる）: グレー地に3プランを並べ、中央をマゼンタ枠のおすすめにする。下に注釈とオプション表
7. 導入の流れ（申込のハードルを下げる）: 番号付きのカード3枚をティールの三角矢印でつなぐ
8. 資料ダウンロード（検討段階の見込み客を獲得する）: 資料の表紙サムネイル2つに、タイトル、短文、枠線ボタン
9. よくある質問（不安を解消する）: Qアイコン付きのアコーディオンを細線で区切って並べる
10. クロージングCTA（最後に問い合わせを促す）: 黒帯に白の大見出しと2つのボタン、右にスマホのモック

Imagery

• 人物は黒い線画で描き、服や小物の一部をティールとマゼンタで塗る
• ハート・#・@・吹き出しなど SNS を思わせる記号を周りに散らす
• 成果はステップの階段や、段階ごとに色分けした矢印の図で表す
• 実例はスマホ画面のモックアップに縦長の動画サムネイルを入れて見せる
• 幾何学タイルはティール・マゼンタ・グレーの半円・星・花形で作る
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP は全セクションを 1 カラムにし、カードを縦に積む
• FV はテキスト・ボタン・スマホのモックの順に縦に並べ、ボタンは横幅いっぱいにする
• 料金プランは縦に並べ、おすすめプランを先頭に置くか強調を保つ
• フローの矢印は下向きにする
• 理由セクションはイラストを上、説明を下にする

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