--- version: alpha name: Pastel Watercolor Travel Story LP description: 生成りの紙っぽい地に、水彩ふうのくすみパステル面を不規則な形で敷いた旅行グッズのLP。旅の工程を番号つきで順に追うストーリー構成。商品は切り抜き写真と吹き出しで紹介し、点線の軌跡や手描きイラストで遊び心を出している。 colors: primary: '#6E3B2E' background: '#FFFFFF' background-alt: '#F9F6EA' tint-1: '#EEF4ED' tint-2: '#F2ECEE' secondary: '#75A3D4' cta: '#EBA56B' on-cta: '#FFFFFF' accent-1: '#D8A67B' accent-2: '#90A38C' accent-3: '#C08AB8' surface: '#F2EFE8' text-body: '#4A3A33' line: '#7A5A50' cta-accessible: '#B45F18' secondary-accessible: '#3A78BB' accent-3-accessible: '#99528F' typography: display: fontFamily: Amatic SC fontSize: 44px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.15em accent: fontFamily: Pacifico fontSize: 18px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Zen Maru Gothic fontSize: 26px fontWeight: 900 lineHeight: 1.3 letterSpacing: 0.15em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.1em headline-sm: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 label-button: fontFamily: Zen Maru Gothic fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 16px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px heading-tag: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 36px process-number: backgroundColor: '{colors.background-alt}' textColor: '{colors.primary}' typography: '{typography.headline-lg}' height: 120px item-heading: textColor: '{colors.accent-1}' typography: '{typography.headline-md}' height: 70px speech-card: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 90px size-badge: backgroundColor: '{colors.tint-2}' textColor: '{colors.accent-3}' typography: '{typography.note}' rounded: '{rounded.full}' height: 16px side-nav: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.note}' rounded: '{rounded.full}' height: 36px product-tile: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' height: 110px --- # DESIGN.md — 水彩パステルと手描き線の旅行雑貨LP（Pastel Watercolor Travel Story LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 日用品・生活雑貨 ／ **雰囲気**: やさしい・柔らかい、親しみ・手作り感、ナチュラル、かわいい - **キーワード**: 水彩テクスチャ・くすみパステル・手描きイラスト・点線の軌跡・旅のストーリー・切り抜き商品 - **地の質感**: 和紙や水彩紙のようなざらっとした淡い色面。フラットな単色は使わない - **形**: 不規則な多角形・ちぎった紙のような色面、ピル型ボタン、角丸の吹き出し枠 - **温度感**: 温かみのあるニュートラル。茶色の文字と、オレンジ・青・緑・紫の淡いアクセント ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#6E3B2E` | 工程見出し・主要見出しのこげ茶文字 | 2% | 推定 | | `background` | `#FFFFFF` | ページの地 | 46% | 画素の実測 | | `background-alt` | `#F9F6EA` | 生成りの水彩面（工程エリア） | 12% | 画素の実測 | | `tint-1` | `#EEF4ED` | セージグリーンの水彩面 | 6% | 画素の実測 | | `tint-2` | `#F2ECEE` | ラベンダーピンクの水彩面 | 5% | 画素の実測 | | `secondary` | `#75A3D4` | くすみブルーのボタン・小見出し | 1% | 画素の実測 | | `cta` | `#EBA56B` | 一覧ページへのボタン（オレンジ） | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#D8A67B` | アイテム名見出しのオレンジ文字 | 1% | 画素の実測 | | `accent-2` | `#90A38C` | グリーン系の見出し・ボタン | 0% | 画素の実測 | | `accent-3` | `#C08AB8` | パープル系の見出し文字 | 0% | 推定 | | `surface` | `#F2EFE8` | ラインナップ帯の地 | 6% | 画素の実測 | | `text-body` | `#4A3A33` | 本文・説明文 | 1% | 推定 | | `line` | `#7A5A50` | 吹き出し枠線・点線の軌跡 | 0% | 推定 | | `cta-accessible` | `#B45F18` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#3A78BB` | AA を満たす補正値（計算） | | 計算 | | `accent-3-accessible` | `#99528F` | AA を満たす補正値（計算） | | 計算 | - 地は白。その上に生成り・セージ・ラベンダーの水彩面を工程ごとに切り替えて敷く - 見出しは工程名をこげ茶、アイテム名をオレンジ、エリアによってはグリーンや紫にする - ボタンは青・オレンジ・グリーンのくすみ色を使い分ける。純色の原色は使わない - 文字は黒ではなくこげ茶系にして柔らかく見せる - 末尾のラインナップ帯は薄いベージュの全幅面にする - `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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューの欧文タイトル（手描きの線文字） | 装飾・ディスプレイ | Amatic SC | 700 | 44px | 1.0 | 0.15em | | `accent` | 欧文の筆記体サブコピー・小ラベル | 欧文スクリプト | Pacifico | 400 | 18px | 1.2 | 0.02em | | `headline-lg` | 工程見出し | 丸ゴシック | Zen Maru Gothic | 900 | 26px | 1.3 | 0.15em | | `headline-md` | アイテムカテゴリ名 | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.3 | 0.1em | | `headline-sm` | 商品名（弧状に配置） | 丸ゴシック | Zen Maru Gothic | 700 | 15px | 1.3 | 0.05em | | `body-md` | 説明文・吹き出しの中の文字 | ゴシック | Noto Sans JP | 500 | 13px | 1.8 | 0.05em | | `note` | 注釈・サイズ表記 | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0.0em | | `label-button` | ボタンの文字 | 欧文サンセリフ | Zen Maru Gothic | 700 | 13px | 1.2 | 0.1em | - 見出しは字間を広めにした太い丸ゴシック - 見出しの上に筆記体の欧文ラベルを小さく重ねる - 工程番号は大きな数字（太い丸ゴ）にして、筆記体のラベルを添える - 商品名は写真の上に弧状に並べて手作り感を出す - 本文は中央揃えで、短い行を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 ```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-2beca4dd`（元 LP の URL から採番） - **元 LP**: https://aeonretail.com/Page/travelgoods.aspx - **解析に使った画像**: 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/）からご連絡ください。