DESIGN.md — 黄×ミント×ピンクのポップ幾何学 雑貨LP（Pop Pastel Geometric Character Goods LP）

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

Overview

• 業種: 住宅・不動産・リフォーム ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感
• キーワード: パステル多色・幾何学紙吹雪・ドット・斜線柄・白カード黒枠・ずらし影見出し
• 地の質感: フラットな色面に、ハーフトーンのドットと斜線ハッチの円を半透明で重ねる
• 形: 円・三角・リングを散らす。カードは角丸で細い黒線。ボタンはピル型
• 温度感: 明るく暖かい。黄が基調で、ミントで爽やかさを足す

Colors

• セクションごとに地色を黄→淡黄緑→ミント→淡黄緑→黄→ピンク→淡黄の順で切り替える
• 本文は必ず白カードに載せ、地色の上に直接置かない
• 強調文字とCTAは深緑に統一する
• FAQの質問帯だけティールにして区別する
• 装飾は地色に近い濃淡の色かサーモンを、ドットか斜線で使う
• 価格は淡黄の帯に深緑の太字で載せる
• button-primary は文字 #FFFFFF × 背景 #03935E のコントラスト比が 3.93:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#038756、4.56:1）を使う。
• heading-ribbon は文字 #029362 × 背景 #FDFDFE のコントラスト比が 3.86:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#02865A、4.53:1）を使う。
• label-pill は文字 #FFFFFF × 背景 #029362 のコントラスト比が 3.92:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#02865A、4.61:1）を使う。
• faq-item は文字 #FFFFFF × 背景 #01A4BC のコントラスト比が 2.98:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#018193、4.6:1）を使う。
• price-band は文字 #029362 × 背景 #FCFAB2 のコントラスト比が 3.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#02865A、4.55:1）を使う。

Typography

• 見出しは1行ずつ白帯に分け、中央に積む
• 見出しの文字は深緑の太字にする
• 本文の強調は深緑の太字にして、色以外の装飾はしない
• 本文は中央揃えか、写真の横に左揃えで置く
• 価格は大きな太字にし、税込額を小さく添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SPは1カラム。カード内の写真と文章は縦に積む
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• セクションは全幅の色面で区切り、中央に白カードを1枚置く
• 見出しの上に放射線の小さな装飾を付ける
• CTAはカードの下に中央揃えで置く
• カード内では写真と文章を左右交互に組む
• 商品は2つ並べ、上に名前のピル型ラベルを付ける

Elevation & Depth

• 見出し帯は黒の細枠に、右下へ斜線ハッチのずらし影を付ける
• 白カードはぼかし影なしで、1pxの黒枠だけにする
• CTAは影なしのフラットにする

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 四角で切り抜き、角丸にしない。右下に小さく権利表記を入れる
• セクション境界: 基本は直線の色切替。一部の境目に波形の色面を重ねる
• CTA・小見出しラベル・FAQ帯はピル型か大きめの角丸にする
• カードは角丸12〜16pxで黒の細枠
• 装飾は円・三角・リングを線画かドット塗りで描く

Components

• 店舗案内CTA（button-primary）: 深緑のピル型。左に店舗アイコン、右に白丸の矢印を入れる
• 積み帯見出し（heading-ribbon）: 白帯に緑文字を置き、黒の細枠と斜線のずらし影を付ける。上に放射線の飾りを添える
• 白カード（card-outline）: 黒の細枠を付けた角丸の白カード。セクションの中身をすべて入れる
• 小見出しピル（label-pill）: 商品名や注意項目の見出しを白抜き文字にした深緑ピル
• FAQ（faq-item）: ティール帯にQの丸アイコンを付けた質問。回答はA丸アイコン付きのテキスト
• 声の吹き出し（voice-bubble）: 丸い人物アイコンと黒枠の白い吹き出しを左右交互に並べる
• 価格帯（price-band）: 淡黄の帯の中央に、深緑の太字で価格を置く
• 注意事項ボックス（notice-scroll）: 薄グレーの枠に箇条書きを入れる。スクロールできる

Do's and Don'ts

Do - セクションごとに地色を変えて、リズムを作る - 地色の余白にドット円・斜線円・三角の紙吹雪を散らす - 見出しは短く改行し、白帯を積み重ねる - CTAは同じデザインで要所ごとに繰り返す

Don't - ぼかしの強いドロップシャドウを使わない - 本文を色地の上に直接置かない - 暗い背景や黒ベタのセクションを作らない - 明朝体や細い書体を見出しに使わない

Page Structure

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

1. ファーストビュー（商品の魅力を一目で伝える）: 緑・水色・ピンクの斜め分割の背景に、英字の極太タイトル、商品の切り抜き、使用シーンの丸写真を置く
2. 商品紹介（サービスの概要を伝える）: 黄地に帯見出しと白カードの本文。その下にCTAと商品写真を置く
3. ストーリー（共感を呼ぶ）: 淡黄緑地に、欧文スクリプトを混ぜた見出しとリード帯。カード内は写真と文章を交互に組む
4. 購入特典（購入を後押しする）: ミント地に星を散らす。カード内は写真と文章を交互に組む
5. お客様の声（信頼を得る）: 淡黄緑地に吹き出しの装飾。カード内は写真の横に吹き出しを3つ並べる
6. 商品・価格（選択肢と価格を示す）: 黄地のカードに2商品をピルラベル付きで並べ、価格帯と説明、CTAを置く
7. 注意事項（購入時と使用時の注意を伝える）: ピンク地に2つのカード。スクロール箱と2列のピル見出しで構成する
8. よくある質問（疑問を解消する）: 淡黄地のカードに、ティールの質問帯とA付きの回答を並べる
9. バナー・外部リンク（関連施策へ誘導する）: 白地にキャンペーンのバナーを2枚と、深緑のピル型CTAを置く

Imagery

• 商品は白や木目の明るい背景で物撮りし、自然光でやわらかく写す
• ドアや鍵を回す手元など、生活シーンを寄りで撮る
• パステルのグラデーションや布を背景にした、雑貨らしい写真
• 装飾はハーフトーンのドット円、斜線ハッチ円、三角と丸のリングの紙吹雪
• 人物は丸枠に入れたシンプルなイラストアイコンにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SPは1カラムにし、カード内の写真と文章を縦に積む
• 見出し帯は1行を短くして段数を増やす
• PCはカード幅を約800px中央にし、写真と文章を左右交互に組む
• 装飾の円はSPで小さくし、画面端に半分はみ出させる
• CTAはSPで横幅80%程度にする

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