--- version: alpha name: Pastel Onsen Art Festival Travel LP description: 淡い桜色の地に若緑の見出しと線画マップを重ねた、温泉地×芸術祭の観光 LP。エリアごとに縦書きの緑タブ付き写真、角丸写真、青いピル型 CTA が繰り返され、グルメ・宿・クーポンでは薄紫・薄緑・水色へと背景色を切り替えて章立てしている。 colors: primary: '#00B96E' background: '#FFE6E1' background-alt: '#F1F1F1' surface: '#FEFEFF' tint-1: '#FFD9D0' tint-2: '#DED9ED' accent-1: '#D1E7C1' accent-2: '#DAEAF7' secondary: '#4C82C9' cta: '#ED7155' on-cta: '#FFF4EC' text-body: '#36322F' dark-section: '#564D4E' tint-1-text: '#F8F6E6' secondary-accessible: '#3971BB' cta-accessible: '#D03816' primary-accessible: '#00814D' typography: display: fontFamily: Shippori Mincho fontSize: 48px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Serif JP fontSize: 34px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.1em headline-md: fontFamily: Zen Maru Gothic fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.12em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0.05em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Montserrat fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 14px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em rounded: sm: 8px md: 20px lg: 48px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.primary}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 66px button-cta: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 52px button-outline: textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 54px area-tab-vertical: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-lg}' rounded: '{rounded.lg}' height: 230px artwork-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 130px food-label: backgroundColor: '{colors.dark-section}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' height: 200px heading-lined: textColor: '{colors.primary}' typography: '{typography.headline-sm}' height: 40px step-item: backgroundColor: '{colors.surface}' textColor: '{colors.text-body}' typography: '{typography.body-md}' rounded: '{rounded.full}' height: 110px info-box: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 470px tag-small: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.full}' height: 20px --- # DESIGN.md — 桜色×若緑のアート温泉旅 LP（Pastel Onsen Art Festival Travel LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: やさしい・柔らかい、ナチュラル、和風、情報量多め・訴求型 - **キーワード**: 桜色の地・若緑の線画・縦書きタブ・角丸写真・章ごとの色替え・ピル型ボタン - **地の質感**: フラットな淡色の面に、細い円や斜線、波線を薄く重ねた軽い装飾 - **形**: 大きな角丸の写真と、片側だけ大きく丸めたセクション境界。円形に切り抜いたグルメ写真 - **温度感**: 暖かく穏やか。パステル調で落ち着いた旅情 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#00B96E` | 見出し・線画マップ・タブの若緑 | 4% | 画素の実測 | | `background` | `#FFE6E1` | メインの桜色の地 | 40% | 画素の実測 | | `background-alt` | `#F1F1F1` | 導入部・アクセスの薄グレー地 | 11% | 画素の実測 | | `surface` | `#FEFEFF` | アートワーク情報カード・案内カード | 8% | 画素の実測 | | `tint-1` | `#FFD9D0` | グルメ章のサーモンピンク地 | 6% | 画素の実測 | | `tint-2` | `#DED9ED` | 宿章の薄ラベンダー地 | 5% | 画素の実測 | | `accent-1` | `#D1E7C1` | クーポン章の薄若草色地 | 6% | 画素の実測 | | `accent-2` | `#DAEAF7` | アンテナショップ章の水色地 | 3% | 画素の実測 | | `secondary` | `#4C82C9` | 主要遷移ボタンの青 | 3% | 画素の実測 | | `cta` | `#ED7155` | 最重要申込ボタンのコーラル | 1% | 画素の実測 | | `on-cta` | `#FFF4EC` | ボタン上の白文字 | 0% | 画素の実測 | | `text-body` | `#36322F` | 本文の濃グレー | 3% | 画素の主要色に補正 | | `dark-section` | `#564D4E` | 縦書きラベル帯の濃グレー | 0% | 画素の実測 | | `tint-1-text` | `#F8F6E6` | アクセス案内カードの生成り地 | 4% | 画素の実測 | | `secondary-accessible` | `#3971BB` | AA を満たす補正値（計算） | | 計算 | | `cta-accessible` | `#D03816` | AA を満たす補正値（計算） | | 計算 | | `primary-accessible` | `#00814D` | AA を満たす補正値（計算） | | 計算 | - 基本の地は桜色で、章が変わる所だけサーモン・ラベンダー・若草・水色の淡色に切り替える - 見出し・エリア名・線画マップ・小見出しはすべて若緑に統一 - 本文は黒ではなく濃グレーにして柔らかさを保つ - 主な遷移ボタンは青のピル型。最重要の申込だけコーラルにする - サブボタンは白抜きで、緑か濃グレーの線と文字にする - 写真以外に強い彩度は使わず、装飾線は地より少し濃い同系色にする - `button-primary` は文字 `#FFF4EC` × 背景 `#4C82C9` のコントラスト比が 3.63:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#3971BB`、4.56:1）を使う。 - `button-cta` は文字 `#FFF4EC` × 背景 `#ED7155` のコントラスト比が 2.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#D03816`、4.56:1）を使う。 - `area-tab-vertical` は文字 `#FFF4EC` × 背景 `#00B96E` のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00814D`、4.57:1）を使う。 - `artwork-card` は文字 `#00B96E` × 背景 `#FEFEFF` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00814D`、4.6:1）を使う。 - `info-box` は文字 `#00B96E` × 背景 `#FEFEFF` のコントラスト比が 2.55:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00814D`、4.6:1）を使う。 - `tag-small` は文字 `#FFF4EC` × 背景 `#00B96E` のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `primary-accessible`（`#00814D`、4.57:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV のメインコピー（写真上の白文字） | 明朝 | Shippori Mincho | 500 | 48px | 1.2 | 0.02em | | `headline-lg` | 縦書きのエリア名タブ | 明朝 | Noto Serif JP | 500 | 34px | 1.2 | 0.1em | | `headline-md` | スポット名の緑見出し | 丸ゴシック | Zen Maru Gothic | 700 | 24px | 1.4 | 0.05em | | `headline-sm` | 左右に線が付いた章見出し | ゴシック | Zen Kaku Gothic New | 500 | 20px | 1.4 | 0.12em | | `body-md` | 本文・スポット説明 | ゴシック | Zen Kaku Gothic New | 400 | 13px | 1.75 | 0.05em | | `note` | 住所・注釈 | ゴシック | Zen Kaku Gothic New | 400 | 11px | 1.6 | 0.03em | | `accent` | 縦書きの欧文ラベル・Artwork 表記 | 欧文サンセリフ | Montserrat | 500 | 20px | 1.2 | 0.08em | | `label-button` | ボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 14px | 1.3 | 0.08em | - エリア名・宿の章見出しは縦書きで組み、和の旅情を出す - スポット名は緑の太字で大きくし、その下に施設名を緑の小さな文字で添える - 章見出しは左右に細い横線を引き、中央に置く - 本文は字間を少し空け、行間 1.75 前後でゆったり組む - 導入部だけ明朝の緑本文にして、芸術祭らしい品を出す - ボタンは 2 行まで。2 行目には注釈を小さく入れる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。宿やスポットのカードは横スワイプのカルーセル - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - エリア写真は画面端まで広げ、白い情報カードを写真の下端に重ねる - スポットは「見出し→角丸写真→本文→住所→ボタン」の順で繰り返す - 章の終わりに青いピル CTA を 1 本置く - 手順は丸い番号と見出しを横に並べ、区切り線に下向きの切り欠きを入れる - ボタンは左右 8% の余白を取り、ほぼ全幅にする ## Elevation & Depth - 影はほとんど使わず、面の色の差で階層を作る - 白カードは影を付けず、角丸と地の色の差だけで浮かせる - フォーム部分だけ細い灰色の枠線で囲む ## Shapes - **角丸**: 小 8px ／ 中 20px ／ 大 48px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸 20px。グルメ写真は正円。エリアの大写真は片方の上角だけ大きく丸める - **セクション境界**: 章の境目は片側の角だけ大きく丸めた色面で切り替える（上端が角丸） - 縦書きタブは下側を丸めた緑の帯にする - アートワークカードは白地で片側の角だけ大きく丸める - 背景に細い円の線や斜めの帯、波線を薄く重ねる - 番号はアウトラインの白い円で示す ## Components - **青ピル遷移ボタン**（`button-primary`）: 白文字 2 行で、右端に「>」を付ける。章の締めに置く - **コーラル申込ボタン**（`button-cta`）: クーポン探しなど最重要の行動だけに使う - **緑アウトラインボタン**（`button-outline`）: 白抜きで緑の線と文字。個別スポットの予約や購入に使う - **縦書きエリア名タブ**（`area-tab-vertical`）: 写真の角に重ねる緑の縦帯。白い明朝体で、副題は小さな帯を横に添える - **作品情報カード**（`artwork-card`）: 白カードの左に緑の縦線。Artwork・作品名・作家名を緑で積む - **円形写真の縦ラベル**（`food-label`）: 円形写真の左上に重ねる濃グレーの縦長帯。料理名を白字の縦書きで入れる - **左右線付き章見出し**（`heading-lined`）: 中央の見出しの左右に細い横線。緑か濃グレーで描く - **ステップ番号行**（`step-item`）: 白い円に Step と数字。右に見出しと説明を置き、下に V 字の切り欠き付きの線 - **開催情報ボックス**（`info-box`）: 薄い白地のカードに［項目名］の緑見出しと日時・料金を並べる - **カテゴリ小バッジ**（`tag-small`）: スポット名の横に付ける緑のピル型ラベル（観光・グルメ） ## Do's and Don'ts **Do** - 淡いパステル地と若緑の組み合わせを全体で守る - エリアごとに縦書きタブ・大写真・作品カードの型を繰り返す - 章が変わる時は背景色と角丸の境界で切り替える - 写真は角丸か正円で柔らかく切り抜く - CTA は青のピル型で統一し、最重要の 1 つだけコーラルにする **Don't** - 真っ黒の文字や濃い背景の章を入れない（FV の写真を除く） - 鋭い角の写真や四角いボタンを使わない - 緑以外の色で見出しを書かない - 強い影やグラデーションのボタンにしない - 1 画面に CTA の色を 3 色以上混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（旅のテーマを情緒的に伝える）: 温泉の写真を全面に敷き、白い明朝の大コピーとイベント名を中央に重ねる 2. **導入**（地域とイベントの概要を伝える）: 薄グレー地。左に緑の縦書き欧文、本文は緑の明朝。緑の線画地図と吹き出しでアクセス時間を示す 3. **イベント概要**（会期・料金・会場を伝える）: 手書き風のロゴと写真を並べ、白いボックスに項目を並べる。テキストリンクと青ピル CTA を置く 4. **会場マップ**（会場の位置関係を示す）: 白抜きの線画地図に、緑の線の円で会場名を引き出す 5. **エリア紹介（繰り返し）**（各会場の作品と周辺スポットを紹介する）: 縦書きの緑タブ付きの大写真と作品カードの後に、スポットを見出し・角丸写真・本文・住所で並べる 6. **食べ歩きグルメ**（立ち寄り先を提案する）: サーモン地に正円の写真と濃グレーの縦ラベルを置き、細い円の線で飾る 7. **おすすめ宿**（宿泊予約へ誘導する）: ラベンダー地に縦書きの見出しと枠付きのキャッチ。宿カードを横スワイプで見せ、青 CTA を置く 8. **クーポン案内**（返礼品クーポンの使い方と申込）: 若草地に写真 3 枚を横に並べ、斜線で飾った強調見出し、4 ステップ、白い吹き出し、コーラルと青の CTA 9. **アンテナショップ**（特産品の通販へ誘導する）: 水色地に波線の装飾、コラージュ写真のバナー、青 CTA、注釈 10. **アクセス**（交通手段を伝える）: 地図を埋め込み、生成りのカードに車・電車・飛行機別のルートを箇条で並べる 11. **空室検索フォーム・問い合わせ**（予約と問い合わせ先を案内する）: 灰色の枠のフォームに赤い検索ボタン、表形式の問い合わせ欄 ## Imagery - 温泉・街並み・自然は明るく自然光で撮り、彩度は控えめにする - アート作品の写真は暗めの室内で、光を印象的に見せる - グルメは手元や器を寄りで撮り、木のテーブルなど和の質感を入れる - 地図は塗りを白にし、若緑の太い線で描いた単純な線画にする - 装飾は細い円の線、斜めの帯、波線を地と同系色で薄く入れる - ロゴは草や苔を思わせる手書き風の文字を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央 640px 前後の幅にまとめ、背景色の帯は全幅に広げる - スポットは写真と本文を左右交互に並べる 2 カラムにする - グルメの円形写真は 2 つ横並び、宿カードは 3 列にしてカルーセルをやめる - ステップは横 4 列にし、縦の区切り線を入れる - 会期と会場を 2 カラムの情報ボックスにまとめる - 背景に緑の曲線を大きく流して余白を飾る ## 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-cdca344f`（元 LP の URL から採番） - **元 LP**: https://travel.rakuten.co.jp/movement/gifu/202608_gero/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（13/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。