DESIGN.md — 青×黄×朱の陽気な語学留学 LP（Vivid Latin Travel Study Abroad LP）

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

Overview

• 業種: 教育・スクール・資格 ／ 雰囲気: ポップ・元気、親しみ・手作り感、信頼・誠実
• キーワード: 3色の大胆な色面・波形の境界・太い欧文見出し・現地モチーフイラスト・アーチ型の写真窓・生成りの紙質感
• 地の質感: 生成り色の地にうっすら紙のざらつきノイズ。色面カードにも細かな粒子感がある
• 形: 角丸カード、ピル型ボタン、丸い矢印ボタン、波打つ不定形の色面、縦長アーチの写真切り抜き
• 温度感: 暖かく陽気。青で信頼感を締め、黄と朱で楽しさを出す

Colors

• 地は生成りと白を交互に切り替え、境界は波形でつなぐ
• 青・黄・朱は面で大きく使い、3枚のカードに1色ずつ割り当てる
• CTA3連は朱→黄→青の順で役割ごとに色分けする
• 見出し文字は黒ではなく濃紺を使う
• 青面上の文字は白、強調記号は黄色にする
• 写真は単色カードの上に同系色で色かぶりさせて重ねる
• button-cta-trio は文字 #FEF7F1 × 背景 #EB623E のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D13D16、4.51:1）を使う。
• badge-free は文字 #FEF7F1 × 背景 #EB623E のコントラスト比が 3.12:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら cta-accessible（#D13D16、4.51:1）を使う。

Typography

• 各セクションは大きな太い欧文見出しの下に小さな日本語見出しを付ける
• 欧文見出しの左上に黄色の不定形ブロブを重ねる
• FVキャッチは白い座布団に載せ、キーワードだけ朱色にする
• 本文は小さめで行間を広くとる
• カード上の英字ラベルはクリーム黄の極太欧文にする
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム、PC はメニューカード 3 列
• 本文ブロックの幅: 画面幅の約 88%
• 余白: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算）
• カードは左右に約18pxの余白
• 見出しは左揃え、フォーム見出しは中央揃え
• リスト型ナビは白い角丸ボックス内に区切り線で並べる
• セクション間は波形の色面で区切り、余白を大きくとる

Elevation & Depth

• 影はほぼ使わず、色面と枠線で階層を作る
• ボタン・フォームは白地に薄い外枠で浮かせる
• 丸矢印ボタンにごく薄い白縁のリングを付ける

Shapes

• 角丸: 小 6px ／ 中 12px ／ 大 16px。ボタンはピル型。
• 写真の切り抜き: 縦長アーチ（カプセル）型、丸型アバター、角丸長方形
• セクション境界: 大きく波打つ有機的なカーブ
• ボタンはすべてピル型
• 矢印ボタンは正円
• 色面カードは角丸12〜16px
• 装飾ブロブは不定形の手描き風

Components

• 送信ボタン（button-primary）: 青地白文字の横長ピル
• CTA 3連ボタン（button-cta-trio）: 朱・黄・青のピルを縦に並べ、アイコン付き白文字
• 詳しくボタン（button-outline）: 白地に濃紺文字、右に矢印、二重縁のピル
• カテゴリカード（menu-card）: 単色の縦長カードにアーチ型写真とイラスト、英字ラベル、下部に見出しと丸矢印
• ハッシュタグ（hashtag-chip）: 青カード内に黄色の#付き白文字の小チップを並べる
• 番号付きリストナビ（list-nav）: 白ボックスに丸囲み番号・項目名・丸矢印を行ごとに配置
• 無料バッジ（badge-free）: 朱色の円形バッジに白文字
• 吹き出し（speech-bubble）: 白地に黒線の楕円吹き出しと飛行機イラスト
• 相談フォーム（form-card）: 白カード内にラベル・朱の必須マーク・薄枠入力欄
• 英字見出し＋ブロブ（heading-blob）: 黄色ブロブの上に極太英字、下に小さな日本語

Do's and Don'ts

Do - 3色の原色は面として大きく使う - 写真はアーチや円で切り抜き、単色の上に重ねる - 現地の名所・動物・食べ物のフラットイラストを添える - セクション境界は波形カーブにする - 矢印は丸ボタンで統一する

Don't - グラデーションや強い影を使わない - 純黒の文字を使わない - 3色以外の派手な色を足さない - 四角い硬いボタンにしない - 写真を矩形でただ並べない

Page Structure

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

1. ファーストビュー（専門性と旅情を一目で伝える）: 全幅の風景写真に白座布団のキャッチ、下端を青の波形で切り、円形回転テキスト付きの下矢印
2. 私たちについて（運営の想いを伝える）: 英字見出しと短い本文を生成り地に配置
3. 選ばれる理由（強みを一覧で示す）: 青い角丸カードにハッシュタグを並べ、吹き出しと飛行機イラスト、詳しくボタン
4. メニュー（探し方）（目的別・地域別に誘導）: 青・黄・朱の縦長カード3枚にアーチ写真とイラスト
5. サブナビ（一覧・ランキング等へ誘導）: 白ボックスにアイコン付き項目と丸矢印
6. 経験者の声（体験談で安心感）: 丸写真の横スライダーカード、場所・期間・学校をアイコン付きで、矢印と進捗バー
7. お知らせ（最新情報）: 白カードに日付・枠線タグ・タイトル・丸矢印のリスト、背後に青面
8. お役立ち情報（手続き情報へ誘導）: 黄ブロブ背景の見出し、角丸写真、番号付きリストナビ
9. 相談フォーム（無料相談の申込）: 青と生成りの波形で導入、無料バッジ、白いフォームカードと青の送信ボタン
10. 拠点・CTA（拠点と連絡手段を示す）: アーチ状の大きな白抜き英字、ドット日本地図に拠点ラベル、住所一覧、3色CTAボタン

Imagery

• 明るい日差しの現地の風景や笑顔の学生の写真
• メニューカードでは写真をカードの色で色かぶりさせる
• 建築・闘牛・ラマ・ギターなど現地モチーフのフラットイラストを散らす
• 黄色の手描き風ブロブを見出しのアクセントに
• 白いドットで描いた地図
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC はメニューカードを3列、サブナビを横3分割
• PC はヘッダーにナビとCTA3色ボタンを常に表示
• PC は理由カードを左に見出し、右にタグの2カラム
• PC はフォームのラベルを左、入力を右に配置
• PC は拠点を地図と住所の2カラムにし、フッターリンクを4列

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