DESIGN.md — コーラル×淡色幾何の業務代行サービスLP（Coral Pastel Illustrated BtoB Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: やさしい・柔らかい、信頼・誠実、清潔・爽やか、親しみ・手作り感
• キーワード: コーラルレッド・パステル幾何・線画イラスト・ずらし影・丸ゴシック・女性目線
• 地の質感: フラットな単色面が基本。背景は淡色の三角形を重ねたポリゴン柄。影はぼかさず、色面を斜めにずらして重ねる。
• 形: 四角いブロックと円形のバッジが主体。カードの角丸は控えめ。STEPカードとCTAだけ角丸を少し大きくする。
• 温度感: 暖かめ。コーラルの暖色と、淡い青灰色の寒色を交互に置いて調和させる。

Colors

• 地色は白・淡グレー・淡ピンク・淡ブルーをセクションごとに切り替える。
• コーラルは大きな色面ブロックと見出し文字に使う。
• STEPセクションだけはコーラルを全面に敷き、上に白いカードを乗せる。
• 見出しはコーラル、本文は濃グレーと役割を分ける。
• 影はぼかさず、淡グレーの面を右下にずらして置く。
• 金色は冠アイコンにだけ少量使う。
• hero-title-block は文字 #FEFCF9 × 背景 #EA6169 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22631、4.5:1）を使う。
• worry-circle は文字 #FEFCF9 × 背景 #EA6169 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22631、4.5:1）を使う。
• feature-frame は文字 #EA6169 × 背景 #FFFFFF のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22631、4.5:1）を使う。
• service-block は文字 #FEFCF9 × 背景 #EA6169 のコントラスト比が 3.2:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22631、4.5:1）を使う。
• required-badge は文字 #EA6169 × 背景 #FFFFFF のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#E22631、4.5:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #EA6169 のコントラスト比が 3.27:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#E32B36、4.5:1）を使う。

Typography

• 和文はすべて丸ゴシックで統一し、字間は広め（0.05〜0.1em）にとる。
• セクション見出しは、細線で挟んだ英字ラベルと和文見出しを2段で組み、中央に揃える。
• 見出しはコーラル、本文は濃グレーにする。
• STEP番号はセリフ体（例: Libre Baskerville）で英字の上に数字を大きく置く。
• 注釈は※を付けて小さくし、ぶら下げインデントにする。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。悩みの提起だけ円形バッジを 2×2 に並べる。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 24px（375px 幅換算）
• セクションの上下余白は 56〜72px。
• カードやブロックは左右に 16〜24px の余白を残す。
• 見出しは中央揃え。本文の長文は左揃え。
• サービス紹介は、イラストのすぐ下にコーラルの説明ブロックを置く。
• 価格は白カードの中に2列の表を入れる。

Elevation & Depth

• ぼかし影は使わない。
• 白やコーラルのブロックの右下に、淡グレーやピンクの面を 8〜10px ずらして重ね、ずらし影にする。
• STEPカードは影なしでフラットにする。

Shapes

• 角丸: 小 2px ／ 中 6px ／ 大 14px。ボタンは角丸の長方形。
• 写真の切り抜き: イラストは切り抜きで背景に溶け込ませる。人物の一部だけ円形フレームに入れる。
• セクション境界: 直線で背景色を切り替える。
• 悩みは正円バッジで見せる。
• 枠線カードは太めの 4px ピンク枠で角を立てる。
• STEPカードは角丸 14px。
• 下向き三角の矢印でセクションをつなぐ。
• 吹き出しは楕円に尾を付ける。

Components

• FVタイトル板（hero-title-block）: コーラルの四角い板。上に冠アイコンの実績バッジ、上下を二重線で区切り、中に白い大見出し。右下にずらし影を付ける。
• 悩み円形バッジ（worry-circle）: コーラルの正円に、白い線画アイコンと短い悩み文を入れる。2×2 に並べる。
• 解決提示ボックス（solution-box）: 淡グレーの箱に、コーラルの大見出しと本文を入れ、ずらし影を付ける。
• 特徴枠カード（feature-frame）: 太いピンク枠のカード。円形アイコン、見出し、三角付きの区切り線、冠アイコンの箇条書きで構成する。
• サービス説明ブロック（service-block）: コーラル面にアイコン付きの見出し、白文字の本文、箇条書き、注釈を入れる。
• 英字ラベル付き見出し（section-heading）: 細線で挟んだ字間の広い英字と、その下に大きな和文見出しを置く。
• 価格カード（price-card）: 白カードにずらし影を付ける。中は項目セルが淡グレーの2列表で、下に事例を枠で囲む。
• STEPカード（step-card）: 白い角丸カード。左に淡グレーの番号欄を置く。カードの間は白い下矢印でつなぐ。
• 必須ラベル（required-badge）: 白地にコーラルの細枠とコーラル文字の小さな四角ラベル。
• 送信CTA（button-primary）: 幅いっぱいのコーラルボタン。字間の広い白文字で、角丸は小さめ。

Do's and Don'ts

Do - コーラルは大きな色面として使い、白い文字を乗せる。 - 淡色の地をセクションごとに交互に変えてリズムを作る。 - 影はずらした色面で表現する。 - イラストは細い線画に淡い色を塗ったタッチで統一する。 - 英字ラベルは細線で挟み、字間を広くとる。

Don't - ぼかしの強いドロップシャドウやグラデーションボタンは使わない。 - 濃い青や黒の面を大きく使わない。 - 写真を多用しない（イラストが主役）。 - 明朝体を見出しに使わない。 - ボタンをピル型にしない。

Page Structure

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

1. ファーストビュー（サービス名と実績を伝え、信頼させる）: パステルの三角ポリゴン背景に、コーラルのタイトル板と線画の人物を置き、下にコーラル文字のリード文を入れる。
2. 悩みの提起（読み手の課題に共感する）: かぎ括弧付きの導入文と、コーラルの問いかけ見出し。円形バッジ4つの下に、人物アイコンを横一列に並べる。
3. 解決提示（任せられることを宣言する）: 下向き三角のあとに、淡グレーのずらし影ボックスを置く。
4. 特徴（強みを4点で示す）: ピンク枠カードに、冠アイコン付きの箇条書きを並べる。
5. サービス内容（提供業務を2種類紹介する）: 淡ブルーと淡ピンクの地に、イラストとコーラルの説明ブロックを交互に置く。
6. 料金（価格を明示する）: 淡グレーの地に白い価格カードを置き、表・注釈・事例枠を入れる。
7. 導入実績（取引先で信頼性を補強する）: 細枠のロゴ枠を縦に並べ、その下にグレーの点付き実績リストを置く。
8. 導入手順（依頼までの流れを示す）: コーラルの全面地に5つのSTEPカードを矢印でつなぎ、見出しの横に吹き出しを添える。
9. お問い合わせ（問い合わせを獲得する）: 必須ラベル付きのフォーム。入力欄は淡グレー、最後に幅いっぱいのコーラルボタンを置く。

Imagery

• 人物は細い線画に、淡い青・ピンク・ベージュを部分的に塗ったフラットイラストにする。
• ヘッドセットを付けたオペレーターやPC作業など、業務シーンを描く。
• FVの背景は、淡いピンク・水色・ラベンダーの三角形を不規則に重ねたポリゴン柄にする。
• アイコンは細い線のアウトラインで、白またはコーラルにする。
• 相手の人物は円形フレームに入れて、会話の構図を作る。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV を左右に分け、左にタイトル板、右にイラストを置く。
• 悩みバッジは PC では4つを横一列に並べる。
• サービス紹介は PC ではイラストとコーラルブロックを左右に並べ、2行目で左右を入れ替える。
• 価格カードは PC では2枚を横に並べる。
• フォームは PC ではラベルを左、入力欄を右に置く2列にする。
• コンテンツの最大幅は約 900px で中央に寄せる。

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