--- version: alpha name: Pastel Paper Collage Travel Goods LP description: くすんだ水色とベージュを軸に、破れ紙・マスキングテープ・手書き文字を重ねたコラージュ風の雑貨LP。旅のスタンプや紙飛行機のアイコンを散らし、写真を傾けたフレームに入れて手帳のような楽しさを出している。セクションごとに淡い地色を切り替え、商品カラーごとにストライプ柄の面を組み合わせる。 colors: primary: '#97D6E7' secondary: '#4A6585' background: '#FFFFFF' background-alt: '#F4ECDD' surface: '#EEFAFA' accent-1: '#FBC2C6' accent-2: '#EDD56C' tint-1: '#EEE4E2' tint-2: '#DEF1F5' dark-section: '#FEFEFE' text: '#333333' text-muted: '#928781' accent-3: '#D8CF99' on-primary: '#FFFFFF' on-primary-accessible: '#595959' typography: display: fontFamily: Yomogi fontSize: 40px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 18px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.1em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.08em accent: fontFamily: Pacifico fontSize: 22px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em note: fontFamily: Montserrat fontSize: 10px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.05em label-button: fontFamily: Montserrat fontSize: 12px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' label-heading: backgroundColor: '{colors.secondary}' textColor: '{colors.on-primary}' typography: '{typography.headline-md}' height: 36px point-badge: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-primary}' typography: '{typography.label-button}' height: 22px box-heading: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 44px speech-bubble: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 60px signpost: backgroundColor: '{colors.accent-2}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 48px script-overlay: textColor: '{colors.text-muted}' typography: '{typography.accent}' height: 30px list-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.sm}' height: 100px callout-tag: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 28px --- # DESIGN.md — 水色×ベージュの紙コラージュ風トラベル雑貨LP（Pastel Paper Collage Travel Goods LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: ファッション・アクセサリー ／ **雰囲気**: かわいい、やさしい・柔らかい、ナチュラル、親しみ・手作り感 - **キーワード**: 紙コラージュ・マスキングテープ・手書き文字・パステルストライプ・旅スタンプ・手帳風 - **地の質感**: 白い大理石風の紙地、方眼紙、破れた紙の縁、うっすらした地図柄を重ねる - **形**: 四角いラベルを少し傾ける。破れ紙の縁や波形で区切る。角丸はほとんど使わない - **温度感**: やや暖かいパステル。くすんだ水色、ピンク、ベージュ、グレーを均等に使う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#97D6E7` | ブランドの水色（帯・ラベル地） | 8% | 画素の実測 | | `secondary` | `#4A6585` | 見出しラベルの紺グレー | 3% | 推定 | | `background` | `#FFFFFF` | 大理石風の白地 | 30% | 画素の実測 | | `background-alt` | `#F4ECDD` | 生成りベージュのセクション地 | 10% | 画素の主要色に補正 | | `surface` | `#EEFAFA` | 白いラベル・カード面 | 12% | 画素の実測 | | `accent-1` | `#FBC2C6` | ピンクのラベル・ポイント番号 | 3% | 画素の実測 | | `accent-2` | `#EDD56C` | からし黄色の強調ラベル | 2% | 画素の実測 | | `tint-1` | `#EEE4E2` | 淡いピンクのシーン地 | 6% | 画素の実測 | | `tint-2` | `#DEF1F5` | 淡い水色のシーン地 | 6% | 画素の実測 | | `dark-section` | `#FEFEFE` | グレーのシーン地 | 6% | 画素の実測 | | `text` | `#333333` | 見出し・本文の濃いグレー | 3% | 推定 | | `text-muted` | `#928781` | カラー名などの注釈 | 1% | 画素の主要色に補正 | | `accent-3` | `#D8CF99` | ベージュのカラー名・ストライプ | 3% | 画素の実測 | | `on-primary` | `#FFFFFF` | 色付きラベル上の白文字 | 1% | 画素の主要色に補正 | | `on-primary-accessible` | `#595959` | AA を満たす補正値（計算） | | 計算 | - 地は白か大理石風の白を基本にし、セクションごとに淡い水色・ベージュ・ピンク・グレーへ切り替える - 見出しラベルは紺グレー・水色・ピンクの面に白文字を載せる - 黄色はキーワードの帯や、一言だけ目立たせたい場所に限って使う - 商品カラーの紹介では、その色のストライプ面とカラー名を同じ色調でそろえる - 文字は濃いグレーにし、真っ黒は使わない - `point-badge` は文字 `#FFFFFF` × 背景 `#FBC2C6` のコントラスト比が 1.54:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `on-primary-accessible`（`#595959`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 大きな告知見出し・手書き風の強調 | 手書き・筆 | Yomogi | 700 | 40px | 1.3 | 0.08em | | `headline-lg` | セクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.5 | 0.1em | | `headline-md` | ラベル内の小見出し | ゴシック | Zen Kaku Gothic New | 700 | 18px | 1.5 | 0.1em | | `headline-sm` | 悩み吹き出し・ステップ見出し | ゴシック | Noto Sans JP | 500 | 15px | 1.6 | 0.08em | | `body-md` | 説明文 | ゴシック | Noto Sans JP | 400 | 14px | 1.9 | 0.08em | | `accent` | 欧文の筆記体ラベル（Step・Scene・カラー名） | 欧文スクリプト | Pacifico | 400 | 22px | 1.2 | 0.02em | | `note` | カラー名などの注釈 | 欧文サンセリフ | Montserrat | 400 | 10px | 1.4 | 0.05em | | `label-button` | ポイント番号のバッジ | 欧文サンセリフ | Montserrat | 700 | 12px | 1.0 | 0.05em | - 見出しは字間を広め（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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-0a5d23cb`（元 LP の URL から採番） - **元 LP**: https://item.rakuten.co.jp/auc-risecreation/r0893/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（9/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。