DESIGN.md — 淡い水色・生成り・若草の手書き旅日記 観光 LP（Pastel Travel Journal Tourism LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: やさしい・柔らかい、ナチュラル、親しみ・手作り感、上品・高級
• キーワード: 旅日記・手書き見出し・パステル地色・切り抜き人物・吹き出し・雑誌コラージュ
• 地の質感: フラットな淡色面に写真を重ねる。影やグラデーションはほぼ無く、フィルム調の柔らかい写真が質感を担う。
• 形: 写真は角なしの矩形、ボタンは黒細線のピル型、人物アイコンは正円。吹き出しは細線の角丸矩形。
• 温度感: 明るく穏やかでやや温かい。余白多めでゆったり。

Colors

• 地色は明るいグレーを基本に、テーマ章ごとに水色・クリーム・若草色の淡色へ全面切替する。
• 章の色は目次カード・章本文・人物紹介まで一貫して同じ淡色を使う。
• 強い原色は使わず、写真の色を主役にする。
• 線と文字は黒〜墨色で統一し、細線で輪郭をとる。
• ボタンは淡い水色地に黒線・黒文字。
• フッターだけ濃いグレーで締める。

Typography

• 章タイトルは手書き文字を大きく置き、右下に明朝の小さなサブタイトルを添える。
• 感情的なキャッチは明朝で、1行ずつ白い帯の上に載せる。
• 本文はゴシックで行間2.0以上、字間広め。
• リード段落は太字、続く本文は通常ウェイトで差をつける。
• 英字は縦組みの小さなラベルか、薄い水色の巨大透かしとして装飾的に使う。
• 見出しは2行に区切って短いフレーズで構成する。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。写真は左右にずらして非対称に配置
• 本文ブロックの幅: 画面幅の約 89%
• 余白: セクション間 100px、基本単位 8px、カード内 20px（375px 幅換算）
• 左右余白は約20px。
• 写真はあえて左寄せ・右寄せ・中央を交互にずらしてコラージュ風にする。
• メイン写真は左端に縦書き英字ラベルを置くため右寄せ。
• 切り抜き人物を写真の端にはみ出させて重ねる。
• 章の地色は写真の途中から始まり、写真が色境界をまたぐ。
• プログラム一覧は写真＋2行タイトルを縦に並べる。

Elevation & Depth

• 影はほぼ使わずフラット。
• 特集カードのみ若草色の板を右下にずらした重ね影（オフセットの塗り）。
• 写真の斜め配置で奥行きを出す。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 写真は角なし矩形。人物は背景を消した切り抜き、プロフィールは正円。
• セクション境界: 直線で地色を全面切替。章の色は写真の中ほどから始まる。
• ボタンは黒1.5px線のピル型、右端に細い右矢印。
• 吹き出しは黒細線の角丸矩形に下向きの小さな尾。
• 特集カードは黒線の角丸16px＋ずらした色板。
• 地域ラベルは白線の四角い枠。

Components

• 手書き章タイトル（chapter-title）: 大きな手書き文字の下に淡いグラデ下線、右下に明朝のサブタイトル。
• 章目次バナー（chapter-index-card）: 章色の帯に旗アイコン、白地の手書き見出し、右に写真。3つを縦に連結。
• 白帯キャッチ（white-band-catch）: 明朝のキャッチを1行ずつ白い帯に載せて章色の上に置く。
• 吹き出し（speech-bubble）: 切り抜き人物の上に置く短い感想。白地黒線、絵文字1つ。
• ピル型リンクボタン（button-sns）: 淡い水色地に黒線、太字ラベルと右矢印。SNSや詳細リンクに使う。
• 体験者プロフィール（creator-profile）: 正円写真に斜めの白いテープ風手書きラベル、右に肩書き・名前・ボタン。
• 特集カード（feature-card）: 白地黒線の角丸カード。右上に円形人物写真がはみ出し、背後に若草色のずらし板。斜めに置いた写真2枚。
• プログラム一覧カード（program-card）: 暗めの写真の左上に白枠の地域ラベル、写真下に太字2行タイトル。
• スライダードット（slider-dots）: 写真下に白い小円を5つ並べ、現在位置は白抜きリング。

Do's and Don'ts

Do - 章ごとに淡色の地を全面で切り替える。 - 手書きの章タイトルと明朝のキャッチを組み合わせる。 - 切り抜き人物と吹き出しを写真の端に重ねて臨場感を出す。 - 写真の配置を左右にずらして余白をリズムよく作る。 - 本文は行間を広く取り、一人称の日記調で読ませる。

Don't - 彩度の高い原色ボタンや大きなCTA帯を置かない。 - ドロップシャドウやグラデーションの多用を避ける。 - 写真に角丸や枠をつけすぎない。 - 見出しを太いゴシックの大文字で叫ばせない。 - 写真を均等グリッドで機械的に並べない（一覧部を除く）。

Page Structure

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

1. ファーストビュー（旅の情緒を一枚で伝える）: 全面の日常風景写真に手書きの大きなコピーと小さな英字。下に人物アイコンとテーマ名が流れる帯。
2. 導入・エリアマップ（コンセプトと対象地域を示す）: 白地に明朝の2行見出しと3行リード。パステル色分けした地域地図。
3. 章目次（3テーマへの入口）: 水色・クリーム・若草色の帯を縦に3つ、手書き見出し＋写真。
4. 体験記1（出会い）（体験者のレポートで共感を生む）: 手書き章タイトル、縦英字ラベル付き写真スライダー、切り抜き人物＋吹き出し、白帯キャッチ、本文と散らした写真。
5. 体験者プロフィール（発信者への導線）: 正円写真＋手書きテープ、肩書き・名前、SNSピルボタン。
6. 体験記2（食）（食の体験を伝える）: クリーム地で同じ構成を繰り返す。
7. 体験記3（暮らし）（滞在型の体験を伝える）: 若草色地で同じ構成を繰り返す。
8. 特集カード（別企画への誘導）: 黒線角丸カード＋ずらし色板、円形人物、斜め写真、詳細ボタン。
9. プログラム一覧（他の体験を一覧で紹介）: 薄水色の巨大英字透かし、山形の括弧で挟んだ見出し、地域ラベル付き写真カードを縦並び。
10. 締めのメッセージ（コンセプトを詩的にまとめる）: 空色グラデから山並み写真へ。中央揃えの明朝詩文と、黒線角丸のロゴリンクカード。
11. フッター（運営情報とリンク）: 濃いグレー地に白文字、リンク2つ、SNSアイコン、コピーライト。

Imagery

• フィルムカメラ風の淡くやや褪せた色味の旅写真。
• 人物は自然体で笑う姿を背景を消して切り抜き、写真の外へはみ出させる。
• 海・路地・工房など日常の風景を中心に、人物の手元や食べ物のアップを混ぜる。
• 一覧の写真は暗めでドラマチックなトーンにして差をつける。
• 手書きの短い文字を斜めの白いテープに書いて写真に貼る。
• 地域地図はパステルで面ごとに色分け、日本語＋英字の地名。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は左端に縦の目次ナビを固定し、FVは左にコピー・右に縦長写真。
• PC の導入はテキストと地図を左右2カラム。
• PC の章目次は3枚横並びのカード。
• PC の体験記は中央本文を左右の写真・切り抜き人物が挟む3カラム的コラージュ。
• PC のプログラム一覧は3列グリッド。
• 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 行書くと起動時に読み込まれる。