DESIGN.md — 水彩パステルと手描き線の旅行雑貨LP（Pastel Watercolor Travel Story LP）

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

Overview

• 業種: 日用品・生活雑貨 ／ 雰囲気: やさしい・柔らかい、親しみ・手作り感、ナチュラル、かわいい
• キーワード: 水彩テクスチャ・くすみパステル・手描きイラスト・点線の軌跡・旅のストーリー・切り抜き商品
• 地の質感: 和紙や水彩紙のようなざらっとした淡い色面。フラットな単色は使わない
• 形: 不規則な多角形・ちぎった紙のような色面、ピル型ボタン、角丸の吹き出し枠
• 温度感: 温かみのあるニュートラル。茶色の文字と、オレンジ・青・緑・紫の淡いアクセント

Colors

• 地は白。その上に生成り・セージ・ラベンダーの水彩面を工程ごとに切り替えて敷く
• 見出しは工程名をこげ茶、アイテム名をオレンジ、エリアによってはグリーンや紫にする
• ボタンは青・オレンジ・グリーンのくすみ色を使い分ける。純色の原色は使わない
• 文字は黒ではなくこげ茶系にして柔らかく見せる
• 末尾のラインナップ帯は薄いベージュの全幅面にする
• button-pill は文字 #FFFFFF × 背景 #EBA56B のコントラスト比が 2.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#B45F18、4.57:1）を使う。
• heading-tag は文字 #FFFFFF × 背景 #75A3D4 のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3A78BB、4.58:1）を使う。
• size-badge は文字 #C08AB8 × 背景 #F2ECEE のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#99528F、4.55:1）を使う。
• side-nav は文字 #75A3D4 × 背景 #FFFFFF のコントラスト比が 2.64:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#3A78BB、4.58:1）を使う。

Typography

• 見出しは字間を広めにした太い丸ゴシック
• 見出しの上に筆記体の欧文ラベルを小さく重ねる
• 工程番号は大きな数字（太い丸ゴ）にして、筆記体のラベルを添える
• 商品名は写真の上に弧状に並べて手作り感を出す
• 本文は中央揃えで、短い行を2〜3行にまとめる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。商品は 2 列（バッグなどは 3 列）で並べる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 工程ブロックは中央に寄せた縦の流れで組む
• 1カテゴリは見出し・2商品の比較・吹き出し・収納時の写真の順に並べる
• ブロックの間は手描きの点線でつなぎ、旅の軌跡に見せる
• イラストは左右の余白に少しはみ出して配置する
• ラインナップは4列グリッド（SPでは2列）

Elevation & Depth

• 影はほぼ使わない。平面的な紙のコラージュで見せる
• 奥行きは水彩面の重なりと、写真の切り抜きで出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。
• 写真の切り抜き: 商品は背景を抜いた切り抜き。吹き出しの中は角丸の小さい四角写真
• セクション境界: ちぎった紙のような不規則な多角形の色面と、波線の区切り
• 水彩面は角ばった不規則な多角形にする
• 吹き出しは細い茶色の線で、角丸の枠にしっぽを付ける
• ピル型ボタンは細い茶色の縁取りを付けてもよい
• 収納時の写真の下に小さな水彩の台座面を敷き、集中線を添える

Components

• ピル型ボタン（button-pill）: くすみ色の塗りに白文字。一覧ページへの誘導やページ内ジャンプに使う
• セクション見出しタグ（heading-tag）: ピル型の青ラベルに欧文。左右に波線を伸ばす
• 工程番号見出し（process-number）: 筆記体ラベルと大きな数字、その下に集中線付きの工程名を置く
• カテゴリ見出し（item-heading）: 小さな筆記体ラベル、オレンジの見出し、短いリード文の順に重ねる
• 吹き出しカード（speech-card）: 白地に茶色の細枠。特長の短文2行と小さな写真を入れる
• サイズ丸バッジ（size-badge）: 淡い紫の丸にS・Mなどのサイズ文字を入れる
• 工程サイドナビ（side-nav）: 番号入りの丸を縦に並べ、色を工程ごとに変える
• ラインナップ商品タイル（product-tile）: 正方形の商品写真と、その下に小さな商品名

Do's and Don'ts

Do - 工程ごとに水彩面の色を変え、ストーリーの進みがわかるようにする - 見出しには必ず小さな筆記体の欧文ラベルを添える - ブロック同士を点線の軌跡と飛行機・電車などのイラストでつなぐ - 商品は2つを並べて比較し、特長は吹き出しで短く書く - 文字はこげ茶にして柔らかいトーンを保つ

Don't - 真っ黒な文字や原色のビビッドな色を使わない - 影の強いカードや光沢のあるグラデーションボタンにしない - 直線的できっちりした四角の帯で区切らない - 長い説明文を詰め込まない - 写真を背景つきの四角でベタ貼りしない

Page Structure

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

1. ファーストビュー（テーマと商品群を一目で見せる）: 生成りの地に商品の切り抜きを散らし、中央に線文字の欧文タイトルと筆記体を置く。下端は波形
2. ページ内ナビ（おすすめ紹介と一覧へ飛ばす）: 筆記体ラベルと、色違いのピル型ボタンを2つ並べる
3. コンセプト紹介（旅を快適にする提案を伝える）: 雲形の水彩面に見出しと3行の中央揃えの文。太陽や雲のイラストを添える
4. 動画（動画で全体像を伝える）: 淡いピンクの地に埋め込み動画。スタンプふうの装飾を添える
5. 工程1 準備（シーンに合わせて収納グッズを紹介する）: 番号見出し、人物イラスト、商品2つの比較、吹き出し枠の順に並べる
6. 工程2 移動中（移動を快適にするグッズを紹介する）: 生成りの長い水彩面の上で、複数カテゴリを順番に並べる
7. 工程3 観光中（折りたたみバッグを紹介する）: セージの水彩面に3商品を横に並べ、枠内で特長を説明する
8. 工程4 宿泊先（吊るせるポーチを紹介する）: ラベンダーの水彩面に紫の見出しを置き、比較と吹き出しで説明する
9. 締めくくり（旅の余韻で気持ちよく締める）: 飛行機と点線のあとに一言コピーを置き、広げたキャリーケースの写真を見せる
10. ラインナップ（カテゴリ別の一覧へ誘導する）: ベージュの帯に三角矢印つきの見出し、4列の商品タイル、色違いのピル型ボタンを置く

Imagery

• 商品は白背景で撮った切り抜き写真。ややフラットな光で撮る
• 人物や乗り物は淡い水彩タッチのイラスト。線は控えめにする
• 背景は紙の質感がある水彩ペイントの不規則な面
• 収納時の写真の周りに手描きの集中線を添える
• 旅のスタンプや消印ふうの円形装飾、線路、飛行機のアイコン
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCも中央に約480px相当の縦長の列を置き、左右は白い余白にする（SPでも同じ構成）
• SPでは3列の商品を2列か横スクロールにする
• サイドの工程ナビは、SPでは非表示にするか下部に固定する
• ラインナップの4列グリッドはSPで2列にする
• はみ出しイラストは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 行書くと起動時に読み込まれる。