DESIGN.md — 水色の円と手描き線画のゲストハウス LP（Hand-drawn Blue Circle Guesthouse LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 親しみ・手作り感、やさしい・柔らかい、ナチュラル、シンプル・ミニマル
• キーワード: 手描き線画・円形写真・くすみ水色・波形の区切り・余白たっぷり・縦書き見出し
• 地の質感: フラットな白地と淡い水色の面。紙のような質感で影は使わない
• 形: 正円の写真・円形ボタン・ゆるい波形の帯が主役。角はほぼ立てない
• 温度感: 涼しげな青系だが、手描き線と余白で温かく人懐っこい

Colors

• 地は白を基本に、物語系セクションだけ水色の帯で包む
• 青は彩度を抑えたくすみトーンで統一する
• セクション境界は水色2〜3段の波形で切り替える
• 強い色の CTA は置かず、黒文字＋手描き矢印で誘導する
• 黄色・ミントは小さなアイコンにだけ使う
• イラストは紺の線＋淡い青の塗りの2色に限定する

Typography

• 大見出しは手書き風で、行をずらして揺らぎを出す
• 和文見出しは縦書きにして左に置き、本文を右に並べる
• 英字見出しは細めの幾何学サンセリフ＋下に小さな和文
• 本文は小さめにし、行間2.0と字間を広めにとる
• FVのリードは中央揃えで短い行を重ねる
• 欧文ラベルは写真の円周に沿わせて弧状に配置する
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。見出し縦書き＋本文の2列を部分的に使う
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 100px、基本単位 8px、カード内 16px（375px 幅換算）
• 余白を大きくとり、1画面に要素を詰め込まない
• 円形写真は左右に交互に寄せてリズムを出す
• 写真の脇に小さな手描きイラストを添える
• VIEW MORE は右寄せで各ブロックの末尾に置く
• ニュースは横スクロールのカードで次のカードを少し見せる

Elevation & Depth

• 影は使わず完全フラットにする
• 奥行きは水色の濃淡を重ねた波形で表す
• 円形ボタンは細い黒線の輪郭だけで区切る

Shapes

• 角丸: 小 4px ／ 中 8px ／ 大 999px。ボタンは角丸の長方形。
• 写真の切り抜き: 主要な写真は正円に切り抜く。カフェとニュースは角丸4〜8pxの矩形
• セクション境界: 水色2〜3層のゆるい波形
• FVは画面右上からはみ出す巨大な円を置く
• 大小の円形写真を重ねて散らす
• 直線の枠は店名ラベルなどの最小限にとどめる
• 円形のナビボタンは塗り＋細い黒線で囲む

Components

• FV大円写真（hero-circle）: 青い大円の中に人物写真の小円を置き、円周に欧文を回す
• VIEW MORE リンク（link-view-more）: 字間を広げた英字＋くるっと巻いた手描き矢印。ボタンの枠は付けない
• 円形写真＋弧状ラベル（photo-circle-label）: 正円写真の外周に紺の英字を沿わせる
• 縦書き見出しブロック（vertical-heading）: 左に縦書きの和文見出し、右に本文を3〜4行
• 英和2段見出し（heading-en-ja）: 中央揃えの英字大見出しの下に小さな和文
• 枠付き店名ラベル（boxed-label）: 小さな英字の上見出し＋黒い細線で囲んだ欧文名
• 円形ナビボタン（nav-circle）: 淡い水色の円に英字・和文・人物イラスト、外周に弧状ラベル
• お知らせカード（news-card）: 角丸サムネイル＋日付＋太字タイトル。横スクロールで並べる
• 斜線はさみ告知（slash-callout）: 左右の斜線で短文をはさみ、下にアイコンとCHECK HERE

Do's and Don'ts

Do - 写真は正円に切り抜き、大小を重ねて配置する - セクションごとに紺線の手描きイラストを添える - 波形の水色帯で物語系セクションを包む - 見出しは手書き体・縦書き・英字の3種を使い分ける - 余白を広くとり、本文は小さく字間を広げる

Don't - 鮮やかな色の塗りボタンやグラデーションを使わない - 影・立体感のある装飾を加えない - 写真を四角いまま大きく並べない - 原色の赤や派手なバッジで煽らない - 本文を太字や大きい文字で詰め込まない

Page Structure

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

1. ファーストビュー（世界観とワクワク感を一目で伝える）: 右上に巨大な青い円、その中に円形写真と円周の欧文。下に手書きの大見出しと施設種別
2. コンセプト文（宿の想いを語る）: 中央揃えの短い行を余白を空けて重ねる。左右下に手描きの人物と建物、VIEW MORE
3. 体験の紹介（宿ならではの体験を伝える）: 波形で始まる水色帯に手書き見出し、本文、大小3つの円形写真
4. 施設マップ（分散型の施設構成を見せる）: 手書き見出し＋説明文、吹き出し付きの手描き鳥瞰マップ
5. お部屋（客室への導線）: 縦書き見出し＋本文、弧状ラベル付きの円形写真、イラスト、VIEW MORE
6. 周辺の過ごし方（まちの魅力を伝える）: 同じ型で写真を左に寄せ、イラストを右下に置く
7. プラン（滞在プランへ誘導する）: 縦書き見出し＋円形写真＋人物イラスト＋VIEW MORE
8. 併設カフェ（併設施設の紹介）: 淡色背景に英和見出し、枠付き店名、本文、角丸写真グリッド
9. お知らせ（最新情報）: 英和見出し、横スクロールのカード、VIEW MORE
10. 外部発信・サブ導線（外部記事・メンバー・よくある質問へ誘導する）: 斜線はさみの告知、アイコン、円形ナビボタンを2つ並べる
11. アクセス（所在地を示す）: 地図埋め込み＋施設名・住所・駅からの距離
12. フッター（連絡先とサイト内ナビ）: 波形で始まる淡い水色地にロゴ・住所・SNSアイコン、区切り線、中央揃えの英字ナビ

Imagery

• 写真は自然光で撮った、少し褪せたフィルム調。人物は横顔や手元など自然体で
• 古い木の棚やレトロ家具など、生活感のある室内を撮る
• イラストは紺の揺れたペン線に淡い青をベタ塗りした、ゆるい手描き
• 人物・建物・植物のイラストを写真の脇に小さく置く
• 小さな旗に英字を書いて、地図や建物に目印として立てる
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCは大円をFVの右上に置き、手書き見出しを左上に配置する
• PCは左端に縦長のブランド文字、右端に縦のSNSと予約タブを固定する
• PCは円形写真と縦書き見出しのブロックを左右ジグザグの2カラムにする
• PCのお知らせは3枚を横に並べ、カフェは写真左・文章右にする
• PCのアクセスは地図と住所を横並び、フッターは左に情報、右に3列のナビ

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