• フルページ
  • 要素指定
  • 分析
  • 手動確認

Restpack MCPを使ってAIでウェブサイトのスクリーンショットを撮影する方法

RestpackをAIクライアントに一度接続するだけ。あとはURLを伝え、何を見たいかを指示するだけで完了します。

このページについてAIに聞く

すぐに答え

AIを使ってどのようにスクリーンショットを撮るのですか?

URLと指示をAIに伝えるだけで、Restpack MCPが起動して画像を撮影します。ページ全体、または特定のパーツのみを指定して取得可能です。これにより、視覚的なデータを即座に活用できます。

取得できる結果

スクリーンショットの活用シーン

リクエストに応じて、AIがさまざまな形式の視覚データを生成します。

フルページ

ページ全体のキャプチャ

サイトのスクロール範囲全体をAIが取得します。レイアウト全体を一枚の画像として確認できます。

要素指定

特定パーツのキャプチャ

特定のボタンやヘッダーに焦点を当てるようAIに指示できます。必要な部分だけを切り出して表示します。

分析

視覚的なフィードバック

画像を撮影した後、AIはそのレイアウトやテキストを解析できます。チャットの中で即座に視覚的な文脈を把握できます。

手動確認

人間による確認

AIが画像を撮影しますが、それが正しいかどうかはあなたが判断します。意図した場所が違う場合は、AIに別の要素を指定し直してください。

ワークフロー

URLが入力された際、AIが行う処理

ページのナビゲーションやレンダリングといった重い作業はすべてAIが処理します。

  1. URLへアクセス

    エージェントが、チャットで指定された特定のウェブアドレスに移動します。

    capture_screenshot
  2. 表示のレンダリング

    ツールがページの要素やレイアウトを処理し、視覚データの準備を行います。

    capture_screenshot
  3. 画像の撮影

    ページ全体か特定の部分か、指示に基づいてAIが撮影を実行します。

    capture_screenshot
  4. 結果の出力

    撮影された画像がチャットインターフェースに送られ、画面に表示されます。

    capture_screenshot

試してみる

以下のプロンプトをコピーして開始

これらのプロンプトを使えば、すぐにスクリーンショットツールを起動できます。

出発点

プレースホルダーのURLや要素名は、実際に作業したいサイトのものに書き換えてください。

Restpack Connector

準備完了です。MCPクライアントを選択し、セットアップ手順に従ってください。

コネクタリンクhttps://edge.vinkius.com/vk_preview_alqz6YW08rB7Oo3fwGybPimVT74yAeYxV7vxvQVe/mcp

Claude Desktop

以下の手順で数秒で接続できます。

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — Restpack capabilities are ready to use.
設定 · claude_desktop_config.jsonコピー
{
  "mcpServers": {
    "restpack-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_alqz6YW08rB7Oo3fwGybPimVT74yAeYxV7vxvQVe/mcp"
    }
  }
}
チャットにコピー04
  • https://example.com のフルページのスクリーンショットを撮って

  • https://example.com のメインヒーローセクションのスクリーンショットを撮って

  • https://example.com の料金表のスクリーンショットを撮って

  • https://example.com のフッターのスクリーンショットを撮ってもらえますか?

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

ここから始める

Restpackを一度接続すれば、あとは指示するだけです。

リンクをクリックして、MCPをクライアントに接続してください。認証情報は暗号化されます。詳細なセットアップガイドはメインページで確認できます。

RestpackをAIに接続する

FAQ

スクリーンショット機能の仕様について

  • 01

    ログインが必要なページのスクリーンショットは撮れますか?

    いいえ。このツールは、パブリックに公開されている状態、または現在のセッションで見えている状態のページをキャプチャします。ツール単体で認証壁を突破することはできません。

  • 02

    撮影前にウェブサイトの内容を編集することはできますか?

    いいえ。ツールはページに存在する現在の状態をキャプチャするだけです。テキストや色、レイアウト要素を変更することはできません。

  • 03

    特定のボタンだけをキャプチャすることはできますか?

    はい。ページ内の特定の要素やセレクターをターゲットにするよう、AIに指示できます。

  • 04

    撮影した画像はコンピュータに保存されますか?

    いいえ。AIはチャットインターフェース内に画像を表示します。ローカルに保存したい場合は、手動で保存する必要があります。

  • 05

    AIが自動でボタンをクリックしてくれることはありますか?

    いいえ。このツールは現在の表示内容をキャプチャするために設計されています。フォームの入力や、複数のステップにわたる操作といった複雑なユーザーインタラクションは行いません。

  • Restpackについて他に質問がありますか? Restpack Connectorの全機能を見る

『Restpack』を Claude、Cursor、ChatGPT などに接続