DESIGN.md — 砂色×朱色のレトロ温泉街ポータル LP（Retro Hot Spring Town Portal LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: レトロ、親しみ・手作り感、ポップ・元気、和風
• キーワード: 昭和レトロ・温泉街・黒の細い線・縦書き見出し・朱色の帯・手描きマップ
• 地の質感: ざらついた砂色の単色の地に、湯けむりを思わせる波形のシルエットが薄く重なる
• 形: 黒の細い線で囲んだ角丸カードと写真。角丸の朱色帯が横に伸びてカルーセルを抱える
• 温度感: 暖かい。焼けた砂色と朱色でノスタルジックな印象

Colors

• 地は砂色の単色で通す。白は黒枠カードの中だけに使う
• 朱色は横帯・ボタン・下線・英字ラベルの強調にしぼる
• 文字と枠線は墨に近い黒で統一する
• フッターは砂色の地に白抜き文字を置き、黒帯は使わない
• マップ内だけ緑や水色を使い、それ以外の UI には持ち込まない
• button-primary は文字 #FFFFFF × 背景 #D35402 のコントラスト比が 4.17:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#C95002、4.53:1）を使う。
• band-carousel は文字 #FDFEFE × 背景 #C4540F のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#C2530F、4.58:1）を使う。

Typography

• 大見出しは縦書きにして、細長い白い箱に入れる
• 見出しの横に朱色の英字を縦書きで添える
• 字間は全体に広めにとる（0.1em 以上）
• リード文には朱色の太い下線を引く
• 英字ラベルは大文字にして、字間を大きく空ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カルーセルは横にはみ出させる
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• カードと写真は少しずらして重ね、左右非対称に置く
• 縦書きの見出しタグは写真の角にかぶせる
• 朱色の帯は片側の画面端まで伸ばし、もう一方の端は角丸で止める
• カルーセルは前後のカードが画面端から少しのぞく形にする
• READ MORE は帯やカードの右下に置く

Elevation & Depth

• 影は使わず、黒の細い線（1〜1.5px）で立体感を出す
• 白い箱を写真や帯の上に重ねて前後関係を見せる

Shapes

• 角丸: 小 6px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 角丸の長方形に切り抜き、黒い細線で囲む
• セクション境界: 直線の境界は使わない。砂色の地に湯けむり形の波シルエットを置く
• ボタンはピル型で、黒枠または朱色の塗りにする
• 矢印ボタンは白い小さな角丸の四角に黒枠をつける
• 朱色の帯は大きな角丸で終える

Components

• 縦書き見出しタグ（vertical-title-tag）: 白い縦長の箱に黒の太字を縦書きし、横に朱色の英字を縦書きで添える
• 箱入り見出し（boxed-heading）: 黒枠の白い角丸の箱に、字間を広げた太字の見出しを入れる
• 黒枠カード（outline-card）: 白地を黒の細線で囲んだ本文カード。リード文には朱色の下線を引く
• 朱色ピルボタン（button-primary）: 朱色地に白い英字。黒い細線で縁どる
• 白ピルボタン（button-outline）: 白地に黒枠と朱色の英字。帯の右下に置く
• 朱色帯カルーセル（band-carousel）: 朱色の角丸帯の上に、黒枠の写真カードを横に並べる。写真の上に白抜きの見出しを重ねる
• 説明の吹き出し（bubble-caption）: 帯の上端にかかる横長の白い箱。小さな説明文を入れる
• ハンバーガーボタン（menu-button）: 白い角丸の四角に黒枠をつけ、朱色の三本線を入れる

Do's and Don'ts

Do - 写真はすべて黒枠の角丸にする - 見出しは縦書きの白い箱で目立たせる - 朱色の帯を左右交互に画面端から出す - 英字ラベルを添えてポスターのような雰囲気にする - 要素は少しずらして重ね、手作り感を出す

Don't - ぼかした影やグラデーションのボタンを使わない - 寒色や彩度の高い色を UI に持ち込まない - 細い明朝体で上品にまとめすぎない - 黒枠のない白カードを置かない - 白い背景のセクションを広くとらない

Page Structure

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

1. ファーストビュー（街の世界観とサイト名を伝える）: 左にロゴを縦組みし、右に黒枠の大きな写真を置く。写真の角に縦書きのコピー箱を重ね、背景に湯けむりの波形を敷く
2. サイト紹介（運営の目的を説明する）: 箱入り見出しの下に黒枠カードを置く。リードには朱色の下線を引き、右下に朱色のピルボタンを置く
3. エリア紹介（温泉街の魅力を伝える）: 右に縦長の写真と縦書きタグ、左に重ねたカードを置き、ボタンを 2 つ並べる
4. カテゴリ別記事（訪れる）（観光記事へ誘導する）: 朱色帯のカルーセルの上端に吹き出しをかけ、右上に縦書きタグを置く
5. カテゴリ別記事（暮らす）（移住情報へ誘導する）: 帯の向きを逆にした同じ型。タグは左上に置く
6. カテゴリ別記事（営む）（開業支援へ誘導する）: 同じ型を交互に繰り返す
7. 街マップ（回遊を促す）: 箱入り見出しの下に、手描きのイラストマップを角丸の枠で全面に置く
8. フッター（運営者と所在地を示す）: 砂色の地に白抜きのロゴと住所を中央にそろえて置く。SNS とコピーライトは左右の端に寄せる

Imagery

• 人物や街並みは自然光で撮り、少しコントラストを上げてフィルム写真風にする
• 古い木造建築・タイル・共同浴場など、生活感のある被写体を選ぶ
• マップは線画に淡い緑・水色・赤茶で着色した手描きイラストにする
• 背景には湯けむりを思わせる、ゆらいだ縦の波形シルエットを薄く敷く
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でもカラム構成は保ち、カルーセルのカードを 3 枚以上見せる
• PC のファーストビューは左にロゴの余白を広くとり、右に写真を置く
• PC のカード内見出しは横書きの 2 行にしてよい
• 朱色帯は PC でも片側の画面端まで伸ばす
• マップは PC で横幅いっぱいに広げる

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