--- version: alpha name: Red Dotted Frame Corporate Service Guide LP description: 赤いドット柄の地に白い角丸パネルを載せた法人向け相談窓口の案内 LP。線画イラストとクリーム地、紺ピル見出し、青いエリアボタンで明るく親しみやすく、それでいて信頼感も出している。 colors: primary: '#D20F31' background: '#FFFFFF' background-alt: '#FFFBEF' secondary: '#075577' cta: '#2E5EA8' on-cta: '#F6FEFF' dark-section: '#1C1C1C' text: '#2F2F2F' line: '#5A95AE' marker: '#FED964' accent-1: '#C10D2D' text-muted: '#555555' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-lg: fontFamily: Noto Sans JP fontSize: 27px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: M PLUS Rounded 1c fontSize: 26px fontWeight: 800 lineHeight: 1.3 letterSpacing: 0.3em headline-sm: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em label-button: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 rounded: sm: 4px md: 12px lg: 20px full: 999px spacing: unit: 8px card: 20px section: 64px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-store-search: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 76px heading-pill: backgroundColor: '{colors.secondary}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 48px service-accordion-card: backgroundColor: '{colors.background}' textColor: '{colors.secondary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 145px button-area: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.sm}' height: 60px button-online: backgroundColor: '{colors.dark-section}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 46px marker-band: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.display}' rounded: '{rounded.sm}' height: 50px floating-search-tab: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.note}' rounded: '{rounded.md}' height: 64px badge-round: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.note}' rounded: '{rounded.full}' height: 50px --- # DESIGN.md — 赤ドット地×紺見出しの法人相談窓口 LP（Red Dotted Frame Corporate Service Guide LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 信頼・誠実、ポップ・元気、親しみ・手作り感 - **キーワード**: 赤ドット地・白パネル・線画イラスト・紺ピル見出し・アコーディオン・エリア検索 - **地の質感**: 赤地に小さな濃赤の水玉。パネル内はフラットな白とクリーム。 - **形**: 大きめ角丸の白パネル、ピル型・波型の見出しラベル、角丸枠のカード - **温度感**: 赤とクリームの暖色で外枠を作り、中身は紺と青で落ち着かせている ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#D20F31` | 外枠の赤ドット地とブランド色 | 14% | 画素の実測 | | `background` | `#FFFFFF` | コンテンツパネルの地 | 44% | 画素の実測 | | `background-alt` | `#FFFBEF` | FV と特長ブロックのクリーム地 | 8% | 画素の実測 | | `secondary` | `#075577` | 見出し文字とピルラベルの紺 | 3% | 画素の実測 | | `cta` | `#2E5EA8` | 店舗検索とエリアボタンの青 | 8% | 画素の実測 | | `on-cta` | `#F6FEFF` | 青ボタン上の文字 | 1% | 画素の実測 | | `dark-section` | `#1C1C1C` | オンライン相談ボタンの黒 | 1% | 画素の実測 | | `text` | `#2F2F2F` | 本文テキスト | 2% | 画素の実測 | | `line` | `#5A95AE` | サービスカードの枠線 | 1% | 画素の実測 | | `marker` | `#FED964` | FV のキーワードを載せる黄色帯 | 1% | 画素の実測 | | `accent-1` | `#C10D2D` | FV の赤い見出し文字 | 1% | 画素の実測 | | `text-muted` | `#555555` | 注釈文字 | 1% | 推定 | - 外周はかならず赤ドット柄で囲み、中身は白パネルに載せる - 見出しは紺の文字。キーワードは紺地に白文字のピルにする - 行動を促すボタンは青ベタ、オンライン相談だけは黒ベタで差をつける - クリーム地は FV と補足説明ブロックだけに使う - 赤文字はファーストビューの主見出しに絞る ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FV の大見出し | ゴシック | Zen Kaku Gothic New | 700 | 34px | 1.5 | 0.02em | | `headline-lg` | セクション見出し（紺） | ゴシック | Noto Sans JP | 700 | 27px | 1.5 | 0.03em | | `accent` | ピル内のキーワード見出し | 丸ゴシック | M PLUS Rounded 1c | 800 | 26px | 1.3 | 0.3em | | `headline-sm` | カード見出しや小見出し | ゴシック | Noto Sans JP | 500 | 18px | 1.5 | 0.02em | | `body-md` | 本文（中央揃え） | ゴシック | Noto Sans JP | 400 | 16px | 1.9 | 0.02em | | `label-button` | エリアボタンと CTA の文字 | ゴシック | Noto Sans JP | 700 | 18px | 1.4 | 0.1em | | `note` | 注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | - 見出しは 2〜3 行に分けて中央揃えにする - ピル見出しは字間を大きく空けて、1 文字ずつ見せる - 本文は中央揃え。補足ブロックだけ左揃えにする - 注釈番号は上付きの小さい ※ で添える - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。左右に赤い外枠を約 30px 残す - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 白パネルは画面幅の約 88% で中央に置く - カードとボタンはパネル内でさらに約 72% 幅にそろえる - エリアボタンは 10px 間隔で縦に積む - セクション見出しの下は 24〜32px 空ける ## Elevation & Depth - 影はほぼ使わずフラットにする - 白パネルは赤地とのコントラストで浮いて見せる - 固定の検索タブは右端に寄せ、角丸ブロックで重ねる ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 20px。ボタンはピル型。 - **写真の切り抜き**: 線画イラストは切り抜き。人物は角丸の淡いベージュ枠に入れる - **セクション境界**: FV は斜めの赤とクリームの面で区切る。以降は白パネル内で余白だけで区切る - サービスカードは 1.5px の青線と 12px 角丸 - エリアボタンは角丸ほぼゼロの青い矩形 - オンライン相談 CTA は黒のピル型 - キーワード見出しは紺のピル型か波形 ## Components - **店舗検索 CTA**（`button-store-search`）: 青いピル型の 2 段ボタン。上段が太字のメイン、下段が小さい補足。 - **紺ピル見出し**（`heading-pill`）: 紺地に白で字間を広げたキーワード。横に放射線の装飾を添える。 - **サービスカード**（`service-accordion-card`）: 青枠の角丸カード。上にロゴ、区切り線の下に一言説明と丸プラスアイコン。 - **エリアボタン**（`button-area`）: 青ベタの矩形。地域名を中央に置き、右端に白い山形矢印。 - **オンライン相談ボタン**（`button-online`）: 黒いピル型。先頭にヘッドセットのアイコン。 - **黄色マーカー帯**（`marker-band`）: FV のキーワードを載せる角丸の黄色帯。 - **追従検索タブ**（`floating-search-tab`）: 右端に固定する青いタブ。店舗アイコンと 2 行の文字を入れる。 - **丸バッジ**（`badge-round`）: 白丸を黒線で縁取り、短い訴求を 3 行で入れて斜めに置く。 ## Do's and Don'ts **Do** - 外周の赤ドット枠をページの最後まで続ける - イラストは黒い線画に、ベージュ・赤・紺を少し差す程度に塗る - 見出しは紺の文字とピルラベルを組み合わせる - 注釈は ※番号でページ末尾にまとめる - 検索導線は地域ごとのボタンで分ける **Don't** - 写真を大きく使わない。イラスト中心にする - グラデーションや強い影を使わない - 赤を本文や見出しに多用しない - 白パネルを外枠いっぱいまで広げない - ボタンの色を青と黒以外に増やさない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（悩みの提起と相談窓口の存在を伝える）: クリーム地を斜めの赤で切り、大見出し・人物・店舗の線画を配置。紺の FV 用 CTA と丸バッジを置く。 2. **メリット**（店舗で相談する価値を伝える）: 白パネルに紺見出しとピルを置き、中央揃えの本文と人物イラストを続ける。 3. **補足特長**（Web 画面越しの案内方法を説明する）: クリーム地のブロックに左揃えの見出し、線画、本文を入れる。 4. **サービス一覧**（提案できるサービスを網羅して見せる）: 青枠の角丸カードを縦に並べる。ロゴ、一言説明、プラスアイコンで構成。 5. **店舗検索**（地域から近くの店舗を探してもらう）: 紺見出しと波形ピルの下に、青いエリアボタンを縦一列に並べる。 6. **目的別アコーディオン**（検討内容ごとに案内を分ける）: 青枠の角丸ボタンに見出しとプラスアイコンを入れる。 7. **問い合わせ**（近くに店舗がない人の受け皿）: オンライン相談は黒ピルボタン、電話はフリーダイヤルのマークと大きな番号で見せる。 8. **注釈**（条件や補足を明記する）: 小さい文字の ※ リストを角丸の白パネル下端に置く。 ## Imagery - 黒の均一な線で描くフラットな人物イラスト - 塗りはベージュ・赤・紺・グレーに限る - 店舗や街並みは赤のシルエットや線画で描く - 人物の吹き出しやタブレットで相談シーンを示す - 背景には小さな水玉を規則的に敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC は白パネルを中央約 85% 幅にし、上部にアンカーナビを置く - サービスカードは PC で 3 カラムのグリッドにする - エリアボタンは PC では地図と吹き出し状のラベルに置き換える - 問い合わせは PC でオンラインと電話を 2 カラムに並べる - FV は PC で横長にし、店舗イラストを左、コピーを中央に置く ## 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-607cdcc1`（元 LP の URL から採番） - **元 LP**: https://www.ntt.com/business/lp/business-docomoshop/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/12 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。