DESIGN.md — 生成り地×黒線イラストの旅行特集 LP（Hand-drawn Line Art Travel Campaign LP）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: ポップ・元気、親しみ・手作り感、情報量多め・訴求型
• キーワード: 線画イラスト・生成り地・黒枠カード・フラット配色・一覧型・遊び心
• 地の質感: 紙のような生成りの平らな地。カードの下に網点風の影を付ける
• 形: 黒線で縁取った大きい角丸カードとピル型ボタン。手描きの雲・波線・ジグザグを添える
• 温度感: 暖かめ。朱と山吹で明るくし、黄緑で旅の楽しさを出す

Colors

• 地は生成り、カードの中は白にする。2 層だけで組む
• 線と文字は黒で統一する。イラストも黒の線画で描く
• カードの見出し帯はセクションごとに山吹・朱・生成りと色を変え、区別しやすくする
• 主 CTA は朱色の面に白文字。ページ内に 1 種類だけ置く
• タグはクーポン＝淡オレンジ、その他＝淡グレーで分ける
• NEW は赤のベタ面に白文字の小さいバッジにする
• button-primary は文字 #FFF4EB × 背景 #FE4524 のコントラスト比が 3.18:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#DC2201、4.54:1）を使う。
• badge-new は文字 #FFF4EB × 背景 #E60012 のコントラスト比が 4.43:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-3-accessible（#E30012、4.54:1）を使う。

Typography

• 見出しは太くクセのあるディスプレイ書体にする。ひらがなは漢字やカタカナより一回り小さくして、リズムを付ける
• 本文はゴシック体の 14px 前後にする
• カード見出しの左に小さなアイコンを置き、その上に弧状の英字ラベルを添える
• 文字色は黒か濃いグレーに限る
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。特集一覧は 2 列、フィルタは 2〜3 列、スタンプは 3 列のグリッドにする
• 本文ブロックの幅: 画面幅の約 92%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• コンテンツはすべて黒枠の大きなカードに収める
• カードどうしの間は生成りの地を 80px 前後空ける
• 特集の 1 件は地域名・画像・タグを縦に積んで 1 セットにする
• フィルタボタンは角丸なしの黒枠で、均等幅に並べる

Elevation & Depth

• カードの右下に網点やハッチング風の影を数 px ずらして付ける
• ぼかした影は使わない
• スタンプカードは白い面だけで、影を付けない

Shapes

• 角丸: 小 0px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: バナー画像は横長の長方形。角丸を付けない
• セクション境界: 直線では区切らない。手描きの雲・波線・島のイラストで区切りを演出する
• カードの角丸は上側を大きめ（32px）にする
• 目次ボタンと CTA はピル型で黒い細線を付ける
• フィルタボタンは角丸なしの黒枠にする
• タグは淡い色のピル型にする

Components

• 主 CTA ボタン（button-primary）: 朱色のピル型に黒の細線と白の太字
• 目次ピルボタン（anchor-nav）: 色違いのピル型。アイコンと弧状の英字ラベル、下向き矢印を添える
• 黒枠見出し付きカード（section-card）: 上部に色帯の見出しを置き、中は白。網点の影を付ける
• 絞り込みボタン（filter-button）: 黒枠で角丸なし。無効なものはグレーの面にする
• 色帯小見出し（band-heading）: 淡黄やベージュの帯に太字を左寄せで置く
• 種類タグ（tag-pill）: 淡オレンジや淡グレーの小さなピル
• NEW バッジ（badge-new）: 赤のベタ面に白の小さな英字
• スタンプカード（stamp-card）: 白い角丸カードに県名と灰色の丸いスタンプ枠を入れる

Do's and Don'ts

Do - イラストは黒の線画に、3〜4 色のフラットな塗りを合わせる - セクションはすべて黒枠の角丸カードで包む - 見出しには必ずアイコンと弧状の英字ラベルを添える - 余白に手描きの雲やジグザグ線を散らす

Don't - グラデーションやぼかした影を使わない - 写真を背景いっぱいに敷かない - 朱色を CTA 以外の大きな面に使わない - 細い明朝体を見出しに使わない

Page Structure

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

1. ファーストビュー（特集のテーマを一目で伝える）: 旗型の飾りが付いた極太のロゴ見出しと、名所を集めた島の線画イラストを置く
2. 目次ナビ（3 つのコンテンツへ案内する）: 色違いのピルボタンを 3 段に縦に並べる
3. 特集一覧（地域特集を探してもらう）: 山吹の見出し帯のカードに、注意書き・カテゴリとエリアの絞り込み・2 列のバナー一覧を入れる
4. クーポン一覧（エリア別にクーポンへ誘導する）: 朱の見出し帯のカードに、ベージュ帯の地方見出しとテキストリンクを入れる
5. 利用履歴・スタンプ（ログインを促す）: 線画イラストと大きな見出し、朱の CTA を置く。下に暗いオーバーレイを重ねた地図とスタンプのグリッドを並べる
6. その他特集（関連キャンペーンへ回遊させる）: 白地のカードにバナーを 2 列で並べる
7. お問い合わせ（サポートへ誘導する）: 生成りの見出し帯のカードに、黒枠の長方形リンクボタンを置く

Imagery

• 黒の均一な線で描いたフラットな人物と名所のイラストにする
• 塗りは黄緑・山吹・朱・空色に限る
• 手描きの雲・ジグザグ線・島の形を飾りに使う
• バナー写真は明るく彩度の高い観光地の風景にする
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では FV のイラストを横長に広げ、右上に追従ナビを置く
• PC の目次ボタンは 3 つを横一列に並べる
• PC の特集一覧は 3 列、クーポンのリンクは 3 列にする
• PC のスタンプは 5 列、その他バナーは 4 列にする
• PC ではカードの幅を約 85% にして中央に寄せる

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