DESIGN.md — ミントストライプ×黄枠のキャラ家電 LP（Mint Stripe Character Kitchen Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: かわいい、やさしい・柔らかい、親しみ・手作り感、清潔・爽やか
• キーワード: ミント縦ストライプ・黄色の太枠カード・茶色の丸文字・手描きキャラ・傾けた写真フレーム・スカラップ見出し帯
• 地の質感: 淡いミントの縦ストライプ地。ところどころに手描きの葉の装飾を散らす
• 形: 角丸の太枠カード、ピル型ボタン、半円タブ、波形（スカラップ）のセクション帯
• 温度感: やや暖かいパステル。ミントの涼しさを茶とクリーム色で和らげる

Colors

• 地はミントの縦ストライプ。FV と末尾はやや濃いセージ、本文は淡いミントにする
• カードは白地に黄色い太枠をつけ、内側に細いミントの線を入れる
• 文字は黒を使わず焦げ茶でまとめる
• 強調は黄色の帯面とマスタードの文字で行う
• ティールは手書きの強調文字と CTA の文字だけに使う
• ピンクはブランドロゴだけに使い、ほかでは使わない
• button-primary は文字 #40A79F × 背景 #FEF58C のコントラスト比が 2.57:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-cta-accessible（#2E7973、4.55:1）を使う。
• section-header-scallop は文字 #78604B × 背景 #99D2C2 のコントラスト比が 3.46:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#CBE8E0、4.52:1）を使う。
• photo-frame-tilted は文字 #35AC9F × 背景 #FEFEFE のコントラスト比が 2.76:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#288379、4.51:1）を使う。
• caution-bubble は文字 #FEFEFE × 背景 #9DD3C1 のコントラスト比が 1.66:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら tint-1-accessible（#3A8169、4.6:1）を使う。

Typography

• 全体を太めの丸ゴシックにして、細い書体は使わない
• 見出しは字間を 0.08em 以上あけ、ゆったり見せる
• 文字はすべて中央揃えにする
• 見出しには白フチや白い背景を敷いてストライプから浮かせる
• POINT の番号は英字より大きくしてマスタード色にする
• 手書き文字は写真にかぶせるアクセントにだけ使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品詳細だけ 2 列グリッド
• 本文ブロックの幅: 画面幅の約 84%
• 余白: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算）
• カードは左右に約 8% の余白をとって中央に置く
• 手順カードは間隔 16px で縦に積む
• キャラクターはカードの角に半分重ねて配置する
• 写真フレームは ±4° ほど傾け、画面幅いっぱい近くまで広げる
• セクションの頭にはスカラップ帯と見出しを置く

Elevation & Depth

• 影はほとんど使わず、太枠で面を区切る
• 傾けた写真フレームにだけ、薄い影をつけてもよい
• 立体感は枠と面の重ね方で出す

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸の四角で黄色の太枠に収める。FV と完成写真は白縁のポラロイド風にして傾ける
• セクション境界: 濃いミントの直線帯と、その下に垂れる波形（スカラップ）の帯
• カードの枠は黄色で 6px 前後の太さにする
• POINT のラベルは半円タブにしてカードの上辺に乗せる
• 吹き出しは雲形か角丸四角にし、手描きの線で縁取る
• ボタンは淡黄色のピル型にして、ミント系の細い縁をつける

Components

• 購入ボタン（button-primary）: 淡黄色のピル型。ティールの太字で中央に置く
• スカラップ見出し帯（section-header-scallop）: ミントの帯に波形の縁をつけ、白フチの茶色見出しの左右に小さな花を飾る
• 手順カード（step-card）: 黄色の太枠に入れた写真の下に、丸数字つきの手順名を置く。角にキャラを重ねる
• ポイントカード（point-card）: 上辺に半円の POINT タブ。中は写真、黄色の見出し帯、白い説明文の順に並べる
• 傾き写真フレーム（photo-frame-tilted）: 白縁のポラロイド風フレームを傾けて置き、手書きのコピーを重ねる
• 雲形吹き出し（speech-cloud）: FV 上部に置く手描き線の雲形吹き出し。中にキャッチを 2〜3 行入れる
• 注意吹き出し（caution-bubble）: ミントの角丸面に黄色のビックリマークアイコンと白文字を置く
• 詳細グリッド（detail-grid-card）: 2 列の黄色枠の写真に、短いキャプションを 2 行添える

Do's and Don'ts

Do - 地には常に淡いミントの縦ストライプを敷く - カードは白地＋黄色の太枠＋角丸で統一する - 手描きのキャラクターをセクションごとに 1〜2 体、カードの角に添える - 手描きの葉や花の小さな装飾を余白に散らす - 文字は焦げ茶の太い丸ゴシックで中央揃えにする

Don't - 黒文字や細い明朝体を使わない - 鮮やかな赤や原色の CTA を置かない - 鋭い角の四角やドロップシャドウを多用しない - 暗い背景や濃い写真を全面に敷かない - ブランドロゴ以外にピンクを使わない

Page Structure

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

1. ファーストビュー（かわいい完成イメージと商品名で惹きつける）: ストライプ地の上部に雲形の吹き出しを置く。傾けたポラロイド写真の下に大きな丸文字の商品名、キャラ名のロゴ、購入ボタンを並べる
2. 作り方（手順）（簡単さを 3 ステップで示す）: スカラップ見出しの後に、黄色枠の手順カードを縦に 3 つ並べる。丸数字の手順名を添え、注意は吹き出しで補う
3. 完成イメージ（できあがりの楽しさを見せる）: 傾けた大きな写真フレームに手書きのコピーを重ね、下に一言を入れる
4. ポイント（商品の特長を 2 つ伝える）: 半円の POINT タブがついたカードを使う。中は写真、黄色の見出し帯、白い説明文の順にする
5. 商品詳細（機能やサイズを伝える）: スカラップ見出しの後に、2×2 の写真グリッドとキャプションを置く
6. イメージ写真と締めの一言（使う場面を想像させる）: 全幅のテーブルコーディネート写真の下に、2 行の呼びかけを入れる
7. ブランド紹介（ブランドへの信頼をつくる）: コードとプラグの線画で囲んだ淡い面に、ロゴと説明を 1 行置く

Imagery

• 写真は明るい自然光で撮った俯瞰のテーブルコーディネート。ミントのストライプ布、フルーツ、ガラスのコップを入れる
• 商品は白背景の切り抜き写真にして、黄色い枠に収める
• キャラクターは色鉛筆風の手描きイラストにし、ポーズを変えて各所に置く
• 飾りは手描きの葉のつる、小さな白い花、フォークやお皿の線画
• 末尾は電源コードとプラグの線画で枠をつくる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC の画像がないため、推奨のみ記載する
• PC ではストライプ地を全幅に敷き、中身は最大幅 750px 程度で中央に置く
• 手順カードとポイントカードは PC では 2〜3 列に並べてもよい
• 商品詳細のグリッドは PC では 4 列にする
• キャラクターは 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 行書くと起動時に読み込まれる。