DESIGN.md — 山吹×藍の絵本風手描き宿泊施設LP（Picture Book Playful Hotel LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: かわいい、親しみ・手作り感、ポップ・元気、やさしい・柔らかい
• キーワード: 絵本・手描き線・山吹色・藍色・和英併記・不定形フレーム
• 地の質感: フラットな単色の面に、手描きペンの線やリボンのような曲線が重なる
• 形: 下側だけ大きく角を丸めたセクション、手で描いたような楕円の写真枠、波線の区切り
• 温度感: 暖色の黄色と冷たい藍色を交互に使い、明るく温かい印象

Colors

• セクション地は山吹→藍→淡水色→白→生成り→山吹の順で切り替える
• 藍地の上の文字は白、黄色地や白地の文字は濃紺にする
• 主CTAは藍と山吹の楕円を交互に並べる
• テキストリンクは青文字に下線をつけて本文と区別する
• 写真枠は地の色と反対の色（藍か白）で縁取る
• 赤や緑は使わず、写真の中の色だけにとどめる

Typography

• 大見出しは手描き風の欧文大文字にし、和文は添えない
• 本文は和文の段落と英文の段落を続けて並べる
• 見出しは中央か右に寄せ、そばに手描きのイラストを置く
• 本文は小さめにし、行間を広くとる
• 太字は小見出しだけに使う
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真グリッドとカードは 2 列
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 0px（375px 幅換算）
• 写真と文章は左右にずらしてジグザグに置く
• セクション下端を大きく丸め、次のセクションの色に重ねる
• 設備一覧は細かい文字のリストを複数列で並べる
• 間取り図などのイラストは全幅で大きく見せる
• アクセスは地図を全幅にし、その下に住所と行き方を並べる

Elevation & Depth

• 影は使わず、すべてフラットに組む
• 奥行きは色面の重なりと角丸の切り替えで出す

Shapes

• 角丸: 小 4px ／ 中 12px ／ 大 60px。ボタンはピル型。
• 写真の切り抜き: 主写真は手描き風の不定形な楕円に、太い縁取りをつけて切り抜く。カード写真は角丸 12px
• セクション境界: 下側を大きく丸めた角、波線、手描き風のギザギザ境界
• 主写真は 2 枚の楕円を少し重ねて置く
• リボンのような曲線を境界にまたがせる
• 予約ボタンは手描き風にゆがんだ楕円にする
• スライダーのドットは黄色の丸にする

Components

• 不定形の写真枠（organic-photo-frame）: 手描き風の楕円で写真を切り抜き、藍か白の太線で縁取る。2 枚を重ねて置く
• 手描き風見出し（section-title-handdrawn）: 欧文大文字の見出しに、本・ベル・メモ帳などの線画を添える
• 予約用の楕円ボタン（button-reservation）: 欧文ラベル・小さな和文・右矢印を縦に積んだ大きな楕円。藍と山吹を交互に並べる
• もっと見るボタン（button-more）: 山吹色のピル型ボタン。文字の右に細い矢印を置く
• お知らせカード（news-card）: 角丸の写真、カテゴリラベル、太字の見出し、抜粋文を縦に並べる
• 利用シーンカード（usecase-card）: 角丸の写真、和文の見出しと本文、英文の見出しと本文を順に並べる
• 絵本のサムネイル（book-thumb）: 木の板に置いた表紙の正方形写真と、下線付きのリンク書名
• 情報表（info-table）: 左に大きい項目名、右に和英の説明を置く。罫線はなし

Do's and Don'ts

Do - 黄色・藍・淡い水色の面を交互に切り替える - 手描きの線画やリボンのような曲線を見出しと境界に添える - 写真は不定形の楕円に縁取りをつけて見せる - 和文と英文を同じ重さで併記する - セクション下端は大きく丸める - 余白を多めにとり、絵本のページのようにゆったり組む

Don't - 写真を四角いまま全面に敷き詰めない - ドロップシャドウやグラデーションを使わない - 原色の赤やネオンカラーを足さない - 和文の大見出しを太いゴシックで大きく組まない - セールのような煽る訴求バッジを置かない - 直線的でかっちりした区切り線を多用しない

Page Structure

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

1. ファーストビュー（世界観を一目で伝える）: 山吹色の地の中央にロゴ。左に楕円写真を 2 枚重ね、右に和英のキャッチを短く置く。リボン状の白い線が横切る
2. コンセプト（施設の想いを伝える）: 藍色の地。左に装飾見出しと和英の本文、右に白枠の楕円写真を 2 枚置く。下端は大きく丸める
3. 特徴（絵本の紹介）（独自のコンテンツを見せる）: 淡い水色の地。大きな楕円写真と本文を左右に置き、下に絵本のサムネイルを 3 列×2 段で並べる
4. 部屋の紹介（空間を写真で見せる）: 白地に 3 列の写真グリッドと、黄色のドット付きスライダー
5. 設備・規約一覧（詳細な情報を伝える）: 設備を 4 列のリストで並べ、規約やオプションは見出しと本文の 2 列表にする
6. 間取りイラスト（館内の様子を楽しく伝える）: 手描きの間取り図を全幅で見せ、下を藍色の波線で区切る
7. 利用シーン（泊まり方の幅を示す）: 白地に 2 列のカード。角丸の写真に和英の説明をつける
8. お知らせ（最新情報を伝える）: 生成りの地に 3 列のカードと、山吹色のピル型「もっと見る」ボタン
9. アクセス（場所と行き方を伝える）: 山吹色の地に全幅の地図。下に住所と交通手段を 2 列で並べる
10. フッターナビとCTA（予約や問い合わせへ誘導する）: ロゴとナビの下に楕円の予約ボタンを 3 つ並べ、イラストと運営情報を置く。最下部は藍色の帯

Imagery

• 室内写真は自然光で明るく撮り、子どもと本棚を写した温かい場面にする
• 絵本の表紙は木の板に置き、正面から撮る
• 線画は黒のペンで少し揺らぎのあるタッチにし、黄色を差し色に使う
• 間取りは手描きの線画に淡い黄色と水色で塗り、手書き英字の注記を添える
• 本・ベル・メモ帳・家などのモチーフを見出しに添える
• リボンやループの太い曲線を背景に流す
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は写真と文章の 2 カラム。SP では写真を上、文章を下に積む
• SP の楕円写真は幅の 70% にし、2 枚を斜めに重ねる
• 設備リストは PC の 4 列を SP では 2 列にする
• お知らせカードは SP で横スクロールか 1 列にする
• 予約ボタンは SP では縦に 3 つ積む
• セクション下端の角丸は SP では 40px 程度に縮める

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