DESIGN.md — 紺×山吹のマスコット観光DXサービスLP（Playful Mascot Tourism DX Service LP）

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

Overview

• 業種: BtoB・SaaS・ITサービス ／ 雰囲気: ポップ・元気、かわいい、親しみ・手作り感、信頼・誠実
• キーワード: マスコット案内・雲形シルエット・紺と山吹・吹き出し・点線フレーム・フラットイラスト
• 地の質感: フラットなベタ塗りイラストと、淡いグラデーションの空。影はほとんど付けない。
• 形: 雲形の波線、動物の耳が付いた丸いシルエット、大きな角丸、ピル型の吹き出し。
• 温度感: 明るく温かい。紺で信頼感を、黄色と緑で楽しさを出す。

Colors

• ベースは生成りか白。セクションの切り替えに空色・若草・紺の面を使う。
• 紺はブランド色。見出し・CTA・ダークセクションに使う。
• 山吹の黄色は、サービス名の後半・強調語・キャラクターの吹き出しに限って使う。
• 悩みの吹き出しはミント・黄・ピンクのパステル 3 色で塗り分ける。
• 結論の語は赤文字にし、黄色の下線マーカーを引く。
• 紺の面の上は白文字にする。強調語だけ山吹にしてよい。
• mascot-speech は文字 #F0FDFE × 背景 #E4A502 のコントラスト比が 2.08:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#966C01、4.54:1）を使う。
• mascot-cloud-heading は文字 #E4A502 × 背景 #D5F2FB のコントラスト比が 1.85:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら accent-1-accessible（#966C01、4.51:1）を使う。

Typography

• 全体を太めの丸ゴシックで統一し、柔らかさを出す。
• 見出しの中の 1 語だけを大きくするか色を変えて、緩急を付ける。
• サービス名は前半を紺、後半を山吹で塗り分ける。
• 箇条書きは先頭に「・」を置き、行の折り返しは字下げして揃える。
• マイクロコピーは「＼ ／」で両側から挟む。
• 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。

Layout

• カラム: SP は 1 カラム。PC は図版とテキストの 2 カラムを交互に並べる。
• 本文ブロックの幅: 画面幅の約 86%
• 余白: セクション間 80px、基本単位 8px、カード内 32px（375px 幅換算）
• セクションの境目は雲形か波形の曲線にし、直線で区切らない。
• サービス紹介は点線の大きな角丸フレームで囲む。
• フレームの左上に、耳付きシルエットのラベルを重ねる。
• アプリ画面のモックは、少し傾けた紺色の板の上に重ねる。
• マスコットはフレームの角やテキストの脇に、はみ出させて配置する。

Elevation & Depth

• 影は基本的に使わない。
• 解決メッセージのカードだけ、ごく淡いドロップシャドウを付ける。
• 奥行きは要素の重なりとはみ出しで出す。

Shapes

• 角丸: 小 8px ／ 中 16px ／ 大 32px。ボタンはピル型。
• 写真の切り抜き: 風景写真は大きな角丸か雲形で切り抜く。アプリ画面は端末の形のまま見せる。
• セクション境界: 雲形・波形の曲線
• 吹き出しはピル型にし、しっぽと小さな丸を付ける。
• サービスの相関図は、耳付きの大きなシルエットの中に白い円を 3 つ重ねる。
• 点線フレームは紺の丸ドット線で描く。
• CTA は横長のピル型にし、右端に丸いアイコンを置く。

Components

• 相談CTAボタン（button-primary）: 紺のピル型。右端に白丸のメールアイコン、左上に装飾のどんぐり型アイコンを重ねる。
• 悩み吹き出し（worry-bubble）: パステル色のピル型。左右に互い違いに並べ、小さなキャラクターの顔を添える。
• 解決メッセージカード（solution-card）: 白の角丸カード。上部にしっぽを付ける。結論の語は赤文字にし、黄色の下線を引く。
• キャラクターのセリフ吹き出し（mascot-speech）: 山吹色の角丸吹き出しに白文字。キャラクターの口調で書く。
• 点線サービスフレーム（service-frame）: 白地を紺の丸ドット線で囲む。中身はロゴ、ルビ、紺のキャッチ、箇条書き、アプリのモックの順。
• 耳付きラベル（ear-label）: 耳の付いた紺のシルエットに、白文字の動詞を 1 語だけ入れる。フレームの角に重ねる。
• 3サービス相関図（service-diagram）: 紺の耳付きシルエットの中に白い円を 3 つ重ね、動詞とサービスロゴを入れる。
• 雲形見出し（mascot-cloud-heading）: 淡い空色の雲形にマスコットを置き、山吹色の見出しを弧状に配置する。

Do's and Don'ts

Do - 全セクションにマスコットを登場させ、ナビゲーター役にする。 - セクションの境目には雲形か波形の曲線を使う。 - 強調色の山吹は少量に抑え、キーワードだけに使う。 - アプリのモックは傾けた紺の板に重ね、動きを出す。 - 見出しは短く区切って改行し、リズムを作る。

Don't - 直線的で硬いセクション区切りにしない。 - 黒の太い影や立体的なグラデーションのボタンを使わない。 - 細い明朝体で見出しを組まない。 - 原色を広い面積に使わない。パステルと紺に留める。 - 文字だけが続くセクションを作らない。

Page Structure

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

1. ファーストビュー（サービス領域を一言で伝え、親しみを出す）: 空色の空と山並みのイラストの中央にマスコットを置く。右上に、紺と山吹の帯の上へ縦書きのキャッチを重ねる。
2. 悩みの提起（自治体担当者の課題に共感する）: 空色の雲形の地に、傾けた大見出しを置く。パステルのピル型吹き出しで悩みを 3 つ、左右交互に並べる。
3. 解決の宣言（まるごと解決できることを示す）: 白カードに 3 行の宣言を入れる。最後の語を赤字にし、黄色の下線を引く。マスコットのセリフも添える。
4. サービス全体像（3 つの連携サービスの関係を示す）: 若草色の柄入りの地に、白と山吹の見出しを置く。紺の耳付きシルエットの中に円を 3 つ重ねる。下端には風景写真を雲形に切り抜いて置く。
5. サービス紹介①②（各サービスの機能を説明する）: 点線の角丸フレームに耳付きラベルを重ねる。中身はロゴ、紺のキャッチ、箇条書き、傾けたアプリのモック。
6. AIサービス紹介（目玉の AI 機能を強調する）: 紺の全幅セクションに白文字の見出しと箇条書きを置き、下にアプリのモックを配置する。
7. 追加サービス（拡張メニューを列挙する）: 雲の境界から白地に切り替える。紺の大見出しの下に、雲形の地とマスコットを置き、紺の小見出しと説明を組にした箇条書きを並べる。
8. 選ばれる理由（信頼の根拠を示す）: 空色の雲形にマスコットを置き、山吹の弧状見出しを付ける。箇条書きは強調語だけ紺にする。
9. CTA（無料相談に誘導する）: マスコットのセリフと紙飛行機の点線軌跡のあとに、括弧付きのマイクロコピーと紺のピル型ボタンを置く。
10. フッター（運営情報を載せる）: 生成りの地の中央にロゴと 2 つのリンクを置く。右下に小さなマスコットを添える。

Imagery

• マスコットは紺の丸い体に白い顔と山吹の差し色。輪郭線なしのフラットイラストで描く。
• 背景イラストは淡い緑の山、木、街並み、空色のグラデーション。
• アイコンは角丸の白い四角に、地図・吹き出し・スタンプ風の絵柄を描いて浮かせる。
• 風景写真は緑と青が鮮やかな地域の景観を選び、雲形に切り抜く。
• 地には葉のモチーフのパターンを薄く敷き詰める。
• 紙飛行機・キラキラ・点線の軌跡を装飾に使う。
• 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。

Responsive Behavior

• PC は FV を横長の風景イラストにし、マスコットを中央に置く。
• PC の悩みセクションは、1 つの雲形の中に吹き出しをまとめて散らす。
• PC のサービス紹介は、モックとテキストを左右交互に配置する。
• PC の追加サービスと選ばれる理由は、2 カラムで並べる。
• PC でもコンテンツ幅を約 960px に抑え、余白を広く取る。

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