DESIGN.md — 藍夜空と和紙白の伝統工芸施設 LP（Indigo Night Craft Townhouse LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 和風、上品・高級、ナチュラル、やさしい・柔らかい
• キーワード: 藍色の夜空・和紙の白・星の装飾・ちぎり絵の切り抜き・灯りと手仕事・静かな余白
• 地の質感: 和紙のようにふちが揺らぐ切り抜きと、筆でかすれた川のイラスト。紙に近い質感でフラットに塗る。
• 形: 不定形の丸い写真フレーム、波打つセクション境界、角丸が小さめのカード、細い線のボタン。
• 温度感: 暗い藍色が中心でやや涼しい。そこに提灯や和傘の暖色の写真を入れて温かみを出す。

Colors

• 上半分（導入・フロア案内）は藍の地に白いカードを浮かべる。
• 後半（体験・アクセス）は白地に切り替え、境界は波形でつなぐ。
• 朱色は番号バッジ・体験タイトル・星の一部だけに少量使う。
• 文字は藍地では白、白地では濃紺にする。黒は使わない。
• 鮮やかな色は写真とロゴの図形に任せ、UI はモノトーン寄りにする。
• number-badge は文字 #C9483B × 背景 #FAFAFA のコントラスト比が 4.5:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#C84639、4.58:1）を使う。

Typography

• セクション見出しは大きめの欧文セリフ大文字で、下に和文の小見出しを添える。
• 見出しの右肩に小さな星を 2〜3 個置く。
• 導入キャッチだけ明朝で、文字間を広げる。
• 本文は細めのゴシックで行間 2.0 前後にゆったり組む。
• FV のキャッチは縦書きで写真の右端に置く。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。体験セクションは横スクロールカルーセル
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
• フロア案内は藍地の上に白い大カードを 1 枚置き、その中に店舗を縦に並べる。
• 導入の丸写真は左右交互に互い違いに配置する。
• 店舗ブロックは 写真→名前→区切り線→説明→情報表→ボタン の順にする。
• セクション間は大きく空けて静かな間を作る。
• アクセスは中央揃え、交通案内は左揃えのリストにする。

Elevation & Depth

• 影はほぼ使わない。藍地と白カードの明度差で面を分ける。
• 写真フレームは平面のまま重ねる。
• 地図埋め込みにだけ標準の軽い影がある。

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。
• 写真の切り抜き: 導入の写真は和紙をちぎったような不定形の円。店舗写真は角丸 8px の横長長方形。
• セクション境界: 手描き風の波線で藍地と白地を切り替え、境界の近くに星を散らす。
• 番号バッジは朱色の細線で囲んだ楕円にし、写真の右上にかぶせる。
• サブボタンは角丸 6px の細枠の長方形にし、右に線の矢印をはみ出させる。
• ロゴやアイコンは丸・三角など和傘をもとにした単純な図形にする。

Components

• 欧文＋和文の見出し（section-heading）: 大文字の欧文セリフ見出しの下に和文の小見出しを置き、右肩に星を添える。
• フロア案内の白カード（floor-card）: 藍地の上に白い大カードを置き、中に線画のフロア図と店舗リストを入れる。
• 番号バッジ（number-badge）: 朱色の細線で囲んだ楕円に区画番号を入れ、写真の右上に重ねる。
• 線矢印付きサブボタン（button-outline）: 生成り地に細枠の長方形ボタンで、右側に枠からはみ出す細い矢印を付ける。
• 店舗情報の表（info-table）: 項目名と値を 2 列で並べる小さな文字の表。罫線は使わない。
• ちぎり絵風の丸写真（torn-photo）: ふちが揺らぐ不定形の円に写真を切り抜き、藍地の上に互い違いに置く。
• 体験カルーセル（experience-carousel）: 生成りのカードに朱色のタイトル、写真の右に縦書きの札、料金と所要時間を載せる。左右に丸い矢印ボタンを置く。
• 星の装飾（star-ornament）: 白・朱・黄の小さな星を見出しや境界のまわりに散らす。

Do's and Don'ts

Do - 地色は藍と白・生成りの 2 系統に絞り、波形の境界で切り替える。 - 写真は灯り・和紙・着物など温かみのある被写体を選ぶ。 - 見出しは欧文セリフと和文を 2 段で組み、星を添える。 - 余白を大きく取り、情報は小さめの文字で静かに見せる。 - 地図や案内図は単色の線画のイラストで描く。

Don't - 派手な塗りの CTA ボタンや強い影は使わない。 - 朱色を広い面に使わない。 - 写真を四角いまま藍地に大量に並べない（導入部は丸く切り抜く）。 - 太いゴシックの大見出しで訴求感を強めすぎない。 - 純黒の文字は使わない。

Page Structure

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

1. ファーストビュー（施設の外観と世界観を伝える）: 全幅の写真の下端を波形にして藍地につなぐ。左上にロゴ、右端に縦書きのキャッチを置き、星を散らす。
2. 導入・コンセプト（土地の歴史と施設の成り立ちを語る）: 藍地に明朝のキャッチと白い本文を置き、その下に丸写真を左右交互に配置する。
3. 地域イラスト・ギャラリー（川と周辺地域のつながりを見せる）: かすれた筆致の白い川のイラストに欧文の地名を添え、上下が波形の横スクロール写真帯を続ける。
4. フロア案内（館内のテナントを紹介する）: 白い大カードに階ごとの線画フロア図を入れ、番号バッジ付きの店舗ブロックを縦に並べる。
5. 体験紹介（体験プログラムに誘う）: 波形の境界から白地に切り替え、見出し・説明文・円形の周辺地図を置いた後、横スクロールのカードを並べる。
6. アクセス（所在地と行き方を伝える）: 中央揃えの住所、地図の埋め込み、アイコン付きの交通案内リスト、イラストの駐車場マップを順に置く。
7. 外観写真（訪問先を印象づけて締める）: 上下が波形の全幅写真を置く。
8. フッター（運営情報と関連ブランドを示す）: 生成り地にロゴ、住所、関連ブランドのロゴ、運営者名、コピーライトを並べる。

Imagery

• 提灯・和傘・着物・古い町並みなど、自然光で温かい色の写真を使う。
• 写真のふちは和紙をちぎったように揺らがせ、白い縁を少し残す。
• 川はかすれた白い筆のテクスチャで描いた抽象的なイラストにする。
• 地図はグレーの建物と黄色のマーカーを使った、シンプルな線と面のイラストにする。
• 白・朱・黄の小さな星を散らして夜空の雰囲気を出す。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では導入部を 2 カラムにし、左にテキスト、右に丸写真と川のイラストを散らして置く。
• PC はファーストビューの下にグローバルナビ（和文と小さな欧文の 2 段）を右寄せで置く。
• PC のフロア案内カードは画面右寄りに幅約 50% で置き、ボタンは右揃えにする。
• PC の体験セクションは見出しと地図を左右 2 カラムにし、カルーセルは複数枚を並べて見せる。
• 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 行書くと起動時に読み込まれる。