DESIGN.md — 黄色×メンフィス柄のポップなSNS販促ツールLP（Pop Yellow Memphis SaaS Campaign LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: ビビッドイエロー・メンフィス柄・フラットイラスト・黒細枠カード・点線罫・コーラルCTA
• 地の質感: フラットな単色面に、淡い水色・黄色・ピンクの斜線やジグザグ、ドットを薄く散らす
• 形: 黒い細線の角丸小カード、円形アイコン枠、吹き出し型の矢印付きカード、ピル型ボタン
• 温度感: 明るく暖かい。黄色と淡いクリーム・水色の地で軽快

Colors

• 地色は白・クリーム・淡い水色・黄色をセクションごとに交互に切り替える
• 黄色地は FV・強み一覧・フッターなど節目に限定する
• 主CTAはコーラル赤、最終の問い合わせのみ緑で区別する
• 見出し下は黄色または青の点線罫で装飾する
• 強調語は黄色の太いマーカーを文字下半分に引く
• 装飾柄は淡い水色・黄・ピンクで彩度を落とし、本文の邪魔をしない
• button-primary は文字 #FEF9F6 × 背景 #FC5E63 のコントラスト比が 2.9:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E8040C、4.51:1）を使う。
• button-secondary は文字 #FEF9F6 × 背景 #4CBAA1 のコントラスト比が 2.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#31806E、4.52:1）を使う。
• step-circle は文字 #4CBAA1 × 背景 #FFFFFF のコントラスト比が 2.37:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#31806E、4.6:1）を使う。

Typography

• 見出しは中央揃えの太字ゴシック
• FVキャッチは白文字に黒の太い縁取りでステッカー風にする
• 番号は白抜き・黒縁の太い欧文数字
• 本文は小さめでグレー、カード内は左揃え
• 料金は数字だけ大きく、税込表記は小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、メリットは横スクロール 3 カラム
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• セクションごとに地色を変えて区切る
• 見出し→説明→図解/カード→CTAの順に並べる
• カードは縦に積み、間隔は約16px
• 強みはタイムライン縦線から左右に吹き出しカードを交互配置
• CTAは各セクション末尾に中央配置

Elevation & Depth

• カードは影なしで黒い1.5px枠線で区切る
• CTAボタンには下方向に淡い影を付ける
• 全体はフラット、重なりは装飾柄のみ

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: イラストは円形の黒細枠内、またはそのまま切り抜きで配置
• セクション境界: 直線の地色切り替え。FV下に青の帯ライン
• カードは角丸小＋黒細枠＋見出し下に黄色い下線
• 強みカードは三角の矢印付き吹き出し型
• STEPは緑枠の円を点線でつなぐ
• 料金カードは黄色の太枠

Components

• 資料DLボタン（button-primary）: 幅約80%のコーラルのピル型、白太字、淡い影
• 問い合わせボタン（button-secondary）: 緑のピル型、最終CTAに使用
• 点線罫付き見出し（heading-dotted）: 見出しの上下または下に黄・青の点線を全幅で引く
• 黒枠特長カード（card-outline）: 白地＋黒細枠、太字見出しの下に黄色線、説明文
• 番号付き吹き出しカード（timeline-card）: 縦線の黒丸から矢印で伸びる白カード、左上に白抜き番号と円アイコン
• 料金カード（price-card）: 黄色太枠の白カード、プラン名と大きな価格、上に音符等の飾り付きリード
• 黄色マーカー強調（marker-text）: 強調語の下半分に黄色の帯
• STEP円アイコン（step-circle）: 緑細枠の白円に線画アイコン、緑点線で上下にジグザグ接続

Do's and Don'ts

Do - 黄色・白・淡色地をセクションごとに切り替える - 人物はフラットで太い輪郭線のイラストを使う - 背景にメンフィス柄を薄く散らす - 見出しは必ず点線罫かマーカーで飾る - CTAは各ブロック末尾に繰り返し置く

Don't - 写真を主役にしない - 暗い背景や重い影を使わない - 黄色地に黄色カード枠を重ねない - 装飾柄を濃い色にしない - CTA色を複数色に増やさない

Page Structure

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

1. ファーストビュー（新機能を楽しく印象付ける）: 黄色地に斜めストライプ、枠付き人物イラストを四隅に配置し、縁取りキャッチを中央に
2. 導入メッセージ（価値を一言で伝える）: 白地に大見出し＋黄色点線、群衆イラストを左右に
3. 特長（3つの効果を示す）: スマホ画面モックの下に黒枠カードを3枚積む
4. 仕組み図解（流れを視覚的に説明）: クリーム地、円形イラストを赤点線矢印で循環させ、中央に雲型吹き出し
5. 中間CTA（資料請求へ誘導）: マーカー強調コピー＋コーラルボタン
6. メリット（継続利用の利点）: イラスト付き3カラムを横並び、下にCTA
7. 強み（4つの強みを訴求）: 黄色地に縦タイムライン、番号付き吹き出しカードを左右交互
8. 料金プラン（価格を明示）: 水色地に黄色枠の料金カード2枚、補足とCTA
9. 利用の流れ（導入ハードルを下げる）: 緑の円アイコン4つを点線で接続、緑の問い合わせボタン
10. フッター（ナビとSNS）: 黄色地にロゴ・SNSアイコン・リンク縦並び

Imagery

• 人物は黒い太輪郭線のフラットイラスト、黄・ピンク・紫・水色で彩色
• 人物イラストは単色の四角枠に黒線で囲むステッカー風
• アイコンは白円＋黒細枠の中に配置
• 背景に斜線・ジグザグ・ドット・円弧・バツ印を淡色で散らす
• サービス画面はスマホ端末モックに収める
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは本文幅約1000px中央寄せ
• PCの特長はスマホモック左、カード右に段違い配置
• PCのメリットと料金カードは横並び
• PCの強みはタイムライン左右に2列交互
• PCはヘッダーに横並びナビと枠線ボタン2つ

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