--- title: "Bright Data MCP + Claude Skills for Complex AI Workflows" slug: claude-skills-with-web-mcp date: 2026-01-12T09:03:32+00:00 modified: 2026-01-12T09:03:35+00:00 permalink: https://brightdata.jp/blog/ai/claude-skills-with-web-mcp type: blog --- [ ブログ ](https://brightdata.jp/blog "ブログ") / [AI](https://brightdata.jp/blog/ai) [AI](https://brightdata.jp/blog/ai) # Bright Data MCP + Claude Skills for Complex AI Workflows 外部ウェブデータツールと専門的なタスク知識を組み合わせた高度なAIエージェントを実現するため、Bright DataのWeb MCPサーバーとClaude Skillsを統合する方法をご覧ください。 4 分読 [ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) ](https://brightdata.com/blog/authors/antonello-zanini) [Antonello Zanini Technical Writer ](https://brightdata.com/blog/authors/antonello-zanini) ![Bright Data MCP x Claude Skills](https://media.brightdata.jp/2026/01/Web-MCP-x-Claude-Skills.png) この記事では以下を学びます： - 新しいClaude Skillsメカニズムとは何か、その仕組みについて。 - – MCPツールに取って代わるのではなく、それらと完全に連携する理由 - AI体験を向上させるため、Bright DataのBright Data MCPおよびスキルとClaude Desktop、API、Codeを統合する方法。 さっそく見ていきましょう！ ## Claudeのスキルとは？ 2025年10月16日、Anthropic[はClaudeへの*エージェントスキル*導入](https://www.anthropic.com/news/skills)を発表しました。 Claudeにおける[*「スキル」*](https://support.claude.com/en/articles/12512176-what-are-skills)とは、特定のタスクにおけるモデルのパフォーマンスを向上させるために定義された指示、スクリプト、リソースを含むモジュール式のフォルダーです。より詳細には、各スキルはミニ知識パッケージのように機能し、Claudeに専門的なワークフロー（例：データ分析、文書作成、ブランドガイドラインの適用など）の実行方法を教えます。 一般的な推論だけに依存する代わりに、Claudeは必要な時にのみ関連するスキルを動的に読み込み、応答を迅速かつ的を絞ったものに保ちます。 技術的な観点では、[各スキルは`少なくともSKILL.mdファイル`を含むディレクトリで構成されます](https://support.claude.com/en/articles/12512198-how-to-create-custom-skills)。このファイルはスキルの核となり、名前や説明などの必須メタデータを定義[するYAMLフロントマター](https://docs.github.com/en/contributing/writing-for-github-docs/using-yaml-frontmatter)で始まらなければなりません。また、追加のメタデータ、タスク指示、参照ファイル、実行可能スクリプト、ツールなどを含めることもできます。 現在、スキルには主に2種類があります： - **Anthropicスキル**：Anthropicが事前構築した汎用タスク用（例：PowerPoint作成、GIF作成など）。 - **カスタムスキル**：ユーザーや組織が独自のワークフローやベストプラクティスを実装するために作成する。 スキルは組み合わせて使用でき、移植性があります。つまり、複数のスキルを組み合わせたり、ClaudeアプリやAPI間で再利用したりでき、必要なコンポーネントのみを必要な時にロードできます。 ## なぜMCPとClaudeエージェントスキルを併用するのか ここで、スキルはMCPサーバーが公開するツールの新しいバージョンに過ぎないと思われるかもしれませんが、それは正確ではありません… MCPはClaude（または他のAIモデル）をAPI、データベース、クラウドアプリなどの外部システムに接続します。モデルがリアルタイムデータを取得したり外部アクションをトリガーしたりするためのブリッジとして機能します。 例えば、[Bright DataのBright Data MCP](/ai/mcp-server)サーバー[は](/ai/mcp-server)、AIモデル[に60以上のウェブデータ取得・統合ツールへの](https://docs.brightdata.com/mcp-server/tools)アクセスを提供します。これらの機能は、Bright DataサーバーへのAPI呼び出しによって実現され、様々な[クラウドベースのソリューション](/products)を提供します。 ただしMCP技術の主な制約は、トークン消費量が多い点です。利用可能なエンドポイント、パラメータ、レスポンスに関する詳細なコンテキストが必要です。このためBright[DataはBright Data MCPに2つのモード](https://github.com/brightdata/brightdata-mcp?tab=readme-ov-file#-pricing--modes)を提供しています： - **無料ティアモード**：利用可能なツールがごく一部に限定されるため、Claudeが膨大なツールリストを処理する必要がなく、トークン消費を削減します。[Bright Data MCP無料ティア](/blog/ai/web-mcp-free-tier)の詳細はこちら。 - **プロモード**：60以上の全ツールに完全アクセス可能ですが、AIが利用可能な全オプションを理解・推論する必要があるため、より多くのトークンを消費します。 一方、スキルは自己完結型の知識モジュールです。本質的には、Claudeに何かを教えるための指示、スクリプト、リソースを含むフォルダーです。したがって、MCPとは異なり、スキルは外部接続に依存しません。必要な時にいつでもロードできる手順的なノウハウをClaudeに提供するだけです。 重要なポイントは、ClaudeスキルとBright Data MCPツールが異なるながらも補完的な目的を果たすことです。両者を併用すると非常に相乗効果を発揮します。MCPが外部データやツールへのアクセスを提供する一方、スキルはそれらの活用方法に関する専門知識をAIに提供できます。 要するに、スキルはMCPツールの代替ではありません。むしろ逆で、スキルはMCPツールの活用方法においてクロードをより賢くするのです。 ## Claude DesktopでBright Data MCPとスキルにアクセス可能なAIエージェントの構築方法 このガイド付きチュートリアルでは、Bright Data MCPとスキルからツールを装備したClaudeモデルの構築方法を学びます。特に、ニュース＋動画検索シナリオを通じて強化されたAIエージェントの実動を確認します。 **注**：以下は単なる一例です。最終プロンプトを変更することで、他のユースケースにも容易に適応できます。また、同じ手順はClaudeのウェブ版（Claude.aiとしても知られる）でも機能します。変更が必要なのはBright Data MCP統合のみで、[これはBright Data MCPのリモート版](https://docs.brightdata.com/mcp-server/remote/quickstart)を経由する必要があります。 以下の手順に従ってください！ ### 前提条件 本記事の内容を再現するには、以下の環境が整っていることを確認してください： 1. ローカルにインストール済みの[Claude Desktop](https://claude.ai/download) 2. 以下のいずれかのプランのClaudeアカウント：[Pro、Max、Team、またはEnterprise](https://www.claude.com/pricing)。 3. [APIキーが設定済みの](https://docs.brightdata.com/api-reference/authentication#how-do-i-generate-a-new-api-key%3F)Bright Dataアカウント。 Claude Desktopをローカルにインストール後、アカウントアイコンをクリックし、必要なプランのいずれかに加入していることを確認してください： ![Checking you are on the right Claude plan](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760945209577_image.png) 次に、Claude Desktopが既にBright DataのBright Data MCPと統合されていることを前提とします。詳細な手順については、[公式のClaude Desktop統合ガイド](https://docs.brightdata.com/mcp-server/integrations/claude)を参照してください。 また、Bright Data MCP統合が有効化されていることも前提とします（無料プランモードで十分です）： ![Bright Data MCP integration in Claude Desktop](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760956525206_image.png) **注意**：Bright DataのBright Data MCP[はClaude MCPサーバー](/ai/mcp-server/claude)として機能します。 これで、ClaudeでMCP + Skillsの統合をテストするために必要なすべての準備が整いました。 ### ステップ #1: Claude でエージェントスキルを有効化する 執筆時点では、*エージェントスキルは*ベータ機能であり、デフォルトでは無効化されています。そのため、この機能を利用するには、まず有効化する必要があります。 有効化手順：左下のユーザープロフィールをクリックし、「設定」オプションを選択： ![Selecting the “Settings” option](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760945276317_image.png) 「設定」セクションで「機能」パネルを開き、「スキル」セクションの「有効化」ボタンを押します： ![Pressing the “Turn on“ button](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760945351561_image.png) これにより自動的に「コード実行とファイル作成」オプションがチェックされ、以下のように事前設定済みのClaudeスキルを有効化できるようになります： ![Note that available Skills](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760945370129_image.png) これで個々のスキルをトグル操作で有効化できるようになります。 素晴らしい！これでClaude統合でスキルが使用可能になりました。 ### ステップ #2: カスタムスキルの追加 デフォルトでClaudeは一連のスキルを提供します。これらのスキルの出所が気になる場合は、[公式`のanthropics/Skillsリポジトリ`](https://github.com/anthropics/skills/)をご覧ください。 要約すると、デフォルトのスキルは以下の通りです： - `algorithmic-art`: p5.js を使用した生成アートを作成。シード付きランダム性、フローフィールド、パーティクルシステムを適用。 - `artifacts-builder`: React、Tailwind CSS、shadcn/uiコンポーネントを使用して複雑なClaude.ai HTMLアーティファクトを構築します。 - `brand-guidelines`: アーティファクトにAnthropicの公式ブランドカラーとタイポグラフィを適用します。 - `canvas-design`: デザイン哲学に基づき、.pngおよび.pdf形式の美しいビジュアルアートを設計します。 - `internal-comms`: 進捗報告、ニュースレター、FAQなどの社内向けコミュニケーション文書を作成します。 - `mcp-server`: 外部APIやサービスを統合した高品質なMCPサーバー作成ガイド。 - `slack-gif-creator`: Slackのサイズ制限に最適化されたアニメーションGIFを作成する。 - `スキル作成ガイド`: Claudeの機能を拡張する効果的なスキルの作成ガイド。 - `template-Skill`: 新規スキル作成の起点となる基本テンプレート。 - `theme-factory`: 10種類のプリセットプロフェッショナルテーマでアーティファクトをスタイリング、またはオンザフライでカスタムテーマを生成。 - `webapp-testing`: Playwrightを使用したローカルWebアプリケーションのUI検証とデバッグテスト。 さて、Claude統合に新しいスキルを追加したい場合を考えてみましょう。これがスキルの特別な点であり、追加のスキルを簡単にアップロードしてAIモデルに利用させることができます。興味深いスキルを見つけるには、[`ComposioHQ/awesome-claudeスキルリポジトリ`](https://github.com/ComposioHQ/awesome-claude-skills)をご覧ください。また、[Bright Dataの素晴らしいClaudeスキルも](https://github.com/brightdata/awesome-claude-skills)チェックしてみてください。 例えば「[Video Downloader」](https://github.com/ComposioHQ/awesome-claude-skills/blob/master/video-downloader/SKILL.md)スキルは、ClaudeモデルがYouTubeなどのプラットフォームから動画をダウンロードできるようにします： ![The “Video Downloader” Claude Skill](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760947918254_image.png) `ComposioHQ/awesome-claude-Skills`リポジトリを閉じ、「Video Downloader」（`video-downloader/`）スキルフォルダに移動し、ZIPファイルに変換します： ```none git clone https://github.com/ComposioHQ/awesome-claude-Skills/ cd awesome-claude-Skills/video-downloader zip -r video-downloader-Skill.zip . ``` **注**：CLIを使わずに実行することも可能です。目的は、`awesome-claude-Skills/video-downloaderフォルダ内のSKILL` `.mdファイル`を含む`.zipファイル`を作成することです。これはClaudeスキルインポートに必要な形式です。 次に、Claudeで「Skills」セクションに移動し、「Upload Skill」をクリックして以下のモーダルを開きます： ![The “Upload Skill” modal](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760946290340_image.png) 次に、`.zipファイルを`「スキルをアップロード」エリアにドラッグするか、クリックして手動でアップロードします。「スキルが正常にアップロードされました」という通知が表示されます。 最後に、スキルが自動的にインポートされ、スキルリストに表示され、デフォルトで有効化されます： ![Note the “video-downloader” Skill](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760948140864_image.png) この手順を繰り返せば、他のカスタムスキルも追加できます。よくできました！ ### ステップ #3: Bright Data MCP + Claudeスキル連携のテスト これで、Bright DataのBright Data MCPツールと動画ダウンロードスキルの両方にアクセスできるClaude Desktopインスタンスが設定されました。次に、両方の機能を使用する必要があるプロンプトを作成して、この設定をテストしてみましょう。 例えば、構造化されたMarkdown形式のニュース記事からコンテンツをスクレイピングし、関連する最も適切なYouTube動画を検索・ダウンロードしたい場合を考えます。これはニュースダウンロードエージェントの優れたユースケースであり、オフライン分析やアーカイブに有用です。 この目的を達成するプロンプト例は以下の通りです： ```none 以下のニュース記事からコンテンツをスクレイピングしてください： "https://blog.google/products/google-tv/gemini-google-tv/" クリーンなMarkdown形式でコンテンツを返してください。その後、公式Googleチャンネルから関連動画をYouTubeで検索し、1080p解像度のMP4ファイルとしてダウンロードしてください。 ``` Claude Desktopで新規チャットを開き、プロンプトを貼り付けて実行してください： ![The task execution in Claude Desktop](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760952620347_11.gif) 上記のGIFは簡略化のため速度調整・編集されていますが、実際の流れは以下の通りです： 1. Claudeは、ニュース記事の内容をスクレイピングする適切なツールとして、Bright Data MCPの`scrape_as_markdown`ツールを特定します。 2. ツール実行の許可を求めます。 3. 許可されると、ツールが記事をリアルタイムでスクレイピングし、内容をMarkdown形式で返します。 4. Claudeは関連するYouTube動画を検索するのに適切なツールとして、Web`MCPのsearch_engineツールを`特定します。 5. 検索クエリを実行する許可を求めます。 6. このツールはクエリに関連する SERP（[Bright Data の SERP API](/products/serp-api) 経由）を返し、その中には記事に最も関連性の高い YouTube 動画「[*Introducing Gemini for Google TV」*](https://www.youtube.com/watch?v=rFH3CJgkEAw)への URL が含まれています。 7. Claude`はvideo-downloader`スキルを使用して、動画を1080pのローカルファイルとしてダウンロードします。 8. このスキルは内部で[`yt-dlp`](https://github.com/yt-dlp/yt-dlp)を使用し、必要なロジックを実行します。 9. 動画は記事コンテンツを含むMarkdownファイルと共に、出力フォルダにダウンロード・保存されます。 10. 最終結果として、Markdownファイルとダウンロードされた動画が表示されます。 Claude Desktop上の最終結果は以下のような要約となるはずです： ![The final summary presenting the produced output by the AI](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760951565292_image.png) 完璧です！結果は期待できそうです。AIが意図した目標を達成したか確認しましょう！ ### ステップ #4: 出力の分析 出力フォルダ（デフォルトではお使いのマシンの「Downloads/」フォルダ）には、以下の2つのファイルが含まれているはずです： ```none your-output-folder ├── gemini_google_tv_article.md └── introducing-gemini-for-google-tv_1080p.mp4 ``` `gemini_google_tv_article.md`ファイルを開くと、以下のような内容が表示されるはずです： ![Exploring the gemini_google_tv_article.md file in Visual Studio Code](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760952255091_image.png) これは、プロンプトで入力として渡された*「*[*Gemini comes to Google TV*](https://blog.google/products/google-tv/gemini-google-tv/)*」*記事のMarkdown版です： ![The source article](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760958066096_image.png) ご覧の通り、Bright Data MCPサーバーによりClaudeは対象ページに接続し、ボット対策機能を回避してコンテンツにアクセスし、それをMarkdown形式でクリーンに抽出できました。 次に、`introducing-gemini-for-google-tv_1080p.mp4`ファイルを開きます: ![Opening the introducing-gemini-for-google-tv_1080p.mp4 file with VLC](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760952231702_image.png) これはYouTubeから直接取得した*「Introducing Gemini for Google TV」*動画です： ![](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760958155548_image.png) さあ、どうぞ！出力結果から、Claude DesktopがBright Data MCPツールと動画ダウンロードスキルを両方活用してタスクを完了したことが確認できます。 この二重統合により、AIエージェントは両方の長所を兼ね備えます： - MCPツールによるサードパーティAPI・自動化システムとの連携。 - 特定のタスクを処理するための手順指示を与え、Claudeの知識を強化するスキル。 ほら！Bright Data MCPとClaude Skillsの連携は完璧に機能しています。 ここで示したのはあくまで簡単な例です。Bright Data MCPツールとClaudeスキルを組み合わせた他のプロンプトを自由に試して、[様々なエージェント型AIユースケースを](/use-cases)カバーしてください。 ## Claude APIでBright Data MCPとスキルを併用する方法 以下の手順に従い、[Claude API内でBright](https://docs.claude.com/en/api/overview) Data Bright Data MCPとスキルを併用する方法をご確認ください。 この例では、Bright Data MCPツールを使用してAmazonから製品をスクレイピングし、公式のAnthropic`pptx`スキルでそのデータを用いたプレゼンテーションを生成するワークフローを構築します！ ### 前提条件 以下のコードを実行するには、以下が必要です： - [Anthropic APIキー](https://console.anthropic.com/settings/keys) - Claude Pro、Max、Team、またはEnterpriseアカウント。 - APIキーが設定済みのBright Dataアカウント。 - ローカルにインストールされたPython 3.8。 - [Anthropic Python APIライブラリ](https://github.com/anthropics/anthropic-sdk-python)がインストールされたプロジェクト（例：`pip install anthropic`を実行）。 ### Bright Data MCP + Claude API スキル ローカ[ルのSTDIO MCPサーバーはClaude APIに直接接続できない](https://docs.claude.com/en/docs/agents-and-tools/mcp-connector#limitations)点に注意してください。代わりに、HTTP経由で公開されているサーバーを使用する必要があります。Bright Data MCPも[リモートサーバーとして利用可能なため](https://docs.brightdata.com/mcp-server/remote/quickstart)、これは問題になりません。 また、スキルがドキュメント（Excel、PowerPoint、PDF、Wordなど）を作成する場合、レスポンスに`file_id属性が`返される点に留意してください。これらのファイルをダウンロードするには、[Files APIを使用](https://docs.claude.com/en/docs/build-with-claude/files)する必要があります。 具体的には、以下の流れで処理が行われます： 1. スキルはコード実行中にファイルを生成します 2. レスポンスには作成された各ファイル`のfile_id`が含まれます 3. Files APIを使用して実際のファイルコンテンツをダウンロードする 4. ファイルをローカルに保存するか、必要に応じて処理します。 Claude APIにおけるスキル使用の詳細（必須前提条件、ヘッダーその他の情報を含む）については、[公式ドキュメントを参照してください](https://docs.claude.com/en/api/skills-guide)。 この例では、以下のコードがClaude APIにリモートBright Data MCPアクセスと対象タスク用のスキルを提供します： ```none # pip install anthropic import anthropic # 実際のAPIキーに置き換えてください ANTHROPIC_API_KEY = "" BRIGHT_DATA_API_KEY = "" # pptxスキルで作成されたファイルIDを抽出する関数 def extract_file_ids(response): file_ids = [] for item in response.content: if item.type == "bash_code_execution_tool_result": content_item = item.content if content_item.type == "bash_code_execution_result": for file in content_item.content: if hasattr(file, "file_id"): file_ids.append(file.file_id) return file_ids # Anthropicクライアントを初期化してClaude APIに接続 client = anthropic.Anthropic( api_key=ANTHROPIC_API_KEY) # Bright Data MCPリモート接続設定を定義 web_mcp_server = { "type": "url", "url": f"https://mcp.brightdata.com/sse?token={BRIGHT_DATA_API_KEY}&pro=1", # Pro Modeはオプション（&pro=1） "name": "bright-data-web-mcp" } # 公式「pptx」スキルの設定 container = { "skills": [ { "type": "anthropic", "skill_id": "pptx", "version": "latest" } ] } # Bright Data MCPツールとスキルの両方を使用するプロンプトを記述 prompt = """ このAmazonページから製品詳細をウェブスクレイピングしてください: "https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG/" 取得したデータを使用して、製品をプレゼンテーションするためのPowerPointファイルを生成してください。 """ # MCP連携でClaude APIにリクエスト送信 response = client.beta.messages.create( model="claude-sonnet-4-5-20250929", max_tokens=4096, messages=[{ "role": "user", "content": prompt }], mcp_servers=[web_mcp_server], container=container, betas=["code-execution-2025-08-25", "skills-2025-10-02", "mcp-client-2025-04-04"], # Skills実行とMCP統合に必須 tools=[{"type": "code_execution_20250825", "name": "code_execution"}] # Skills実行に必須 ) # ファイルIDを取得 file_ids = extract_file_ids(response) # Files APIを使用してプレゼンテーションファイルをダウンロード for file_id in file_ids: file_metadata = client.beta.files.retrieve_metadata( file_id=file_id, betas=["files-api-2025-04-14"] ) file_content = client.beta.files.download( file_id=file_id, betas=["files-API-2025-04-14"] ) # プレゼンテーションをディスクに保存 file_content.write_to_file(file_metadata.filename) print(f"ダウンロードしたプレゼンテーション: {file_metadata.filename}") ``` ### 出力の分析 上記スクリプトの結果はPowerPointプレゼンテーションとなります。Excelで開くか、以下のようにDriveに読み込むと、次のような結果が表示されます： ![The resulting presentation](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760971731958_image.png) ご覧の通り、出力は非常に印象的です。ただし、スキル実行（特にファイル生成時）では、プロンプト実行中に複数のステップが必要になる場合があります。これによりトークンを大量に消費し、コストが積み上がる可能性があります。今回のケースでは、**この単一のAPI呼び出しで17.83ドルの費用が発生しました。**スキルは慎重にご利用ください！ 生成されたプレゼンテーションには、[対象Amazon商品ページ](https://www.amazon.com/Medicube-Zero-Pore-Pads-Dual-Textured/dp/B09V7Z4TJG)に表示される正確な商品データが含まれています： ![The target Amazon product page](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760972001147_image.png) [Amazonのウェブスクレイピングを試みた](/blog/how-tos/how-to-scrape-amazon)ことがある方なら、[Amazon CAPTCHAのような](/blog/web-data/bypass-amazon-captcha)ボット対策により非常に複雑になることをご存知でしょう。Bright Data MCP`のweb_data_amazon_productツール`のおかげで、この問題は解決されました！ このツールはバックエンド[でBright DataのAmazonスクレイパーに](/products/web-scraper/amazon)接続し、商品ページのJSON構造データを取得します。その後Claude`がpptx`スキルを用いて、そのデータを視覚的に魅力的なプレゼンテーションに変換します。 ミッション完了！ ## Claude CodeでBright Data MCPとスキルを使用する方法 Claude CodeでBright DataのBright Data MCPツールとスキルを併用する方法を、以下の手順で学びましょう。 ### 前提条件 このチュートリアルセクションを実践するには、以下の環境が整っていることを確認してください： 1. ローカルにインストール済みのClaude Code v1.0 2. Claudeアカウント（Pro、Max、Team、Enterpriseプランのいずれか） 3. 有効なAPIキーを持つBright Dataアカウント。 本チュートリアルでは、[Bright DataのBright Data MCPがClaude Codeに](https://docs.brightdata.com/mcp-server/integrations/claude-code)既に設定済みであることを前提とします。 詳細な手順については、[*「Claude CodeとBright DataのBright Data MCPの統合」*](/blog/ai/claude-code-web-mcp)ガイドを参照してください。必要な変更点は、APIキーの代わりにClaudeアカウントで認証を行うことです。 ### ステップ #1: スキルを追加する [ドキュメントで説明されている通り](https://docs.claude.com/en/docs/claude-code/skills)、Claude Codeは次の2か所でスキル（単なるフォルダ）を自動的に検索します： - **グローバル**:`~/.claude/skills/`(Windowsの場合:`C:Users<ユーザー名>.claudeskills`) - **ローカル（プロジェクトベース）**：プロジェクトフォルダ内の`.claude/skills/` Claude Codeプロジェクトでデフォルトのスキルを利用したい場合は、プロジェクトのローカル`.claude/skills/`フォルダにクローンしてください： ```none git clone https://github.com/anthropics/skills.git .claude/skills/ ``` クローン後、プロジェクトフォルダからClaude Codeを起動してスキルを読み込みます。これで完了です！ ### ステップ #2: スキルの統合を確認する 現時点では、Claude Codeには利用可能なスキルを一覧表示する専用コマンドは提供されていません。ロードされているスキルを確認するには、以下のようなプロンプトを記述するだけで済みます： ```none 利用可能なスキルをすべてリストアップ ``` 結果は以下のような表示になります： ![The Skills returned by Claude Code](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760973601732_image.png) `.claude/skills`フォルダからAnthropicのデフォルトスキルが全て正常に読み込まれたことが確認できました。素晴らしい！ ### ステップ #3: Claude Code におけるスキル + Bright Data MCP ツール これでClaude Codeにプロンプトを提示するたびに、Bright Data MCPツールとエージェントスキルの両方にアクセスできるようになります。例えば、次のプロンプトを試してみてください： ```none 以下の記事のMarkdown版を取得してください： "https://www.businessinsider.com/rise-of-vibe-working-coding-microsoft-openai-2025-10" 記事を読み「vibe coding」の概念を理解してください。理解した内容に基づき、開発者Slackチャンネルで共有するのに適した短く軽量なミームGIFを作成してください。 ``` 上記のプロンプトをClaude Codeで実行すると、以下の結果が得られます： ![Task execution in Claude Code](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760975723731_5.gif) Claude`Codeはscrape_as_markdownツール`で記事内容を抽出し、内容を理解した上で`slack-gif-creatorスキルを`適用してGIFを生成します。 生成されたGIFでは「vibe coding」と「still actual work」が交互に表示され、遊び心をもって両者が実は同一であることを示唆しています。出来上がったアニメーションGIFは非常に楽しい仕上がりです： ![The resultign GIF](https://media.brightdata.com/2026/01/s_AA3B94CB4E783A92EA43AC70404CFCC0A639B77CAD36C5A6DFC653977646A82B_1760976230334_6.gif) さらに、わずか32KBなのでSlackでの共有に最適です。素晴らしい！ ## まとめ 本ブログ記事では、Anthropicの新しい*エージェントスキル*機構がClaude Desktop、API、Codeでどのように機能するかを学びました。示した通り、スキルはMCPと完全に統合され、Claudeモデルが目標を達成するために必要なツールと知識の両方を提供します。 また、Bright DataのBright Data MCPが提供する豊富なツールとClaudeスキルを組み合わせて、ウェブスクレイピングやウェブインタラクションを行う詳細な方法も確認しました。Claudeやその他のAIモデルとの連携については、[Bright DataのAIインフラストラクチャ](/ai)をご覧ください。 今すぐBright Dataの無料アカウントを作成し、AI対応のウェブデータツールを実際に体験してください！ お問い合わせ無料トライアル![google social icon](/wp-content/themes/brightdata/assets/images/ic_google.svg) 目次 日本企業向けデータソリューション 日本のトップ企業が信頼するスケーラブルなウェブデータプラットフォーム。日本語24時間サポート、GDPR・個人情報保護法準拠、日本企業20社以上の導入実績。 [詳細を見る](https://brightdata.jp/solutions/data-solutions-for-japanese-companies "詳細を見る") [ ](https://news.ycombinator.com/submitlink?t=Bright+Data+MCP+%2B+Claude+Skills+for+Complex+AI+Workflows&u=https://brightdata.jp/blog/ai/claude-skills-with-web-mcp) [ ](https://www.linkedin.com/shareArticle?mini=true&title=Bright+Data+MCP+%2B+Claude+Skills+for+Complex+AI+Workflows&url=https://brightdata.jp/blog/ai/claude-skills-with-web-mcp) [ ](http://www.reddit.com/submit?title=Bright+Data+MCP+%2B+Claude+Skills+for+Complex+AI+Workflows&url=https://brightdata.jp/blog/ai/claude-skills-with-web-mcp) ## あなたは下記にもご興味がおありかもしれません [ ![OpenHuman with Bright Data](https://media.brightdata.jp/2026/09/OpenHuman-with-Bright-Data.png) ](https://brightdata.jp/blog/ai/openhuman-with-bright-data "Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス") [AI ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### Bright Data CLIを通じたOpenHumanにおける本番対応ウェブアクセス Bright Data CLIをOpenHumanに統合して、AIエージェント向けの本番対応ウェブアクセスとデータ収集を実現します。 09-Sep-2026 3 分読 ](https://brightdata.jp/blog/ai/openhuman-with-bright-data) [ ![Multimodal Web Scraping with MiniMax](https://media.brightdata.jp/2026/09/Multimodal-Web-Scraping-with-MiniMax.png) ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax "MiniMaxによるマルチモーダルウェブスクレイピング") [ウェブデータ ![Antonello Zanini](https://media.brightdata.jp/2022/12/Antonello-Zanini-2-50x50.jpg) Antonello Zanini Technical Writer ### MiniMaxによるマルチモーダルウェブスクレイピング Bright Data Web UnlockerとMiniMax M3ビジョンを組み合わせて、画像やウェブページのスクリーンショットから構造化データを抽出します。 09-Sep-2026 1 分読 ](https://brightdata.jp/blog/%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%83%bc%e3%82%bf/multimodal-web-scraping-with-minimax) [ ![The 10 Best CLI Tools for Codex in 2026](https://media.brightdata.jp/2026/08/The-10-Best-CLI-Tools-for-Codex-in-2026.png) ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex "2026年版 Codex向けCLIツール10選 – テスト＆ランキング") [AI ![Daniel Shashko](https://media.brightdata.jp/2022/04/Daniel-Shashko-2-50x50.png) Daniel Shashko Web Data & AI Expert ### 2026年版 Codex向けCLIツール10選 – テスト＆ランキング Codexをより速く、より有能にする10のCLIツール。サンドボックス内から実際のウェブアクセスを提供するBright Data CLIから始まります。 06-Sep-2026 4 分読 ](https://brightdata.jp/blog/ai/best-cli-tools-for-codex)