--- version: alpha name: Bright Yellow Flat Illustration Telecom Campaign LP description: クリーム地に鮮やかな黄色の帯とリボン型バッジを合わせ、赤い太字で「無料」などの特典を目立たせる通信サービスの引越し向け LP。黒線に黄色を差したフラットな線画イラストと、墨色のピル型ボタンで、明るく親しみやすい情報訴求型にまとめている。 colors: primary: '#FEE100' background: '#FFFBE0' surface: '#FEFEFE' cta: '#EC0632' on-cta: '#FFF2F6' secondary: '#323232' text: '#030302' accent-1: '#DB062F' tint-1: '#EFF8F6' line: '#F3F4F1' accent-2: '#0272BC' background-alt: '#FEFCE2' marker: '#FFE500' cta-accessible: '#E0062F' accent-1-accessible: '#CC062C' typography: display: fontFamily: Noto Sans JP fontSize: 44px fontWeight: 900 lineHeight: 1.2 headline-lg: fontFamily: Noto Sans JP fontSize: 30px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em headline-md: fontFamily: Noto Sans JP fontSize: 18px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 24px fontWeight: 700 lineHeight: 1.45 body-md: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 400 lineHeight: 1.8 label-button: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.02em accent: fontFamily: Montserrat fontSize: 30px fontWeight: 700 lineHeight: 1.2 rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 40px 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: 66px button-secondary: backgroundColor: '{colors.secondary}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 58px ribbon-badge: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 56px benefit-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 700px cta-band: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 340px service-tab: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 60px speech-label: backgroundColor: '{colors.tint-1}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.sm}' height: 90px marker-number: backgroundColor: '{colors.marker}' textColor: '{colors.accent-1}' typography: '{typography.display}' height: 60px blob-heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 50px phone-box: backgroundColor: '{colors.primary}' textColor: '{colors.text}' typography: '{typography.accent}' height: 600px --- # DESIGN.md — 黄×赤×墨の線画イラスト通信サービス LP（Bright Yellow Flat Illustration Telecom Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、親しみ・手作り感、情報量多め・訴求型、信頼・誠実 - **キーワード**: 鮮やかな黄色・赤い特典数字・黒線＋黄色の線画・リボン型番号バッジ・墨色ピルボタン・クリーム地の白カード - **地の質感**: フラットな単色の面だけで作る。グラデーションは見出し横の小さな丸い装飾にだけ使う - **形**: 白い角丸カード、ピル型ボタン、ツバメの尾の形のリボンバッジ、黄色いマーカー下線 - **温度感**: 暖色寄りで明るく元気 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#FEE100` | ブランドの黄色（CTA 帯・バッジ・タブ） | 10% | 画素の実測 | | `background` | `#FFFBE0` | ページ全体の地のクリーム色 | 20% | 画素の実測 | | `surface` | `#FEFEFE` | メリットカードの白 | 45% | 画素の実測 | | `cta` | `#EC0632` | 申込ボタンの赤 | 1% | 画素の実測 | | `on-cta` | `#FFF2F6` | CTA ボタン上の白文字 | 0% | 画素の実測 | | `secondary` | `#323232` | サブボタンの墨色 | 3% | 画素の実測 | | `text` | `#030302` | 見出しと本文の墨黒 | 4% | 画素の実測 | | `accent-1` | `#DB062F` | 特典を強調する赤文字 | 2% | 画素の実測 | | `tint-1` | `#EFF8F6` | 吹き出し見出しの薄いグレーグリーン | 2% | 画素の実測 | | `line` | `#F3F4F1` | カードの枠線と区切り線 | 0% | 画素の主要色に補正 | | `accent-2` | `#0272BC` | エリア外案内の青い枠と見出し | 1% | 画素の実測 | | `background-alt` | `#FEFCE2` | 非選択タブの薄い黄色 | 3% | 画素の実測 | | `marker` | `#FFE500` | 数字の下に引く黄色マーカー | 0% | 画素の主要色に補正 | | `cta-accessible` | `#E0062F` | AA を満たす補正値（計算） | | 計算 | | `accent-1-accessible` | `#CC062C` | AA を満たす補正値（計算） | | 計算 | - 地はクリーム色にし、内容は白いカードに載せる - 申込 CTA のあるセクションは全幅の黄色の帯にする - 赤は主 CTA と「無料」「OFF」など特典の文言だけに使う - サブの導線ボタンはすべて墨色にして、赤い CTA と役割を分ける - 強調したい数字の下には黄色のマーカー帯を敷く - 青は提供エリア外の案内のような例外的な情報だけに限る - `button-primary` は文字 `#FFF2F6` × 背景 `#EC0632` のコントラスト比が 4.16:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `cta-accessible`（`#E0062F`、4.55:1）を使う。 - `marker-number` は文字 `#DB062F` × 背景 `#FFE500` のコントラスト比が 4.04:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-1-accessible`（`#CC062C`、4.53:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | 「最大◯カ月無料」のような特典の大見出し | ゴシック | Noto Sans JP | 900 | 44px | 1.2 | 0.0em | | `headline-lg` | ファーストビューのキャッチやセクションのタイトル | ゴシック | Noto Sans JP | 700 | 30px | 1.4 | 0.02em | | `headline-md` | メリットカードの見出し | ゴシック | Noto Sans JP | 700 | 18px | 1.6 | 0.02em | | `headline-sm` | 赤い強調見出し | ゴシック | Noto Sans JP | 700 | 24px | 1.45 | 0.0em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 15px | 1.9 | 0.02em | | `note` | ※ で始まる注釈 | ゴシック | Noto Sans JP | 400 | 13px | 1.8 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 16px | 1.4 | 0.02em | | `accent` | 電話番号や大きな数字 | 欧文サンセリフ | Montserrat | 700 | 30px | 1.2 | 0.0em | - 見出しは中央揃えにし、2〜3 行で改行位置を整える - 特典の数字は周りの文字の約 1.5 倍の大きさにし、赤で極太にする - 注釈は ※ をぶら下げてインデントをそろえる - 本文は左揃えにし、行間は 1.9 前後でゆったり取る - セクションのタイトルは右上がりに少し傾けた極太文字と黒い帯ラベルを重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。PC はカード内を左に文章、右にイラストの 2 カラムにする - **本文ブロックの幅**: 画面幅の約 89% - **余白**: セクション間 40px、基本単位 8px、カード内 20px（375px 幅換算） - メリットカード同士は約 40px 空けて縦に並べる - カードの上端中央にリボンバッジを重ねる - CTA の帯は全幅にし、中のボタンは幅 85% にする - 1 枚のカードは見出し → 強調 → イラスト → 注釈 → ボタンの順で組む - ファーストビュー直下に、契約サービスを選ぶ 2 つのタブを置く ## Elevation & Depth - 基本はフラットにし、カードは細い枠線だけで区切る - サポートリンクのカードにだけ、薄くぼかした影をつける - 黄色い帯やバッジに影はつけない ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンはピル型。 - **写真の切り抜き**: 写真は使わず、背景を抜いた線画イラストを置く。アイコンは黄色い丸の中に入れる - **セクション境界**: 区切りは直線にし、背景色を全幅で切り替える - ボタンはすべてピル型にし、右端に「>」か外部リンクのアイコンを置く - 番号バッジは下端に切れ込みのあるリボン型にする - 吹き出しは下に小さな三角をつける - タブは上の角だけを丸める ## Components - **赤の申込ボタン**（`button-primary`）: 黄色い帯の中に置く、赤のピル型ボタン。右端に矢印を置く - **墨色のサブボタン**（`button-secondary`）: カード内で詳細へ案内する墨色のピル型ボタン - **メリット番号のリボン**（`ribbon-badge`）: 黄色いリボンに小さな「メリット」と極太の数字を入れ、カードの上端にかぶせる - **メリットカード**（`benefit-card`）: クリーム地に置く白いカード。細い枠線で囲み、中身は中央揃えにする - **黄色の CTA 帯**（`cta-band`）: 全幅の黄色い帯に、対象者の見出し、赤ボタン、注釈を入れる - **契約サービスの選択タブ**（`service-tab`）: 選択中は黄色、非選択は薄い黄色にした 2 つのタブ。下向きの矢印をつける - **条件を示す吹き出し**（`speech-label`）: 薄い色の面に条件文を入れ、下に三角をつけて特典の数字へつなぐ - **マーカー付きの特典数字**（`marker-number`）: 赤の極太数字の下に黄色い帯を敷く - **丸い装飾つきの見出し**（`blob-heading`）: 見出しの左に、黄からピンクへのグラデーションの不定形な丸を重ねる - **問い合わせの電話番号ボックス**（`phone-box`）: 黄色い太枠の中に白い面を置き、大きな電話番号と受付時間を入れる ## Do's and Don'ts **Do** - 特典は赤い大きな数字と黄色いマーカーで一目で分かるようにする - メリットは番号つきのカードで縦に並べる - イラストは黒い線画にし、黄色だけを差し色にする - 申込 CTA はページの上部と中盤の 2 か所に置く - 注釈は ※ をつけて小さめに、ただし省略せず書く **Don't** - 赤をサブボタンや装飾に使わない - 写真やリアルな画像を多用しない - 影や立体的な効果を強くしない - 黄色以外の色で大きな面を塗らない - 細い明朝体を使わない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（対象者と主な特典を伝える）: クリーム地に黒いラベル、極太のキャッチ、赤の特典数字を置き、トラックと家族の線画を添える 2. **別サービスの案内**（条件が合わない人を別の導線へ流す）: 青い見出しの枠ボックスに短い説明と矢印を入れる 3. **サービス選択と CTA**（契約中のサービスごとに申込へ誘導する）: 2 つのタブの下に黄色い帯を敷き、赤のピル型ボタンを置く 4. **メリットのタイトル**（メリットの数を印象づける）: 傾けた極太の数字タイトルに黒い帯ラベルを重ねる 5. **メリット 1〜7**（特典を一つずつ説明する）: 白いカードにリボン番号、見出し、赤の強調、線画、注釈、墨色ボタンを入れる 6. **CTA**（申込を再度促す）: 黄色い帯に赤ボタンを置き、箇条書きの注意書きを添える 7. **サポートリンク**（関連資料へ案内する）: 影つきの白いカードを並べ、外部リンクのアイコンをつける 8. **エリア外の案内**（代替のサービスを案内する）: クリーム地に本文を置き、墨色ボタンを添える 9. **お問い合わせ**（電話の窓口を示す）: 黄色い太枠のボックスに大きな電話番号を入れる ## Imagery - 黒い均一な線で描いた人物や家のイラストにし、服や屋根だけを黄色で塗る - イラストの周りに黒い線のキラキラ（4 方向の星）を散らす - アイコンは黄色い丸の中に黒い線画で描く - 背景には黄からピンクへのグラデーションの不定形な丸を装飾として置く - 街並みはごく淡い黄色のシルエットで背景に敷く - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はコンテンツ幅を約 1000px にし、中央に寄せる - PC のメリットカードは、リボンを左上に置き、左に文章、右にイラストの横組みにする - PC のファーストビューは、左にコピー、右にイラストの横並びにする - PC の CTA ボタンは幅を約 400px に抑える - PC では電話番号を 2 カラムで並べる - 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-3357b8cb`（元 LP の URL から採番） - **元 LP**: https://eonet.jp/moving/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/13 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。