DESIGN.md — 生成りと淡彩の和モダン温泉観光 LP（Seasonal Japanese Seaside Travel Editorial LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 上品・高級、和風、やさしい・柔らかい、ナチュラル
• キーワード: 和モダン・エディトリアル・縦書き見出し・淡彩の地色・余白・季節の葉
• 地の質感: 地はほぼ無地。淡い色面が画面の片側だけに敷かれ、CTA だけ和紙風の細かい地紋が入る。
• 形: 角のない写真ブロックと細い直線。斜めの点線が写真の間をつなぐ。
• 温度感: 暖かめのニュートラル。生成り・桜色・若草色の淡いトーンで秋冬の空気感を出す。

Colors

• 地は白を基本に、セクションごとに生成り・ピンクベージュ・若草色の淡い色面を左右どちらかに寄せて敷く。
• 色面は画面いっぱいにせず、片側に余白を残した四角形で置く。
• 文字は墨色の1色に統一し、強調は色ではなく文字の大きさと字間で付ける。
• 誘導ボタンは墨色地に白文字。派手な色は外部フォームの検索ボタンだけにする。
• 欧文スクリプトは夜は藍、昼はえんじのように時間帯で色を分ける。
• 装飾の葉や実は淡い朱・黄土・桜色の水彩風にし、彩度を抑える。

Typography

• 見出しはすべて明朝で、字間を 0.12〜0.15em と広くとる。
• 本文はゴシックで行間 2.0 以上にし、ゆったり読ませる。
• 番号は細いセリフ体を大きく置き、右に縦の細線と雲形の装飾を添える。
• 写真上のキャッチは縦書きにし、1行ごとに白い帯を敷いて読ませる。
• 太字はほぼ使わず、強調は文字サイズの差で付ける。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして 2〜3 枚を重ねて配置。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• 本文は左右 24px の余白をとった左揃えにする。
• 写真は大・中・小のサイズ違いを左右交互に、少し重ねてコラージュ風に置く。
• 淡い色面は見出しと本文の裏に片寄せで敷き、写真は色面からはみ出させる。
• セクションの間は斜めの点線でつなぎ、視線を下に流す。
• 施設情報は白いボックスにまとめて色面の上に載せる。

Elevation & Depth

• 影はほぼ使わず、平らな面の重なりで奥行きを出す。
• 白い情報ボックスは影なしで、地色との差だけで浮かせる。
• 宿のカードだけ角丸の白カードにして、地色の上に置く。

Shapes

• 角丸: 小 0px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。横長と縦長を混ぜて、端を画面の外まで切る。
• セクション境界: 直線で切り替える。色面はずらして配置し、斜めの点線を添える。
• CTA は角丸なしの長方形で、右端に細い矢印を付ける。
• コース名の見出しは左右が矢羽根形の二重線フレームで囲む。
• ステップ表は細い枠線で囲み、各ステップの間に下向き三角の付いた区切り線を入れる。
• 丸いバッジは墨色の正円に白文字。

Components

• 墨色の帯ボタン（button-primary）: 全幅に近い墨色の長方形に和紙の地紋を入れ、明朝の白文字を中央に置き、右端に細い矢印を付ける。
• 縦書きキャッチ帯（vertical-catch）: 全幅写真の右上か左上に、白帯付きの縦書き明朝を 2〜3 列並べる。
• 番号見出し（section-number）: 大きなセリフ数字の右に縦の細線と雲形の装飾を置き、下に小見出しと見出しを続ける。
• 施設情報ボックス（info-box）: 色面の上に白い四角を置き、施設名と住所・電話・営業時間を注釈サイズで並べる。
• 宿泊施設カルーセルカード（hotel-card）: 上に写真、下に明朝の施設名と短い線、説明、墨色ボタンを並べた白い角丸カード。横にスクロールさせ、下に矢印とインジケーターを置く。
• 時間帯の欧文スクリプト（script-label）: 手書きの欧文と、月や太陽の線画アイコンを組み合わせて時間帯の小見出しにする。
• ステップ表（step-flow）: 細い枠の中に Step と番号、明朝の見出し、説明を縦に並べる。最下段は砂色の帯にして補足を入れる。
• アクセスのアコーディオン（accordion）: 交通アイコンと明朝の見出しを置き、右端に＋/−の記号、下に細い罫線を引いて開閉させる。
• 丸バッジ（badge-round）: 墨色の正円に白い明朝の短い言葉を 2 行で入れ、コースの対象者などを示す。

Do's and Don'ts

Do - 見出しは明朝で字間を広くとり、余白を多く残す。 - 写真はサイズ違いを左右にずらして重ね、雑誌のような流れを作る。 - セクションごとに淡い地色を変え、季節やテーマの違いを出す。 - 水彩風の紅葉や木の実を余白にまばらに散らす。 - CTA は全部同じ墨色の帯ボタンにそろえる。

Don't - 鮮やかな原色や太いゴシックの見出しは使わない。 - 色面を画面いっぱいに敷き詰めない。 - ボタンをピル型にしたり、グラデーションや強い影を付けたりしない。 - 写真に角丸や枠線を付けない。 - 装飾の葉を密に置きすぎない。1 画面に 1〜3 個まで。

Page Structure

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

1. ファーストビュー（旅先の季節感と世界観を一目で伝える）: 全画面の風景写真のスライダー。中央に六角形の細線フレームを置き、縦書き明朝のタイトルと欧文の小さな添え字を入れる。
2. 導入（旅のテーマと場所を説明する）: 大きな明朝の 2 行見出しの下に本文。円で拡大した線画の地図と、格子状に区切ったページ内ナビを置く。
3. テーマの扉（章の切り替えを印象づける）: 全幅の写真の上に、白帯付きの縦書きキャッチを置く。
4. スポット紹介（番号付き）（見どころを順に説明する）: 大きな番号と明朝の見出し、本文、淡い色面、写真コラージュ、情報ボックスをセットにして繰り返す。
5. 宿泊施設の紹介（宿の候補を見せて予約に誘う）: 白い角丸カードを横スクロールさせ、矢印とインジケーターで操作させる。
6. 時間帯別の楽しみ方（夜と朝の過ごし方を提案する）: 欧文スクリプトと月・太陽の線画を小見出しにし、ピンクベージュの地に写真を重ねる。
7. 中間 CTA（宿泊の検索ページへ誘う）: 章の終わりごとに墨色の帯ボタンを置く。
8. コースマップ（サイクリングコースを図で見せる）: 矢羽根フレームの見出し、丸バッジ、スペック表を置き、弧を描くルートにピン番号、旗、線画の自転車や鳥を添える。
9. 特典の案内（クーポンの使い方を説明する）: 生成りの地に明朝の見出しを置き、枠付きのステップ表と墨色ボタンを 2 つ並べる。
10. 注意事項（情報の時点と変更の可能性を伝える）: 白地に米印付きの小さな注釈を置く。
11. アクセス（交通手段を伝える）: 雲形アイコン付きの見出し、埋め込み地図、交通手段ごとのアコーディオンを並べる。
12. 空室検索・お問い合わせ（予約と問い合わせの窓口を示す）: 角丸枠のフォーム（ラジオボタン、日付、赤い検索ボタン）を置き、その下に灰色の見出し行がある表で問い合わせ先を示す。

Imagery

• 夕暮れや朝焼け、青い海など空と光が印象的な風景を広角で撮った写真。
• 温泉、夜の灯り、浴衣の人物などは引きの構図で撮り、場の空気を伝える。
• 料理は黒い背景や和の器を使い、上から寄って撮ったシズル感のある写真。
• 紅葉の葉、イチョウ、木の実を淡い水彩で描いた装飾を余白に散らす。
• 雲形の和柄アイコン、細い斜めの点線、地図やコース図は線画で軽く描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はテキストと写真を左右 2 カラムに分け、番号見出しは番号と見出しを横に並べる。
• PC の導入見出しは縦書きにして左に置き、本文と地図を右に並べる。
• 宿のカードは PC で 4 枚程度を同時に見せ、左に見出しを置く。
• ステップ表は PC で 4 列に横並びにし、CTA は 2 つを横に並べる。
• アクセスのアコーディオンは PC で 3 列に展開した状態で見せる。
• 問い合わせの表は PC で左に見出し列を置く 2 列の表にする。

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 行書くと起動時に読み込まれる。