--- version: alpha name: Playful Flat Illustration Travel Collab LP description: クリーム地に紺・緑・ピンクのセクションを波形や円弧でつなぐ、フラットイラスト調の旅行キャンペーン LP。黄色のピル型 CTA に太い黒枠を付け、遊び心を出している。 colors: background: '#FCEDB6' primary: '#2E5B92' secondary: '#4BB88E' accent-1: '#F39B91' cta: '#FDDA76' on-cta: '#030201' surface: '#FFFFFE' text: '#2B2528' marker: '#F6CB4A' accent-2: '#ECF646' on-dark: '#E8F3F8' accent-3: '#40AC82' background-alt: '#FFF5EA' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 40px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.03em headline-md: fontFamily: Zen Maru Gothic fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 17px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em body-md: fontFamily: Zen Maru Gothic fontSize: 15px fontWeight: 500 lineHeight: 1.75 letterSpacing: 0.05em note: fontFamily: Zen Maru Gothic fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.04em accent: fontFamily: Montserrat fontSize: 34px fontWeight: 800 lineHeight: 1.1 letterSpacing: 0.08em label-button: fontFamily: M PLUS Rounded 1c fontSize: 18px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em rounded: sm: 6px md: 12px lg: 40px 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}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px button-toggle: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px nav-circle: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 110px card-episode: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.md}' height: 140px label-band: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 32px profile-blob: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.lg}' height: 300px map-pin-button: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 44px date-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 30px --- # DESIGN.md — クリーム×紺緑ピンクのポップな旅行コラボ LP（Playful Flat Illustration Travel Collab LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: ポップ・元気、親しみ・手作り感、かわいい - **キーワード**: フラットイラスト・色ブロック切替・波形境界・黄色ピルボタン・丸ゴシック・紙吹雪装飾 - **地の質感**: グラデーションや影のないベタ塗り。手描き風の線と紙吹雪を散らす - **形**: 円形ナビ、ピル型ボタン、角丸カード、波や円弧のセクション境界 - **温度感**: 暖かく陽気。クリームと黄色が温度を上げ、紺と緑で引き締める ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FCEDB6` | 冒頭と末尾のクリーム地 | 18% | 画素の実測 | | `primary` | `#2E5B92` | 車内セクションの紺地 | 12% | 画素の実測 | | `secondary` | `#4BB88E` | 現地セクションの緑地 | 14% | 画素の実測 | | `accent-1` | `#F39B91` | 特別企画のサーモンピンク地 | 10% | 画素の実測 | | `cta` | `#FDDA76` | 主 CTA・ボタンの黄色 | 5% | 画素の主要色に補正 | | `on-cta` | `#030201` | ボタン文字と枠の黒 | 1% | 画素の実測 | | `surface` | `#FFFFFE` | カード・吹き出しの白 | 16% | 画素の実測 | | `text` | `#2B2528` | 本文の濃い色 | 3% | 推定 | | `marker` | `#F6CB4A` | ラベル帯と日付下線の黄 | 2% | 画素の実測 | | `accent-2` | `#ECF646` | 暗い地での強調文字（レモン色） | 0% | 画素の実測 | | `on-dark` | `#E8F3F8` | 色地上の白文字 | 3% | 画素の実測 | | `accent-3` | `#40AC82` | 波形の山に使う濃い緑 | 1% | 画素の主要色に補正 | | `background-alt` | `#FFF5EA` | 地図の淡いベージュ | 6% | 画素の実測 | - セクションごとに地の色を変える。クリーム→紺→緑→白円→ピンク→クリームの順 - 主 CTA はどの地の上でも黄色に黒文字で統一する - 色地の上の文字は白。注意喚起だけレモン色にする - 情報カードは白地に黄色の枠かラベルで囲む - 円形ナビの 3 色は各セクションの地の色と対応させる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの大見出し | 丸ゴシック | M PLUS Rounded 1c | 900 | 40px | 1.2 | 0.02em | | `headline-lg` | 冒頭のタイトル | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.3 | 0.03em | | `headline-md` | カードのタイトル・人物名 | 丸ゴシック | Zen Maru Gothic | 700 | 22px | 1.4 | 0.05em | | `headline-sm` | 日付・ラベル帯 | ゴシック | Zen Kaku Gothic New | 700 | 17px | 1.4 | 0.02em | | `body-md` | 本文 | 丸ゴシック | Zen Maru Gothic | 500 | 15px | 1.75 | 0.05em | | `note` | ※注釈・プロフィール | 丸ゴシック | Zen Maru Gothic | 500 | 12px | 1.6 | 0.04em | | `accent` | 見出しに添える欧文 | 欧文サンセリフ | Montserrat | 800 | 34px | 1.1 | 0.08em | | `label-button` | ボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 800 | 18px | 1.3 | 0.05em | - 見出しは極太の丸ゴシックで力強く見せる - 大見出しは和文と大きな欧文を 2 段に組む - 日付の数字は大きく、曜日や年月は小さくして差をつける - 本文の強調は太字だけにする。色は変えない - 注釈は ※ を付け、ぶら下げインデントで揃える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。円形ナビだけ 3 列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 左右の余白は 12〜16px - カードとボタンは画面幅いっぱいに近い幅で積む - セクション見出しの下に 40px の余白をとる - 地図は全幅に近く配置し、上に吹き出しボタンを重ねる ## Elevation & Depth - 影はほぼ使わない - ボタンは白い外枠か黒い太枠で浮かせる - 人物プロフィールは白い楕円の上に置く ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 40px。ボタンはピル型。 - **写真の切り抜き**: 人物は角丸の正方形、または丸アイコン。商品は長方形 - **セクション境界**: 山並みの波形と大きな円弧 - ボタンは全てピル型にする - カードは角丸 12px で黄色の枠を付ける - 円形ナビの下に小さな下向き三角を付ける - 見出しの帯は片側だけ雲形に丸める ## Components - **イラスト入り主 CTA**（`button-primary`）: 黄色のピル型に白い外枠。左に白線イラスト、右に矢印を置く - **開閉ボタン**（`button-toggle`）: 黄色地に黒の太枠。右端に黒丸の＋を付ける - **円形セクションナビ**（`nav-circle`）: 紺・緑・ピンクの円を 3 つ並べ、上にイラストを乗せる - **エピソードカード**（`card-episode`）: 白地に黄色の枠。上部に黄色ラベル帯、続けてタイトルと日付を置く - **黄色ラベル帯**（`label-band`）: 短い分類名を載せる黄色の矩形帯 - **人物プロフィール楕円**（`profile-blob`）: 白い楕円に写真・名前・経歴を収める - **地図の吹き出しピン**（`map-pin-button`）: 地図上に置く黄色ピル。＋アイコン付き - **日付の下線マーカー**（`date-marker`）: 太字の日付の下に黄色の帯を敷く ## Do's and Don'ts **Do** - セクションの境界は波や円弧でつなぐ - CTA は必ず黄色のピル型に黒文字 - キラキラや紙吹雪を見出しの周囲に散らす - イラストは紺・緑・ピンク・黄の 4 色に絞る - 注意事項は開閉ボタンに収めて短く見せる **Don't** - 写真に重いグラデーションや影を付けない - 明朝体を使わない - 直線のセクション区切りを多用しない - 黄色以外の色の CTA を作らない - 本文を色地の上で長く続けない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（コラボを告知し、旅の気分を作る）: クリーム地にロゴを並べ、太字のタイトルと乗り物・名所のフラットイラストを置く。紙吹雪を散らす 2. **期間と目次**（開催期間と 3 つの楽しみ方を示す）: 黄色の下線を敷いた日付と、3 色の円形ナビを並べる 3. **導入文**（企画の趣旨を説明する）: 段落を 4 つほど置き、要点を太字にする 4. **出演者紹介**（親しみと信頼を伝える）: 白い楕円に角丸写真・名前・経歴を左右交互に配置する 5. **移動中の特典**（移動中に楽しめるコンテンツを案内する）: 山の波形から紺地に入る。雲形の帯見出しと特典カード 2 枚、主 CTA、注釈を置く 6. **現地での特典**（現地スポットへの来訪を促す）: 緑地に塔のアイコン付き見出し。開閉ボタン、イラスト地図とピン、スポット一覧カード、CTA を並べる 7. **撮影企画**（参加型の写真企画を案内する）: 斜線で挟んだ前置きと、マーカー付きの大見出しを置く。白い円弧の中にスマホのモック画像と CTA を入れる 8. **補足情報**（注意事項をまとめる）: 緑地に開閉ボタンを 2 つ縦に並べる 9. **特別企画**（コラボ商品の販売を告知する）: ピンクの円弧地にキラキラ付きの見出しを置く。白い帯、商品画像と放射線、価格、黄色ボタンを続ける 10. **フッター**（ブランドで締める）: クリーム地の中央にロゴだけを置く ## Imagery - ベタ塗りのフラットイラスト。名所・乗り物・自然を紺・緑・ピンク・黄で描く - 人物は丸顔のゆるい線画キャラクターにする - 手描き風の短い線・点・波線を紙吹雪として散らす - 地図はベージュ地に太い道路線と黒丸の駅名で簡略化する - ボタン内のアイコンは白い線画にする - 商品の周囲に放射状の短い線を描く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央約 60% 幅のカラムに要素を収め、左右に地の色を広げる - PC の人物紹介は 2 列に並べる - PC の CTA は、QR コード付きの黄色カードに置き換える - PC の地図とスポット一覧は横に並べる - PC の白い円とピンクの円は、正円に近い形で中央に置く ## 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-700c1226`（元 LP の URL から採番） - **元 LP**: https://recommend.jr-central.co.jp/oshi-tabi/overthesun-kyoto/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。