DESIGN.md — 青×黄の斜線地で見せる防災アプリ紹介 LP（Bold Blue and Yellow Public Safety App LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: 信頼・誠実、力強い・インパクト、清潔・爽やか、情報量多め・訴求型
• キーワード: 濃い青・黄色の帯・斜めストライプ・白い角丸パネル・番号付き特徴・アプリ画面モック
• 地の質感: 外側の背景は青の斜めストライプ柄。内側は白と薄いグレーブルーのフラットな面。
• 形: 角丸カードと円形の番号バッジ、スマホのフレームを多く使う。
• 温度感: やや寒色。ただし黄色のアクセントで明るく元気な印象にしている。

Colors

• ページの外側は青い斜めストライプ。本文は中央の白いパネルに収める。
• 特徴カードは薄いグレーブルーの地にする。説明文は下部の青い帯に白文字で置く。
• 青い帯の中の強調語だけを黄色の文字にする。
• ダウンロード案内は黄色の全幅帯に白いカードを乗せる。見出しは青文字。
• 白地の見出しでは、キーワードだけを青文字にする。
• 色数は青・白・黄・黒に絞る。
• icon-grid は文字 #0E0D10 × 背景 #025BB3 のコントラスト比が 2.91:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#0378ED、4.53:1）を使う。

Typography

• 見出しは太いゴシックで中央揃えにする。
• 説明文は 2〜3 行の短文にし、中央揃えで改行位置を調整する。
• 強調は色の変化だけで示し、文字サイズは変えない。
• 番号は「特徴」という小さなラベルと 2 桁の数字を円の中で縦に組む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。アイコン一覧だけ 3 カラム
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 40px、基本単位 8px、カード内 16px（375px 幅換算）
• 中央の白パネルは左右に約 20px の青い余白を残す。
• 特徴カードは「番号バッジ→画面モック→青い説明帯」の順で縦に積む。
• 番号バッジはカードの上辺にまたがるように半分重ねる。
• ダウンロード帯はパネル幅いっぱいに置く。ページ中盤と末尾の 2 回配置する。

Elevation & Depth

• 影はほぼ使わない。面の色の差と枠線で階層を分ける。
• スマホモックだけ白い太縁で浮いて見せる。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: アプリ画面はスマホフレームに入れて下端で切る。アイコンは青い正円に入れる。
• セクション境界: 直線で切り替える。中央パネルは上下の角を丸める。
• 番号バッジは正円にする。
• 吹き出しは黄色の円形で、尻尾を付ける。
• 設定手順カードは青い 2px の角丸枠で囲む。

Components

• 番号バッジ（feature-number-badge）: 青い正円に「特徴」のラベルと 2 桁の番号を白文字で入れる
• 特徴カード（feature-card）: 薄いグレーブルーの地に画面モックを置き、下に青い説明帯を付ける
• 青い説明帯（caption-band）: 白文字の説明文。強調語は黄色にする
• 黄色の円形吹き出し（speech-bubble）: 無料・簡単といった短い利点を 2 行で書いた黒文字の吹き出し
• ダウンロード帯（download-band）: 黄色地に青見出しとアプリのモックを置き、白いカードにストアバッジと QR を並べる
• 見出しボックス（heading-box）: 薄いグレーブルーの角丸箱に太字の見出しを入れる。キーワードは青
• 円形アイコン一覧（icon-grid）: 青い円に白いピクトを入れ、下に黒の短いラベルを置いて 3 列に並べる
• 手順カード（step-card）: 青枠で囲み、上半分に画面、中央に番号の円、下に見出しを置く
• 斜線つき見出し（slash-heading）: 見出しの両端に青い二重斜線を添える

Do's and Don'ts

Do - 外側の背景は青の斜めストライプにする。 - 説明帯の強調語は黄色の文字にする。 - 画面はスマホフレームに入れて見せる。 - ダウンロード導線は中盤と末尾の 2 回置く。 - アイコンは単色のフラットなピクトで揃える。

Don't - グラデーションや強い影を使わない。 - 青・黄以外の派手な色を足さない。 - 細い明朝体を使わない。 - 長い本文の段落を置かない。 - 写真の人物を大きく使わない。

Page Structure

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

1. ファーストビュー（発信元とアプリを示し、手軽さを伝える）: 青いストライプ地に、ロゴとタイトル、アプリ名を表示したスマホモックを置く。左右に黄色の吹き出しを 2 つ添える
2. 導入見出し（登録を呼びかける）: 白パネルの上部に、両端に斜線を付けた太字見出しを置く
3. 特長（機能を 6 つ紹介する）: 番号バッジ・画面モック・青い説明帯でできた特徴カードを縦に並べる
4. CTA（ダウンロードを促す）: 黄色の帯に青い見出しとアプリのモックを置き、ストアバッジと QR を入れた白カードを並べる
5. 配信情報一覧（受け取れる情報の幅広さを示す）: 見出しボックスの下に、青い円形アイコンを 3 列で並べる
6. 利用手順（設定が簡単だと示す）: 青枠の手順カードを 3 枚、番号付きで縦に並べる
7. 紹介動画（動画で使い方を補足する）: 薄いグレーブルーの地に、青枠で囲んだ動画埋め込みを置く
8. CTA（再掲）（最後にダウンロードを促す）: 中盤の黄色帯と同じ構成を繰り返す
9. フッター（問い合わせ先を示す）: 白地にロゴを置き、青いラベル付きで連絡先を書く

Imagery

• アプリの UI スクリーンショットを白い太縁のスマホフレームに入れる。
• 操作を示す矢印は青で描き、白い手のアイコンを添える。
• ピクトは白一色で、青い正円の中に入れる。
• イラストは線画に黄色などのポイント色を入れる程度に抑える。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は中央の白パネルを約 50% 幅に固定し、外側はストライプ地のままにする。
• PC の特徴カードは 2 列のグリッドにする。
• PC のアイコン一覧は 5 列、手順カードは 3 列に横並びにする。
• PC のダウンロードカードは、2 つのストアを横に並べる。
• PC のフッターは 1 行に横並びにする。

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