--- version: alpha name: Bright Blue Flat Illustration Web Tool LP description: 白地にロイヤルブルーを主役にした、無料ウェブツール紹介LP。淡い水色のファーストビュー、紺・赤・青の線画人物イラスト、影付きの白カード、薄い英字ラベル付きの見出しで、親しみと信頼を両立させる。各セクションの末尾に同じ青の角丸CTAを繰り返す。 colors: primary: '#4468E2' cta: '#4468E2' on-cta: '#F5FBFE' background: '#FFFFFF' background-alt: '#E7F8FF' text: '#3A3A3A' text-muted: '#555555' tint-1: '#DAE2FA' accent-1: '#E9535B' accent-2: '#44B6E3' accent-3: '#1A0E64' text-body: '#939393' line: '#E9EAEA' surface: '#FEFEFE' text-body-accessible: '#767676' accent-2-accessible: '#187CA3' typography: display: fontFamily: Zen Kaku Gothic New fontSize: 34px fontWeight: 900 lineHeight: 1.4 letterSpacing: 0.08em headline-lg: fontFamily: Zen Kaku Gothic New fontSize: 24px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.1em accent: fontFamily: Archivo Black fontSize: 18px fontWeight: 900 lineHeight: 1.1 letterSpacing: 0.03em headline-sm: fontFamily: Zen Kaku Gothic New fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0.08em body-md: fontFamily: Zen Kaku Gothic New fontSize: 13px fontWeight: 500 lineHeight: 2.0 letterSpacing: 0.12em note: fontFamily: Zen Kaku Gothic New fontSize: 11px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0.08em label-button: fontFamily: Zen Kaku Gothic New fontSize: 15px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0.08em rounded: sm: 4px md: 8px lg: 12px full: 999px spacing: unit: 8px card: 20px section: 72px components: page: backgroundColor: '{colors.background}' textColor: '{colors.text-body}' 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.md}' height: 45px button-inverse: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 45px button-outline: backgroundColor: '{colors.background}' textColor: '{colors.primary}' typography: '{typography.label-button}' rounded: '{rounded.md}' height: 46px heading-en-label: textColor: '{colors.text}' typography: '{typography.headline-lg}' height: 70px card-reason: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 440px card-feature-badge: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 170px card-voice: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.body-md}' rounded: '{rounded.md}' height: 180px faq-item: backgroundColor: '{colors.surface}' textColor: '{colors.text}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 56px step-card: backgroundColor: '{colors.surface}' textColor: '{colors.primary}' typography: '{typography.headline-sm}' rounded: '{rounded.md}' height: 245px badge-circle: backgroundColor: '{colors.accent-2}' textColor: '{colors.on-cta}' typography: '{typography.headline-sm}' rounded: '{rounded.full}' height: 96px --- # DESIGN.md — 青×白のフラットイラスト無料ウェブツールLP（Bright Blue Flat Illustration Web Tool LP） AI コーディングツール（Claude Code / Cursor / v0 など）に渡して「このトンマナで LP を作る」ための設計書です。 上の YAML（トークン）が正、本文はその使い方の説明です。 **元 LP のロゴ・写真・コピー・商品名は含みません。生成する LP でも流用しないでください。** 公開されている LP の見た目を独自に分析した非公式の資料で、元 LP の運営企業・制作会社とは関係ありません。 ## Overview - **業種**: BtoB・SaaS・ITサービス ／ **雰囲気**: 清潔・爽やか、信頼・誠実、シンプル・ミニマル、ポップ・元気 - **キーワード**: ロイヤルブルー・白カード＋ソフトシャドウ・線画フラットイラスト・薄い英字ラベル・繰り返しCTA - **地の質感**: フラットでノイズのない白地。カードにやわらかい影をつけて浮かせる - **形**: 小〜中の角丸長方形。ボタンは角丸8px程度でピルにはしない - **温度感**: やや寒色寄りの爽やかさ。赤のアクセントで温かみを足す ## Colors | Token | HEX | 役割 | 面積の目安 | 値の出どころ | |---|---|---|---|---| | `primary` | `#4468E2` | ブランドの青。CTA・見出しの強調語・最終セクションの地 | 10% | 画素の実測 | | `cta` | `#4468E2` | 主CTAボタンの面 | 2% | 画素の実測 | | `on-cta` | `#F5FBFE` | CTAボタンの文字 | 0% | 画素の実測 | | `background` | `#FFFFFF` | ページの基本の地 | 58% | 画素の実測 | | `background-alt` | `#E7F8FF` | ファーストビューの淡い水色の地 | 5% | 画素の実測 | | `text` | `#3A3A3A` | 見出し・本文の濃いグレー | 2% | 画素の実測 | | `text-muted` | `#555555` | 説明文の中間グレー | 1% | 推定 | | `tint-1` | `#DAE2FA` | 見出し上の英字ラベル・吹き出しの薄青 | 1% | 画素の実測 | | `accent-1` | `#E9535B` | 英字サブコピー・イラストの赤 | 0% | 画素の実測 | | `accent-2` | `#44B6E3` | 無料・有料バッジとFVの丸バッジの水色 | 1% | 画素の実測 | | `accent-3` | `#1A0E64` | 線画イラストの紺 | 2% | 画素の実測 | | `text-body` | `#939393` | お客様の声のタグの面グレー | 0% | 画素の実測 | | `line` | `#E9EAEA` | カードの細い枠線 | 0% | 画素の主要色に補正 | | `surface` | `#FEFEFE` | カード面 | 15% | 画素の実測 | | `text-body-accessible` | `#767676` | AA を満たす補正値（計算） | | 計算 | | `accent-2-accessible` | `#187CA3` | AA を満たす補正値（計算） | | 計算 | - 地はほぼ白。ファーストビューだけ淡い水色、最後の締めCTAだけ青ベタにする - 見出しは黒文字の一部の語だけを青にして強調する - 英字のサブコピーは赤で太く入れ、青と対比させる - バッジは水色、タグはグレーにして青CTAと競合させない - 青ベタの上ではボタンを白地＋青文字に反転させる - イラストは紺・赤・薄青の3色に限定する - `page` は文字 `#939393` × 背景 `#FFFFFF` のコントラスト比が 3.07:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `text-body-accessible`（`#767676`、4.54:1）を使う。 - `badge-circle` は文字 `#F5FBFE` × 背景 `#44B6E3` のコントラスト比が 2.22:1 で、WCAG AA（4.5:1）に届かない（元 LP の配色）。通常サイズの文字で AA を満たすなら `accent-2-accessible`（`#187CA3`、4.52:1）を使う。 ## Typography | Token | 用途 | 書体の分類 | 代替 Web フォント | ウェイト | サイズ（375px 幅） | 行間 | 字間 | |---|---|---|---|---|---|---|---| | `display` | ファーストビューのメイン見出し | ゴシック | Zen Kaku Gothic New | 900 | 34px | 1.4 | 0.08em | | `headline-lg` | セクション見出し（一部を青） | ゴシック | Zen Kaku Gothic New | 700 | 24px | 1.4 | 0.1em | | `accent` | 見出し上の薄色英字ラベル・赤の英字サブコピー | 欧文サンセリフ | Archivo Black | 900 | 18px | 1.1 | 0.03em | | `headline-sm` | カード内の見出し | ゴシック | Zen Kaku Gothic New | 700 | 16px | 1.4 | 0.08em | | `body-md` | 本文・カード説明 | ゴシック | Zen Kaku Gothic New | 500 | 13px | 2.0 | 0.12em | | `note` | 注釈・タグ・バッジ | ゴシック | Zen Kaku Gothic New | 500 | 11px | 1.6 | 0.08em | | `label-button` | CTAボタン文字 | ゴシック | Zen Kaku Gothic New | 700 | 15px | 1.2 | 0.08em | - 字間を0.08〜0.12emと広めにとり、ゆったり見せる - 本文の行間は2.0前後 - セクション見出しの上に、薄い青の太い英字ラベルを小さく重ねる - 見出しは2語に分け、後ろの語だけ青にする - 注釈は※で始め、リンクは青＋下線にする - 書体は画像からの推定で、フォント名は近い印象の Web フォントの提案。サイズは 375px 幅に換算した目安。 ## Layout - **カラム**: SPは1カラム。記事一覧だけ2カラム、使い方ステップは横スクロール - **本文ブロックの幅**: 画面幅の約 84% - **余白**: セクション間 72px、基本単位 8px、カード内 20px（375px 幅換算） - 左右の余白は約30pxでそろえる - 各セクションは「英字ラベル＋見出し→イラスト→カード→CTA」の順に並べる - カード同士の間隔は約16〜24px - CTAは本文幅いっぱいに広げ、高さ45px前後にする - 見出しは左寄せ。イラストは中央に置く ## Elevation & Depth - カードは白面＋1px薄グレー枠＋右下方向のやわらかい影（0 4px 12px rgba(0,0,0,.12)） - CTAボタンには影をつけないフラットにする - ヘッダーは白地に薄い下影をつける ## Shapes - **角丸**: 小 4px ／ 中 8px ／ 大 12px。ボタンは角丸の長方形。 - **写真の切り抜き**: 記事サムネイルは角丸なしの横長長方形。人物イラストは切り抜いて配置する - **セクション境界**: 直線で区切り、背景色を切り替えるだけ - カードとボタンは角丸8px - タグとステップ吹き出しはピル型 - 無料バッジはカード左下に置き、右上だけ角を丸める - FVのバッジは正円 ## Components - **主CTAボタン**（`button-primary`）: 青地に白の太字。本文幅いっぱいで各セクション末尾に繰り返す - **反転CTA**（`button-inverse`）: 青い面の上に置く白地＋青文字のボタン - **もっと見るボタン**（`button-outline`）: 白地に青の細枠と青文字 - **英字ラベル付き見出し**（`heading-en-label`）: 薄青の太い英字を見出しの左上に重ね、日本語見出しの一部の語を青にする - **理由カード**（`card-reason`）: 青の強調語＋小さい日本語＋赤の英字サブコピー、線画イラスト、太字の本文 - **機能カード**（`card-feature-badge`）: 左に線画アイコン、右に見出しと説明。左下に水色の無料・有料バッジ - **お客様の声カード**（`card-voice`）: 太字の本文の下に、年齢・属性のグレーのピル型タグを並べる - **FAQアコーディオン**（`faq-item`）: 左に青の吹き出しアイコン、右端に青の＋。影付きの白カード - **ステップカード**（`step-card`）: 青のSTEP番号、青地に白文字の見出しラベル、説明文。横に並べてスクロールさせる - **丸バッジ**（`badge-circle`）: FVのモックアップ横に置く水色の正円。白文字で注目を集める短い訴求を入れる ## Do's and Don'ts **Do** - CTAは同じ青・同じ形で各セクション末尾に繰り返す - 見出しには必ず薄青の英字ラベルを添える - セクションごとに線画人物イラストを1点ずつ入れる - カードは白面＋薄い枠＋やわらかい影で統一する - 端末のモックアップ画像でツールの画面を見せる **Don't** - グラデーションや光沢のあるボタンは使わない - 青以外の色をCTAに使わない - リアルな写真を記事サムネイル以外の装飾に使わない - 見出し全体を青にしない（強調語だけにする） - 字間を詰めて窮屈にしない ## Page Structure LP 独自の章。上から順に、カッコ内が各セクションの役割。 1. **ヘッダー**（ブランドを示す）: 白地の中央にロゴ。薄い下影 2. **ファーストビュー**（サービスの価値と無料であることを伝える）: 水色の地に小見出し、青の大見出し、説明文、PCとスマホのモックアップ、丸バッジ。青のボックス内に要約文と白ボタン 3. **選ばれる理由**（3つの強みを示す）: 英字ラベル付きの見出し＋人物イラスト。強みのカードを3枚縦に並べ、最後にCTA 4. **できること**（機能を一覧で見せる）: アイコン＋見出し＋説明の横長カード4枚。無料・有料バッジ付き 5. **特典・ポイント**（使うと得する仕組みを伝える）: 提携先のロゴを横に並べたスライダーと説明文、注釈、CTA 6. **セキュリティ**（安心感を与える）: 薄青のPCと鍵のイラスト、見出し、本文、プライバシーポリシーへの注釈リンク 7. **使い方**（手順の簡単さを示す）: ピル型の吹き出しで手順数を示し、STEPカードを横スクロールで並べる 8. **お客様の声**（社会的証明）: 人物イラストの下に、声のカード6枚と属性タグ 9. **よくある質問**（不安を解消する）: アイコン付きのアコーディオンを8項目 10. **ノウハウ記事**（関連コンテンツへ誘導する）: 写真サムネイル＋太字タイトルの2カラムグリッドと、枠線のもっと見るボタン 11. **締めのCTA**（最後のひと押し）: 青ベタの地に白文字の見出しと本文、人物イラスト、白の反転ボタン ## Imagery - 人物は紺・赤・白の太い線画フラットイラストで、手足を大きく誇張した動きのあるポーズにする - アイコンは黒か紺の単線で描いた書類・クラウド・店舗などのピクトにする - 端末のモックアップには白基調のフォームUIを表示する - セキュリティなどの概念は、薄青と青のアイソメ風イラストで表す - 記事サムネイルは明るく自然光のストック写真を使う - 元 LP の写真・イラストは使わない。自社で撮影するか、上の条件で生成・素材を選ぶ。 ## Responsive Behavior - PCは本文幅を約85%にし、理由カード・機能カード・ステップを3カラムで並べる - PCではお客様の声を3カラム、記事を4カラムにする - PCのFVは左にテキスト、右にモックアップの2カラム。ヘッダー右に赤系の小さなCTAを置く - PCではセクションのイラストを見出しの左右に置き、英字ラベルを右寄せにするなど左右を交互に配置する - CTAボタンはPCでは幅240px程度に縮めて中央に置く ## 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-1e514c14`（元 LP の URL から採番） - **元 LP**: https://www.career-log.jp/ - **解析に使った画像**: SP（スマホ版） ＋ PC（Responsive Behavior の参照） - **確度**: 色 高（12/14 色を画素から実測）、書体 中、余白 中 - **生成**: 2026-10-11、claude-opus-5-5、書式 xecin-lp-design-md 0.3（DESIGN.md 仕様 alpha 準拠） - **掲載の削除**: 元 LP の権利者（運営企業・制作会社）の方は、削除依頼ページ（https://designmark.jp/takedown/）からご連絡ください。