DESIGN.md — 赤ドット地×紺見出しの法人相談窓口 LP（Red Dotted Frame Corporate Service Guide LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、ポップ・元気、親しみ・手作り感
• キーワード: 赤ドット地・白パネル・線画イラスト・紺ピル見出し・アコーディオン・エリア検索
• 地の質感: 赤地に小さな濃赤の水玉。パネル内はフラットな白とクリーム。
• 形: 大きめ角丸の白パネル、ピル型・波型の見出しラベル、角丸枠のカード
• 温度感: 赤とクリームの暖色で外枠を作り、中身は紺と青で落ち着かせている

Colors

• 外周はかならず赤ドット柄で囲み、中身は白パネルに載せる
• 見出しは紺の文字。キーワードは紺地に白文字のピルにする
• 行動を促すボタンは青ベタ、オンライン相談だけは黒ベタで差をつける
• クリーム地は FV と補足説明ブロックだけに使う
• 赤文字はファーストビューの主見出しに絞る

Typography

• 見出しは 2〜3 行に分けて中央揃えにする
• ピル見出しは字間を大きく空けて、1 文字ずつ見せる
• 本文は中央揃え。補足ブロックだけ左揃えにする
• 注釈番号は上付きの小さい ※ で添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。左右に赤い外枠を約 30px 残す
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 白パネルは画面幅の約 88% で中央に置く
• カードとボタンはパネル内でさらに約 72% 幅にそろえる
• エリアボタンは 10px 間隔で縦に積む
• セクション見出しの下は 24〜32px 空ける

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白パネルは赤地とのコントラストで浮いて見せる
• 固定の検索タブは右端に寄せ、角丸ブロックで重ねる

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 線画イラストは切り抜き。人物は角丸の淡いベージュ枠に入れる
• セクション境界: FV は斜めの赤とクリームの面で区切る。以降は白パネル内で余白だけで区切る
• サービスカードは 1.5px の青線と 12px 角丸
• エリアボタンは角丸ほぼゼロの青い矩形
• オンライン相談 CTA は黒のピル型
• キーワード見出しは紺のピル型か波形

Components

• 店舗検索 CTA（button-store-search）: 青いピル型の 2 段ボタン。上段が太字のメイン、下段が小さい補足。
• 紺ピル見出し（heading-pill）: 紺地に白で字間を広げたキーワード。横に放射線の装飾を添える。
• サービスカード（service-accordion-card）: 青枠の角丸カード。上にロゴ、区切り線の下に一言説明と丸プラスアイコン。
• エリアボタン（button-area）: 青ベタの矩形。地域名を中央に置き、右端に白い山形矢印。
• オンライン相談ボタン（button-online）: 黒いピル型。先頭にヘッドセットのアイコン。
• 黄色マーカー帯（marker-band）: FV のキーワードを載せる角丸の黄色帯。
• 追従検索タブ（floating-search-tab）: 右端に固定する青いタブ。店舗アイコンと 2 行の文字を入れる。
• 丸バッジ（badge-round）: 白丸を黒線で縁取り、短い訴求を 3 行で入れて斜めに置く。

Do's and Don'ts

Do - 外周の赤ドット枠をページの最後まで続ける - イラストは黒い線画に、ベージュ・赤・紺を少し差す程度に塗る - 見出しは紺の文字とピルラベルを組み合わせる - 注釈は ※番号でページ末尾にまとめる - 検索導線は地域ごとのボタンで分ける

Don't - 写真を大きく使わない。イラスト中心にする - グラデーションや強い影を使わない - 赤を本文や見出しに多用しない - 白パネルを外枠いっぱいまで広げない - ボタンの色を青と黒以外に増やさない

Page Structure

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

1. ファーストビュー（悩みの提起と相談窓口の存在を伝える）: クリーム地を斜めの赤で切り、大見出し・人物・店舗の線画を配置。紺の FV 用 CTA と丸バッジを置く。
2. メリット（店舗で相談する価値を伝える）: 白パネルに紺見出しとピルを置き、中央揃えの本文と人物イラストを続ける。
3. 補足特長（Web 画面越しの案内方法を説明する）: クリーム地のブロックに左揃えの見出し、線画、本文を入れる。
4. サービス一覧（提案できるサービスを網羅して見せる）: 青枠の角丸カードを縦に並べる。ロゴ、一言説明、プラスアイコンで構成。
5. 店舗検索（地域から近くの店舗を探してもらう）: 紺見出しと波形ピルの下に、青いエリアボタンを縦一列に並べる。
6. 目的別アコーディオン（検討内容ごとに案内を分ける）: 青枠の角丸ボタンに見出しとプラスアイコンを入れる。
7. 問い合わせ（近くに店舗がない人の受け皿）: オンライン相談は黒ピルボタン、電話はフリーダイヤルのマークと大きな番号で見せる。
8. 注釈（条件や補足を明記する）: 小さい文字の ※ リストを角丸の白パネル下端に置く。

Imagery

• 黒の均一な線で描くフラットな人物イラスト
• 塗りはベージュ・赤・紺・グレーに限る
• 店舗や街並みは赤のシルエットや線画で描く
• 人物の吹き出しやタブレットで相談シーンを示す
• 背景には小さな水玉を規則的に敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は白パネルを中央約 85% 幅にし、上部にアンカーナビを置く
• サービスカードは PC で 3 カラムのグリッドにする
• エリアボタンは PC では地図と吹き出し状のラベルに置き換える
• 問い合わせは PC でオンラインと電話を 2 カラムに並べる
• FV は 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 行書くと起動時に読み込まれる。