DESIGN.md — 生成り×パステルの手描きイラスト家電 LP（Pastel Illustrated Interior Appliance LP）

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

Overview

• 業種: 家電・ガジェット ／ 雰囲気: やさしい・柔らかい、ナチュラル、シンプル・ミニマル、上品・高級
• キーワード: パステル・手描きイラスト・インテリア・余白多め・波形の区切り・黄色マーカー
• 地の質感: フラットな単色面。紙の質感はなく、イラストの手描き線が温かみを出す
• 形: 角丸 12px 前後の写真とカード、ゆるい波形のセクション境界、ピル型の小ボタン
• 温度感: ややあたたかい中間色（生成り・グレージュ）に、くすんだパステルを差す

Colors

• 地は #F9F9F9 と生成りの #F1F0EC の 2 色を、波形の境界で交互に切り替える
• カラー展開の紹介帯は、商品色を淡くしたパステルを全幅に敷き、色ごとに 1 帯ずつ使う
• 強調は黄色のマーカー下線と Point ラベルだけに使い、ほかの強調色は足さない
• 見出しはほぼ黒、本文はグレーにし、純黒のベタ面は CTA だけにする
• 彩度の高い色はイラストと商品写真に任せ、UI の色は抑える

Typography

• 英字のセクション見出しの下に、小さい和文サブ見出しを黄色マーカー付きで置く
• 和文見出しは 2 行に分け、太くしすぎず中くらいの太さにする
• 本文は行間 2.0・字間広めにして、ゆったり見せる
• カラー名は欧文の小文字にし、横に読み・漢字表記を小さく添える
• 和文見出しの中の言葉はカギ括弧でくくって強調する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は写真とテキストの左右 2 カラムを交互に入れ替え、ステップと Point は 3〜4 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真とテキストのブロックは、左右を交互に入れ替えて並べる
• 写真の角にイラストをはみ出させて重ねる
• カラー紹介は帯ごとに同じレイアウトを繰り返す
• ステップは番号付きのカードを横並びにする（SP は 2 列か縦積み）
• 余白は広めにとり、セクションの上下は 64〜96px あける

Elevation & Depth

• 影はほぼ使わず、面の色の差で階層を出す
• 商品の切り抜き写真にだけ、ごく薄い接地影をつける
• カードは影なしで、生成りの面と角丸で区切る

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 写真は角丸 12px の長方形。商品は背景を抜いた切り抜き
• セクション境界: ゆるい波形カーブで生成りと白の地を切り替える。カラー帯は直線で区切る
• ボタンとラベルはピル型にする
• Point ラベルは黄色の角丸長方形にする
• More ブロックは大きめの角丸 20px で、右上に見出しを載せる
• 鋭い角や斜めの切り返しは使わない

Components

• 英字見出し＋和文サブ見出し（section-title-en）: 中央または左寄せの英字見出しの下に、小さい和文を黄色マーカー付きで添える
• 黄色マーカー下線（marker-underline）: 見出しの末尾や下に、短い黄色の下線を半分の高さで敷く
• Point 番号ラベル（point-label）: 「Point.01」形式の黄色いラベル。特長見出しの上に置く
• 番号付き楽しみ方カード（step-card）: クリーム色の角丸カードの左上に大きな番号を置き、イラスト・見出し・短い説明を入れる
• カラー紹介帯（color-band）: 商品色のパステル全幅帯。カラー名・商品切り抜き・コーディネート写真を重ねて並べる
• 追加特長のまとめカード（more-card）: 生成りの大きな角丸パネルに、Point を縦線で区切って 3 列に並べる
• メンテナンス案内枠（notice-box）: 細い枠線で囲み、中央に太字の見出し、左にロゴ、右に説明文を置く
• 小さなピル型ボタン（button-more）: 黄色のピル型で、英字の後ろに＋アイコンをつける
• お問い合わせボタン（button-primary）: 濃いグレーのピル型。白い英字と矢印を入れる

Do's and Don'ts

Do - 地は白と生成りを交互にし、波形の境界でやわらかくつなぐ - 強調には黄色のマーカーとラベルだけを使う - 実写の写真に手描きイラストの人物や小物を重ねて、生活感を出す - 見出しは英字と和文の 2 段にする - 余白を広くとり、本文は行間 2.0 にする

Don't - 原色や蛍光色で UI を塗らない - 濃い影やグラデーションのボタンを使わない - 太すぎる見出しや詰めた字間にしない - 四角い角のカードや斜めの区切りを使わない - 1 画面に強調色を 2 色以上並べない

Page Structure

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

1. ファーストビュー（商品のある暮らしの世界観を伝える）: 左に短いキャッチとロゴ、右に部屋でくつろぐ人の大きな手描きイラスト
2. コンセプト（商品の価値をひとことで示す）: 生成りの波形地に 2 行の見出しと黄色マーカー。下にカラー展開の切り抜き写真を横 5 つ並べる
3. ブランド紹介（ほかにない特徴と、信頼できる作り手であることを伝える）: 写真とテキストの 2 カラムを 2 回、左右を入れ替えて並べ、イラストを重ねる
4. 楽しみ方（使い方を 4 ステップで想像させる）: 番号付きのクリーム色カード 4 枚に、イラスト・見出し・説明を入れる
5. カラー別コーディネート（色ごとのインテリア提案）: 商品色のパステル帯を 5 色続け、カラー名・説明・切り抜き写真・部屋の写真を配置する
6. 特長（機能を具体的に説明する）: Point ラベル付きの写真とテキストを、左右交互に 6 つ並べる
7. 追加特長（細かな機能をまとめて見せる）: 生成りの角丸パネルに、Point を 1 つと 3 列並べる
8. スペック・保証（仕様とアフターサポートで安心させる）: 仕様のテキストリストとカラー一覧、枠線で囲んだメンテナンス案内
9. よくある質問（疑問を解消する）: 英字見出しと黄色の more ボタンだけを置く、シンプルな導線
10. ユーザーギャラリー（実際の使用例で共感を得る）: 波形の生成り地に見出しとイラスト。下に SNS 投稿写真の横スライダー
11. 取扱店舗（購入先を案内する）: 生成りの角丸カードに見出しと more ボタン
12. フッター（ブランドの印象を残し、各ページへ誘導する）: 線画イラストとロゴを中央に置き、下にサイトマップを 4 列と黒のピル型問い合わせボタン

Imagery

• 人物や小物は、くすんだ色の手描き水彩・色鉛筆風イラストにし、輪郭線を細く残す
• インテリア写真は明るい自然光の北欧風の部屋で、商品を小さめに写す
• 商品は背景を抜いた切り抜きを正面から撮り、ごく薄い接地影をつける
• ワインボトルやグラス、植物の小さなイラストを余白に散らす
• フッターは墨一色の線画イラストにする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• SP では 2 カラムを縦積みにし、写真を先、テキストを後に置く
• 楽しみ方カードは SP で 2 列×2 段にする
• カラー帯の写真は SP で全幅、切り抜き写真は写真に重ねて小さく置く
• 追加特長の 3 列は SP で縦積みにし、区切りの縦線を横線に変える
• ギャラリーは SP で 1.5 枚見える横スクロールにする

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