DESIGN.md — 朱色×深緑の手描きイラスト観光ポータル（Warm Illustrated Coastal Town Tourism Portal）

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

Overview

• 業種: 旅行・観光・ホテル ／ 雰囲気: 親しみ・手作り感、ナチュラル、やさしい・柔らかい、レトロ
• キーワード: 手描き線画・朱色と深緑・波形の境界・地色の切り替え・地域の温もり・角丸カード
• 地の質感: フラットな単色の面。紙版画のような二色刷りのイラストと、実写の風景写真を組み合わせる
• 形: 角丸カード・ピル型ボタン・ゆるい波線のセクション境界・魚のモチーフ
• 温度感: 暖色寄り。朱色と黄色で温かく、深緑で落ち着かせる

Colors

• 地の色は白・桜色・生成り・黄色の 4 種類を、セクションごとに交互に替える
• 主役の色は朱色。ボタン・タグ・枠線・フッターに使う
• 文字は黒を使わず深緑で書く。リード文やカード見出しは朱色
• イラストは朱色と深緑の二色刷りに、白と少しのチェック柄を加える
• 黄色はひとつのセクションの地と小さなタグだけに絞る
• 外部サービスのボタンだけはそのブランドの色を使ってよい
• button-primary は文字 #FEF5EC × 背景 #C9532D のコントラスト比が 4.09:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#BC4E2A、4.57:1）を使う。
• tag-pill は文字 #FDF2EC × 背景 #C8542F のコントラスト比が 4.01:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら primary-accessible（#BA4E2C、4.53:1）を使う。

Typography

• すべて丸みのあるゴシックで書き、明朝は使わない
• セクション見出しは中央に置き、上に朝日と波の小さなアイコンを載せる
• 字間は 0.06〜0.1em と広めにし、やわらかく見せる
• テキストリンクは深緑の下線と、丸で囲んだ矢印アイコンを付ける
• リード文は朱色の太字で 2〜3 行に分ける
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。目的別メニューは 3 列、スポットは 2 列のグリッド
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 72px、基本単位 8px、カード内 14px（375px 幅換算）
• 左右の余白は 16〜20px
• セクションの中は見出し・説明・カード群・ボタンの順に並べる
• 各セクションの最後に中央寄せの もっと見る ボタンを置く
• note のカードは左に写真、右に文字の横長にする
• イラストの人物をセクションの境界にまたがるように置く

Elevation & Depth

• 影はほぼ使わず、平面で仕上げる
• カードは影ではなく朱色の 2px の線か白い面で区切る
• 体験プログラムのカードには点線の枠を付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 18px。ボタンはピル型。
• 写真の切り抜き: 角丸 8〜12px の矩形。スポットは正方形に近い比率
• セクション境界: ゆるやかな波線で地の色を切り替える。魚のシルエットを載せた波のライン
• ボタンとタグは完全なピル型
• 目的別メニューのカードは角丸 14px で、朱色の枠を付ける
• フッターの上端も波形にする

Components

• もっと見るボタン（button-primary）: 朱色のピル型。左に丸い矢印アイコンを付ける
• 目的別メニュー（category-tile）: 白いカードに朱色の枠。二色のイラストアイコンの下に朱色のピル型ラベル
• 朝日アイコン付き見出し（section-heading）: 朱色の朝日と波の線画アイコンの下に、深緑の中央見出し
• カテゴリタグ（tag-pill）: 朱色の小さなピル型に白文字。複数並べて折り返す
• ニュース行（news-row）: 日付と淡い朱色のタグ、下線付きのタイトル、右端に丸い矢印
• 記事カード（横長）（note-card）: 朱色の枠。左半分が写真、右に黄色のタグ・タイトル・朱色の日付
• 体験カードのスライダー（program-card）: 黄色の地の上に白いカード。点線の枠、朱色のタイトル、左右に丸い矢印
• 矢印付きテキストリンク（text-link）: 丸で囲んだ矢印と、深緑の下線付きの太字
• バナーの縦並び（banner-link）: 角丸の横長バナーを一定の間隔で縦に並べる

Do's and Don'ts

Do - イラストは朱色と深緑の二色の線画でそろえる - セクションごとに地の色を替え、境界は波形にする - 見出しの上には毎回同じ小さなアイコンを置く - 文字は深緑、強調は朱色の 2 色だけで組み立てる - セクションの境界に人物や魚のイラストを配置する

Don't - 真っ黒な文字や無彩色だけの硬い配色にしない - 直線の水平な区切りだけでセクションを分けない - ドロップシャドウやグラデーションの強い装飾を入れない - 明朝体やシャープな細いゴシックを混ぜない - 派手な色を増やさない（朱・深緑・黄までにとどめる）

Page Structure

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

1. ファーストビュー（土地の象徴を伝え、印象に残す）: 全面の写真に白い大きな見出し。下は朱色の地に人物と食卓のイラスト。波形の下端にお知らせの帯を重ねる
2. 目的から探す（訪問の目的別に案内する）: 桜色の地に、3 列のイラスト付き角丸タイルを並べる
3. コンセプト（地域の物語を伝える）: 全幅の風景写真、朱色のリード文、深緑の本文、テキストリンク、人物イラストの行列
4. ニュース（最新情報を伝える）: 生成りの地に、日付とタグ付きのリスト。右端に一覧へのリンク
5. 特集バナー（重点の施策へ誘導する）: 魚と波のラインで区切り、横長バナーを縦に並べる
6. 観光スポット（見どころを紹介する）: 桜色の地に、写真・タグ・タイトルの 2 列カード。最後にもっと見るボタン
7. 体験プログラム（ガイド付き体験へ誘導する）: 黄色の地に、点線枠の白いカードを横スライダーで見せる
8. 記事一覧（滞在記で実感を伝える）: 桜色の地に、写真が左・文字が右の横長カードを縦に並べる
9. マップ（場所を伝え、SNS 投稿を促す）: 白い地に、黄色の縁取りの英字の大見出しと埋め込み地図。キャンプのイラストを添える
10. SNS（公式アカウントへ誘導する）: 生成りの地に朱色の枠の白いパネル。投稿のグリッドと各サービスのボタン
11. 関連リンク（周辺の施設へ送客する）: 桜色の地に、2 列のバナーのグリッド
12. フッター（運営元と連絡先を示す）: 朱色の波形の地に白いロゴと住所、丸い白の SNS アイコン、魚のイラスト

Imagery

• 人物や食べ物は、朱色・深緑・白の二色刷り風の線画で描く
• 人物はエプロン姿など素朴な表情で、横一列に並べる
• 写真は自然光の風景や地元の人の実写。加工しすぎない
• 魚のシルエットと朝日・波のアイコンを、繰り返しのモチーフにする
• 白い丸の泡などの装飾を、写真の上に少し散らす
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC では目的別メニューを 4 列、スポットを 4 列に広げる
• PC のコンセプトは、写真が左・文字が右の 2 カラム
• PC の記事カードは 3 列の縦型、体験カードは 2〜3 列にする
• PC では左端に SNS アイコンを固定し、フッターは横並びのナビにする
• 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 行書くと起動時に読み込まれる。