--- version: alpha name: Washi Watercolor Japanese Village Tourism LP description: 生成りの和紙調の地に、四季の水彩イラストを散らして見せる和風の観光・複合施設 LP。明朝体と濃紺のアクセント、細い線のボタンでまとめ、余白を広くとって静かで上品な印象にしている。 colors: background: '#FAF9F6' primary: '#041B45' on-primary: '#E4EEFB' text: '#1C1C1A' text-muted: '#8A8A80' line: '#CFCFC8' cta: '#FDFCFB' on-cta: '#333333' accent-1: '#7CB342' accent-2: '#F2D23A' accent-3: '#F4B6C4' dark-section: '#1D3A3A' typography: display: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.2em headline-lg: fontFamily: Shippori Mincho fontSize: 19px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em headline-sm: fontFamily: Shippori Mincho fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.05em body-md: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 400 lineHeight: 2.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0.03em label-button: fontFamily: Noto Serif JP fontSize: 9px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.15em accent: fontFamily: Noto Sans JP fontSize: 7px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 0px md: 0px lg: 0px full: 999px spacing: unit: 8px card: 0px section: 110px 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: 34px notice-bar: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 22px side-banner-vertical: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.note}' height: 90px category-tag: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.accent}' height: 12px event-row: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 78px news-item: textColor: '{colors.text}' typography: '{typography.headline-sm}' height: 52px facility-carousel: textColor: '{colors.text-muted}' typography: '{typography.body-md}' height: 110px vertical-label-photo: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' height: 140px --- # DESIGN.md — 和紙地×水彩画の和風観光施設 LP（Washi Watercolor Japanese Village Tourism LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 和風、上品・高級、ナチュラル、シンプル・ミニマル - **キーワード**: 和紙の質感・水彩イラスト・明朝体・濃紺のアクセント・広い余白・四季 - **地の質感**: 細かい繊維が見える生成りの和紙テクスチャを全面に敷く - **形**: 角丸なしの矩形。細い罫線と細枠のボタンだけで構成 - **温度感**: 暖かみのある生成りに、冷たい濃紺を少しだけ効かせる ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `background` | `#FAF9F6` | 和紙調のページ地 | 78% | 画素の実測 | | `primary` | `#041B45` | 濃紺。告知バー・タグ・縦型バナー | 2% | 画素の実測 | | `on-primary` | `#E4EEFB` | 濃紺の上の文字 | 0% | 画素の実測 | | `text` | `#1C1C1A` | 見出し・本文の墨色 | 2% | 画素の実測 | | `text-muted` | `#8A8A80` | 日付・未選択キャプション・コピーライト | 0% | 推定 | | `line` | `#CFCFC8` | 区切り罫線・ボタン枠 | 0% | 推定 | | `cta` | `#FDFCFB` | 細枠ボタンの面（地と同色） | 0% | 画素の実測 | | `on-cta` | `#333333` | 細枠ボタンの文字 | 0% | 推定 | | `accent-1` | `#7CB342` | 水彩イラストの若葉色 | 3% | 推定 | | `accent-2` | `#F2D23A` | 水彩の菜の花・稲穂の黄色 | 2% | 推定 | | `accent-3` | `#F4B6C4` | 水彩の桜色 | 1% | 推定 | | `dark-section` | `#1D3A3A` | 関連サイトバナーの暗色面 | 1% | 推定 | - 地は全面を生成りの和紙テクスチャ1色で通し、セクションで色を切り替えない - 濃紺は告知バー・カテゴリタグ・固定の縦型申込バナーだけに使う - ボタンは塗らず、地と同色の面に灰色の細枠と墨色の文字にする - 彩りは水彩イラストと写真にまかせ、UIに彩度の高い色を使わない - 罫線は薄い灰色の1pxにする ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ | 明朝 | Shippori Mincho | 500 | 20px | 1.6 | 0.2em | | `headline-lg` | セクション見出し（左揃え） | 明朝 | Shippori Mincho | 400 | 19px | 1.4 | 0.15em | | `headline-sm` | イベント名・記事タイトル | 明朝 | Shippori Mincho | 500 | 12px | 1.5 | 0.05em | | `body-md` | 中央揃えのリード文 | 明朝 | Noto Serif JP | 400 | 9px | 2.2 | 0.08em | | `note` | 日付・日程・注釈 | ゴシック | Noto Sans JP | 400 | 7px | 1.7 | 0.03em | | `label-button` | 細枠ボタンの文字 | 明朝 | Noto Serif JP | 400 | 9px | 1.4 | 0.15em | | `accent` | 濃紺タグの文字 | ゴシック | Noto Sans JP | 500 | 7px | 1.2 | 0.05em | - 見出しや本文は明朝体を基本にし、ゴシック体は日付・タグなどの細かい情報だけに使う - FVのキャッチは縦書きにして、和の雰囲気を出す - 見出しは太くせず、字間を広くとって静かに見せる - リード文は中央揃えで短く改行し、行間を広くとる - 文字サイズの差は小さめにして、主張しすぎないようにする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。施設カードは横スクロールで3枚見せ、お知らせは記事リストと写真の2カラム - **本文ブロックの幅**: 画面幅の約 94% - **余白**: セクション間 110px、基本単位 8px、カード内 0px（375px 幅換算） - セクションの間は100px以上あけて余白を主役にする - 見出しは左揃えにし、その下に1pxの罫線つきリストを置く - 写真の帯は画面の端から端まで広げる - 各セクションの最後に、細枠ボタンを中央に1つ置く - FVはイラストを散らした縦長の構図にし、中央にロゴ、その下にリードを置く ## Elevation & Depth - 影は使わず、すべてフラットにする - 奥行きは和紙の質感と水彩のにじみだけで出す - 縦型の申込バナーは画面右端に固定し、濃紺の面で前に出して見せる ## Shapes - **角丸**: 小 0px ／ 中 0px ／ 大 0px。ボタンは角丸の長方形。 - **写真の切り抜き**: 角丸なしの矩形。横長3:2または帯状に切り抜く - **セクション境界**: 区切り線は入れず、余白で分ける。リスト内だけ1px罫線を使う - 角丸は一切使わない - ボタンは細い枠の長方形にする - タグは小さな濃紺の長方形にする - イラストは輪郭を切り抜いて地に溶け込ませる ## Components - **細枠ボタン**（`button-outline`）: 地と同色の面に灰色の1px枠、明朝体の文字。幅は約120〜150px - **告知バー**（`notice-bar`）: ページ最上部の濃紺の細い帯。白文字を中央に置く - **縦型固定申込バナー**（`side-banner-vertical`）: 画面右端に固定する濃紺の縦長タブ。白文字を縦書きにする - **カテゴリタグ**（`category-tag`）: お知らせ記事につける濃紺の小さなラベル。横に複数並べる - **イベント行**（`event-row`）: 左にサムネイル、右に明朝体のタイトルと日程・時間・場所。上下を罫線で区切る - **お知らせ項目**（`news-item`）: 日付の右に罫線を伸ばし、その下にタグとタイトルを置く - **施設カルーセル**（`facility-carousel`）: 写真の下に明朝体のキャプション。選んでいるものだけ墨色にし、下に短い線のインジケーターを並べる - **縦書きラベル付き写真**（`vertical-label-photo`）: 写真の右上に濃紺の縦長ラベルを重ね、白文字を縦書きにする ## Do's and Don'ts **Do** - 地は全面を生成りの和紙テクスチャにする - 四季の水彩イラストを余白に散らして配置する - 見出しは明朝体の細字にし、字間を広くとる - 濃紺は小さい面積でだけ使い、アクセントとして効かせる - セクションの間は十分すぎるほどあける **Don't** - 角丸のボタンや塗りつぶしの派手なCTAを置かない - 影・グラデーション・光沢を使わない - 彩度の高い赤やオレンジをUIに使わない - 太いゴシック体で見出しを強調しない - 情報を詰め込まず、余白を削らない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **告知バー**（休業日などの重要なお知らせを伝える）: 濃紺の細い帯に白文字を中央揃えで置く 2. **ファーストビュー**（土地の四季と世界観を印象づける）: 雪景色や山菜、花などの水彩イラストを散らし、縦書きキャッチと中央の家紋風ロゴを配置する 3. **コンセプト**（施設の価値を短く伝える）: 4行ほどの中央揃えの明朝体リードと、細枠ボタンを置く 4. **写真帯**（食や体験の雰囲気を見せる）: 全幅で正方形に近い写真を横に並べ、自動でスクロールさせる 5. **施設案内**（敷地の全体像と各施設を紹介する）: 水彩の鳥瞰マップの下に施設写真のカルーセルとインジケーター、細枠ボタンを置く 6. **季節のイベント**（開催中のイベントを告知する）: 罫線で区切った、サムネイル付きの行リストともっと見るボタン 7. **お知らせ**（最新情報を伝える）: 左に日付・タグ・タイトルのリスト、右に風景写真の2カラム 8. **見学・体験ツアー**（予約制の体験へ誘導する）: 大きな写真に縦書きラベルを重ね、下に右揃えで注記を置く 9. **アクセス**（所在地を伝える）: 全幅の空撮写真と細枠ボタン 10. **関連サイトバナー**（関連ブランドへ回遊させる）: 写真に明朝体の文字を重ねた横長バナーを3つ並べる 11. **フッター**（グループのブランドとサイト情報を載せる）: 中央にロゴ、ブランドロゴの列、罫線、小さなリンク、住所、コピーライトの順に並べる ## Imagery - 透明水彩で描いた四季のモチーフ（雪景色・稲穂・山菜・花・野菜・菜の花畑）。にじみと余白を残す - イラストは背景を切り抜いて地に直接置く - 敷地全体は水彩の鳥瞰図で描く - 写真は自然光の柔らかいトーンにし、木や和食器、手仕事を写す - 風景写真は緑の田園や山並みを広角で撮る - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCもSPと同じく1カラムの中央寄せで、本文幅は約80%にする - PCは左右の余白を広げ、見出しを本文の左端にそろえる - FVの水彩イラストの配置はPCでもほぼ同じにする - 施設カルーセルはPCで3枚を並べて見せる - 縦型の申込バナーはPCでも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-63c86770`（元 LP の URL から採番） - **元 LP**: http://uonuma-no-sato.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（5/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。