DESIGN.md — 紺×淡グレーの誠実な会計事務所 LP（Trustworthy Navy Accounting Firm LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: 信頼・誠実、清潔・爽やか、シンプル・ミニマル
• キーワード: 濃紺・淡グレー面・筆記体英字ラベル・大きな数字・線画アイコン・余白多め
• 地の質感: フラットな単色面。CTA 帯などに細かいドットパターンを少し入れる
• 形: 角丸は小さめ。カードは角が立った矩形で、アイコンの背景は円
• 温度感: やや寒色寄りで落ち着いた印象。水色のアクセントが柔らかさを足す

Colors

• 地は白と淡グレーをセクション単位で交互に切り替える
• 濃紺はセクション帯・大きな数字・小見出し・主ボタンに限定する
• 水色は見出し左の縦線・必須バッジ・装飾円など小面積だけに使う
• グラフや図版は濃紺〜ブルーグレー〜水色の同系グラデーションでまとめる
• 暖色は使わない。強調は色ではなく濃紺の太字で行う
• badge-required は文字 #FFFFFF × 背景 #54BDD4 のコントラスト比が 2.19:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#258195、4.51:1）を使う。

Typography

• セクション見出しの上に濃紺の筆記体英字ラベルと短い下線を置き、中央揃えにする
• 左揃えの見出しは下に太い濃紺の短線と細いグレー線を重ねて敷く
• 小見出しの左に水色の縦線を付ける
• 数字は極太にして、単位は数字の約半分のサイズにする
• 本文は行間を広め（1.9）にして、字間も少し開ける
• 強調フレーズは濃紺の枠で囲み、手書き風の斜体で入れる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。サービスと姿勢タイルだけ 2 カラムグリッド
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右の余白は約 16px でそろえる
• 理由ブロックは全幅写真→斜体の大きな番号→見出し→本文の順に並べる
• データ表示は枠線で区切った箱を縦に積む
• 流れは丸い写真/アイコンと説明を横並びにし、下向きの山形で区切る
• フォームはラベル→入力欄の縦積みで、項目の間に細線を入れる

Elevation & Depth

• 基本は影なしのフラット
• CTA カードだけ白地に柔らかい影（0 4px 16px rgba(0,0,0,.08)）を付ける
• 流れのアイコン円は白い円をグレー地の上に置き、影を付けずに浮かせて見せる

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸なしの矩形。流れの写真と理念アイコンは円形にする
• セクション境界: 直線で切り替える。理由ブロックは写真の右下に番号が重なる
• ボタンは角丸 8px の矩形
• カードとタイルは角丸なしかごく小さい角丸
• FAQ 行は角丸 4px のグレー面に濃紺の丸い Q マーク
• アイコン背景には水色の円を左上にずらして重ねる

Components

• 主ボタン（button-primary）: 濃紺の面に白文字。左にメールアイコン、または右に細い矢印を付ける
• 電話ボタン（button-tel）: 白地にグレー枠。受話器アイコンと濃紺の大きな電話番号を入れ、下に受付時間を添える
• 英字ラベル付き見出し（section-label）: 筆記体の英字＋短い下線＋太字の和文見出しを中央に積む
• 数字ボックス（stat-box）: 細い枠の中にラベルと極太の濃紺数字を入れ、縦に連結する
• メリットカード（merit-card）: グレー面の上に、水色の円を重ねた濃紺の線画アイコン・太字見出し・本文を置く
• 斜体番号（reason-number）: 濃紺の筆記体の大きな番号を写真の右下に重ねる
• 姿勢タイル（feature-tile）: 淡青の面に濃紺の太字 2 行を中央揃えで入れ、2 列に並べる
• FAQ アコーディオン（faq-item）: グレーの行に濃紺丸の Q と右端の＋/−。開くと水色丸の A と回答を出す
• 必須バッジ（badge-required）: 水色の小さな面に白文字。任意は淡い面に濃紺文字
• ステップ（step-item）: 濃紺の STEP 番号、白い円のアイコン、右に見出しと説明。間に下向きの山形を置く

Do's and Don'ts

Do - 濃紺・白・淡グレーの 3 色を基調にし、水色は差し色だけにする - 数字や実績は大きな濃紺の数字で見せる - 見出しには筆記体の英字ラベルを必ず添える - アイコンは濃紺の線画にそろえ、水色の円を添える - 余白を広めにとって行間を開け、落ち着いて読めるようにする

Don't - 赤・橙などの暖色や派手なグラデーションを使わない - ピル型ボタンや大きな角丸カードで柔らかくしすぎない - 濃い影や立体的な装飾を多用しない - 見出しに丸ゴシックやポップな書体を使わない - 写真をイラストに置き換えて親しみに寄せすぎない

Page Structure

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

1. ファーストビュー（多様な顧客と信頼感を一目で伝える）: 人物写真のモザイク全面に白いキャッチを重ね、半透明の枠で強み 3 つを×でつなぐ
2. 導入・コンセプト（立ち位置と姿勢を伝える）: 代表者の写真の下に太字見出し、枠で囲んだ強調語、本文を続ける
3. 数字で見る実績（データで信頼を裏付ける）: 濃紺系のドーナツグラフと凡例枠、大きな数字ボックスを縦に積む
4. サービス一覧（対応領域を一覧で示す）: 淡グレー地に写真＋ラベルのカードを 2 列で並べる
5. 選ばれる理由（差別化ポイントを詳しく説明する）: 濃紺帯の見出しのあと、全幅写真と斜体番号付きのブロックを 3 回くり返す。メリットカードや流れ図を挟む
6. ご相談の流れ（問い合わせのハードルを下げる）: 淡グレー地に 5 つの STEP を白い円アイコンで縦に並べる
7. 中間 CTA（無料相談に誘導する）: 青い写真帯に白文字を置き、ドット地に重ねた白いカードに主ボタンと電話ボタンを入れる
8. 代表者挨拶・プロフィール（人柄を見せて親近感を出す）: 縦長の人物写真、署名風の名前、年表、薄い大きな英字を背景に敷いたメッセージ
9. 経営理念（価値観を示す）: グレーの円アイコン 3 つを×でつなぎ、番号付きの英字見出しで説明する
10. 事務所概要・アクセス（基本情報を示す）: 淡グレー地に白い行の表と地図、ロゴと住所を並べる
11. オンライン対応（遠方の顧客にも対応できることを伝える）: 濃紺帯に白文字、白いカードに対応ツールのロゴを並べる
12. よくある質問（不安を解消する）: Q マーク付きのアコーディオンをグレーの行で積む
13. お問い合わせフォーム（問い合わせを獲得する）: 電話ボタンのカード、チェックボックスと入力欄、スクロールする規約枠、濃紺の確認ボタン
14. フッター（連絡先を再掲する）: 上辺に濃紺の線、中央にロゴと住所・電話を小さく入れる

Imagery

• スーツ姿のスタッフが自然に微笑む、明るいオフィスや屋外の写真
• 握手・電卓・書類・ビルなどビジネス用の素材写真を、彩度控えめのクールトーンで使う
• FV はさまざまな業種で働く人の笑顔をタイル状に敷き詰める
• アイコンは濃紺の単色線画に水色の円を添えたフラットな表現
• グラフは濃紺〜水色のフラットなドーナツ型にする
• CTA 帯の背景は写真に青のオーバーレイをかけ、下部にドットパターンを敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は本文幅を約 1000px に収め、左右に余白を取る
• 導入は写真と文章を左右 2 カラムにする
• グラフ 2 つと数字ボックス 3 つを横並びにする
• サービスは 4 列、メリットと姿勢タイルは 2 列（姿勢は本文と横並び）にする
• 流れは横並びのステップにし、CTA のボタン 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 行書くと起動時に読み込まれる。