Firecrawlのブランド抽出機能をClaude・Cursorで活用する方法

こんにちは！Hodaです。

今回は、Firecrawlを使って、参考にしたいWebサイトから配色やフォント、ロゴ、ボタンなどのブランド情報を抽出する方法をご紹介します。

取得したデータをClaudeやCursorに渡すことで、参考サイトに近い雰囲気のWebサイトを効率よく作成できるようになります。

Firecrawlのスクレイピング方法

今回は 黄色で特徴的な mailchimp のサイトのブランド情報を取得してみたいと思います。

例えばこのような雰囲気のサイトを作成したい場合、スクショや文章でプロンプトを送ることも可能です。ただ、それだと精度がそこまで良くありません。そんな時は Firecrawl のスクレイピング機能を使います

まずは、 Firecrawl の Scrape a web page を選択します。そして、対象のサイトURLを入れて、 書き出しフォーマットで Branding を選択します。

これでＯＫです。細かい設定もできますが、とりあえずこの状態で良いので、 Start Scraping をクリックします。

そうすると、一瞬で以下のようなデータを取得できます

JSONファイルを確認すると以下のようなデータを取得できていることがわかります

{
  "branding": {
    "colorScheme": "light",
    "fonts": [
      {
        "family": "Graphik Web",
        "role": "body"
      },
      {
        "family": "Means Web",
        "role": "heading"
      }
    ],
    "colors": {
      "primary": "#004E56",
      "secondary": "#692340",
      "accent": "#FFE01B",
      "background": "#FFFFFF",
      "textPrimary": "#231E15",
      "link": "#FFE01B"
    },
    "typography": {
      "fontFamilies": {
        "primary": "Graphik Web",
        "heading": "Means Web"
      },
      "fontStacks": {
        "heading": [
          "Means Web",
          "Georgia",
          "Times",
          "Times New Roman",
          "serif"
        ],
        "body": [
          "Graphik Web",
          "Helvetica Neue",
          "Helvetica",
          "Arial",
          "Verdana",
          "sans-serif"
        ],
        "paragraph": [
          "Graphik Web",
          "Helvetica Neue",
          "Helvetica",
          "Arial",
          "Verdana",
          "sans-serif"
        ]
      },
      "fontSizes": {
        "h1": "64px",
        "h2": "40px",
        "body": "13px"
      }
    },
    "spacing": {
      "baseUnit": 4,
      "borderRadius": "4px"
    },
    "components": {
      "input": {
        "background": "transparent",
        "textColor": "#000000",
        "borderColor": null,
        "borderRadius": "0px",
        "borderRadiusCorners": {
          "topLeft": "0px",
          "topRight": "0px",
          "bottomRight": "0px",
          "bottomLeft": "0px"
        },
        "shadow": "none"
      },
      "buttonPrimary": {
        "background": "#FFE01B",
        "textColor": "#231E15",
        "borderRadius": "26px",
        "borderRadiusCorners": {
          "topLeft": "26px",
          "topRight": "26px",
          "bottomRight": "26px",
          "bottomLeft": "26px"
        },
        "shadow": "rgb(35, 30, 21) 0px 0px 0px 1px"
      },
      "buttonSecondary": {
        "background": "#231E15",
        "textColor": "#FFFFFF",
        "borderRadius": "26px",
        "borderRadiusCorners": {
          "topLeft": "26px",
          "topRight": "26px",
          "bottomRight": "26px",
          "bottomLeft": "26px"
        },
        "shadow": "rgb(255, 255, 255) 0px 0px 0px 1px"
      }
    },
    "images": {
      "logo": "data:image/svg+xml6.64-4.4%2C16.64-10.38c0-5.55-5.73-10.38-16.64-10.38Z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E",
      "favicon": "https://mailchimp.com/release/plums/3a3e92cfc284c7bc.ico",
      "ogImage": "https://mailchimp.com/ctf/images/yzco4xsimv0y/1SB1jCYU95Dh5YDdrucTh0/add18363e44ff00d54254592c7c0860c/Intuit_Mailchimp_-_Wordmark_2023_-_Recirculation_.png",
      "logoHref": "/",
      "logoAlt": "Mailchimp"
    },
    "__llm_logo_reasoning": {
      "selectedIndex": 0,
      "reasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand name 'Mailchimp'.",
      "confidence": 0.95,
      "source": "llm"
    },
    "__llm_button_reasoning": {
      "primary": {
        "index": 0,
        "text": "Start Free Trial",
        "reasoning": "Button #0 has a vibrant brand color (#FFE01B) and action-oriented text ('Start Free Trial'), making it the primary CTA."
      },
      "secondary": {
        "index": 1,
        "text": "Customize my experience",
        "reasoning": "Button #1 has a different background color (#231E15) and serves a secondary function ('Customize my experience')."
      },
      "confidence": 0.95
    },
    "personality": {
      "tone": "professional",
      "energy": "medium",
      "targetAudience": "businesses and marketers"
    },
    "designSystem": {
      "framework": "custom",
      "componentLibrary": ""
    },
    "confidence": {
      "buttons": 0.95,
      "colors": 0.9,
      "overall": 0.925
    },
    "__llm_metadata": {
      "logoSelection": {
        "llmCalled": true,
        "llmSucceeded": true,
        "finalSource": "llm",
        "rawLogoSelection": {
          "selectedLogoIndex": 0,
          "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, links to the homepage, and matches the brand name 'Mailchimp'.",
          "confidence": 0.95
        }
      },
      "buttonClassification": {
        "llmCalled": true,
        "llmSucceeded": true
      }
    }
  },
  "metadata": {
    "robots": "index,follow,archive",
    "path": "/",
    "twitter:title": "Email & SMS Marketing Platform | Mailchimp",
    "og:site_name": "Mailchimp",
    "OptanonActiveGroups": "",
    "ogSiteName": "Mailchimp",
    "ogDescription": "Utilize real-time user behavior data and artificial intelligence to convert more customers. Easy to use, get started for free!",
    "og:admins": "4302132",
    "msvalidate.01": "",
    "og:type": "website",
    "viewport": "width=device-width, initial-scale=1",
    "og:image": "https://mailchimp.com/ctf/images/yzco4xsimv0y/1SB1jCYU95Dh5YDdrucTh0/add18363e44ff00d54254592c7c0860c/Intuit_Mailchimp_-_Wordmark_2023_-_Recirculation_.png",
    "twitter:card": "summary_large_image",
    "ogTitle": "Email & SMS Marketing Platform | Mailchimp",
    "twitter:description": "Utilize real-time user behavior data and artificial intelligence to convert more customers. Easy to use, get started for free!",
    "verify-v1": "",
    "google-site-verification": "Xg1n4sbg_Ovzp2zQ3gVV-GBaWZKQeyuePwOikbHbwDU",
    "content_type": "homePage",
    "image": "https://mailchimp.com/ctf/images/yzco4xsimv0y/1SB1jCYU95Dh5YDdrucTh0/add18363e44ff00d54254592c7c0860c/Intuit_Mailchimp_-_Wordmark_2023_-_Recirculation_.png",
    "entry_id": "66SJ9gsMD48tKLRxFYda2s",
    "twitter:image": "https://mailchimp.com/ctf/images/yzco4xsimv0y/1SB1jCYU95Dh5YDdrucTh0/add18363e44ff00d54254592c7c0860c/Intuit_Mailchimp_-_Wordmark_2023_-_Recirculation_.png",
    "twitter:site": "@mailchimp",
    "ogImage": "https://mailchimp.com/ctf/images/yzco4xsimv0y/1SB1jCYU95Dh5YDdrucTh0/add18363e44ff00d54254592c7c0860c/Intuit_Mailchimp_-_Wordmark_2023_-_Recirculation_.png",
    "description": "Utilize real-time user behavior data and artificial intelligence to convert more customers. Easy to use, get started for free!",
    "ogUrl": "https://mailchimp.com/",
    "og:url": "https://mailchimp.com/",
    "title": "Email & SMS Marketing Platform | Mailchimp",
    "og:title": "Email & SMS Marketing Platform | Mailchimp",
    "og:description": "Utilize real-time user behavior data and artificial intelligence to convert more customers. Easy to use, get started for free!",
    "language": [
      "en",
      "en"
    ],
    "favicon": "https://mailchimp.com/release/plums/3a3e92cfc284c7bc.ico",
    "scrapeId": "019fc536-81db-710b-b575-fbfb7892b205",
    "sourceURL": "https://mailchimp.com/",
    "url": "https://mailchimp.com/",
    "statusCode": 200,
    "contentType": "text/html; charset=UTF-8",
    "timezone": "America/New_York",
    "proxyUsed": "basic",
    "indexId": "40b46822-459a-49d4-8622-8f659e0b260d",
    "creditsUsed": 1,
    "concurrencyLimited": false
  }
}

スクレイピングで取得できたデータ

このJSONファイルには以下のようなブランドアセットやデザインデータが含まれています。

これらはバイブコーディングツールに指示する際にとても重要なデータであることがわかります。

1. カラーパレット

"colors": {
  "primary": "#44B1FF",
  "secondary": "#65DC8D",
  "accent": "#44B1FF",
  "background": "#FFFFFF",
  "textPrimary": "#1E1E1E",
  "link": "#BCE1FA"
}

これでわかること：

• メインカラー
• 補助カラー
• 背景色
• 文字色
• リンク系の色

これはかなり重要です。 サイトの第一印象が決まります。

---

2. タイポグラフィ

"fonts": [
  {
    "family": "Libre Franklin",
    "role": "body"
  }
]

"typography": {
  "fontFamilies": {
    "primary": "Libre Franklin",
    "heading": "Libre Franklin"
  },
  "fontSizes": {
    "h1": "80px",
    "h2": "48px",
    "body": "14px"
  }
}

これでわかること：

• フォントの系統
• 見出しサイズ
• 本文サイズ
• 見出しと本文の強弱

例えば h1: 80px はかなり大きいので、 大胆なヒーロー見出しを使うSaaSデザインだと推測できます。

---

3. スペーシング・角丸

"spacing": {
  "baseUnit": 12,
  "borderRadius": "8px"
}

これで、

• 全体の余白設計の基準
• カードやUIの角丸感

がわかります。

さらにボタンでは、

"buttonPrimary": {
  "borderRadius": "12px"
}

となっているので、 丸すぎず、でもやや柔らかいUI という印象も作れます。

---

4. ボタンデザイン

"components": {
  "buttonPrimary": {
    "background": "#44B1FF",
    "textColor": "#1E1E1E",
    "borderRadius": "12px",
    "shadow": "none"
  }
}

これもかなり 役に立つ情報 です。

わかること：

• CTAボタンの色
• 文字色
• 角丸
• 影の有無
• 主ボタンと副ボタンの差

つまり、 「どんなCTAの見た目か」 をかなり再現できます。

---

5. ロゴ・OG画像

"images": {
  "logo": "data:image/svg+xml;utf8,...",
  "favicon": "...",
  "ogImage": "...",
  "logoAlt": "Kit"
}

これでヘッダーのロゴやブランド認識ができます。

ただし、ここは注意で、 そのまま使うと本家ロゴそのもの なので、公開するなら差し替え推奨です。 勝手に取得されるデータですが、皆さんのサイトでは利用しないようにしましょう。

---

6. CTAの内容

"__llm_button_reasoning": {
  "primary": {
    "text": "Start Pro free trial"
  },
  "secondary": {
    "text": "Request a demo"
  }
}

これも地味に大きいです。

なぜなら、 ボタンの文言はレイアウトに影響するからです。

例えばこの情報から、

• 主要CTAは無料トライアル
• 副CTAはデモ依頼
• B2B/SaaS系の導線

と推測できます。 これらについても Cursor等であれば、判断材料として役に立ちます

---

7. ブランドの性格

"personality": {
  "tone": "modern",
  "energy": "medium",
  "targetAudience": "creators and businesses looking for email marketing solutions"
}

これも重要です。

Cursorに渡す時に、

• modern
• medium energy
• creators向け
• SaaS
• email marketing

という文脈があるだけで、かなりそれらしいコピーやレイアウトを提案しやすくなります。

---

8. デザインシステム

"designSystem": {
  "framework": "tailwind"
}

これも実装面で役立ちます。

つまりCursorに、

Tailwindベースで組んで

と頼みやすいです。Astro + Tailwind で作る流れとも相性が良いです。

もしくは shadcn などの時もあったりします。人間の目ではわかりにくい内部的なフレームワークもすべてスクレイピングできるのはとても助かります。

このJSONでできること

• 色味を近づける
• フォント感を近づける
• ボタンの雰囲気を近づける
• 全体のトーンを近づける
• 「モダンなSaaSっぽさ」を再現する

このJSONだけでは弱いこと

• ヒーローの構成
• セクションの順番
• 余白バランス
• カード配置
• レスポンシブ時の崩れ方
• 画像やUIモックの置き方
• ナビゲーションの作り
• 実際のページ密度

つまり、

見た目のルールはある程度わかるが、ページ構成までは十分ではない

という感じです。

---

逆に、このJSONにない情報

上記のJSONでかなりの情報をスクレイピングできましたが、以下の情報は不十分なので補足でプロンプトをおくる必要があります。

1. セクション構成

たとえば、

• ヘッダーの中身
• ヒーローの左右構成
• ロゴ一覧があるか
• 機能紹介が3列か
• お客様の声があるか
• FAQがあるか
• フッターの構成

こういう ページ骨格 がありません。

---

2. レイアウト寸法

足りないもの：

• コンテナ幅
• セクションごとの上下余白
• カラム比率
• グリッド数
• カード間のgap
• 行間
• 最大横幅

色やフォントが合っていても、 このへんが違うと別物っぽく見えることが多いです。

---

3. 画像・UIモックの配置

例えばSaaSサイトでは、

• 右側にダッシュボード風UI
• 背景にグラデーション
• 浮いたカード
• スクリーンショットの重なり

などが重要ですが、JSONにはそれがありません。

---

4. モバイル時の挙動

• スマホで1カラムになるか
• CTAの並び方
• メニューの折りたたみ
• 画像の縮小ルール

などは不明です。

---

5. ホバー・アニメーション

• ボタンhover
• fade in
• スクロールアニメーション
• カードの浮き
• underline animation

などの動きはJSONからはほぼ分かりません。

この JSONがあれば、60〜70%くらいの「雰囲気再現」 は可能です。

さらに精度を上げたいなら追加するもの

追加すると良い情報

1. トップページのスクリーンショット
2. セクション一覧
3. ナビゲーション項目
4. ヒーローの構造
5. CTA文言
6. 特徴カード数
7. 余白感の指示
8. モバイル対応の希望

---

セクション情報の例

参考ページの構成:
- header
- hero (left text, right dashboard image)
- trusted by logos
- features grid (3 cards)
- feature highlight sections
- CTA
- footer

この情報があると、一気にレイアウト精度が上がります。

---

Firecrawlを使うなら何を取るべき？

今回の用途なら、ブランドJSONだけでなく、以下もあると良いです。

あると強いもの

• screenshot
• markdown
• 主要見出し
• CTAボタン文言
• セクション構造
• 主要画像URL
• ナビゲーション項目

つまり、

ブランド情報 と ページ構造情報 の両方

をCursorに渡すのがベストです。