DESIGN.md — 黄×赤×墨の線画イラスト通信サービス LP（Bright Yellow Flat Illustration Telecom Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実
• キーワード: 鮮やかな黄色・赤い特典数字・黒線＋黄色の線画・リボン型番号バッジ・墨色ピルボタン・クリーム地の白カード
• 地の質感: フラットな単色の面だけで作る。グラデーションは見出し横の小さな丸い装飾にだけ使う
• 形: 白い角丸カード、ピル型ボタン、ツバメの尾の形のリボンバッジ、黄色いマーカー下線
• 温度感: 暖色寄りで明るく元気

Colors

• 地はクリーム色にし、内容は白いカードに載せる
• 申込 CTA のあるセクションは全幅の黄色の帯にする
• 赤は主 CTA と「無料」「OFF」など特典の文言だけに使う
• サブの導線ボタンはすべて墨色にして、赤い CTA と役割を分ける
• 強調したい数字の下には黄色のマーカー帯を敷く
• 青は提供エリア外の案内のような例外的な情報だけに限る
• button-primary は文字 #FFF2F6 × 背景 #EC0632 のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E0062F、4.55:1）を使う。
• marker-number は文字 #DB062F × 背景 #FFE500 のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#CC062C、4.53:1）を使う。

Typography

• 見出しは中央揃えにし、2〜3 行で改行位置を整える
• 特典の数字は周りの文字の約 1.5 倍の大きさにし、赤で極太にする
• 注釈は ※ をぶら下げてインデントをそろえる
• 本文は左揃えにし、行間は 1.9 前後でゆったり取る
• セクションのタイトルは右上がりに少し傾けた極太文字と黒い帯ラベルを重ねる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC はカード内を左に文章、右にイラストの 2 カラムにする
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算）
• メリットカード同士は約 40px 空けて縦に並べる
• カードの上端中央にリボンバッジを重ねる
• CTA の帯は全幅にし、中のボタンは幅 85% にする
• 1 枚のカードは見出し → 強調 → イラスト → 注釈 → ボタンの順で組む
• ファーストビュー直下に、契約サービスを選ぶ 2 つのタブを置く

Elevation & Depth

• 基本はフラットにし、カードは細い枠線だけで区切る
• サポートリンクのカードにだけ、薄くぼかした影をつける
• 黄色い帯やバッジに影はつけない

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。
• 写真の切り抜き: 写真は使わず、背景を抜いた線画イラストを置く。アイコンは黄色い丸の中に入れる
• セクション境界: 区切りは直線にし、背景色を全幅で切り替える
• ボタンはすべてピル型にし、右端に「>」か外部リンクのアイコンを置く
• 番号バッジは下端に切れ込みのあるリボン型にする
• 吹き出しは下に小さな三角をつける
• タブは上の角だけを丸める

Components

• 赤の申込ボタン（button-primary）: 黄色い帯の中に置く、赤のピル型ボタン。右端に矢印を置く
• 墨色のサブボタン（button-secondary）: カード内で詳細へ案内する墨色のピル型ボタン
• メリット番号のリボン（ribbon-badge）: 黄色いリボンに小さな「メリット」と極太の数字を入れ、カードの上端にかぶせる
• メリットカード（benefit-card）: クリーム地に置く白いカード。細い枠線で囲み、中身は中央揃えにする
• 黄色の CTA 帯（cta-band）: 全幅の黄色い帯に、対象者の見出し、赤ボタン、注釈を入れる
• 契約サービスの選択タブ（service-tab）: 選択中は黄色、非選択は薄い黄色にした 2 つのタブ。下向きの矢印をつける
• 条件を示す吹き出し（speech-label）: 薄い色の面に条件文を入れ、下に三角をつけて特典の数字へつなぐ
• マーカー付きの特典数字（marker-number）: 赤の極太数字の下に黄色い帯を敷く
• 丸い装飾つきの見出し（blob-heading）: 見出しの左に、黄からピンクへのグラデーションの不定形な丸を重ねる
• 問い合わせの電話番号ボックス（phone-box）: 黄色い太枠の中に白い面を置き、大きな電話番号と受付時間を入れる

Do's and Don'ts

Do - 特典は赤い大きな数字と黄色いマーカーで一目で分かるようにする - メリットは番号つきのカードで縦に並べる - イラストは黒い線画にし、黄色だけを差し色にする - 申込 CTA はページの上部と中盤の 2 か所に置く - 注釈は ※ をつけて小さめに、ただし省略せず書く

Don't - 赤をサブボタンや装飾に使わない - 写真やリアルな画像を多用しない - 影や立体的な効果を強くしない - 黄色以外の色で大きな面を塗らない - 細い明朝体を使わない

Page Structure

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

1. ファーストビュー（対象者と主な特典を伝える）: クリーム地に黒いラベル、極太のキャッチ、赤の特典数字を置き、トラックと家族の線画を添える
2. 別サービスの案内（条件が合わない人を別の導線へ流す）: 青い見出しの枠ボックスに短い説明と矢印を入れる
3. サービス選択と CTA（契約中のサービスごとに申込へ誘導する）: 2 つのタブの下に黄色い帯を敷き、赤のピル型ボタンを置く
4. メリットのタイトル（メリットの数を印象づける）: 傾けた極太の数字タイトルに黒い帯ラベルを重ねる
5. メリット 1〜7（特典を一つずつ説明する）: 白いカードにリボン番号、見出し、赤の強調、線画、注釈、墨色ボタンを入れる
6. CTA（申込を再度促す）: 黄色い帯に赤ボタンを置き、箇条書きの注意書きを添える
7. サポートリンク（関連資料へ案内する）: 影つきの白いカードを並べ、外部リンクのアイコンをつける
8. エリア外の案内（代替のサービスを案内する）: クリーム地に本文を置き、墨色ボタンを添える
9. お問い合わせ（電話の窓口を示す）: 黄色い太枠のボックスに大きな電話番号を入れる

Imagery

• 黒い均一な線で描いた人物や家のイラストにし、服や屋根だけを黄色で塗る
• イラストの周りに黒い線のキラキラ（4 方向の星）を散らす
• アイコンは黄色い丸の中に黒い線画で描く
• 背景には黄からピンクへのグラデーションの不定形な丸を装飾として置く
• 街並みはごく淡い黄色のシルエットで背景に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 1000px にし、中央に寄せる
• PC のメリットカードは、リボンを左上に置き、左に文章、右にイラストの横組みにする
• PC のファーストビューは、左にコピー、右にイラストの横並びにする
• PC の CTA ボタンは幅を約 400px に抑える
• 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 行書くと起動時に読み込まれる。