--- version: alpha name: Colorful Section-Banner Highway Bus Comparison LP description: 白地の中央コンテナに、理由ごとに色を変えた弧形帯見出しを積み重ねる情報量多めの旅行サービス LP。ピンク赤の大見出し、緑のグラデーション CTA、価格比較表、写真コラージュの体験レポートで、安さと快適さを同時に訴求する。 colors: primary: '#BE4C65' background: '#FEFEFE' background-alt: '#FFFFFF' cta: '#93C224' on-cta: '#FFFFFF' secondary: '#37464A' accent-1: '#DE7A2E' accent-2: '#BD4F4C' accent-3: '#4E8A2A' tint-1: '#CFE0EA' tint-2: '#FBFAF3' text: '#37464A' line: '#D8D3CD' marker: '#EBAC02' cta-accessible: '#607F18' typography: display: fontFamily: Dela Gothic One fontSize: 44px fontWeight: 900 lineHeight: 1.2 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 26px fontWeight: 900 lineHeight: 1.3 headline-md: fontFamily: Zen Kaku Gothic New fontSize: 22px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.4 body-md: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.7 note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.5 accent: fontFamily: Yomogi fontSize: 12px fontWeight: 400 lineHeight: 1.4 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 8px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 48px 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: 52px reason-banner: backgroundColor: '{colors.secondary}' typography: '{typography.headline-lg}' height: 80px price-box: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 120px feature-circle: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 64px comparison-table: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.sm}' height: 160px point-badge: backgroundColor: '{colors.marker}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 40px speech-bubble: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 36px faq-item: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' height: 100px guarantee-banner: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.headline-lg}' rounded: '{rounded.sm}' height: 90px --- # DESIGN.md — 色分け帯見出しの高速バス比較 LP（Colorful Section-Banner Highway Bus Comparison LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: 旅行・観光・ホテル ／ **雰囲気**: 情報量多め・訴求型、ポップ・元気、親しみ・手作り感 - **キーワード**: 理由別カラー帯・比較表・割引価格バッジ・写真コラージュ・緑グラデCTA・吹き出し - **地の質感**: 光沢グラデーション・ドロップシャドウ・ノート罫やコルクボード風の紙質感を多用した2010年代前半のリッチなWeb表現 - **形**: 弧を描く帯見出し、円形バッジ、角丸ピルボタン、吹き出し、斜めに貼った写真 - **温度感**: 暖色寄り。ピンク赤と橙を主に、紺・緑で落ち着きを補う ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#BE4C65` | 大見出し・強調文字のピンク赤 | 4% | 画素の実測 | | `background` | `#FEFEFE` | コンテナ内の白地 | 46% | 画素の実測 | | `background-alt` | `#FFFFFF` | ページ外側の薄グレー | 12% | 画素の実測 | | `cta` | `#93C224` | 予約ボタンの黄緑グラデ | 2% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTAボタン上の文字 | 0% | 画素の主要色に補正 | | `secondary` | `#37464A` | 理由1の紺帯・表見出し | 6% | 画素の主要色に補正 | | `accent-1` | `#DE7A2E` | 理由2・5の橙帯、割引バッジ | 4% | 推定 | | `accent-2` | `#BD4F4C` | 価格バッジ・赤帯 | 5% | 画素の主要色に補正 | | `accent-3` | `#4E8A2A` | 理由4の緑帯 | 2% | 推定 | | `tint-1` | `#CFE0EA` | 理由カード内の淡いブルー地 | 5% | 画素の実測 | | `tint-2` | `#FBFAF3` | 安さセクションのベージュ地 | 6% | 画素の主要色に補正 | | `text` | `#37464A` | 本文の濃グレー | 2% | 画素の主要色に補正 | | `line` | `#D8D3CD` | カード枠・罫線 | 3% | 画素の主要色に補正 | | `marker` | `#EBAC02` | FAQ番号・Point円の金黄 | 0% | 画素の実測 | | `cta-accessible` | `#607F18` | AA を満たす補正値（計算） | | 計算 | - 地は白、ページ外側は薄グレーで中央コンテナを浮かせる - 理由ごとに帯色を変える（紺・橙・赤紫・緑・オレンジ） - 大見出しの強調語はピンク赤、数字はさらに大きく - 価格は赤地白抜き、割引率は橙文字で目立たせる - CTAは常に黄緑グラデで他要素と被らせない - セクション内カードは帯色の淡い色を地に敷く - `button-primary` は文字 `#FFFFFF` × 背景 `#93C224` のコントラスト比が 2.1:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#607F18`、4.62:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVの極太キャッチ・数字強調 | 装飾・ディスプレイ | Dela Gothic One | 900 | 44px | 1.2 | 0.02em | | `headline-lg` | 理由帯の白抜き見出し | ゴシック | Noto Sans JP | 900 | 26px | 1.3 | 0em | | `headline-md` | ピンク赤のセクション見出し | ゴシック | Zen Kaku Gothic New | 700 | 22px | 1.4 | 0.02em | | `headline-sm` | 帯付き小見出し・FAQ質問 | ゴシック | Noto Sans JP | 700 | 15px | 1.4 | 0em | | `body-md` | 本文・説明 | ゴシック | Noto Sans JP | 400 | 13px | 1.7 | 0em | | `note` | 注釈・小さな但し書き | ゴシック | Noto Sans JP | 400 | 10px | 1.5 | 0em | | `accent` | 吹き出し・写真キャプションの手書き風 | 手書き・筆 | Yomogi | 400 | 12px | 1.4 | 0em | | `label-button` | CTAボタン文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.2 | 0.05em | - キーワードだけ文字サイズを1.5〜2倍にしてジャンプ率を出す - 価格数字は太字・大きく、単位と「〜」は小さく - 帯見出しは白文字に濃いドロップシャドウ - 本文は小さめで行間広め、情報を詰める - 吹き出し内は手書き風で口語の短文 - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。比較カードやアイコンは2列 - **本文ブロックの幅**: 画面幅の約 92% - **余白**: セクション間 48px、基本単位 8px、カード内 16px（375px 幅換算） - 全セクションを白い中央コンテナに収める - 各理由は帯見出し＋枠付きカードの1ブロック - CTAは3〜4セクションごとに繰り返す - 比較表は横スクロール可にして列数を保つ - 価格サマリーボックスをFVと終盤で再掲 ## Elevation & Depth - カード枠は1pxの線＋薄い外側シャドウ - CTAは光沢グラデと下方向シャドウで立体化 - 写真は白フチ＋影でポラロイド風に浮かせる - 帯見出しは弧形でカード上部にかぶせる ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 角丸なしの矩形。体験談は白フチ写真を少し傾けて配置 - **セクション境界**: 上辺が弧を描くカラー帯で区切る - 特長アイコンは太枠の円形 - 割引率は小さな円形バッジ - 吹き出しはピンク縁の楕円 - FAQ番号は金黄の円 ## Components - **予約CTAボタン**（`button-primary`）: 黄緑グラデのピル型、右端に黄色矢印。キーワードを大きく - **理由帯見出し**（`reason-banner`）: 弧形のカラー帯に「理由その○」の小ラベルと白抜き大見出し - **割引価格ボックス**（`price-box`）: 路線名・通常価格・割引率・赤地白抜き価格を3段で並べる - **特長円アイコン**（`feature-circle`）: 色違いの太枠円に2〜3文字のキーワードを5つ並べる - **プラン比較表**（`comparison-table`）: 紺のヘッダー列、数値を大きく。最安列は赤枠で強調 - **Point番号**（`point-badge`）: 金色メダル風の円にPoint番号 - **吹き出し**（`speech-bubble`）: ピンク縁の白い楕円に手書き風の短いコメント - **FAQ項目**（`faq-item`）: 金黄のQ円＋太字質問、下に罫線と本文 - **最安保証バナー**（`guarantee-banner`）: 金色グラデの横長バナーに保証マークと大見出し ## Do's and Don'ts **Do** - 理由ごとに帯色を変えて番号で順序を示す - 価格と割引率は必ず数字を大きく見せる - CTAは同じ見た目で複数回配置する - 体験談は写真＋吹き出し＋矢印で流れを作る - 注釈は小さく本文の下にまとめる **Don't** - CTAの緑を見出しや帯に使わない - ピンク赤を本文色にしない - 白地を減らしすぎて中央コンテナの輪郭を消さない - 帯見出しを平坦な四角にしない - 比較表の列を縦積みに崩さない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（快適さと支持率を一目で訴求）: 青空と車両写真、極太ピンク赤キャッチ、支持率の緑円バッジ 2. **価格サマリー＋CTA**（安さを即提示し予約へ誘導）: 人物切り抜きを左右に置き、割引価格ボックスと緑CTA 3. **選ばれる理由の目次**（5つの理由を俯瞰させる）: 数字強調の見出しと色違い円アイコン5つ 4. **理由1 快適さ**（設備と座席の良さを説明）: 紺帯＋設備写真グリッド、Point番号付き比較表、タブ切替 5. **理由2 安さ**（価格優位を証明）: 橙帯＋路線×プランの価格表、最安保証バナー 6. **理由3 運行エリア**（利便性を示す）: 赤紫帯＋エリア一覧と日本地図 7. **理由4・5 安全とサービス**（安心材料を補強）: 緑帯の短文ブロック、橙円バッジ3つ 8. **実績**（利用者数で信頼付与）: ピンクの矢印型導入、花柄装飾、大きな数字と車両並び写真 9. **利用シーン**（自分ごと化）: コルクボード風枠に4つのペルソナカード 10. **体験レポート**（乗車体験を疑似体験させる）: 方眼紙地に傾けた写真と吹き出し、矢印で順路 11. **お客様の声**（社会的証明）: ピンク帯見出し、ピンク見出し付きのスクロールリスト 12. **よくある質問**（不安解消）: ピンク帯見出し、Q番号円付きリスト 13. **会社紹介・最終CTA**（信頼と最後の後押し）: 社屋写真と本文、保証バナー・価格ボックス・緑CTAを再掲 ## Imagery - 明るい青空と白い車両の正面斜め写真 - 設備は寄りの物撮りを小さな矩形グリッドで - スーツケースを持つ人物の全身切り抜き - 体験談は笑顔の女性モデルが設備を使う実写 - 桜の枝や都市シルエットを帯の装飾に - ペルソナはフラットな人物イラスト - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは幅約730pxの中央コンテナ固定、SPは全幅 - 特長円5つはSPで3＋2の折返し - 価格比較表はSPで横スクロール - 体験レポートのコラージュはSPで1枚ずつ縦並び - FVの人物切り抜きはSPでは省略か縮小 ## 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-d7b517d8`（元 LP の URL から採番） - **元 LP**: http://www.489.fm/fivereasons/ - **解析に使った画像**: PC（PC版） - **確度**: 色 中（6/14 色を画素から実測）、書体 中、余白 低 - **生成**: 2026-10-16、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、掲載削除を希望される場合、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。