DESIGN.md — 空色×セージ緑の旅雑誌風サイクリング LP（Pastel Sage Cycling Travel Magazine LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ナチュラル、やさしい・柔らかい、上品・高級、清潔・爽やか
• キーワード: 旅雑誌・フィルム写真・縦書き明朝・セージグリーン・空色と雲・寄り道
• 地の質感: マットで少し褪せたフィルム調。面はフラットな単色で、光沢はない。
• 形: 写真は四角のままずらして重ねる。境界はゆるい波形。カードは角丸を小さめにする。
• 温度感: やや涼しげ。穏やかな自然光の温度感。

Colors

• 外側は空色で固定する。雲と自転車のイラストを散らして世界観を作る。
• 本文カラムでは白→セージ緑→生成りグレー→薄ベージュの順に地を切り替え、章の区切りにする。
• 文字は純黒にせず、オリーブ寄りの濃いグレーを使う。
• 強いビビッド色は、アプリの黄色ボタンと外部サービスのボタンだけに限る。
• 強調語はテラコッタの文字か、黄色のマーカー線で示す。
• route-card は文字 #6E9A80 × 背景 #FEFEFD のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#577E67、4.54:1）を使う。
• button-primary は文字 #FFFFFF × 背景 #F5BC01 のコントラスト比が 1.74:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#947201、4.5:1）を使う。
• step-tabs は文字 #D9763E × 背景 #FEFEFD のコントラスト比が 3.15:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#BA5B25、4.51:1）を使う。

Typography

• 旅パートは明朝体を基本にし、行間を広くとってエッセイのように読ませる。
• 章見出しは白い細帯に縦書きで置き、写真の横に添える。
• 英字ラベルは大文字のセリフ体で、緑色にして章の頭に置く。
• キャプションは、白地に斜線記号で囲んだ小さな吹き出しにする。
• 案内パートの見出しは、白い帯に明朝体を置き、下に小さな英字の副題を添える。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC も中央に約 375px 幅の固定カラムを置く。
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算）
• 写真は左右に交互にずらし、一部を重ねて雑誌のコラージュのように組む。
• 本文は短い行で改行し、左寄せか右寄せの塊にする。
• 写真のすぐ近くに、吹き出し型のスポット紹介を置く。
• 案内パートは白カードを縦に並べ、手順を上から順に示す。

Elevation & Depth

• 影はほぼ使わない。フラットな面で構成する。
• カードは白地と背景の色差で浮かせる。
• ボタンには下側にごく薄い影を付けてもよい。

Shapes

• 角丸: 小 4px ／ 中 10px ／ 大 16px。ボタンは角丸の長方形。
• 写真の切り抜き: 角丸なしの長方形。大小の写真を重ね、ずらして配置する。
• セクション境界: ゆるやかな波形の曲線、または単色面の直線的な切り替え。
• カードとタブは角丸 10〜16px。
• ボタンは角丸 4〜6px の横長の長方形にする。
• 章のバッジは吹き出し型の白カードにする。

Components

• 縦書き章見出し（vertical-heading）: 白い細帯に明朝体の縦書きを置き、写真の右横に添える。
• 英字章ラベル（chapter-label）: 大文字のセリフ英字を緑色で置き、章の始まりを示す。
• スポット吹き出し（spot-caption）: 白地の小さな箱に、斜線記号付きの見出しと2行の説明を入れる。
• コース選択カード（route-card）: 白い吹き出し型のカードに、大きな漢字1文字とルート名を入れる。
• 帯見出し（band-heading）: 白い横帯に明朝体の見出しを置き、下に小さな英字の副題を添える。
• 料金表（price-table）: 緑地に白文字の表。白い縦線で列を区切る。
• アプリ誘導ボタン（button-primary）: 黄色の横長ボタン。中央にロゴ、右端に丸いダウンロードアイコンを置く。
• 手順タブ（step-tabs）: 2つのタブで手順を切り替える。選択中は白、非選択は薄いベージュにする。
• 緑のアウトライン風ボタン（button-secondary）: セージ緑の帯ボタン。2段のテキストを入れ、右下に濃い影線を付ける。

Do's and Don'ts

Do - 外側の空色背景に、雲と自転車の線画を一定間隔で並べる。 - 写真は少し褪せたフィルム調でそろえ、大小を混ぜて重ねる。 - 章ごとに英字ラベル・縦書き見出し・スポット吹き出しの3点セットで組む。 - 本文は明朝体で、短い行と広い行間にする。 - 案内パートは白カードとイラストのアイコンで、手順をやさしく示す。

Don't - 真っ黒の文字や、彩度の高い背景色を広い面に使わない。 - 写真を角丸や円形で切り抜かない。 - 太いゴシックの大見出しで煽る広告調にしない。 - 影やグラデーションを多用しない。 - 写真を均等グリッドに整列させすぎない。

Page Structure

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

1. ファーストビュー（旅の空気感を一瞬で伝える。）: 手元と風景を写した縦長の写真に、縦書きの小さなコピーを重ねる。下に手書き風のロゴと写真コラージュを置く。
2. コンセプト導入（寄り道を楽しむ旅の価値観を語る。）: セージ緑の地に、白の明朝体で詩のような本文を置く。下にコース選択カードを2枚並べる。
3. エリア扉（旅の舞台を提示する。）: 全幅の写真に手書き風ロゴと地名を重ねる。移動シーンの英字見出しを添える。
4. スタート（駅で自転車を借りる流れを示す。）: 英字ラベル、短い本文、写真2〜3枚。サービス名はグレーのラベルで囲む。
5. 旅の章（森・絶景・川・体験）（立ち寄りスポットを物語として見せる。）: 生成りグレーの地に、英字ラベル・縦書き見出し・コラージュ写真・吹き出しを繰り返す。境界は波形にする。
6. フォトギャラリー（旅で撮れる写真の魅力を伝える。）: 多数の写真をランダムに重ねてモザイク状に組み、縦書き見出しと短い吹き出しを添える。
7. コース案内CTA（おすすめコースへ誘導する。）: 緑の帯ボタン1つと注釈を置く。
8. サービス説明（シェアサイクルの仕組みを説明する。）: 薄ベージュの地に帯見出しを置く。強調語はテラコッタ文字と黄色マーカーで示す。
9. ステーション検索（貸出場所を探してもらう。）: 路線図風のイラスト地図に、地名のピルラベルを置く。下にタップを促すアイコンを添える。
10. 料金（利用料金を明示する。）: 緑の料金表と自転車の写真を白カードに収める。
11. 利用方法（登録から予約までの手順を示す。）: タブ付きの白カード。アプリ画面イラスト、説明、黄色と緑のボタン、下向きの三角を並べる。
12. フッター（関連サービスと運営者を示す。）: 外部予約バナーと運営ロゴを置く。最下部はオリーブ色の帯にコピーライトを入れる。

Imagery

• 自然光で撮った、やや低コントラストで緑と青が褪せたフィルム調の写真。
• 人物は後ろ姿や手元中心にし、自転車で走る・食べる・眺める場面を撮る。
• 森林・川・古い町並み・手作りの体験など、ローカルの風景を使う。
• 背景には、線の細い雲と淡いミント色の自転車のフラットなイラストを散らす。
• 手順説明は、スマホ画面のシンプルなフラットイラストで描く。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC でも本文は中央の約 375px 幅の固定カラムのまま表示する。
• PC では左上に縦並びのナビゲーションカードとバナーを固定し、右上に運営ロゴを置く。
• PC の左右の余白には、空色地に雲と自転車のイラストを繰り返す。
• SP ではサイドナビをハンバーガーメニューに収め、カラムを全幅にする。

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