---
title: 長いページを1枚で撮るChrome拡張「コビト・ツールボックス」。ソース保存と計測ログも
description: 縦長のページや管理画面を1枚で撮る、ページのソースと計測タグをまとめて残す、テスト購入の計測を○×で確かめる。仕事で詰まるたびに機能を足してきた自作のChrome拡張の中身と、作って分かったことをまとめました。
image: https://cobitologic.com/hubfs/library-eyecatch/tools-toolbox.png
---

[![ロゴテキスト](https://cobitologic.com/hubfs/cobito_logic_header_logo_outlined_v2.svg)](https://cobitologic.com/)

 隣で考えて、一緒に動かす。

- [サービス](https://cobitologic.com/services)
  
  SERVICES
  
  [サービス一覧 →](https://cobitologic.com/services)[課題から探す →](https://cobitologic.com/issues)
  
  どれを頼むか決まっていなくても大丈夫です

    - [B2Bマーケティング伴走何をやるかを決めるところから、隣で動きます](https://cobitologic.com/services/b2b-marketing)
    - [Webサイト制作・CRM構築サイトと問い合わせの受け皿を、ひとつに](https://cobitologic.com/services/web)
    - [サービス資料・ホワイトペーパー制作読み進めやすい骨子とデザインで制作します](https://cobitologic.com/services/documents)
    - [アクセス解析・データ整備効果が分からない状態をなくします](https://cobitologic.com/services/analytics)
- [料金](https://cobitologic.com/pricing)
- [ライブラリ](https://cobitologic.com/library)
- コビトロジックについて
  
    - [代表挨拶なぜ巨人ではなく、コビトなのか](https://cobitologic.com/about)
    - [進め方と、考え方頼んだあと、何が起きるか](https://cobitologic.com/process)
    - [終わりなき交流会松山で続けている集まり](https://cobitologic.com/community/owarinaki-koryukai)
- [お問い合わせ](https://cobitologic.com/contact)

# 長いページを1枚で撮るChrome拡張「コビト・ツールボックス」。ソース保存と計測ログも

作ったもの2026年11月03日

私の仕事には、B2Bのサイトやランディングページ（広告や案内の受け皿になる1枚もののページ）を見て、構成を考えたり、直すところを客先に説明したりする場面が多くあります。縦に長いページを見せるたびに、スクリーンショットを何枚も撮ってつなぐ作業が続きました。NotionやGA4、HubSpotの管理画面は、ページ全体ではなく中の枠だけがスクロールするので、ふつうの撮り方では1枚に収まりません。広告の計測タグが正しく動いたかの確認も、毎回手作業でした。こうした作業をまとめて引き受けるChromeの拡張機能を作り、「コビト・ツールボックス」と名前を付けました。

## この道具でできること

- ページ全体を1枚の画像で撮る（Alt+Shift+S）。画面の解像度のまま保存し、長すぎるページは自動で分けて保存する
- NotionやGA4、HubSpotのように中の枠だけがスクロールする画面や、ページに埋め込まれた別の枠の中を撮る
- ページのソースを保存する。元のHTML、表示したあとのHTML、CSSに加えて、タイトル・説明文・見出し・検索エンジン向けの構造化データ・計測タグのIDを1枚のメモにまとめる
- テスト購入の間に動いた計測を記録する。GA4・Google広告・Yahoo!広告・Metaへの送信と、ページが計測用に用意するデータの置き場（dataLayer）を控え、7項目の○×つきのレポートにする
- YouTubeの文字起こしを全文コピーして、ファイルにも残す

## 使い方の流れ

1. Chromeの拡張機能の画面で、フォルダを読み込む（最初の1回だけ）
2. 撮りたいページを開き、ツールバーのアイコンを押す。ショートカットキーでも動く
3. メニューから「撮る」「ソース保存」「YouTube」「計測ログ」を選ぶ。計測ログは、記録を始めてからテスト購入をして、もう一度押して止める
4. ダウンロードフォルダの下に、機能ごとのフォルダで保存される。フォルダ名は機能ごとに変えられる

## 仕組み

Chromeの拡張機能の現行の方式（Manifest V3）で作っています。見えている範囲を上から順に撮り、拡張の中でつなぎ合わせて1枚にします。撮影中はページが自動でスクロールし、終わると元の位置に戻ります。上に貼りついたまま動かないヘッダーは、2枚目から透明にして、同じヘッダーが何度も写らないようにしています。

中の枠だけがスクロールする画面では、画面の中でいちばん大きくスクロールする部分を探し、そこだけを動かして切り抜きます。

**撮った画像やソース、計測の記録を外へ送ることはありません。**すべて使っている人のPCのダウンロードフォルダに保存されます。どのサイトでも動くように、全サイトへのアクセスとダウンロードの権限を求めます。部品ごとにテストを書いていて、機能を足すたびに流しています。

## 作ってみて分かったこと

作り始めは「長いページを1枚で撮る」だけの道具でした。半月ほど使ううちに、ソース保存、計測ログ、枠の中の撮影と、仕事で詰まるたびに機能が増えています。

画像の大きさでは失敗がありました。最初はブラウザの表示の大きさに合わせて縮めて保存していたため、表示を200%に拡大しているPCでは、縦横が半分、画素数が4分の1に落ちていました。いまは画面の解像度のまま保存するのを既定にしています。

AIに画像を読ませるときの形も変えました。縦に長い1枚をAIに渡すと、AIの側で縮められて文字が潰れます。そこで、横2000px以下・縦1400pxごとに、少し重ねながら番号付きで分けて保存する設定を足しました。**ページの中身をAIに読ませるときは、画像より先にソース保存のメモを渡す方が確実です。**画像は、見た目を判断するときにだけ使っています。

人に渡したときに分かったこともあります。「エラーが出る」と言われて調べると、Chromeの管理画面の上で試していました。拡張機能はChrome自身の画面では動きません。いまは、そうした画面ではメニューに「このページでは動きません」と出します。自分ひとりで使っていたら、気づけなかったことです。

このツールボックスは広く配ってはいませんが、必要な方にはお渡ししています。コピーしたものを順番に貼る[順番貼り付け](https://cobitologic.com/library/tools-paste-queue)や、たまったスクリーンショットを片づける[スクショのお掃除](https://cobitologic.com/library/tools-screenshot-cleaner)と組み合わせて使っています。

同じ考え方で、あなたの会社の仕事に合わせた道具も作れます。

あわせて読む: [自作の道具の一覧](https://cobitologic.com/tools)｜[コピーを溜めて順番に貼る「順番貼り付け」](https://cobitologic.com/library/tools-paste-queue)｜[7日たったスクショを毎朝ごみ箱へ送る「スクショのお掃除」](https://cobitologic.com/library/tools-screenshot-cleaner)

「うちの場合はどうなる？」を、一緒に整理しませんか。

マーケティングの悩みを、無料の壁打ちで一緒に言葉にします。

45分・オンラインOK ／ 売り込みはしません ／ 2営業日以内にご返信します

[まず話してみる（無料45分）→](https://cobitologic.com/contact)

[サービス一覧](https://cobitologic.com/services)｜[料金・ご依頼の流れ](https://cobitologic.com/pricing)

## あわせて読みたい

[![](https://cobitologic.com/hs-fs/hubfs/library-eyecatch/tools-tasukivoice.png?width=1200&height=630&name=tools-tasukivoice.png) 2026.11.03 タスキボイス：朝礼や申し送りを話すだけで、タスクリストと日報にする試作アプリ](https://cobitologic.com/library/tools-tasukivoice) [![](https://cobitologic.com/hs-fs/hubfs/library-eyecatch/tools-journal.png?width=1200&height=630&name=tools-journal.png) 2026.11.03 録音を1日1ページの日記にして、予定とタスクを拾い出すジャーナルの仕組み](https://cobitologic.com/library/tools-journal) [![](https://cobitologic.com/hs-fs/hubfs/library-eyecatch/tools-roleplay-voice.png?width=1200&height=630&name=tools-roleplay-voice.png) 2026.11.03 音声ロープレ：電話に出る客の役をAIに任せ、声で営業の練習をする](https://cobitologic.com/library/tools-roleplay-voice)

[ライブラリの一覧へ →](https://cobitologic.com/library)

サービス

[サービス一覧](https://cobitologic.com/services)

[B2Bマーケティング伴走](https://cobitologic.com/services/b2b-marketing)

[Webサイト制作・CRM構築](https://cobitologic.com/services/web)

[サービス資料・ホワイトペーパー制作](https://cobitologic.com/services/documents)

[アクセス解析・データ整備](https://cobitologic.com/services/analytics)

知る・調べる

[課題から探す](https://cobitologic.com/issues)

[料金・ご依頼の流れ](https://cobitologic.com/pricing)

[ライブラリ](https://cobitologic.com/library)

[ツール集](https://cobitologic.com/tools)

[よくある質問](https://cobitologic.com/faq)

コビトロジック

[代表挨拶](https://cobitologic.com/about)

[進め方と、考え方](https://cobitologic.com/process)

[終わりなき交流会](https://cobitologic.com/community/owarinaki-koryukai)

[松山の広告・イベント窓口](https://cobitologic.com/ja-jp/matsuyama)

[お問い合わせ](https://cobitologic.com/contact)

@cobito logic

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "角田和樹",
    "url" : "https://cobitologic.com/library/author/角田和樹"
  },
  "datePublished" : "2026-11-03T14:13:07.000Z",
  "headline" : "長いページを1枚で撮るChrome拡張「コビト・ツールボックス」。ソース保存と計測ログも",
  "image" : [ "https://cobitologic.com/hubfs/library-eyecatch/tools-toolbox.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://cobitologic.com/library/tools-toolbox",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://cobitologic.com/hubfs/brand/cobito_logic_logo.png"
    }
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Organization",
    "name" : "コビトロジック"
  },
  "dateModified" : "2026-11-03",
  "datePublished" : "2026-11-03",
  "description" : "縦長のページや管理画面を1枚で撮る、ページのソースと計測タグをまとめて残す、テスト購入の計測を○×で確かめる。仕事で詰まるたびに機能を足してきた自作のChrome拡張の中身と、作って分かったことをまとめました。",
  "headline" : "<span id="hs_cos_wrapper_name" class="hs_cos_wrapper hs_cos_wrapper_meta_field hs_cos_wrapper_type_text" style="" data-hs-cos-general-type="meta_field" data-hs-cos-type="text" >長いページを1枚で撮るChrome拡張「コビト・ツールボックス」。ソース保存と計測ログも</span>",
  "image" : [ "https://244594677.fs1.hubspotusercontent-na2.net/hubfs/244594677/library-eyecatch/tools-toolbox.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://cobitologic.com/library/tools-toolbox",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://244594677.fs1.hubspotusercontent-na2.net/hubfs/244594677/brand/cobito_logic_logo.png"
    },
    "name" : "コビトロジック"
  }
}
```