DESIGN.md — 和紙地×水彩画の和風観光施設 LP（Washi Watercolor Japanese Village Tourism LP）

AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、上品・高級、ナチュラル、シンプル・ミニマル
• キーワード: 和紙の質感・水彩イラスト・明朝体・濃紺のアクセント・広い余白・四季
• 地の質感: 細かい繊維が見える生成りの和紙テクスチャを全面に敷く
• 形: 角丸なしの矩形。細い罫線と細枠のボタンだけで構成
• 温度感: 暖かみのある生成りに、冷たい濃紺を少しだけ効かせる

Colors

• 地は全面を生成りの和紙テクスチャ1色で通し、セクションで色を切り替えない
• 濃紺は告知バー・カテゴリタグ・固定の縦型申込バナーだけに使う
• ボタンは塗らず、地と同色の面に灰色の細枠と墨色の文字にする
• 彩りは水彩イラストと写真にまかせ、UIに彩度の高い色を使わない
• 罫線は薄い灰色の1pxにする

Typography

• 見出しや本文は明朝体を基本にし、ゴシック体は日付・タグなどの細かい情報だけに使う
• 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

この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。
- 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など]
- セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える
- 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい）
- 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない
- まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる

Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に @DESIGN.md と 1 行書くと起動時に読み込まれる。