DESIGN.md — 深緑×桜色の古民家ゲストハウス LP（Deep Green and Blush Pink Old House Guesthouse LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ナチュラル、やさしい・柔らかい、和風、親しみ・手作り感
• キーワード: 古民家・深緑・桜色・手描き線画・山の稜線・縦書き見出し
• 地の質感: 紙のような細かいノイズがある深緑の面と、淡いピンクの地に花びら風の模様をうっすら散らした面
• 形: 山形の稜線で区切るセクション、アーチ型の上が丸いカード、角丸の写真、細い罫線
• 温度感: 落ち着いた暖かみ。深緑が締めて、桜色が和らげる

Colors

• 地の色は深緑→白→桜色→深緑→白→桜色の順で切り替えて章を分ける
• 深緑の面には白文字と白い線のボタンだけを置く
• 桜色はカード・予約ボタン・ラベルに使い、強い色は使わない
• CTA も淡いピンク面と深緑文字で、主張は控えめにする
• 罫線は灰色の 1px で、情報の区切りに限って使う
• 図版では緑の濃淡で重要度を表し、遠方のものは薄橙で区別する

Typography

• 見出しは手書き風の書体で、字間を広くとる
• 英字は丸みのあるサンセリフの小文字で、和文の見出しと縦線で並べる
• サブの見出しは縦書きにして写真の横に置く
• 本文は小さめで行間 2.0、字間 0.1em
• 料金の数字だけ太く大きくして目立たせる
• 太字の多用や原色の強調はしない
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。客室や館内の写真は 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• 客室紹介は写真とテキストを左右交互に置く（SP では写真を上にする）
• 写真の下に小さいサムネイルを 4 枚並べる
• 見出しは中央に置き、上下に大きな余白をとる
• 料金・定員は罫線で囲んだ 1 行にまとめる
• 設備は アイコン＋名称 のリストで格子状に並べる
• アクセスは路線図風の箱と点線で描く

Elevation & Depth

• 影はほぼ使わずフラットにする
• 白いカードは桜色の地との色差だけで浮かせる
• 立体感は写真と線画で出す

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 60px。ボタンは角丸の長方形。
• 写真の切り抜き: 写真は角丸 10px の長方形。コラムのサムネイルは楕円に切り抜く
• セクション境界: FV の下は山の稜線のようなギザギザの白い形。桜色のセクションは上辺をゆるい波形にする
• カードは上だけ半円のアーチ型にする
• ボタンは角丸 4px の小さな長方形
• ラベルは角の立った深緑の矩形
• 線画やアイコンは細い線で描く

Components

• 予約ボタン（button-reserve）: 淡いピンク面に深緑文字。左にカレンダーのアイコンを付ける
• 白線ボタン（button-outline-dark）: 深緑の地に置く白い枠線のボタン。ヘッダーやコラム一覧への導線に使う
• アーチ型サービスカード（arch-card）: 上辺が半円の桜色カード。手書き風の見出しと線画イラストを入れ、下に more ＞ を置く
• 二言語の見出し（section-title）: 英字の小文字と和文の見出しを縦線で区切って中央に並べる
• 定員・料金の行（price-row）: 上下を罫線で挟み、定員と料金を並べて数字だけ大きくする
• 深緑のラベル（tag-label）: 設備の分類名を白文字で入れる深緑の矩形ラベル
• コラム記事の行（column-item）: 楕円のサムネイル、ピンクのカテゴリタグ、日付、タイトル、抜粋文を並べ、右に矢印を置く。行は白い罫線で区切る
• 縦書きのタブ（vertical-label）: 桜色の細長いタブに縦書きでカテゴリ名を入れ、写真グリッドの左に置く

Do's and Don'ts

Do - 深緑と桜色の 2 色を軸にして、ほかの色は写真から出す - セクションの境は山形や波形にして、和やかな動きを出す - 手書き風の線画やアイコンを添える - 余白を大きくとり、本文は小さく行間を広くする - 写真は角丸に切り抜き、少し重ねたり段差をつけたりして配置する

Don't - 赤や橙などの鮮やかな CTA を使わない - 濃い影やグラデーションのボタンを使わない - 太いゴシックの大見出しで押し出さない - 白地を詰め込んで余白をなくさない - 直線的な四角いだけの区切りにしない

Page Structure

LP 独自の章。上から順に、カッコ内が各セクションの役割。

1. ヘッダー（ナビゲーションと予約への導線）: 深緑の地に白い英字ナビ、ロゴ、白線のボタン 2 つ
2. ファーストビュー（宿の暮らしの雰囲気を伝える）: 深緑の地に大小の角丸写真を段差をつけて置き、コピーを斜めに配置。鳥の線画を添え、下端は山形で白地へつなぐ
3. コンセプト（宿の成り立ちと想いを伝える）: 縦書きの短いコピーと小さな写真 2 枚、建物とスタッフの写真に本文を添える 2 カラム
4. できること（宿で体験できることを 3 つ示す）: 罫線で挟んだ小さな見出しの下に、アーチ型カードを 3 枚並べる
5. 客室紹介（部屋ごとの特徴と料金を示して予約へつなぐ）: 桜色の地。番号・部屋名・説明・料金行・予約ボタンを、写真と左右交互に配置する
6. 設備（アメニティをひと目で伝える）: 白いカードに縦書きの見出し、深緑のラベル、アイコン付きのリストを置き、下に注意事項へのリンク
7. 館内のようす（共用スペースを見せる）: 縦書きのタブと 3 列の写真グリッドにキャプションを付け、罫線で区切る
8. 間取り図（館内の配置を伝える）: 手描きの線画で描いた平面図に部屋名を書き込む
9. コラム（お知らせや読み物への導線）: 深緑の帯。縦書きの英字見出しと記事 3 行、右下にピンクのボタン
10. アクセス（行き方を伝える）: 白地に地図と住所・交通手段を並べ、その下に路線図風のボックスと所要時間を描く
11. フッター（連絡先とナビ）: 桜色の帯に連絡先、ナビ、SNS アイコン、白線のボタンを置く

Imagery

• 古民家の室内を自然光で撮った、少し暗めで温かい色の写真
• 人物は家族連れやスタッフを自然体で写す
• グレーの細い線で描いた、手描き風の家具・人物・鳥のイラスト
• 鉛筆描きのような線の間取り図
• 桜色の地には花びらや葉の形を淡く散らす
• アイコンは単色で細めの線にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真とテキストの 2 カラムを左右交互に組む。SP では写真を上にした 1 カラムにする
• アーチカードは PC で 3 列、SP では横スクロールか 1 列にする
• 館内写真のグリッドは PC 3 列 → SP 2 列
• ヘッダーのナビは SP ではハンバーガーメニューにし、予約ボタンは常に表示する
• 路線図は SP では縦に積むか横スクロールにする
• 縦書きの見出しは 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 行書くと起動時に読み込まれる。