--- version: alpha name: Watercolor Sky Travel App Guide LP description: 水彩風の水色〜ミントの地に白カードを重ね、オレンジの番号バッジと見出し、青の八角形吹き出し、ピンクのリボン見出しで観光アプリの機能と旅程を案内する、明るく親しみやすい観光LP。 colors: primary: '#0175C3' secondary: '#52ADCC' cta: '#F39A1A' on-cta: '#FFFFFF' accent-1: '#EE9305' accent-2: '#DD8399' accent-3: '#FDF102' background: '#FEFEFE' background-alt: '#CFE9E2' tint-1: '#7CCBE4' text: '#262527' marker: '#E8141B' dark-section: '#717171' on-dark: '#FFFFFF' cta-accessible: '#A86709' secondary-accessible: '#2D7E9A' accent-1-accessible: '#A86804' accent-2-accessible: '#CC4566' typography: display: fontFamily: Dela Gothic One fontSize: 36px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.45 letterSpacing: 0.08em headline-md: fontFamily: Shippori Mincho fontSize: 20px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.05em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 19px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.9 letterSpacing: 0.04em accent: fontFamily: Yomogi fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.05em label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em note: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.02em rounded: sm: 6px md: 12px lg: 24px full: 999px spacing: unit: 8px card: 20px 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: 48px button-feature: backgroundColor: '{colors.primary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 48px button-sub: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 36px badge-point: backgroundColor: '{colors.accent-1}' textColor: '{colors.on-cta}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 56px bubble-octagon: backgroundColor: '{colors.primary}' typography: '{typography.body-md}' height: 100px ribbon-heading: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-dark}' typography: '{typography.headline-sm}' height: 44px card-feature: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 1600px video-thumb: textColor: '{colors.text}' typography: '{typography.note}' height: 210px tap-circle: backgroundColor: '{colors.accent-3}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 150px --- # DESIGN.md — 水彩空色×橙の観光アプリ紹介LP（Watercolor Sky Travel App Guide LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 清潔・爽やか、ポップ・元気、親しみ・手作り感、情報量多め・訴求型 - **キーワード**: 水彩テクスチャ・白カード・八角形吹き出し・手書き添え文字・リボン見出し・動画サムネ多用 - **地の質感**: 水色〜ミントの水彩にじみ背景。カード内は白のフラット面。 - **形**: 角を斜めに落とした白カード、八角形の吹き出し、ピル型ボタン、旗型リボン。 - **温度感**: 爽やかな寒色の地に、橙とピンクで暖かさを差す。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#0175C3` | ブランド青（吹き出し・ロゴ） | 4% | 画素の実測 | | `secondary` | `#52ADCC` | ボタン水色（旅程サブボタン） | 3% | 画素の実測 | | `cta` | `#F39A1A` | 主CTAのオレンジ | 1% | 推定 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-1` | `#EE9305` | 見出し・POINTバッジの橙 | 2% | 画素の実測 | | `accent-2` | `#DD8399` | リボン見出しのピンク | 2% | 画素の実測 | | `accent-3` | `#FDF102` | キャンペーンの黄 | 0% | 画素の実測 | | `background` | `#FEFEFE` | ページ・カードの白地 | 41% | 画素の実測 | | `background-alt` | `#CFE9E2` | 水彩ミント地 | 20% | 画素の主要色に補正 | | `tint-1` | `#7CCBE4` | キャンペーン帯の空色水彩 | 6% | 画素の実測 | | `text` | `#262527` | 本文・見出しの濃色 | 3% | 画素の実測 | | `marker` | `#E8141B` | 終了告知の赤帯 | 0% | 推定 | | `dark-section` | `#717171` | フッターのグレー | 2% | 画素の実測 | | `on-dark` | `#FFFFFF` | フッター白文字 | 0% | 画素の実測 | | `cta-accessible` | `#A86709` | AA を満たす補正値（計算） | | 計算 | | `secondary-accessible` | `#2D7E9A` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#A86804` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#CC4566` | AA を満たす補正値（計算） | | 計算 | - 地は水彩の水色〜ミント、その上の白カードに情報を置く。 - 機能見出しと番号バッジは橙で統一する。 - 吹き出しは濃いブランド青に白文字、強調語だけ黄色にする。 - 主CTAは橙→黄橙、機能別CTAは水色→紺のグラデーションのピル型にする。 - 旅程セクションはピンクのリボン見出しと水色ボタンで構成する。 - 赤は終了告知など警告にだけ使う。 - `button-primary` は文字 `#FFFFFF` × 背景 `#F39A1A` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#A86709`、4.56:1）を使う。 - `button-sub` は文字 `#FFFFFF` × 背景 `#52ADCC` のコントラスト比が 2.56:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `secondary-accessible`（`#2D7E9A`、4.6:1）を使う。 - `badge-point` は文字 `#FFFFFF` × 背景 `#EE9305` のコントラスト比が 2.38:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#A86804`、4.52:1）を使う。 - `ribbon-heading` は文字 `#FFFFFF` × 背景 `#DD8399` のコントラスト比が 2.7:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#CC4566`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | キャンペーン大見出し | 装飾・ディスプレイ | Dela Gothic One | 400 | 36px | 1.2 | 0.02em | | `headline-lg` | 機能見出し（橙・中央2行） | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.45 | 0.08em | | `headline-md` | セクション見出しの後半（ロゴ横の明朝） | 明朝 | Shippori Mincho | 700 | 20px | 1.4 | 0.05em | | `headline-sm` | リボン見出しの地名 | ゴシック | Zen Kaku Gothic New | 700 | 19px | 1.3 | 0.03em | | `body-md` | 本文（太め） | ゴシック | Noto Sans JP | 700 | 14px | 1.9 | 0.04em | | `accent` | 手書きの添え文字 | 手書き・筆 | Yomogi | 400 | 15px | 1.5 | 0.05em | | `label-button` | ボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.08em | | `note` | 動画キャプション・フッター | ゴシック | Noto Sans JP | 500 | 12px | 1.6 | 0.02em | - 本文はほぼすべて太字で読みやすくする。 - 導入文は中央揃え、機能説明は左揃えにする。 - 見出しはロゴ文字＋明朝の後半という組み合わせにする。 - 手書きの添え文字は、細い曲線の下線と組み合わせて見出しの補足に使う。 - リボン見出しの時刻は細い明朝で小さく添える。 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。動画サムネのみ 2 列グリッド - **本文ブロックの幅**: 画面幅の約 91% - **余白**: セクション間 80px、基本単位 8px、カード内 20px（375px 幅換算） - 白カードは左右 16px あけて水彩地に浮かせる。 - POINT バッジはカード上端をまたいで中央に置く。 - スクリーンショットと吹き出しは左右交互にずらして重ねる。 - 旅程は縦のタイムライン状に「リボン見出し→写真→本文→ボタン」を繰り返す。 - ステップ間は点線の曲線矢印でつなぐ。 ## Elevation & Depth - ピル型ボタンには下方向の柔らかい影と白い縁取りを付ける。 - 白カードは影なしで、地の色との差だけで浮かせる。 - 丸い TAP ボタンは黄色の立体的な円に影を付ける。 ## Shapes - **角丸**: 小 6px ／ 中 12px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 旅程写真は角丸12pxの横長、動画サムネは角丸なしの矩形。人物は切り抜きで配置する - **セクション境界**: 水彩背景の色が直線で切り替わる。カードは四隅を斜めにカットする - 吹き出しは八角形の不規則な形にし、尾を付ける。 - リボン見出しは右端を燕尾にし、左に縦線ピンを立てる。 - FV は放射状の写真コラージュの中央に白い八角形を置く。 ## Components - **主CTAピルボタン**（`button-primary`）: 橙→黄橙のグラデーションに白文字、右端に細い矢印線 - **機能CTAピルボタン**（`button-feature`）: 水色→紺のグラデーションに白文字と右矢印 - **旅程サブボタン**（`button-sub`）: 水色の角丸矩形に白文字、右に白丸の再生アイコン。2列で並べる - **POINT番号バッジ**（`badge-point`）: 橙の円に、白の小さな英字と大きなセリフ数字 - **八角形吹き出し**（`bubble-octagon`）: 青の八角形に白文字、強調語だけ黄色 - **リボン見出し**（`ribbon-heading`）: ピンクの燕尾リボンに白太字の地名と細字の時刻 - **機能カード**（`card-feature`）: 四隅を斜めに落とした白カードで、見出し・本文・CTA・画像をまとめる - **動画サムネ**（`video-thumb`）: 写真の中央に橙の丸い再生ボタンを置き、下に中央揃えのキャプション - **丸型TAPボタン**（`tap-circle`）: 黄色の大きな円に濃色の文字、上に TAP の文字と放射線 ## Do's and Don'ts **Do** - 水彩の寒色地＋白カードの組み合わせを保つ。 - 各機能ごとに「バッジ→橙見出し→本文→CTA→画面画像＋吹き出し→動画」の順を守る。 - 人物の切り抜き写真をカードの端に添えて、親しみを出す。 - チケット・地図・バスなどの線画アイコンを橙や赤の細線で散らす。 - 手書きの添え文字で動画への導線を作る。 **Don't** - 黒や濃紺の重い面を広く使わない。 - 角丸の大きいカードや強い影を使わない。 - ボタン色を役割ごとのグラデーション以外に増やさない。 - 本文を細字にしない。 - 吹き出しを丸や角丸の四角にしない。 ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（地域の魅力とサービスの印象づけ）: 観光写真を放射状に分割したコラージュ。中央の白い八角形にロゴを置き、左上にピンクの円形メニュー 2. **サービス紹介**（サービス概要を短く伝える）: 白地に中央揃えの太字本文。周りに線画アイコンを散らし、人物写真と手書きの吹き出しを添える 3. **キャンペーン**（特典への誘導）: 空色の水彩地に、白の雲形見出しと黄色の大見出し、赤の告知帯、商品写真、丸型TAPボタン 4. **機能紹介（POINT1〜3）**（機能ごとの利便性を示す）: ミント水彩地に白カードを縦に並べる。各カードは番号バッジ、橙見出し、CTA、画面スクショ＋青の吹き出しで構成 5. **使い方動画**（操作を視覚的に伝える）: 横長サムネを1本、手書きの添え文字のあと縦長サムネを2列で並べる 6. **モデル旅程**（利用シーンを時系列で見せる）: 白地のタイムライン。ピンクのリボン見出し、角丸写真、本文、水色ボタン、点線矢印、人物の切り抜きを繰り返す 7. **フッター**（問い合わせ先と運営情報）: グレーの面に白文字を中央揃え。右上に丸いページトップボタン ## Imagery - 晴天の観光地を、彩度高めの広角写真で撮る。 - 若い女性モデルが笑顔でポーズする写真を白背景で切り抜く。 - 動画サムネはロケ写真に、ロゴと再生ボタンを重ねる。 - アイコンは細線の手描き風（チケット・地図ピン・バス・円記号）にする。 - 背景は水色・ミント・薄紫がにじむ水彩テクスチャにする。 - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC でも中央に細い 1 カラムを置き、SP と同じ構成を保つ。 - PC では左右の余白に水彩背景を広げる。 - 動画の2列グリッドとボタンの2列配置は PC でも変えない。 - 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-0663fd6b`（元 LP の URL から採番） - **元 LP**: https://www.iseshima-kanko.jp/burarist/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（10/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。