DESIGN.md — 水色×オレンジの線画イラスト税務サポートLP（Friendly Sky Blue Illustrated Tax Support LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、清潔・爽やか
• キーワード: 線画イラスト・黒太枠カード・黄色マーカー・吹き出し・水色×オレンジ・LINE相談
• 地の質感: 白地に淡いドット柄や雲形の水色面を重ねる。写真は使わず、フラットな線画イラストだけで構成する
• 形: 黒の太い線（約3px）で囲んだ角丸カード。右下に黒いベタ影を付ける。丸いバッジ、雲形の吹き出し、ギザギザの爆発吹き出しも使う
• 温度感: 明るく軽い。中盤の不安訴求だけ黒・紺で暗くし、温度差を出す

Colors

• 地の色は白と淡い水色を交互に使う。キャンペーン部分だけクリーム色にする
• 不安訴求は黒地から紺地へつなぎ、ページ中で唯一の暗いゾーンにする
• 強調したい語はオレンジ文字にする。紺地の上では黄色文字にする
• 見出しの要所に黄色の太いマーカー帯を敷く
• CTAはLINEの緑だけを使い、ほかの要素に緑を使わない
• ハートや絵文字のピンクは小さなアクセントにとどめる
• button-primary は文字 #F2FEF6 × 背景 #03C855 のコントラスト比が 2.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#028438、4.65:1）を使う。
• price-box は文字 #F57C00 × 背景 #FCE3BC のコントラスト比が 2.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#A15100、4.56:1）を使う。

Typography

• 見出しは中央揃えで2〜3行に分け、キーワードだけ1.3倍に大きくする
• 強調語はオレンジや水色の色替えで示し、太字の追加はしない
• CTAの上には「＼ 〜 ／」形式の小さな誘導コピーを置く
• 本文は14px前後、行間を1.7にする
• 傍点や絵文字で口語的な抑揚を付ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カードは 2 列グリッドも使う
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは上下にゆとりを持たせ、イラストで区切る
• カードとボックスは左右に約6%の余白を取って中央に置く
• 比較表とグラフは横スクロールにし、注釈で操作を案内する
• CTAはFVと中盤の2か所以上に繰り返し置く
• セクションの境界は波形・雲形のカーブにする

Elevation & Depth

• 黒太枠カードの右下に約5pxの黒いベタ影を付ける
• CTAボタンにはぼかしのある柔らかい影を付ける
• それ以外の要素はフラットにする

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は使わない。線画イラストを背景透過で配置する
• セクション境界: 波形・雲形のカーブ、または二重の黒い横線
• カードは黒の3px枠に角丸12pxを付ける
• 機能の紹介は水色の円形バッジにする
• 悩みは雲形の吹き出しで表す
• 警告はギザギザの爆発型吹き出しにする
• ステップ番号はオレンジの丸にし、縦線でつなぐ

Components

• LINE相談ボタン（button-primary）: 緑の横長ボタン。左にアイコン、上に小さな補足文、末尾に▶を付ける
• キャンペーン枠（campaign-banner）: 淡い水色地を紺の太枠で囲み、ベタ影を付ける。中に黄色の大見出しと注釈を入れる
• 黒太枠カード（card-outline）: 白地を黒の太枠で囲み、ベタ影を付ける。上部の枠線をまたいで丸数字を重ねる
• 悩みの吹き出し（speech-cloud）: 白地に水色の線で描いた雲形の吹き出し。キーワードはオレンジにする
• 事例カード（case-card）: グレー地のカード。濃いグレーのタブにイラスト付きのラベルを載せる。要点は黄色文字にする
• 機能の円形バッジ（circle-badge）: 水色の円に白文字を入れ、外側に白いリングを付ける
• 手順リスト（step-list）: オレンジの丸アイコンを縦線でつなぎ、右に説明文を並べる
• 料金ボックス（price-box）: ピーチ地に、オレンジの大きな数字の「0」を入れる
• マーカー見出し（heading-marker）: 見出し文字の下半分に黄色の帯を敷く

Do's and Don'ts

Do - 人物は水色のスーツを着た線画で描き、感情を大きく表現する - 強調語はオレンジ、紺地の上では黄色にする - 黒太枠とベタ影でポップな手作り感を出す - 不安を示したあとに解決策を見せる流れを守る - CTAの直前には誘導コピーを置く

Don't - 実写写真や重いグラデーションを使わない - CTAの色を緑以外にしない - 暗い地のセクションを連続させすぎない - 細い明朝体で堅い印象にしない - 角を落とさない、シャープな直角のカードにしない

Page Structure

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

1. ファーストビュー（対象者とサービスを伝え、特典と相談への入口を示す）: ロゴの帯、キャンペーン枠、大見出し、人物2人のイラスト、3つの特長カード、LINEボタンの順に置く。背景は淡い水色の波形
2. 悩みの提起（読み手の悩みに共感する）: かぎ括弧付きのオレンジ見出しを置き、雲形の吹き出し5つと悩む人物の線画を配置する
3. 警告（放置した場合のリスクを強調する）: 黒地に爆発型の吹き出しを置き、金額を白い箱に赤文字で入れる
4. リスク解説・事例（制度の変化と実例で危機感を高める）: 紺地に白カードを2×2で並べ、その下にグレーの事例カードを縦に4枚並べる
5. 解決の提示（サービスが解決策だと示す）: 淡い水色地に、マーカー付きの見出しと笑顔の人物イラストを置く
6. サポート内容（対応範囲を見せる）: 水色の大きな円の周りに円形バッジを4つ置き、そのあとにCTAを置く
7. 提携・信頼（信頼性を示す）: 二重線で挟んだ中に提携先のロゴを置く
8. 利用の流れ（手軽さを伝える）: クリーム色の見出し帯の下に、黒太枠と吹き出しラベル付きのステップリストを置く
9. 安心ポイント・実績（選ぶ理由を伝える）: 丸数字付きの黒太枠カードを置き、経費になる項目をアイコン付きの一覧で見せる
10. 比較表（他社との違いを示す）: グレーの見出し列を置き、自社の列だけ水色の枠で囲む。表は横スクロールにする
11. シミュレーション（付加価値を見せる）: ステップのラベルと積み上げ棒グラフを横スクロールで見せる
12. 料金・キャンペーン（無料特典で背中を押す）: クリーム色地に、キャンペーン枠、料金ボックス2つ、チェックリストを置く
13. 費用と節税例（具体的な数字で納得してもらう）: 年収別の黒太枠カードを横に並べ、数字は水色とオレンジにする
14. クロージング・会社情報（最後に行動を促す）: マーカー付きの大見出しとガッツポーズの人物を置き、グレー地に会社情報の表を載せる

Imagery

• 人物は黒の太い主線と水色の塗りで描く。シャツは網点で表現する
• 汗・集中線・涙などの漫画的な記号で感情を出す
• 小物（電卓、領収書、化粧品など）も同じ線画で描く
• 背景には雲形の網点模様や淡い水色の波を置く
• 見出しに絵文字を1つ添えて口語の感じを出す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは中央の幅約900pxに収め、背景の色帯は全幅に敷く
• PCでは事例カードを2列に、年収別カードを3列に並べる
• PCではサポート内容の円図と人物イラスト・CTAを横に並べる
• 比較表とグラフは、PCではスクロールせずに全体を表示する
• 文字サイズはPCで約1.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 行書くと起動時に読み込まれる。