DESIGN.md — 水色×ベージュの紙コラージュ風トラベル雑貨LP（Pastel Paper Collage Travel Goods LP）

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

Overview

• 業種: ファッション・アクセサリー ／ 雰囲気: かわいい、やさしい・柔らかい、ナチュラル、親しみ・手作り感
• キーワード: 紙コラージュ・マスキングテープ・手書き文字・パステルストライプ・旅スタンプ・手帳風
• 地の質感: 白い大理石風の紙地、方眼紙、破れた紙の縁、うっすらした地図柄を重ねる
• 形: 四角いラベルを少し傾ける。破れ紙の縁や波形で区切る。角丸はほとんど使わない
• 温度感: やや暖かいパステル。くすんだ水色、ピンク、ベージュ、グレーを均等に使う

Colors

• 地は白か大理石風の白を基本にし、セクションごとに淡い水色・ベージュ・ピンク・グレーへ切り替える
• 見出しラベルは紺グレー・水色・ピンクの面に白文字を載せる
• 黄色はキーワードの帯や、一言だけ目立たせたい場所に限って使う
• 商品カラーの紹介では、その色のストライプ面とカラー名を同じ色調でそろえる
• 文字は濃いグレーにし、真っ黒は使わない
• point-badge は文字 #FFFFFF × 背景 #FBC2C6 のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら on-primary-accessible（#595959、4.55:1）を使う。

Typography

• 見出しは字間を広め（0.1em）にして余裕を出す
• 強調語は手書き書体にして大きくし、一部を斜めに置く
• 欧文の筆記体は淡い色で見出しの背後か横に重ねる
• 本文は14px前後・行間1.9で短く改行する
• キーワードには蛍光ペン風の帯やルビ点を添える
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真2枚の2カラムや、写真と文章を左右に交互に置く組みを混ぜる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算）
• 写真と文章ブロックは左右交互に配置する
• ラベル見出しは画面端から出してはみ出すように置く
• リストは白カードに2列の箇条書きで入れる
• セクションの境は破れ紙の縁や波形にする

Elevation & Depth

• 写真フレームには薄い影（0 2px 6px rgba(0,0,0,.12)）をつける
• 白いラベルには軽い影をつけ、紙が浮いて見えるようにする
• 基本は平面にし、強い影は使わない

Shapes

• 角丸: 小 0px ／ 中 4px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 四角か不規則な多角形のフレームに入れ、2〜5度傾ける。白枠とクリップを添える
• セクション境界: 破れ紙の縁、ゆるい波形、斜めストライプ面
• ラベルは角のない四角か、矢羽根形にする
• マスキングテープの片を見出しの角に貼る
• ポイント番号は右端が矢印形のバッジにする

Components

• 色帯ラベル見出し（label-heading）: 紺グレーか水色の四角い帯に白い太字を載せ、少し傾けて重ねる
• ポイント番号バッジ（point-badge）: ピンクの矢羽根形バッジに「point 01」形式の番号を入れ、見出しの上に置く
• 枠線囲み見出し（box-heading）: 白地に細いピンクかグレーの枠で囲んだ大きめの見出し
• 悩み吹き出し（speech-bubble）: 白い楕円の吹き出しに細い黒線と手書き風のしっぽをつけ、人物イラストの周りに3つ置く
• 道標の矢印看板（signpost）: 黄色い矢印形の看板に転換の一言を入れる
• 筆記体の重ね文字（script-overlay）: Step・Sceneなどの番号を淡い色の筆記体で見出しの背後に置く
• 2列箇条書きカード（list-card）: 白カードに「・」付きの短い単語を2列で並べる
• パーツ指示ラベル（callout-tag）: 写真の部位から点線を引き、白い四角ラベルで名称を示す

Do's and Don'ts

Do - マスキングテープ・クリップ・消印スタンプなど文具モチーフを散らす - 写真は傾けたフレームに入れ、紙を重ねた感じを出す - 商品カラーごとにストライプ面とカラー名をそろえる - 強調語は手書き書体にしてサイズに強弱をつける - セクションごとに淡い地色を変えてリズムを作る

Don't - 彩度の高い原色や真っ黒の面を使わない - 角丸の大きいピル型ボタンで雰囲気を崩さない - 整然とした左右対称だけで組まない - 長い本文の段落を置かない - 強い影やグラデーションの光沢を使わない

Page Structure

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

1. ファーストビュー（商品の使用シーンで世界観を伝える）: 手元で使う写真を全面に敷き、白い手書きの欧文ロゴと線画を重ねる
2. 商品紹介（商品名と2つの特長を示す）: 水色の地にラベル見出しを重ね、傾けた写真とピンク・水色のラベルを交互に配置する
3. 特長まとめ（4つの魅力を一覧にする）: 2×2の写真タイルに暗い膜をかけ、白文字の短いコピーを載せる
4. 新作告知（新しさを強調する）: 大きな手書き見出しに黄色い帯を重ね、縦書きのコピーとスタンプを添える
5. 悩みの提起（旅支度の悩みに共感してもらう）: ぼかした写真の上にイラストの人物と吹き出し3つを置く
6. 解決・ビフォーアフター（商品で解決できることを見せる）: 黄色い道標から方眼の地図柄の地へ移り、BEFOREとAFTERの写真を手書き矢印でつなぐ
7. おすすめポイント（ポイントを番号付きで掘り下げる）: ポイントバッジと枠線見出しを置き、Stepごとに地色を変えて写真と文章を交互に並べる
8. ポケット詳細（収納の内訳を示す）: 商品の写真を中央に置き、丸く切り抜いた拡大写真とパーツ指示ラベルを点線で結ぶ
9. 利用シーン（入れる物の具体例を見せる）: Sceneごとに水色・ピンク・グレーの地を切り替え、写真と2列の箇条書きカードを並べる
10. カラー展開（4色を紹介する）: 各色の斜めストライプ面に商品写真を載せ、筆記体のカラー名を左右交互に配置する
11. 関連商品（シリーズへ誘導する）: くすんだ水色の角丸パネルに商品の集合写真を置き、縦書きラベルと大きな白い欧文を重ねる
12. ディテール（細部の品質を見せる）: 欧文見出しの下に、細部の写真を不規則なグリッドで並べる

Imagery

• 自然光で明るく撮り、大理石・リネン・木の上に置いた物撮りにする
• 手元で開閉する写真を多めに入れ、使い方を伝える
• 人物は顔を出さず手元のみ。悩みのシーンは線画にパステルを塗ったイラストで描く
• グリーンの葉やコスメ小物を添えて抜け感を出す
• 消印スタンプ・紙飛行機・地図柄・方眼紙を装飾に使う
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• 元はSP幅で組んだ縦長の画像LP。PCでは中央に幅480px前後の列を置き、左右は淡い地色で埋める
• SPでは見出し24px・本文14pxを基準にする
• 写真2枚の並びはSPでも2カラムを保ち、余白は16pxにする
• 傾けたフレームが画面からはみ出す場合は、少しの裁ち落としにとどめる

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