DESIGN.md — 赤×白の線画イラスト金融サービス LP（Red Line-Art Friendly Finance Chat LP）

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

Overview

• 業種: 金融・保険 ／ 雰囲気: 信頼・誠実、親しみ・手作り感、シンプル・ミニマル
• キーワード: 朱赤・線画イラスト・角丸の太枠カード・網点・緑のチャット CTA・親しみ
• 地の質感: フラットな単色の面に、イラストまわりだけ赤い網点（ハーフトーン）を敷く
• 形: 大きめの角丸カード、赤い 2px の太枠、見出しは斜線ではさんだラベルで枠線に食い込ませる
• 温度感: 暖色寄り。赤の誠実さとピンクのやわらかさが同居する

Colors

• 地は白を基本に、特長一覧・手順の導入・フッターだけ朱赤の全幅帯にする
• 見出し・本文の強調・枠線はすべて同じ朱赤でそろえる
• 登録 CTA だけはチャットアプリの緑にして、赤の中で目立たせる
• 手順セクションは淡ピンク地＋白カードでやわらかく見せる
• 注意事項は朱赤より彩度を落としたローズの枠線と淡ピンクの見出し座布団にする
• イラストは赤・グレー・黒の 3 色に絞り、網点で面を表現する
• button-primary は文字 #FFFFFF × 背景 #01BA01 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018A01、4.53:1）を使う。
• sticky-cta は文字 #FFFFFF × 背景 #01BA01 のコントラスト比が 2.62:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#018A01、4.53:1）を使う。

Typography

• 見出しは丸みのある太ゴシックで、親しみを出す
• 見出しも本文も基本は中央揃え。注意事項だけ左揃え
• 強調したい語は傍点（文字の上の小さな点）か白座布団で示す
• 本文は赤文字で行間を広め（2.0）に取る
• セクションラベルは斜線ではさむ（\ ラベル /）
• 注意事項は濃いグレーの小さい文字で、読みやすさを優先する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特長カードは縦に 3 枚並べる
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 48px、基本単位 8px、カード内 20px（375px 幅換算）
• ポイントカードは画面幅の 92% で、赤枠の上辺にラベルを食い込ませる
• カード内は見出し→円形の網点イラスト→説明文の順に縦積みする
• 赤帯の上の白カードはイラストを左、テキストを右に置く
• CTA は幅 60% 程度のピル型で中央に置き、下に注釈を添える
• カード同士の間隔は 40〜50px 取る

Elevation & Depth

• 影はほぼ使わず、枠線と面の色で階層を作る
• 白カードは赤やピンクの地の上に置き、地色との差で浮かせる
• スマホのモック画像だけは端末の黒フチで立体感を出す

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 人物イラストは網点の円形背景に重ねる。写真は使わない
• セクション境界: 直線で色を切り替える。手順帯の下だけ下向き三角の吹き出しにする
• カードの枠線は 2〜3px の赤
• 見出しラベルの白座布団は角丸 8px
• リボン型の見出しバナーで帯の始まりを示す
• 注意事項の見出しはピル型の淡ピンク座布団にする

Components

• チャット登録 CTA（button-primary）: 緑のピル型ボタン。左に白丸のアプリアイコン、右に白い太字
• ポイント枠カード（point-card）: 白地に赤の太枠と角丸。上辺の中央に、斜線ではさんだ番号ラベルが食い込む
• 赤帯上の特長カード（feature-card）: 赤地の上の白い角丸カード。左に線画イラスト、右に赤い見出しと「詳細」下線リンク
• リボン見出し（ribbon-banner）: 赤い線で描いた白いリボン。小さな前置きと太字の見出しを横に並べる
• 手順導入の赤帯（step-band）: 赤い全幅帯に白文字。中央の白座布団で語を強調し、下向き三角で次のセクションへつなぐ
• ピンク吹き出しラベル（speech-badge）: イラストの横に置く淡ピンクの角丸ラベル。赤の小さな文字
• 注意事項ボックス（notice-box）: ローズ色の枠線の角丸ボックス。赤い中黒の箇条書きと番号付きリストを入れる
• 追従の登録バー（sticky-cta）: 画面下に固定する緑の全幅バー。アイコン・白い 2 行の文言・キャラクターを並べる

Do's and Don'ts

Do - 赤は 1 色に絞り、見出し・枠・帯で同じ色を使う - イラストは線画＋網点で統一する - CTA は毎回同じ緑のピル型にして、下に注釈を添える - ポイントは番号付きのカードで 1 枚に 1 つの特長を見せる - 注意事項は省略せず、枠でまとめて最後に置く

Don't - 写真や実写の人物を使わない - 赤と緑以外の鮮やかな色を足さない - グラデーションや強い影を使わない - 本文を黒の太字で詰め込まない - 角が鋭いカードを混ぜない

Page Structure

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

1. ファーストビュー（サービス開始の告知と、何ができるかを伝える）: 白地に赤い線画のお金アイコン柄を散らす。中央に緑と赤の極太ロゴ風見出し、下に人物と PC のイラスト
2. 特長の一覧（3 つのメリットをひと目で見せる）: リボン見出し→赤い全幅帯の上に白い角丸カードを 3 枚縦に並べ、それぞれに詳細リンクを付ける
3. 特長の詳細（ポイント 1〜3）（各メリットを詳しく説明する）: 赤枠のカードに番号ラベル、見出し、網点の円に重ねたイラスト、中央揃えの説明文を入れる。最後のカードに CTA を置く
4. 手順の導入（登録が簡単であることを強調する）: 赤帯に白い大きな文字。白座布団と傍点で強調し、下向き三角でつなぐ
5. 使い方の説明（チャット画面を見せて具体的にイメージさせる）: 淡ピンク地に人物とキャラクターのイラスト、白カードの中にスマホ画面のモックを 2 台並べ、CTA を置く
6. 注意事項（リスクや手数料を開示する）: 淡ピンクのピル型見出し、ローズ色の枠のボックスに箇条書きと番号リスト、最後に事業者の情報
7. フッター（企業情報とリンク）: 赤い全幅帯に白い角丸のロゴ枠と、白い下線リンク・コピーライト
8. 追従 CTA（いつでも登録できるようにする）: 画面下に固定する緑の全幅バー。キャラクター付き

Imagery

• 人物は黒の線画に、赤とグレーの面を少しだけ塗ったフラットなイラストにする
• 人物の背後に赤い網点の円を敷き、やわらかい印象にする
• FV の背景は財布・グラフ・天秤・握手などのお金アイコンを、赤い細線でまばらに並べる
• ピンク色のゆるいマスコットキャラクターをアクセントに置く
• スマホのモック画面で、チャットの選択肢ボタンを見せる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はコンテンツ幅を約 70% にして中央に寄せ、左右に白地を残す
• PC の特長カードは 3 枚を横に並べる
• PC の CTA の横には QR コードと説明を並べる
• PC の使い方説明はテキストを左、スマホのモックを右の 2 カラムにする
• PC の FV はロゴ見出しを横 1 行にし、アイコン柄を左右の余白に広げる
• 追従 CTA は、SP では下端の全幅バー、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 行書くと起動時に読み込まれる。