--- version: alpha name: Vivid Crimson Platform Service LP description: 鮮やかな真紅と白を大きく交互に切り替える、オンラインサービス紹介用の LP。英小文字の丸い欧文見出しに日本語の小見出しを添え、角丸カードやピル型ボタン、ドット柄の淡いピンク地を組み合わせる。ポップで今っぽいが、清潔で信頼感もある印象。 colors: primary: '#DA0E43' on-primary: '#FEEFF5' background: '#FFFFFF' background-alt: '#FFFBFB' surface: '#FFFFFF' tint-1: '#EEEFF1' tint-2: '#FCFDFE' text: '#1B1D26' text-body: '#4A4D57' text-muted: '#9B9EA8' accent-1: '#DC0738' cta: '#D90E43' on-cta: '#FFFFFF' accent-2: '#FEDD34' line: '#E7E9E9' typography: display: fontFamily: Quicksand fontSize: 40px fontWeight: 700 lineHeight: 1.1 headline-lg: fontFamily: Dela Gothic One fontSize: 52px fontWeight: 400 lineHeight: 1.0 headline-md: fontFamily: Noto Sans JP fontSize: 20px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em headline-sm: fontFamily: Noto Sans JP fontSize: 14px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0.02em body-md: fontFamily: Noto Sans JP fontSize: 12px fontWeight: 400 lineHeight: 1.9 letterSpacing: 0.03em note: fontFamily: Noto Sans JP fontSize: 10px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.02em accent: fontFamily: Roboto fontSize: 36px fontWeight: 700 lineHeight: 1.0 label-button: fontFamily: Noto Sans JP fontSize: 13px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.05em rounded: sm: 4px md: 12px lg: 16px full: 999px spacing: unit: 8px card: 16px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.body-md}' heading: textColor: '{colors.text}' typography: '{typography.headline-lg}' button-pill: backgroundColor: '{colors.cta}' textColor: '{colors.on-cta}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px button-pill-inverse: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.label-button}' rounded: '{rounded.full}' height: 44px section-title: textColor: '{colors.primary}' typography: '{typography.display}' height: 70px case-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.lg}' height: 360px tag-chip: backgroundColor: '{colors.tint-2}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 22px stat-badge: backgroundColor: '{colors.background}' textColor: '{colors.accent-1}' typography: '{typography.accent}' rounded: '{rounded.full}' height: 120px icon-tile: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 76px flow-card: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-md}' rounded: '{rounded.lg}' height: 230px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.accent-1}' typography: '{typography.headline-sm}' height: 110px compare-table: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' typography: '{typography.note}' rounded: '{rounded.sm}' height: 130px --- # DESIGN.md — 真紅×白の丸ゴシック系サービス紹介 LP（Vivid Crimson Platform Service LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: ポップ・元気、クール・先進的、清潔・爽やか - **キーワード**: 真紅と白・英小文字の丸い見出し・角丸カード・ドット柄の淡いピンク地・線画アイコン・スマホのモックアップ - **地の質感**: 基本はフラットな面。事例セクションと FAQ セクションだけ、淡いピンクのドット柄を地に敷く。ファーストビューと最下部には、上下反転させた巨大な英字ロゴの帯を置く。 - **形**: 角丸 12〜16px のカード、ピル型ボタン、正方形の角丸線画アイコン枠、円形の数値バッジ - **温度感**: 暖色の赤を主役にした、元気で熱量のある印象。白い余白を広く取って清潔感とのバランスを取る。 ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#DA0E43` | ブランドの真紅。ヒーロー・機能紹介・流れ・お問い合わせの帯に使う | 22% | 画素の実測 | | `on-primary` | `#FEEFF5` | 赤い地の上の白い文字・線画アイコン | 3% | 画素の実測 | | `background` | `#FFFFFF` | 基本の白地 | 40% | 画素の実測 | | `background-alt` | `#FFFBFB` | 事例・FAQ の淡いピンクのドット柄の地 | 12% | 画素の実測 | | `surface` | `#FFFFFF` | カード・FAQ 箱・流れカードの白い面 | 8% | 画素の実測 | | `tint-1` | `#EEEFF1` | モックアップ画像の帯の淡いグレー地 | 6% | 画素の実測 | | `tint-2` | `#FCFDFE` | ハッシュタグ型タグの淡いグレーの面 | 1% | 画素の実測 | | `text` | `#1B1D26` | 見出し・カードタイトルの濃い墨紺 | 2% | 画素の実測 | | `text-body` | `#4A4D57` | 本文のグレー | 3% | 推定 | | `text-muted` | `#9B9EA8` | 注釈・サブ名の薄いグレー | 0% | 画素の実測 | | `accent-1` | `#DC0738` | 強調文字の赤。見出し内のキーワードや特長見出しに使う | 1% | 画素の主要色に補正 | | `cta` | `#D90E43` | ピル型ボタンの面 | 1% | 画素の実測 | | `on-cta` | `#FFFFFF` | ボタン上の白文字 | 0% | 画素の主要色に補正 | | `accent-2` | `#FEDD34` | NEW バッジや星の黄色 | 0% | 画素の実測 | | `line` | `#E7E9E9` | FAQ の点線や掲載情報の区切り線 | 0% | 画素の主要色に補正 | - 真紅の帯と白（またはピンクのドット柄）のセクションを交互に並べ、リズムを作る - 赤い地では文字・アイコンをすべて白にし、白いカードを浮かせる - 白い地では見出しの英字とキーワードだけを赤にし、本文は墨紺〜グレーにする - 事例と FAQ は淡いピンクのドット柄の地に、白いカードを載せる - 黄色は NEW バッジなど、ごく小さな面だけに使う - 比較表では自社の列だけを赤い面＋白文字にして目立たせる ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | セクションの英小文字見出し（丸く幾何学的な欧文） | 欧文サンセリフ | Quicksand | 700 | 40px | 1.1 | 0.0em | | `headline-lg` | ヒーロー下の大きな英字コンセプト（赤・角張った書体） | 装飾・ディスプレイ | Dela Gothic One | 400 | 52px | 1.0 | 0.0em | | `headline-md` | 日本語の主見出し（2 行・太字） | ゴシック | Noto Sans JP | 700 | 20px | 1.5 | 0.02em | | `headline-sm` | 英字見出しの下に置く日本語ラベルや、カードのタイトル | ゴシック | Noto Sans JP | 700 | 14px | 1.5 | 0.02em | | `body-md` | 本文 | ゴシック | Noto Sans JP | 400 | 12px | 1.9 | 0.03em | | `note` | 注釈・タグ・サブ名 | ゴシック | Noto Sans JP | 400 | 10px | 1.6 | 0.02em | | `accent` | 数値（継続率など）や流れの番号 | 欧文サンセリフ | Roboto | 700 | 36px | 1.0 | 0.0em | | `label-button` | ボタンの文字 | ゴシック | Noto Sans JP | 700 | 13px | 1.2 | 0.05em | - 各セクションは、赤（赤地では白）の英小文字見出しを中央に置き、その下に小さな日本語ラベルを添える - 日本語の見出しは 2 行に分け、キーワードだけを赤にする - 本文は 12px 前後で、行間を 1.9 程度と広めに取る - 数値は欧文の太字で大きくし、単位は小さくする - 特長の番号には、斜線入りの細い赤字で FEATURE と番号を重ねる - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SP は 1 カラム。事例カードのみ 2 カラムのグリッド - **本文ブロックの幅**: 画面幅の約 88% - **余白**: セクション間 72px、基本単位 8px、カード内 16px（375px 幅換算） - セクションの上下に 64〜80px の余白を取る - 事例カードは 2 列で、gap は 12px - 特長は写真→赤い見出し→本文の縦積みを 3 回繰り返す - 機能アイコンは 4 列グリッドで並べ、下にラベルを置く - 流れは縦長の白カードを積み、カードの間にシェブロン（V 字矢印）を置く ## Elevation & Depth - 事例カードやボタンには、淡い影（0 4px 12px rgba(0,0,0,.08)）を付ける - ピル型ボタンの下には、赤みのある柔らかな影を付ける - 流れのカードは赤地の上に影なしで置く ## Shapes - **角丸**: 小 4px ／ 中 12px ／ 大 16px。ボタンはピル型。 - **写真の切り抜き**: 写真は角丸 12px の横長に切り抜く。デバイス画像はモックアップの形のまま見せる - **セクション境界**: セクション境界は水平な直線で、色面を切り替えるだけ。最上部と最下部には上下反転した英字の帯を置く - ボタンはすべてピル型にする - アイコンは白線の角丸の正方形枠に入れる - 数値バッジは赤い線の円に、吹き出し状の尾を付ける - タグは角丸 4px の淡いグレーの面にする ## Components - **ピル型ボタン**（`button-pill`）: 赤い面に白い文字を載せた、幅 200px 前後のボタン。影付き - **白抜きのピル型 CTA**（`button-pill-inverse`）: 赤い地の上に置く、白い面に赤い文字のボタン - **英字見出し＋日本語ラベル**（`section-title`）: 中央揃え。丸い英小文字を大きく置き、その下に小さな日本語を添える - **事例カード**（`case-card`）: 横長の画像、丸いアイコン付きのタイトル、ハッシュタグ型のタグを縦に並べた白いカード - **ハッシュタグ型タグ**（`tag-chip`）: # から始まる小さなグレーのチップ - **数値バッジ**（`stat-badge`）: 赤い線の円の中に、星・ラベル・大きな数値を入れ、吹き出しの尾を付ける - **線画アイコン枠**（`icon-tile`）: 赤地に白線の角丸の正方形を置き、中に機能のアイコンを入れる。下にラベルを付ける - **流れのカード**（`flow-card`）: 赤地に白いカードを置き、中に赤い線画アイコン・赤い番号・見出し・説明を入れる - **FAQ の項目**（`faq-item`）: 赤丸の Q アイコンの横に赤い質問文、その下に回答を置く。項目の間は点線で区切る - **比較表**（`compare-table`）: 他社の列はグレー、自社の列は赤い面に白い文字にする ## Do's and Don'ts **Do** - 赤と白の帯を交互に置き、メリハリを付ける - 英字見出しは丸い小文字にし、日本語ラベルと組で使う - カード・写真・ボタンは角丸に統一する - アイコンは細い線画にそろえる - 強調はキーワード単位の赤文字だけで行う **Don't** - 赤以外の強い色を主役にしない - 角張ったボタンや鋭い角のカードを使わない - 太いグラデーションや装飾の多い影を使わない - 本文を赤にしない - 塗りつぶしのアイコンと線画のアイコンを混ぜない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ファーストビュー**（サービスの世界観を一目で伝える）: 全面を真紅にし、中央にスマホのモックアップ、周りに跳ねる人物の切り抜きを散らす。下端には反転した英字の帯を置く 2. **実績の数値**（信頼性を示す）: 円形の数値バッジを置き、下に 2 行の見出し・短い説明・注釈を続ける 3. **コンセプト**（サービスの概要を説明する）: 赤い巨大な英字を 3 行で置き、日本語の小見出しと本文を添える 4. **導入事例**（利用例の幅を見せる）: ピンクのドット柄の地に 2 列の事例カードを並べ、最後にもっと見るボタンを置く 5. **特長**（強みを 3 つ伝える）: 番号付きの写真、赤い 2 行の見出し、本文を縦に繰り返す 6. **機能一覧**（できることを網羅的に示す）: グレー地にデバイスの画像を置き、続く赤地に白い線画アイコンの 4 列グリッドと説明を並べる 7. **管理画面**（運営側の機能を示す）: PC・タブレット・スマホの画像を並べ、赤地にアイコン 4 つと説明を置く 8. **料金比較**（コストの優位性を示す）: かぎかっこ型の枠で見出しを囲み、他社と比べる表を置く 9. **導入の流れ**（開始までの手順を示す）: 赤地に白いカードを 4 枚積み、カードの間にシェブロンを置く 10. **よくある質問**（不安を解消する）: ドット柄の地に白い箱を置き、Q アイコン付きの項目を並べる。下にもっと見るボタンを置く 11. **掲載情報**（第三者による評価を示す）: ロゴ枠と短い文を横に並べ、項目の間を線で区切ったリストにする 12. **お問い合わせ CTA**（資料請求やデモの利用へ誘導する）: 赤く重ねたスマホ画面の画像を背景にし、白文字の見出しと白抜きのピル型ボタンを置く。下端に反転した英字の帯を置く ## Imagery - 人物は白抜きの切り抜きで、躍動的なジャンプのポーズを赤地に散らす - スマホ・PC のモックアップでアプリ画面を見せる - 特長の写真は明るいオフィス・手元の写真で、白っぽく飛ばした露出にする - アイコンは 2px 程度の線画で、単色の白か赤にする - 背景の写真は赤のオーバーレイで単色化する - 反転・切断した巨大な英字の帯を装飾に使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PC はヘッダーにテキストのナビゲーションを並べる - 事例カードは PC で 4 列にする - 特長は PC で 3 列横並びのカードにする - 機能・管理画面は PC で左右 2 分割にし、画像と赤い面を左右交互に配置する - 流れのカードは PC で横長の 1 行にし、アイコン・番号・説明を横に並べる - コンセプトは PC で英字と本文を 2 カラムに並べる ## 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-f436aaaf`（元 LP の URL から採番） - **元 LP**: https://www.fan.salon/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（11/15 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。