--- version: alpha name: Playful Mascot Tourism DX Service LP description: 濃紺のキャラクターが全編を案内する、観光自治体向けDXサービスのLP。空色・生成り・若草の地に紺の面を置いて区切る。山吹の黄色をアクセントに使う。雲形・動物の耳形のシルエットや点線の囲み、吹き出しを多用し、BtoB でも親しみやすく見せている。 colors: primary: '#023D97' dark-section: '#023D97' on-dark: '#F0FDFE' background: '#F6F8EB' surface: '#E3F7FE' background-alt: '#D5F2FB' secondary: '#51AE79' accent-1: '#E4A502' accent-2: '#FEDD1C' accent-3: '#F39CC1' tint-1: '#85DBA3' text: '#3A2E2A' marker: '#C14032' cta: '#023D95' on-cta: '#ECFDFF' accent-1-accessible: '#966C01' typography: display: fontFamily: M PLUS Rounded 1c fontSize: 22px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.05em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 28px fontWeight: 800 lineHeight: 1.4 letterSpacing: 0.05em headline-md: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.1em label-button: fontFamily: M PLUS Rounded 1c fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 8px md: 16px lg: 32px full: 999px spacing: unit: 8px card: 32px section: 80px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 56px worry-bubble: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 44px solution-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 180px mascot-speech: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-dark}' typography: '{typography.accent}' rounded: '{rounded.lg}' height: 90px service-frame: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.lg}' height: 1100px ear-label: backgroundColor: '{colors.primary}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 80px service-diagram: backgroundColor: '{colors.dark-section}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 420px mascot-cloud-heading: backgroundColor: '{colors.background-alt}' textColor: '{colors.accent-1}' typography: '{typography.headline-lg}' rounded: '{rounded.full}' height: 260px --- # 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 | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#023D97` | ブランド紺・見出し・ダーク面 | 14% | 画素の実測 | | `dark-section` | `#023D97` | 耳形シルエットの濃紺面 | 4% | 画素の実測 | | `on-dark` | `#F0FDFE` | 紺面上の白文字 | 1% | 画素の実測 | | `background` | `#F6F8EB` | 生成りのベース地 | 30% | 画素の実測 | | `surface` | `#E3F7FE` | カード・白地 | 31% | 画素の実測 | | `background-alt` | `#D5F2FB` | 空色の雲セクション | 7% | 画素の実測 | | `secondary` | `#51AE79` | 若草色の連携サービス帯 | 10% | 画素の実測 | | `accent-1` | `#E4A502` | 山吹の強調文字・吹き出し | 2% | 画素の実測 | | `accent-2` | `#FEDD1C` | 悩み吹き出しの黄色 | 1% | 画素の実測 | | `accent-3` | `#F39CC1` | 悩み吹き出しのピンク | 1% | 画素の実測 | | `tint-1` | `#85DBA3` | 悩み吹き出しのミント | 1% | 画素の実測 | | `text` | `#3A2E2A` | 本文の濃い茶黒 | 2% | 推定 | | `marker` | `#C14032` | 解決ワードの赤 | 0% | 画素の実測 | | `cta` | `#023D95` | 相談ボタン | 0% | 画素の実測 | | `on-cta` | `#ECFDFF` | ボタン文字 | 0% | 画素の実測 | | `accent-1-accessible` | `#966C01` | AA を満たす補正値（計算） | | 計算 | - ベースは生成りか白。セクションの切り替えに空色・若草・紺の面を使う。 - 紺はブランド色。見出し・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 | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの縦書きキャッチ（帯の上に配置） | 丸ゴシック | M PLUS Rounded 1c | 800 | 22px | 1.3 | 0.05em | | `headline-lg` | セクション大見出し（傾けた手書き風の配置も可） | 丸ゴシック | M PLUS Rounded 1c | 800 | 28px | 1.4 | 0.05em | | `headline-md` | サービスのキャッチ（紺） | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.6 | 0.03em | | `headline-sm` | 箇条書きの小見出し（紺） | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.5 | 0.02em | | `body-md` | 箇条書きの本文 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.03em | | `accent` | 吹き出し内のセリフ・悩み | 丸ゴシック | M PLUS Rounded 1c | 700 | 14px | 1.5 | 0.03em | | `note` | サービス名のルビ・フッターリンク | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.1em | | `label-button` | CTAボタンの文字 | 丸ゴシック | M PLUS Rounded 1c | 700 | 16px | 1.2 | 0.05em | - 全体を太めの丸ゴシックで統一し、柔らかさを出す。 - 見出しの中の 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 ```text この DESIGN.md に従って、[商品名] の LP を HTML/CSS で作ってください。 - 対象: [ターゲット]、目的: [EC 購入 / 資料請求 など] - セクション構成は Page Structure の順に、内容は [自社の情報] に置き換える - 色・書体・角丸・余白は YAML のトークンだけを使う（CSS 変数に展開してよい） - 写真はプレースホルダーにし、元 LP のロゴ・写真・コピーは使わない - まず SP（375px）で組み、Responsive Behavior に沿って PC に広げる ``` Claude Code で使う場合は、プロジェクト直下に置き、CLAUDE.md に `@DESIGN.md` と 1 行書くと起動時に読み込まれる。 ## Provenance - **ID**: `xd-58903d55`（元 LP の URL から採番） - **元 LP**: https://lp.tabinuki.com/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（14/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。