DESIGN.md — ティール×水色の士業事務所相談LP（Teal Trust Professional Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、情報量多め・訴求型、やさしい・柔らかい
• キーワード: ティールグリーン・淡い水色・角丸カード・三角形の紙吹雪・スーツ人物イラスト・3つの問い合わせ導線
• 地の質感: フラットな単色面。ぼかした写真の上に半透明のティールを重ね、白カードを薄い影で浮かせる
• 形: 12〜16pxの大きな角丸パネル、ピル型ボタン、小さな三角形の装飾
• 温度感: やや涼しげで清潔。赤いボタンとLINEの緑で温度を足す

Colors

• 地色は白とライトグレーを基本にし、FV・人物紹介・フッターだけ淡い水色にする
• 強みセクションと相談帯はティールで全面を塗り、白カードを載せる
• 主CTAは赤、LINEは緑、電話番号は濃い文字の3点セットにする
• 赤は強調語と主ボタンだけに使う
• 見出し文字はティール、本文は濃いグレー紺にする
• 装飾の三角形は水色・ピンク・黄色のパステルを低い不透明度で使う
• button-primary は文字 #FFFFFF × 背景 #F34D4C のコントラスト比が 3.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#EA1110、4.58:1）を使う。
• button-line は文字 #FFFFFF × 背景 #2BBC45 のコントラスト比が 2.51:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#1F8832、4.54:1）を使う。
• cta-band は文字 #2E3A40 × 背景 #2AB1A3 のコントラスト比が 4.41:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2AB3A5、4.51:1）を使う。
• pill-tag は文字 #2AB1A3 × 背景 #F1F1F1 のコントラスト比が 2.35:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#2AB3A5、4.5:1）を使う。

Typography

• セクション見出しは中央に置き、下に短い斜線の飾りを付ける
• 強みカードの見出しは強調語だけティールにする
• 損失やメリットの語は赤の太字で強調する
• 本文は字間を少し広げ、行間1.8で読みやすくする
• カード右下に薄いグレーの大きな番号を背景として置く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム（サービス・強みのカードは縦積み、PCでは2列）
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 各セクションは大きな角丸パネルにまとめ、外周にグレーを少し見せる
• 見出し→リード文→カード群の順で組む
• 相談帯（CTA）はページ中盤と後半に同じ形で2回入れる
• 料金は3列の表で見せる
• 会社概要は左に見出し、右に項目表を置く

Elevation & Depth

• 白カードには薄くて広がった影（0 4px 16px rgba(0,0,0,.06)）を付ける
• 相談帯のボックスは白地に濃い枠線を付け、影は控えめにする
• ボタンには下方向に小さな影を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。人物紹介は縦長の角丸写真にする
• セクション境界: 直線で切り替え、大きな角丸パネルの端で区切る
• パネル・カードは角丸12〜20px
• ボタンとラベルはピル型
• 番号バッジはティールの小さな角丸
• 三角形の紙吹雪を余白に散らす

Components

• メール相談ボタン（button-primary）: 赤いピル型ボタン。左に封筒アイコンを置く
• LINE相談ボタン（button-line）: 緑のピル型ボタン。メール相談ボタンの横に並べる
• 相談帯（cta-band）: ティールの帯に白ボックスを載せ、電話・メール・LINEの3導線と人物イラストを置く。左上に丸い無料バッジを付ける
• セクション見出し（section-title）: ティールの丸ゴシックを中央に置き、下に短い斜線を付ける
• 番号付きサービスカード（service-card）: 白カードに左上の番号バッジ、左に写真、右にタイトルと説明を置く
• 強みカード（strength-card）: ティール地の上の白カード。上に写真、タイトル、本文を並べ、右下に薄い大きな番号を置く
• メリットのチェックリスト（check-list）: ティールのチェックアイコンと区切り線で3項目を並べ、一部を赤で強調する
• FAQアコーディオン（faq-item）: グレーの帯にQアイコンを付け、右端にティールのピル型「詳しく＋」ボタンを置く
• 問い合わせフォーム（form）: 3段階のステップ表示、ティールの必須ラベル、グレーの入力欄を並べ、最後に赤い確認ボタンを置く
• 業務タグ（pill-tag）: FVで対応業務を短く並べる白地のピル型ラベル

Do's and Don'ts

Do - ティールを主色として、見出し・帯・番号に一貫して使う - 電話・メール・LINEの3導線をセットで何度も見せる - 白カードは角丸にし、薄い影で浮かせる - スーツ人物のフラットなイラストで親しみを出す - パステルの三角形を余白に少しだけ散らす

Don't - 黒や濃い原色の大きな面を使わない - 赤をボタンと強調語以外に広げない - 角ばったカードや細すぎる明朝体を使わない - 装飾の三角形を本文の上に重ねない - 1セクションで色数を増やしすぎない

Page Structure

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

1. ファーストビュー（地域と業務を一目で伝える）: 淡い水色のパネルに、ティールの吹き出し型コピーを置く。左右にスーツ人物のイラスト、下に業務タグを並べる
2. 悩みの提起（相談しないと損することを伝える）: 注意アイコン、ピル型の前置き、赤で強調した見出し、困り顔の入ったグレーボックスを並べる
3. 解決提示（相談するメリットを示す）: ティールの見出し帯が付いた白カードに、写真・人物イラストとチェックリスト3項目を置く
4. CTA（相談へ誘導する）: ティールの相談帯に、無料バッジと3導線ボタンを置く
5. サービス内容（対応業務を一覧で示す）: グレーの角丸パネルに、番号付きカード8枚を2列で並べる
6. 料金体系（価格をわかりやすく示す）: ティールの見出し行を持つ3列の表にし、下に注釈を添える
7. 強み（選ばれる理由を示す）: ティール全面の地に、写真付きの白カード6枚と大きな番号を置く
8. 専門家紹介（人柄と実績で信頼を作る）: 淡い水色の地に、枠線付きの白カードを置く。縦長写真・資格バッジ・経歴文を並べる
9. 事務所概要（所在と基本情報を示す）: 左に英字ラベル付きの見出し、右に区切り線の表を置く
10. よくある質問（不安を解消する）: カテゴリ見出しごとに、Qアイコン付きのアコーディオンを並べる
11. CTA（再度相談へ誘導する）: 中盤と同じ相談帯を繰り返す
12. 問い合わせフォーム（申込を完了させる）: ステップ表示の付いた白カードのフォームに、赤い確認ボタンを置く。周りに紙吹雪を散らす
13. フッター（会社情報を示す）: 淡い水色の地に、ロゴと所在地カードを置く

Imagery

• スーツ姿の男性を、太めの線とフラットな塗りでイラストにする
• 写真は明るいオフィスや握手、ビジネスパーソンの自然光の写真を使う
• 書類・電卓・パソコンなど、業務を連想させる小物の写真をカードに使う
• 水色・ピンク・黄色のパステルの三角形を紙吹雪のように散らす
• 相談帯の背景は、ぼかしたオフィス写真にティールを重ねる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPではサービス・強みのカードを1列に縦積みする
• 相談帯の3導線は、SPでは縦に並べて全幅ボタンにする
• FVの左右の人物イラストは、SPではコピーの下に小さくまとめる
• 料金表は3列のままにし、文字を小さくする
• 会社概要の左見出しは、SPでは上に置く

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