HodaPress Review
Firecrawl logo

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

公式サイト（新しいタブで開く）

最終更新日: 2026年8月3日

こんにちは！Hodaです。

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

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

Firecrawlのスクレイピング方法

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

Mailchimp
Mailchimp

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

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

Scrape
Scrape

これでＯＫです。細かい設定もできますが、とりあえずこの状態で良いので、 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に渡すのがベストです。

シェア

LINEでシェア

Firecrawlの関連記事

  • Firecrawl logo
    料金
    Firecrawlの料金プランを徹底解説【2026年最新】

あわせて見たいツール

Lovable logo
Lovable

ラバブル

4.6 ★

AIとのチャット形式でWebアプリやサイトを生成できる次世代型のAIアプリ開発ツール

月額21ドルから
Softr logo
Softr

ソフター

4.3 ★

ノーコードで会員サイト・クライアントポータル・社内ツールなどを簡単に構築できるWebアプリ作成ツール

月額59ドルから
Adalo logo
Adalo

アダロ

4.3 ★

ノーコードでスマホアプリやWebアプリを作成できるアプリ開発プラットフォーム

月額36ドルから
Zernio logo
Zernio

ゼルニオ

4.9 ★

1つのAPIで、15個SNSに公開できるツール

月額6ドルから

著者（私が書きました）

Hoda（HodaPress）
  • Kajabiパートナー
  • 海外SaaSレビュー
  • 40+ countries visited

HodaPress

Hoda

フリーランスエンジニア・Webデザイナー · 写真家・動画編集者

フリーランスエンジニア・Webデザイナー。Kajabi・Shopify・Thinkificなどの海外SaaSを中心に、サイト構築や収益化の仕組みづくりを行っています。

WordPress・Next.js・Supabase・Hugoなどを活用したWeb開発から、動画制作・IT翻訳まで幅広く対応するジェネラリストとして活動。実際に海外ツールを活用しながら、個人でのオンラインビジネスやコンテンツ販売にも取り組んでいます。

これまでに40カ国以上を訪問し、カナダ・ポーランド・リトアニア・デンマークなどでの海外生活を経験。リトアニアの大学で国際ビジネスを学んだ後、現在はスペインを拠点に活動しています。

YouTube「HodaPress」では海外SaaSやオンラインビジネスについて発信。noteでは海外移住・ビザ関連の情報も執筆しています。

本サイトでは、実際に使った経験をもとに「日本人にとって使いやすいか」「収益化に繋がるか」という視点でツールをレビューしています。

Jonas R.

Jonas R.

海外ツールリサーチ・記事レビュー担当

リトアニア出身。現在は欧州の大手IT企業に勤務し、ソフトウェア開発およびデジタルプロダクト分野で10年以上の実務経験を持つ。

当サイトでは、海外SaaSツールや最新テクノロジーに関する情報収集、英語圏の公式情報の確認、記事内容のレビューを担当。製品アップデートや業界動向の調査を通じて、より正確で信頼性の高い情報提供をサポートしている。