DESIGN.md — 空色×極太漢字の観光プロモーションLP（Playful Kanji Collage Tourism LP）

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

Overview

• 業種: 自治体・公共・団体 ／ 雰囲気: ポップ・元気、清潔・爽やか、力強い・インパクト、シンプル・ミニマル
• キーワード: 漢字一文字・表情コラージュ・空色パネル・ピル型タグ・欧文マーキー・生成り地
• 地の質感: フラットな面に切り抜き写真と小物の切り抜きを散らす。影や質感はほぼ使わない
• 形: 上角だけ大きく丸めたセクションパネル。タグは細い線のピル型。写真は四角
• 温度感: 明るく涼しい。空色・白・生成りの地に、黒の極太文字を効かせる

Colors

• 地は白と生成りを交互に使う。導入だけ空色の大パネルにする
• 見出しの黒は濃い墨色1色。強調色は漢字一文字だけに使う
• 漢字一文字はカテゴリごとに空色・青紫・ミント・水色を順に変える
• フッターは青のベタ塗りに白文字
• マゼンタは地図の位置示しなど一点だけに使う
• menu-button は文字 #FFFFFF × 背景 #4990E8 のコントラスト比が 3.26:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら secondary-accessible（#1C74E2、4.52:1）を使う。

Typography

• 漢字一文字は画面幅の3割ほどの大きさで、見出しと絵を兼ねる
• 見出しはキーワードだけ1.5倍に拡大して強弱をつける
• カテゴリ番号と和名は縦書きにし、隣に欧文の白抜き文字を添える
• 欧文マーキーは上下に細い罫線を引いたセリフ体
• 本文は中央揃えにし、行間は広めにとる
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。カテゴリは「縦ラベル｜漢字｜タグ列」の3分割
• 本文ブロックの幅: 画面幅の約 90%
• 余白: セクション間 80px、基本単位 8px、カード内 16px（375px 幅換算）
• カテゴリは漢字＋タグの段の下に横長写真を置き、細い罫線で区切る
• 写真は左右20pxの余白をとって横長に配置する
• 切り抜きの小物を角や余白に散らす
• 大きな文字は画面からはみ出して切れてもよい

Elevation & Depth

• 影は使わずフラットにする
• 重なりは写真と文字のコラージュで表現する
• セクションの前後は色面パネルの重なりで表す

Shapes

• 角丸: 小 4px ／ 中 16px ／ 大 40px。ボタンはピル型。
• 写真の切り抜き: 四角の写真、横長3:1の帯。小物は切り抜き。動画サムネは角丸
• セクション境界: 上の左右角だけ大きく丸めた色面パネルを次のセクションに重ねる
• タグは1px線の白抜きピル型
• 矢印ボタンは線だけの楕円
• 円形に文字を回したバッジを見出し代わりに使う

Components

• 漢字一文字見出し（kanji-hero）: カテゴリを表す極太漢字。色付きで黒の輪郭線や模様を入れる
• スポットタグ（tag-pill）: スポット名を縦に並べる線枠ピル
• 縦書き番号ラベル（vertical-label）: 番号＋和名の縦書きと、白抜きグレー欧文の縦書きを並べる
• 欧文マーキー帯（marquee-band）: 上下罫線つきの大きなセリフ欧文を横に流す
• 円形回転文字バッジ（circle-badge）: 円周に小さな欧文、中央に短い和文を入れたセクションラベル
• 動画カードスライダー（video-slider）: 色ごとのパネルに角丸サムネを入れ、線の矢印ボタンで切り替える
• メニューボタン（menu-button）: 右上の青い楕円ハンバーガーボタン
• 記事バナー（banner-link）: 写真に白いピルの文字と下部のCHECK矢印を重ねた横長バナー

Do's and Don'ts

Do - 漢字一文字を主役にし、カテゴリごとに色と質感を変える - 人物の大げさな表情写真と極太文字を格子状にコラージュする - タグは細線のピル型で統一する - 欧文セリフのマーキー帯でリズムをつくる - 余白を広くとり、切り抜きの小物を散らす

Don't - グラデーションや強い影を使わない - 赤やオレンジを主色にしない - ベタ塗りの塗りボタンを多用しない - 本文を左右いっぱいの細かい段組みにしない - 漢字見出しを小さく控えめにしない

Page Structure

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

1. ファーストビュー（一目で印象に残す）: 人物写真のタイルに極太の黒い漢字を重ねたコラージュ
2. 欧文マーキー（地名を印象づける）: サンセリフ・セリフの欧文と丸い写真アイコンを横に流す
3. コンセプト（まちの概要とキャッチを伝える）: 空色角丸パネルに明朝の大見出し、中央揃えの本文、白い地図と位置示し
4. 写真コラージュ（景観を見せる）: 大小の写真を互い違いに重ね、漢字を添える
5. 動画スライダー（PR動画への導線）: 円形バッジ見出し＋色違いパネルの横スクロールカード
6. アンバサダー紹介（起用人物を紹介する）: マーキー帯の下に縦長ポートレートと肩書、名前、小さな本文
7. 魅力カテゴリ一覧（テーマ別にスポットを紹介する）: 生成り地に縦ラベル・漢字・タグ列、横長写真、罫線を9回繰り返す
8. 特設コンテンツ（外部記事・動画へ誘導する）: 大きな欧文見出しの帯、コラボロゴ、埋め込み動画、記事バナー
9. フッター（問い合わせ先を示す）: 青のベタ塗りに白ロゴと連絡先を中央揃え

Imagery

• 人物は白〜青い衣装で、驚き・笑いなど大げさな表情を明るい白背景で撮る
• 風景は自然光で、緑・海・古い町並みを横長に切る
• 地元の小物（食べ物・道具・カヤック）を切り抜いて余白に散らす
• 地図は白塗りの線画にし、該当地域だけマゼンタにする
• 漢字一文字には水しぶきや線などの模様を入れてもよい
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PCはカテゴリを3列×3段のグリッドにし、写真を省いてタグだけにする
• PCのコンセプトは左に写真コラージュ、右に見出しと地図の2カラム
• PCのアンバサダーは写真左・文字右の横並び
• PCの動画スライダーは4枚程度を横並びで見せる
• 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 行書くと起動時に読み込まれる。