--- version: alpha name: Washi Beige Red-Accent Regional Tourism Campaign LP description: 和紙のような生成り地とベージュ帯を交互に重ね、朱赤の CTA と明朝見出しで和の上品さを出す観光キャンペーン LP。エリアごとに大きな風景写真、額縁風の名所名カード、淡色カードの特別企画を繰り返す。縁起物キャラと破れ紙の境界で親しみやすさを足す。 colors: background: '#F5F4EF' background-alt: '#EDDDB9' surface: '#FFFFFF' primary: '#E60012' cta: '#E50112' on-cta: '#FFFFFF' text: '#27231F' line: '#1F1512' secondary: '#A08848' tint-1: '#EED8D1' tint-2: '#D9E6EC' accent-1: '#EBF1D5' accent-2: '#0B880C' typography: display: fontFamily: Shippori Mincho fontSize: 30px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.08em headline-lg: fontFamily: Shippori Mincho fontSize: 21px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.05em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 400 lineHeight: 2.0 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.8 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 800 lineHeight: 1.0 letterSpacing: 0.1em headline-sm: fontFamily: Montserrat fontSize: 56px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0.05em label-button: fontFamily: Shippori Mincho fontSize: 15px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.12em rounded: sm: 4px md: 10px lg: 16px full: 999px spacing: unit: 8px card: 20px section: 80px 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.sm}' height: 60px frame-title-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.display}' height: 130px plum-badge: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 110px tint-event-card: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 800px section-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 150px area-heading: textColor: '{colors.text}' typography: '{typography.display}' height: 200px step-number: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 44px coupon-ticket: backgroundColor: '{colors.surface}' textColor: '{colors.accent-2}' typography: '{typography.display}' rounded: '{rounded.md}' height: 120px pill-period-label: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 30px --- # DESIGN.md — 和紙地と朱赤の地域観光キャンペーン LP（Washi Beige Red-Accent Regional Tourism Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 和紙テクスチャ・朱赤アクセント・明朝見出し・額縁カード・破れ紙の境界・エリア別の色分け - **地の質感**: 生成りの和紙風ノイズ地。ベージュ帯の上下は手でちぎった紙のようなギザギザ境界。 - **形**: 角丸 12px 前後のカード。額縁風の四隅装飾付き矩形。梅の花形の番号とバッジ。ボタンは角丸小さめの横長矩形。 - **温度感**: 暖かい。ベージュと朱赤が主で、エリアごとに淡いピンク・水色・若草色を添える。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#F5F4EF` | 和紙風の生成り地（メイン地色） | 30% | 画素の主要色に補正 | | `background-alt` | `#EDDDB9` | クーポン・おもてなし帯のベージュ地 | 14% | 画素の実測 | | `surface` | `#FFFFFF` | 白カード・額縁カードの面 | 9% | 画素の実測 | | `primary` | `#E60012` | ブランドの朱赤（見出し強調・番号・地名） | 2% | 推定 | | `cta` | `#E50112` | 予約・プランへの主ボタン | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA 上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#27231F` | 見出し・本文の墨色 | 4% | 画素の実測 | | `line` | `#1F1512` | 額縁カードの濃茶枠線 | 0% | 画素の実測 | | `secondary` | `#A08848` | 金茶のラベル帯（手順見出し） | 0% | 推定 | | `tint-1` | `#EED8D1` | 東部エリア特別企画カードの淡ピンク | 5% | 画素の実測 | | `tint-2` | `#D9E6EC` | 中部エリア特別企画カードの淡い水色 | 4% | 画素の実測 | | `accent-1` | `#EBF1D5` | 西部エリア特別企画カードの若草色 | 5% | 画素の実測 | | `accent-2` | `#0B880C` | クーポン金額の緑文字 | 0% | 画素の実測 | - 地は和紙風の生成りが基本。クーポンと各エリアのおもてなし紹介はベージュ帯に切り替える。 - 朱赤は CTA・番号・地名・英字ラベル・梅形バッジに限って使う。 - エリアごとに特別企画カードの淡色を変える（東=淡ピンク、中=水色、西=若草）。地図の塗りも同じ系統にそろえる。 - 本文は墨色。グレーの文字は注釈だけに使う。 - 額縁カードは白地に濃茶の細枠。四隅に濃茶の装飾を置く。 - 金茶は手順見出しなど小さなラベルだけに使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクション大見出し・名所名 | 明朝 | Shippori Mincho | 700 | 30px | 1.3 | 0.08em | | `headline-lg` | 名所のキャッチ（2 行） | 明朝 | Shippori Mincho | 700 | 21px | 1.5 | 0.08em | | `headline-md` | 特別企画やおもてなし店舗の名前 | 明朝 | Shippori Mincho | 600 | 22px | 1.35 | 0.05em | | `body-md` | 本文・説明文 | ゴシック | Noto Sans JP | 400 | 14px | 2 | 0.05em | | `note` | 住所・電話・料金などの詳細と注釈 | ゴシック | Noto Sans JP | 500 | 12px | 1.8 | 0.03em | | `accent` | 見出し上の弧を描く英字ラベル（朱赤） | 欧文サンセリフ | M PLUS Rounded 1c | 800 | 16px | 1 | 0.1em | | `headline-sm` | エリア名の背後に置く大きな白い透かし英字 | 欧文サンセリフ | Montserrat | 500 | 56px | 1 | 0.05em | | `label-button` | CTA ボタンの文字 | 明朝 | Shippori Mincho | 700 | 15px | 1.4 | 0.12em | - 見出しとボタンは明朝、本文と詳細はゴシックに分ける。 - 大見出しの左右に朱赤の小さな放射線を添え、下に朱赤の点線を短く引く。 - エリア見出しは《 》形の山括弧で挟む。背後には白の巨大な英字を透かしで置く。 - 本文の行間は 2.0 前後と広く取り、字間も少し空ける。 - 詳細情報は『項目名: 値』の形で並べ、注釈は小さくする。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。おもてなし紹介だけ 2 カラムのカード - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 名所ブロックは『全幅写真 → 写真に重なる額縁カード → キャッチ → 本文 → 点線 → 詳細』の順に並べる。 - 特別企画カードは上端に梅形バッジを重ね、カード内に写真・見出し・本文・詳細を収める。 - エリアごとに『エリア見出し＋地図 → 名所 ×2 → CTA → おもてなし 2 カラム』を繰り返す。 - CTA はエリアの区切りごとに全幅に近い幅で置く。 ## Elevation & Depth - カードは影をほぼ付けず、地色との差と枠線で区切る。 - 額縁カードは写真の下端に半分重ねて立体感を出す。 - クーポン券カードにはごく薄い影を付ける。 ## Shapes - **角丸**: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。 - **写真の切り抜き**: 名所は全幅の縦長写真。カード内とおもてなしの写真は角丸 8〜10px の矩形。手順イラストは白い正円の中に置く。 - **セクション境界**: ベージュ帯の上下は破れ紙のようなギザギザ線。和紙地どうしはそのまま続ける。 - 番号とバッジは梅の花形（5 弁）の朱赤や白にする。 - 額縁カードの四隅には濃茶の L 字装飾を付ける。 - クーポン券は左右に半円の切り欠きを付けたチケット形にする。 - 手順ラベルは雲形・楕円の金茶帯にする。 ## Components - **朱赤 CTA ボタン**（`button-primary`）: 角丸が小さい横長の朱赤ボタン。明朝の白文字を中央に置き、右端に > 矢印を付ける。 - **額縁風の名所名カード**（`frame-title-card`）: 白地に濃茶の細枠と四隅の装飾。明朝の名所名、朱赤の点線、朱赤の地名を縦に並べる。 - **梅形の特別企画バッジ**（`plum-badge`）: 白い梅形を朱赤の縁で囲む。中に朱赤の小見出しと縁起物キャラを入れ、カード上端に重ねる。 - **エリア色の特別企画カード**（`tint-event-card`）: エリアごとの淡色地に角丸の写真、明朝の見出し、本文、点線区切り、詳細リストを収める。 - **英字ラベル付き大見出し**（`section-heading`）: 朱赤の弧状の英字とキャラを上に置き、明朝の見出しを朱赤の放射線と点線で飾る。 - **エリア見出し＋地図**（`area-heading`）: 山括弧で挟んだ明朝のエリア名。背後に白い透かし英字を置き、対象エリアだけ色を塗った県地図を添える。 - **梅形の手順番号**（`step-number`）: 朱赤の梅形に白い明朝数字（01〜03）。白い円形イラストの左上に重ねる。 - **チケット形クーポン**（`coupon-ticket`）: 白地で左右に切り欠きを付ける。緑の大きな金額と小さなラベル、下段に取得リンクを置く。 - **期間ラベル**（`pill-period-label`）: 黒の細枠のピル形ラベルに項目名を入れ、下に日付を太字で添える。 ## Do's and Don'ts **Do** - 地は和紙風の生成りにし、ベージュ帯の上下は破れ紙の境界にする。 - 見出しは明朝にし、朱赤の点線と放射線を添える。 - 名所ごとに全幅写真と額縁カードを重ねる型を守る。 - エリアごとに淡い色を 1 色決め、地図とカードで共通に使う。 - CTA は朱赤 1 色にそろえ、各エリアの終わりに置く。 **Don't** - 朱赤を広い面の地色にしない。 - ゴシックの太字を大見出しに使わない。 - カードに強いドロップシャドウを付けない。 - ネオンや寒色の強いグラデーションを使わない。 - 詳細情報を罫線の表にせず、点線区切りの『項目: 値』リストで並べる。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーンの世界観と特典を一目で伝える）: 全幅の雄大な風景写真のスライダー。中央に和柄の扇形ロゴ、右上に朱赤の丸い特典バッジを置く。 2. **導入文**（地域の魅力と企画の趣旨を語る）: 和紙地に左寄せの本文。名物イラストを散らし、右下にベージュの県地図と斜めの英字を置く。 3. **写真コラージュ**（名所の多様さを見せる）: 縦長写真を横に並べ、上端は波形にする。 4. **クーポン**（特典の取得と予約へ誘導する）: ベージュ帯に英字ラベル付き見出し、期間ラベルの白カード、注釈、チケット形クーポン、朱赤 CTA の順に置く。 5. **キャンペーン概要**（公式の大型企画であることを示す）: 白地の額縁ボックスに朱赤の見出し、ロゴ、本文、点線区切りの開催期間を入れる。 6. **宿泊プラン**（主商品の案内）: ベージュ帯に見出し、短い説明、朱赤 CTA を置く。 7. **特典サービスの説明・利用方法**（特典の仕組みを 3 ステップで示す）: 白カードの中に金茶ラベルを置く。白い円の線画イラストに梅形の番号を重ね、縦に 3 つ並べる。 8. **みどころ導入**（エリア別の紹介に入る）: 英字ラベルとキャラ付きの大見出しに短い説明を添える。 9. **エリア見出し**（エリアの特徴と所属市町を示す）: 透かし英字の上に山括弧の見出しを置き、色分けした地図、本文、所属地域の一覧を続ける。 10. **名所紹介**（スポットごとの魅力と基本情報）: 全幅写真に額縁カードを重ね、2 行の明朝キャッチ、本文、点線、住所・電話を並べる。 11. **特別企画**（期間限定の体験を訴求する）: 梅形バッジを付けたエリア色のカードに、写真・見出し・本文・詳細リストを入れる。 12. **おもてなし店舗**（エリア内の特典店舗を紹介する）: ベージュ帯に 2 カラムの店舗カードを並べる。角丸写真、明朝の店名、朱赤の地名、短い説明の順に置く。 13. **グルメ**（地域の食の魅力を紹介する）: 英字ラベル付き見出しの下に、料理写真と説明を 2 カラムのグリッドで並べる。 14. **アクセス・空室検索**（移動手段と予約の導線）: 地図の埋め込みと、交通手段別の所要時間の白い表。朱赤の枠の検索フォームを続ける。 ## Imagery - 風景は晴天で彩度高めの広角写真。青空・紅葉・海の色を鮮やかに見せる。 - 名所写真は全幅の縦長で、下部に小さな朱赤のスライダーインジケーターを付ける。 - 縁起物（だるま風）のキャラを見出しやバッジに小さく繰り返し配置する。 - 地域の名物（酒器・鳥居・魚など）を淡い色のフラットイラストで余白に散らす。 - 手順は黒い単線の線画イラストを白い円に入れる。 - 県の地図はベージュの塊で描き、対象エリアだけ色を塗る。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は中央寄せで、本文幅は約 900px 前後にする。 - PC の導入文は縦書きの明朝にし、右から左へ流す。 - PC の名所ブロックは写真を左右交互に大きく置き、名所名は縦書きの額縁カードで写真の横に重ねる。 - PC の特別企画カードは本文と写真を左右 2 カラムにし、詳細は項目ラベル付きの表形式にする。 - PC の手順やグルメは 3〜2 カラムの横並びにする。 - CTA は PC では幅 400px 程度に縮めて中央に置く。 ## 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-9290e1e0`（元 LP の URL から採番） - **元 LP**: https://travel.rakuten.co.jp/movement/yamaguchi/202608_dc/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（9/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-13、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。