こんにちは。「学びの探究者」です。普段はnoteで活動しています。
2025年のQiitaアドベントカレンダーでは、
「ノーコード／ローコードで、自分のコンテンツ基盤を自動化していく」
をテーマに、25日間の仕組みづくりを記録していきます。
ぜひ、応援してください。
今日は、Firecrawl × Dify × LLM を使って
「LP（ランディングページ）の構造化データ」を自動生成してみました。
Day2 で Google スプレッドシート連携を作ったので、
その応用だけで LPの構造データベース が作れるようになります。
1. 今日やること（結論）
- Firecrawl で Webサイトをスクレイピング
- LLM に JSON 形式で 構造化データを作ってもらう
- スプレッドシート連携（Day2の応用）で保存可能になる
今回は、Dify公式サイト（ https://dify.ai/jp ）を題材にしました。
2. Firecrawl のセットアップでハマった話
Firecrawlは、ウェブサイトの構造的なデータをスクレイピングするには最強だと思います。
無料枠でもクレジット500ついてくるので、お試しには十分です。
また、FirecrawlにはDify用のプラグインがありますので、さらに使いやすいのが魅力です。
🔧 Firecrawl の登録ポイント
Firecrawlのプラグインは、Difyのマーケットプレイスから入手します。
APIキー認証設定にAPIキーをいれて認証ができると、Firecrawlツールがワークフローで使えるようになるのですが、base_urlに入れるurlがドキュメント探すの苦労しました。
これです。これを入れるまで苦労しました。
https://api.firecrawl.dev
3. Firecrawl ノードの設定
実際にスクレイピングするノードの設定はとてもシンプルです。
-
mode:
scrape
を選びます。
開始ノードにurlというスクレイピングしたいサイトのURLを入れるパラメータを作って渡すだけです。
4. LLM で「構造化JSON」を生成する
LLMには次のようなシステムプロンプトを入力します。
あなたはマーケター視点でLPの情報を整理するアシスタントです。
{Firecrawlノードのテキストパラメータ}から情報を収集してください。
やってほしいこと：
1. Cookieバナーやプライバシーに関する定型文はすべて無視してください。
- "We value your privacy" から始まる部分や、
クッキーの分類（Necessary, Functional, Analytics, Performance など）の説明は対象外とします。
2. LP本体から、以下の項目を日本語で整理してください：
エスケープ文字は削除してください。
項目内の文を[]を使って囲うことは禁止します。
欲しい情報は以下です
url: {開始ノードのurlパラメータ}
meta_title: metadata.title
meta_description: metadata.description
og_title: metadata.og:title
og_description: metadata.og:description
og_image: metadata.og:image
h1: ページのメイン見出し（# のうち最もLPのメインコピーらしいもの）
hero_lead: ヒーローセクションのリード文（1〜2文で要約）
key_sections: セクション見出しを日本語で5〜10個選出する（例：”アイディア,AI・迅速に,RAG・AGパイプライン,ツール,エージェント戦略,拡張機能"）
proof_points: 実績・数字・信頼性を示すポイントを3〜8個選出（例："GitHubスター数 120.1k,5M+ ダウンロード数,年間約18,000時間の工数削減" ）
そのあと、設定で、構造化出力にチェックを入れて、上のプロンプトで指示した項目を設定します。
5. あとは実行するのみ
このような形で出力されます。あと、Day3でやったようにスプレッドシートにアップロードしたり、Notion APIで連携すると完成です。
{
"url": "https://dify.ai/jp",
"meta_title": "実運用可能なAIエージェントを構築｜Dify",
"meta_description": "Difyは、AIエージェントの構築、デプロイ、スケーリングを加速させ、企業の成功を支える堅牢なAIインフラを提供します。",
"og_title": "AIで可能性を無限大に｜Dify",
"og_description": "Difyは、AIアプリケーションの構築からデプロイ、スケーリングまでをサポートし、企業のAIトランスフォーメーションを推進します。",
"og_image": "https://assets.dify.ai/res/home/BG_antonio-morillas-FnPgRXYPvgE-unsplash_home.jpg",
"h1": "実運用可能なAI Agentを構築",
"hero_lead": "今すぐ、実運用可能なAI Agentを簡単に構築できます。Difyは、エージェントワークフロー、RAGパイプライン、インテグレーション、モニタリングなど、必要な全てを一つに提供します。",
"key_sections":"アイデアから本稼働まで, AIのアイデアを迅速に実現, RAGパイプライン, 企業の成功を支える, 活気あるコミュニティに参加",
"proof_points": "GitHubスター数 120.2k, 5M+ ダウンロード数, 年間約18,000時間の工数削減"
}