--- version: alpha name: Pop Comic Green Yellow Mobile Campaign LP description: 鮮やかな緑とレモン黄の地色を交互に切り替え、黒い太枠と影付きのカードを重ねる構成。ドット柄や縁取りを付けた極太見出しで漫画のような元気さを出す。価格は巨大な数字に黄色マーカーを引き、紫のピル型CTAで申込へ誘導する格安通信のキャンペーンLP。 colors: primary: '#34C85A' background: '#FEFFFE' background-alt: '#B2F4C4' secondary: '#FFFEA1' cta: '#6D2DFE' on-cta: '#FFFFFF' text: '#2E2E26' accent-1: '#FF8CA3' accent-2: '#FDE900' accent-3: '#F07818' marker: '#FDEA02' surface: '#F6F7F9' tint-1: '#FFFFD0' text-muted: '#847C8D' accent-3-accessible: '#BC5A0C' typography: display: fontFamily: Dela Gothic One fontSize: 90px fontWeight: 400 lineHeight: 1.0 headline-lg: fontFamily: Dela Gothic One fontSize: 30px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0.05em headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em accent: fontFamily: Roboto fontSize: 64px fontWeight: 900 lineHeight: 1.0 letterSpacing: -0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.03em body-md: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 500 lineHeight: 1.7 letterSpacing: 0.02em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 label-button: fontFamily: Noto Sans JP fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 16px lg: 24px 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-primary: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 40px benefit-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 360px nav-icon-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 95px price-marker: backgroundColor: '{colors.marker}' textColor: '{colors.text}' typography: '{typography.accent}' height: 70px speech-label: backgroundColor: '{colors.text}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 28px circle-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-3}' typography: '{typography.headline-md}' rounded: '{rounded.full}' height: 120px step-card: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.headline-md}' height: 340px faq-accordion: backgroundColor: '{colors.background}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 46px --- # DESIGN.md — 緑×レモン黄のポップ漫画風通信キャンペーンLP（Pop Comic Green Yellow Mobile Campaign LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、力強い・インパクト、情報量多め・訴求型、親しみ・手作り感 - **キーワード**: ポップ・漫画風・太枠・ドット柄・マーカー強調・キャンペーン - **地の質感**: フラットな単色面。黒い太枠とずらした影で立体感を出す。FVだけ波線柄とドット柄の文字を使う - **形**: 角が少し丸い太枠カード、ピル型ボタン、円形の囲み、吹き出し型ラベル - **温度感**: 明るく元気で温かい。若い層に向けて親しみやすい ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#34C85A` | ブランドの緑（FV背景・強調文字） | 6% | 画素の実測 | | `background` | `#FEFFFE` | カード面の白 | 37% | 画素の実測 | | `background-alt` | `#B2F4C4` | ミントの地（セクション背景） | 9% | 画素の実測 | | `secondary` | `#FFFEA1` | レモン黄の地（セクション背景） | 17% | 画素の実測 | | `cta` | `#6D2DFE` | 主CTAの紫 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | CTA上の白文字 | 0% | 画素の主要色に補正 | | `text` | `#2E2E26` | 見出しや数字、枠線の墨色 | 4% | 画素の実測 | | `accent-1` | `#FF8CA3` | 通常特典の見出し帯のピンク | 1% | 画素の実測 | | `accent-2` | `#FDE900` | 週替わり特典の見出し帯の黄 | 1% | 画素の実測 | | `accent-3` | `#F07818` | 価格を強調するオレンジ | 0% | 推定 | | `marker` | `#FDEA02` | 数字の下に引くマーカーの黄 | 0% | 画素の実測 | | `surface` | `#F6F7F9` | 料金表のグレー面 | 10% | 画素の実測 | | `tint-1` | `#FFFFD0` | 週替わり特典カード内のクリーム色 | 2% | 画素の主要色に補正 | | `text-muted` | `#847C8D` | 注釈のグレー文字 | 1% | 画素の主要色に補正 | | `accent-3-accessible` | `#BC5A0C` | AA を満たす補正値（計算） | | 計算 | - セクションの地はミントとレモン黄を交互に切り替え、FVだけ濃い緑にする - 情報は白いカードに載せ、墨色の太枠と影で地色から浮かせる - 主CTAは紫だけにする。他のセクションに紫の面は使わない - 価格は墨色かオレンジの巨大数字にし、黄色マーカーを下に敷く - カードの見出し帯は種類ごとにピンク・黄・緑・青で色分けする - 注釈はグレーの小さい文字にまとめる - `circle-badge` は文字 `#F07818` × 背景 `#FEFFFE` のコントラスト比が 2.83:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-3-accessible`（`#BC5A0C`、4.55:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | FVのロゴ風巨大見出し（ドット柄・縁取り・影付き） | 装飾・ディスプレイ | Dela Gothic One | 400 | 90px | 1.0 | 0.0em | | `headline-lg` | セクション見出し（白文字＋墨の縁取りと影） | 装飾・ディスプレイ | Dela Gothic One | 400 | 30px | 1.3 | 0.05em | | `headline-md` | カード内の見出しや導入文 | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.03em | | `accent` | 特典額や料金の巨大数字 | 欧文サンセリフ | Roboto | 900 | 64px | 1.0 | -0.02em | | `headline-sm` | 見出し帯や項目名 | ゴシック | Noto Sans JP | 700 | 16px | 1.5 | 0.03em | | `body-md` | 本文・FAQの質問 | ゴシック | Noto Sans JP | 500 | 14px | 1.7 | 0.02em | | `note` | ※から始まる注釈 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 15px | 1.2 | 0.05em | - セクション見出しは白文字に墨の縁取りと右下の影を付け、漫画のロゴ風にする - 数字は本文の4倍以上にし、単位の「円」「相当」は小さく右に添える - 見出しの前置きは「＼ ／」の斜線で挟み、短い一行にする - 強調したい語だけを緑やオレンジに変え、太字を保つ - 本文は中太ゴシックで行間を1.7前後にとる - 注釈は※で始め、カードの下にまとめる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。ナビカードと特典の比較は2カラム - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 64px、基本単位 8px、カード内 20px（375px 幅換算） - 各セクションは地色の帯で区切り、上下に60px前後の余白をとる - カードは左右に約6%の余白を残し、中央に置く - 特典カードの間は「＋」の丸アイコンでつなぐ - ナビ用のアイコンカードは2×2のグリッドに並べる - 料金カードは大きな白いカードの中に入れ子で重ねる ## Elevation & Depth - カードは墨色の太枠（2〜3px）に、右下へずらした墨のベタ影（4〜6px）を付ける - ボタンにも下方向に濃い影を付け、押せる立体感を出す - ぼかしたドロップシャドウは使わない - 白い角丸パネルは枠も影もない平置きでもよい ## Shapes - **角丸**: 小 4px ／ 中 16px ／ 大 24px。ボタンはピル型。 - **写真の切り抜き**: 写真は使わない。フラットなイラストとアイコンを切り抜かずに置く - **セクション境界**: 直線で地色を切り替える - 特典や料金のカードは角丸を小さく（0〜4px）して太枠で囲む - コミコミやFAQのパネルは角丸を大きく（16〜24px）する - 強調ワードは緑の線で囲んだ白い円に入れる - STEP番号は墨色の四角いタブにして、カード上辺にかぶせる - 吹き出しラベルは角丸の帯に下向きのしっぽを付ける ## Components - **主CTAボタン**（`button-primary`）: 紫のピル型。白い太字に右矢印を添え、下に墨の影を付ける - **サブボタン**（`button-outline`）: 白地に紫の枠と紫の文字を置くピル型。下に紫の影を付ける - **特典カード**（`benefit-card`）: 色帯の見出しを持つ白カード。太枠とベタ影で囲む - **ナビ用アイコンカード**（`nav-icon-card`）: 角丸の白カードにアイコン・ラベル・下向き矢印を縦に並べる。2×2で配置する - **マーカー付き価格**（`price-marker`）: 巨大な数字の下半分に黄色マーカーを敷き、単位を小さく添える - **吹き出しラベル**（`speech-label`）: 短い訴求文を入れる、くすんだ青か墨色の角丸吹き出し - **円形強調バッジ**（`circle-badge`）: 緑の線で囲んだ白い円の中に、オレンジの太字を2行で入れる - **STEPカード**（`step-card`）: 上辺中央に墨色のSTEPタブを置いた太枠カード。キャラクターのイラストを添える - **FAQアコーディオン**（`faq-accordion`）: 角丸パネルの中に、Q.で始まる質問を区切り線で並べる。右端に紫の＋と「開く」を置く ## Do's and Don'ts **Do** - 地色はミントとレモン黄を交互に切り替え、セクションごとにリズムを付ける - カードには墨の太枠とずらしたベタ影を必ず付ける - 数字は極太の大サイズにし、マーカーを引いて一目で伝わるようにする - 主CTAは紫のピル型に統一する - アイコンは墨の線画に黄緑の塗りを差したフラットなタッチでそろえる **Don't** - ぼかしたソフトな影やグラデーションを使わない - 落ち着いたくすみ色や細い明朝体を使わない - CTA以外に紫を多用しない - 写真の人物やリアルな物撮りを入れない - 数字を本文と同じサイズで済ませない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（キャンペーン名を強く印象付け、特典の構成を見せる）: 緑の波線柄の地に雲形の白い吹き出しを置く。ドット柄の巨大ロゴ見出しに、踊る人物イラストを添える。特典カード2枚を＋でつなぎ、紫のCTAを置く 2. **通常特典**（常設の特典額を伝える）: ミントの地に、ピンクの見出し帯を持つ太枠カードを置く。巨大な数字にマーカーを敷く 3. **週替わり特典**（期間限定の特典で今すぐの申込を促す）: 黄色の見出し帯とクリーム色の地。ピンク枠の内側に開催中バッジと期間を置き、詳細ボタンとサブボタンを並べる 4. **ページ内ナビ**（知りたい情報へ誘導する）: レモン黄の地に、アイコン付きの角丸カードを2×2で並べる 5. **料金プラン**（料金の安さとプランの違いを示す）: 大きな白い角丸カードの中に、プランごとに色の違う見出し帯（緑・青）の太枠カードを入れる。グレーの料金表と円柱イラストを使う 6. **特徴・コミコミ**（含まれるサービスと条件のなさを訴求する）: 白パネルを十字の区切り線で4分割する。その下に、円形バッジを並べたクリーム色とミント色のパネルを置く 7. **申込ステップ**（乗り換えの手順が簡単だと示す）: STEPタブ付きの太枠カードを縦に2つ並べる。キャラクターのイラストを添える 8. **よくある質問**（不安を解消する）: 影付きの角丸パネルに、Q.の質問を区切り線で並べるアコーディオン ## Imagery - 人物は太い墨の線と平塗りで描いた漫画調のイラストにし、ジャンプなど躍動感のあるポーズにする - 季節のモチーフ（カニやスイカなど）を小さく配置し、キラキラの星を添える - アイコンは墨の線画に黄緑または緑の差し色を入れたフラットなもの - 料金のデータ量は円柱の図形で表現する - 黄緑のマスコットキャラクターで親しみを出す - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCでは中央に約70%幅のコンテンツ列を置き、左右の地色は全幅にする - FVのロゴ見出しは横長に縮め、高さを抑える - ナビカードは4列横並びにする - 料金プランとSTEPカードは2カラムで横に並べ、STEPの間に矢印を置く - コミコミのパネルは4列横並びにし、円形バッジはパネル内で横に並べる ## 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-f8835108`（元 LP の URL から採番） - **元 LP**: https://www.linemo.jp/lp/001/ - **解析に使った画像**: 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/）からご連絡ください。