--- version: alpha name: Japanese Washi Hot Spring Facility LP description: 和紙のような薄灰の地に墨茶色の文字と縦書き明朝を合わせた温泉・レジャー施設サイト。不定形の写真切り抜きと斜めのセクション境界で、自然のゆるさを出す。英字見出しは金茶、カテゴリ札は深緑・茶・朱で色分けする。 colors: primary: '#332927' background: '#FFFFFF' background-alt: '#F5F5F5' secondary: '#A68F6F' accent-1: '#3E5A4A' accent-2: '#B5242E' accent-3: '#8A3A20' tint-1: '#FFFFFF' text: '#3B3737' text-muted: '#898889' line: '#332F28' on-dark: '#FFFFFF' cta: '#F5F4F3' on-cta: '#3F3C3B' typography: display: fontFamily: Shippori Mincho fontSize: 22px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.15em headline-lg: fontFamily: Oswald fontSize: 26px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 20px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.05em note: fontFamily: Noto Sans JP fontSize: 11px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.03em accent: fontFamily: Shippori Mincho fontSize: 14px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.1em label-button: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.05em rounded: sm: 0px md: 4px lg: 24px 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-outline: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' height: 40px vertical-catch: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.display}' height: 200px category-tag: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' height: 56px section-heading: textColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 48px ticket-banner: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 48px hours-block: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 120px news-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 48px group-logo-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' height: 72px --- # DESIGN.md — 墨茶×和紙地の温泉施設 LP（Japanese Washi Hot Spring Facility LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、ナチュラル、上品・高級、信頼・誠実 - **キーワード**: 和紙テクスチャ・縦書き明朝・墨茶・金茶の英字・不定形写真・斜め境界 - **地の質感**: 薄灰の地に和紙風の細かいムラ。濃色フッターは墨茶のベタ塗り。 - **形**: 四角い写真と細い線のボタンが基本。コンセプトと観光セクションだけは丸い不定形の写真を使う。 - **温度感**: 落ち着いた温かみ。彩度を抑えたアースカラー。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#332927` | 墨茶。見出し・縦書き帯・フッターの地 | 16% | 画素の実測 | | `background` | `#FFFFFF` | ページの基本地（白） | 34% | 画素の実測 | | `background-alt` | `#F5F5F5` | 和紙風の薄灰の地 | 20% | 画素の実測 | | `secondary` | `#A68F6F` | 金茶。英字見出しに使う | 2% | 画素の主要色に補正 | | `accent-1` | `#3E5A4A` | 深緑。カテゴリ札（温泉・キャンプ） | 1% | 推定 | | `accent-2` | `#B5242E` | 朱赤。チケットの暖簾・お得バッジ | 1% | 推定 | | `accent-3` | `#8A3A20` | 茶。カテゴリ札（食事） | 0% | 推定 | | `tint-1` | `#FFFFFF` | 生成りの淡いベージュ | 4% | 画素の実測 | | `text` | `#3B3737` | 本文・見出しの文字 | 3% | 画素の実測 | | `text-muted` | `#898889` | 日付・注記の灰文字 | 0% | 画素の実測 | | `line` | `#332F28` | 細い区切り線・ボタン枠 | 0% | 画素の主要色に補正 | | `on-dark` | `#FFFFFF` | 濃色地の上の白文字・線 | 1% | 画素の主要色に補正 | | `cta` | `#F5F4F3` | 主ボタン（白地に墨の枠） | 0% | 画素の実測 | | `on-cta` | `#3F3C3B` | ボタンの文字 | 0% | 画素の実測 | - 地は白と和紙風の薄灰を交互に置き、最後のフッターだけ墨茶のベタにする - 英字の大見出しは金茶、日本語の見出しは墨色にする - カテゴリ札は施設ごとに深緑・茶・金茶などで色分けする - 朱赤はチケットやお得情報だけに使い、面積は小さくする - ボタンは白地に墨の細枠を付け、塗りつぶしは使わない - 鮮やかな色は写真に任せ、UI 側は彩度を抑える ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の縦書きキャッチ（墨の帯の上に白文字） | 明朝 | Shippori Mincho | 700 | 22px | 1.5 | 0.15em | | `headline-lg` | セクションの英字見出し | 欧文サンセリフ | Oswald | 500 | 26px | 1.2 | 0.05em | | `headline-md` | 日本語のリード見出し（2 行） | ゴシック | Zen Kaku Gothic New | 700 | 20px | 1.6 | 0.05em | | `headline-sm` | 施設カードの小見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.6 | 0.03em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 13px | 1.9 | 0.05em | | `note` | 日付・注記 | ゴシック | Noto Sans JP | 400 | 11px | 1.6 | 0.03em | | `accent` | 縦書きのカテゴリ札 | 明朝 | Shippori Mincho | 700 | 14px | 1.2 | 0.1em | | `label-button` | 枠線ボタンの文字 | ゴシック | Noto Sans JP | 500 | 12px | 1.4 | 0.05em | - 和の雰囲気は縦書きの明朝で出し、本文はゴシックで読みやすくする - 英字見出しのすぐ下に、小さな日本語の副題を添える - 営業時間などの数字は大きめのゴシックではっきり見せる - 字間はやや広めにとり、静かな印象にする - 本文は行間を 1.9 前後と広めにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC は写真と本文を 2 カラムで並べる - **本文ブロックの幅**: 画面幅の約 90% - **余白**: セクション間 64px、基本単位 8px、カード内 16px（375px 幅換算） - 施設紹介は写真と本文を左右に並べ、同じ並びを繰り返す - 写真の角にカテゴリ札を重ねる - セクション見出しは英字と日本語副題を左揃えにする - お知らせは日付と小さなサムネイルを付けたリストにする - セクション間の余白を広くとり、詰め込まない ## Elevation & Depth - 影はほぼ使わず、フラットに仕上げる - 奥行きは写真の重なりと色面の切り替えで出す - カルーセルのバナーのみ、ごく薄い影を付けてよい ## Shapes - **角丸**: 小 0px ／ 中 4px ／ 大 24px。ボタンは角丸の長方形。 - **写真の切り抜き**: 基本は四角。コンセプトと観光セクションは小石のような不定形に切り抜き、写真同士を重ねる - **セクション境界**: 和紙地のセクションは上下を緩い斜めで切る。フッターの境界も斜め - ボタンは角丸なしの長方形に細い枠を付け、右端に丸い矢印アイコンを置く - カテゴリ札は縦長の長方形 - 見出し横の区切りには細い波線を使う ## Components - **枠線ボタン**（`button-outline`）: 白地に墨の 1px 枠を付ける。右端に丸い矢印アイコンを置く - **縦書きキャッチ帯**（`vertical-catch`）: 墨色の縦帯に白い明朝の縦書きを載せる。写真の上に重ねる - **カテゴリ札**（`category-tag`）: 写真の右上に置く縦書きの小札。施設ごとに色を変える - **英字見出し**（`section-heading`）: 金茶の英字の下に、小さな日本語の副題を置く - **暖簾型の割引バッジ**（`ticket-banner`）: 朱赤の暖簾の形をしたバッジ。FV の右下と画面端に固定する - **営業時間ブロック**（`hours-block`）: 見出しの左右に波線を引く。下に大きな数字の時間を 2 列で並べ、間に縦線を入れる - **お知らせ行**（`news-item`）: サムネイル、小さな種別ラベル、日付、タイトルを横に並べる - **関連施設ロゴ枠**（`group-logo-tile`）: 濃色地に細い白線の正方形を並べ、中に白いロゴを置く ## Do's and Don'ts **Do** - 写真は大きく使い、自然と湯けむりの空気感を主役にする - 見出しやキャッチに縦書きの明朝を入れ、和の印象を保つ - 和紙テクスチャの地と白い地を交互に置く - 施設紹介は同じ型を繰り返し、カテゴリ札で区別する - ボタンは細い枠線で控えめにする **Don't** - 鮮やかな塗りつぶしのボタンを多用しない - ポップな丸ゴシックや手書き風の書体を使わない - 濃い影やグラデーションを付けない - 朱赤を広い面に使わない - 余白を詰めて情報を並べすぎない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（施設の世界観を一目で伝える）: 露天風呂の写真を全幅で敷く。左上に縦書きキャッチ帯、中央下にロゴ、右下に暖簾型のバッジを置く 2. **グローバルナビ**（各施設のページへ案内する）: 白地にテキストのリンクを横一列に並べる 3. **バナーカルーセル**（イベントやキャンペーンを告知する）: 横長のバナーを 3 枚見せ、左右に矢印、下にドットを置く 4. **営業案内**（営業時間と関連施設を示す）: 波線付きの見出しの下に大きな数字の時間を置く。横に小さな写真付きのリスト 5. **お知らせ**（最新の情報を伝える）: サムネイル付きのリストを 2 列で並べ、下に一覧へのボタン 6. **コンセプト**（施設の成り立ちと想いを伝える）: 和紙地を斜めの境界で区切る。不定形の写真に縦書き帯を重ね、本文は中央揃え 7. **施設紹介**（温泉・食事・館内などを紹介する）: 英字見出しと 2 行のリードの後、写真＋カテゴリ札と本文＋枠線ボタンを左右に並べて繰り返す 8. **観光案内**（周辺の観光地へ誘導する）: 和紙地の左に本文とボタン、右に不定形の写真を 3 枚重ねて置く 9. **フッター（施設情報）**（住所・営業情報と関連施設を示す）: 墨茶の地に白文字。上端は斜めに切る。基本情報の表、枠線ボタン、ナビ、関連施設のロゴを並べる ## Imagery - 自然光で撮った露天風呂や木の建物、緑の写真 - 料理は真上か斜め上から撮り、竹かごや木の器で素朴に見せる - 山並みや青空の風景は彩度高めで爽やかにする - 不定形に切り抜いた写真を重ね、遊び心を出す - 背景に和紙のような細かいムラのテクスチャを敷く - ロゴやアイコンは墨一色の線画にする - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - SP では写真と本文を縦に積む（写真が上、本文が下） - FV の縦書きキャッチは SP でも縦書きのまま、写真の左に重ねる - ナビはハンバーガーメニューにまとめる - 営業時間の 2 列は SP で縦に積むか、文字を小さくして並べる - お知らせの 2 列は SP で 1 列にする - 割引バッジは 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-14ea151f`（元 LP の URL から採番） - **元 LP**: https://buko-onsen.co.jp/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（8/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。