DESIGN.md — 鮮やか黄色×白カードの安心訴求PC LP（Bright Yellow Reassurance PC Brand LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: ポップ・元気、信頼・誠実、清潔・爽やか、親しみ・手作り感
• キーワード: 鮮やかな黄色・白い角丸カード・黒の太ゴシック・人物の切り抜き・線画アイコン・安心感
• 地の質感: フラットな単色の面。黄色地に、薄い黄色の大きな英字ウォーターマークをうっすら敷く
• 形: 大きな角丸カードと円形バッジ。セクションの境目は大きな弧のカーブ
• 温度感: 暖かく明るい。黄色と白がメインで、黒は文字のみに使う

Colors

• 地の色は、上から順に黄色→クリーム→黄色→グレーの流れで、セクションごとに切り替える
• 黄色の地の上には白い角丸カードを置いて、本文を読ませる
• 強調したい語句には黄色のマーカー下線を引く
• 黒は文字とアイコンの線だけに使い、面には使わない
• 後半の情報整理パートは、グレー地に白カードを並べて落ち着かせる
• 写真以外に3色以上の彩度の高い色は使わない

Typography

• 見出しは極太のゴシックで、黒一色にする
• 見出しの強調部分は、文字色を変えずに黄色マーカーで示す
• 本文は14px前後で、行間を広めにとる
• 注釈は※付きの小さいグレー文字にする
• 英字のウォーターマークは、地の色に近い薄い色で大きく敷く
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。ラインアップは2列、アイコンのカテゴリは3列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは画面幅の約90%で中央に置く
• 特長カードは見出し・本文・写真の順に縦に積む
• 人物の切り抜きをカードの角に重ね、吹き出しを添える
• 円バッジは千鳥状に配置し、中央に人物を置く
• カテゴリは正方形に近いアイコンタイルをグリッドで並べる

Elevation & Depth

• カードはごく薄い影か影なしで、地との色差で浮かせる
• 円バッジには白の塗りと淡い影
• 吹き出しは影なしの淡い黄色

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の長方形。人物は背景を抜いた切り抜き
• セクション境界: 黄色からグレーへ大きな弧のカーブで切り替える
• カードは大きめの角丸にする
• ボタンとラベルはピル型
• 特長のバッジは正円
• 動画サムネイルは角丸にし、中央に黄色の再生ボタンを置く

Components

• 見出しラベル（label-pill）: 大見出しの上に置く、黄色いピル型の小ラベル
• マーカー見出し（heading-marker）: 見出しの強調語に黄色の下線マーカーを引く
• 安心ポイント円バッジ（feature-badge）: 白い正円の中に、線画アイコン・短い見出し・下向き矢印を入れる
• 特長カード（feature-card）: 白い角丸カード。番号付きアイコン・見出し・本文・写真に、人物の切り抜きと吹き出しを添える
• 吹き出し（speech-bubble）: 人物の横に置く、淡い黄色の短いコメント
• ラインアップカード（lineup-card）: 白いカードに商品写真・ロゴ・名称・説明・枠線ボタンを入れる
• 詳しくボタン（button-outline）: 白地に黒い枠線のピル型ボタン。右端に黒丸の矢印を付ける
• カテゴリタイル（icon-tile）: 白い角丸タイルに、黒い線画アイコンとラベルを入れる
• アンカーナビ（nav-bar）: FV直下に置く白い帯。項目は区切り線で並べる

Do's and Don'ts

Do - 黄色と白を主役にし、明るい印象を保つ - 特長ごとに線画アイコンと実写の写真を組み合わせる - 人物の切り抜きと吹き出しで親しみを出す - 大事な語はマーカーで強調する - 情報量の多いパートは、グレー地のグリッドで整理する

Don't - 黒い背景の面を作らない - 黄色以外の強い色をアクセントに使わない - 細い明朝体を使わない - カードを角張らせない - 写真に重い影や枠を付けない

Page Structure

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

1. ファーストビュー（ブランドの安心感を一言で伝える）: 黄色の地に極太のコピーとロゴを置き、右に人物の切り抜きと円バッジを2つ配置する
2. アンカーナビ（ページ内の主要セクションへ誘導する）: 白い帯に5項目を並べる
3. 動画紹介（CMやメイキングを見せる）: 黄色の地に英字ウォーターマークを敷き、角丸の動画サムネイルを2つ並べる
4. 安心ポイント一覧（5つの強みを俯瞰させる）: クリーム地にラベルとマーカー見出しを置き、円バッジ5つで人物を囲む
5. 特長の詳細（強みを1つずつ説明する）: 黄色の地に白いカードを5枚縦に並べ、それぞれにアイコン・本文・写真・人物と吹き出しを入れる
6. ブランドラインアップ（商品シリーズを比較させる）: 弧で切り替えたグレー地に、人物が指差す見出しと白カードのグリッドを置く
7. カテゴリから探す（形状や用途から商品を選ばせる）: 線画アイコンのタイルをグリッドで並べ、下に横長の検索ボタンを置く
8. 法人向けバナー（法人利用へ誘導する）: 白い地に、黄色の人物入りバナーを1枚置く
9. 問い合わせ（購入前の相談窓口を案内する）: グレー地に白カードを3つ置き、アイコン・電話番号・受付時間を入れる

Imagery

• 人物は淡い黄色の服を着た笑顔の女性の切り抜きで、手振りで案内させる
• サポートや工場の現場写真は自然光で撮り、明るく清潔な色調にする
• 商品は白背景の物撮り
• アイコンは黒の線画に黄色の差し色を入れた手描き風
• 背景の英字は薄い黄色で大きく敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCの2列の特長カード（本文と写真の左右配置）は、SPでは縦に積む
• ラインアップはPCの3列をSPでは2列にする
• カテゴリのタイルはPCの6〜7列をSPでは3列にする
• FVはSPでコピーを上、人物を下に配置する
• アンカーナビは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 行書くと起動時に読み込まれる。