WEB PAGE → WORKING FILES

良いページを、
AIで使える
ファイルへ。

本文と画像、構成・CTA、色・文字・余白、必要な部品。今ほしい情報だけを選び、
Markdown・JSON・CSS・HTMLとして保存できます。

無料でChromeに追加 実際の出力を見る
アカウント不要 運営サーバーなし ローカル保存 オープンソース
4つの用途を選べるPageGrabのChrome拡張画面
SELECT → SAVE → USE
Actual output

押したあと、
これが残る。

スクリーンショットだけでは、AIは文章の階層も、CTAの反復も、余白の規則も読めません。PageGrabは、次の作業に使うファイルまで作ります。

DOWNLOADS / PAGEGRAB
pagegrab/ ├── text/ └── page.md ├── images/ └── img_001.png ├── analysis/ └── analysis.zip ├── design-system/ ├── tokens.css ├── tokens.json └── DESIGN-REFERENCE.md └── components/ ├── component.html ├── component.css └── preview.html
AI INPUTPAGE.MD
# 良いページを、AIで使えるファイルへ

## 1ページから始められること
- 長い記事をMarkdownで要約する
- LPのセクション順とCTAを比較する
- 色・文字・余白をAIコーディングへ渡す
PAGE STRATEGYANALYSIS.MD
| # | Pattern | Heading | CTAs |
| 1 | hero | 良いページを… | 無料で追加 |
| 2 | features | 押したあと… | サンプル |

CTA: 2回 / hero + final
DESIGN TOKENSTOKENS.CSS
:root {
  --color-primary: #171812;
  --color-accent: #c8f560;
  --spacing-base: 8px;
  --container-sm: 1180px;
}
COMPONENTHTML + CSS
<a class="pagegrab-cta">
  無料でChromeに追加
</a>

.pagegrab-cta { min-height: 52px; }
実際のサンプル一式をダウンロード

PageGrab自身の公開ページをもとに、現在のファイル生成処理で作った権利クリアなデモです。ページのDOM、読み込み済み素材、サイト権限によって取得結果は変わります。

Choose the job

何をしたいかで、
選ぶ。

要約、LP研究、デザイン実装、部品の再構成。目的を選ぶと、その作業に必要な形式だけがDownloadsへ保存されます。

01

本文・画像を
AIへ渡す

記事、X、LPの文章を読みやすいMarkdownへ整理。本文から参照する画像もページ別に保存します。

  • 長文の要約・比較
  • 記事構成や表現の研究
  • 要件・論点の抽出
OUTPUT / .md + image folder
02

ページ構成・CTAを
調べる

セクション順、見出し、CTAの文言・位置・反復、リンク、色、フォント、画像を構造化します。

  • LPの導線・情報設計を比較
  • 競合サイトの訴求を整理
  • AIへ構成案を依頼
OUTPUT / analysis.zip
Markdown + JSON + images
03

デザイン仕様を
取り出す

色、文字、余白、角丸、影、コンテナ、ブレークポイント、レイアウトを実装可能な資料へ変換します。

  • AIコーディングの入力
  • デザイン規則の研究
  • 自社ブランドへの再構成
OUTPUT / CSS + JSON
Tailwind + layout guide
04

必要な部品だけ
採集する

ページ上のボタンやカードをクリック。選んだ部品のHTML、計算済みCSS、プレビューだけを保存します。

  • コンポーネント単位の研究
  • ローカルで見た目を確認
  • AIへ部品実装を依頼
OUTPUT / HTML + CSS
preview + JSON + guide
Simple workflow

開く。選ぶ。
次の作業へ。

今Chromeで見えているページを対象に、利用者が選んだ時だけ処理します。保存したファイルは、使いたいAIや制作環境へ自分で渡せます。

STEP 01 / OPEN

参考にしたいページを開く

LP、サービスサイト、記事、Xなど、今表示しているタブが対象です。

STEP 02 / SELECT

欲しい材料を1つ選ぶ

本文、構成、デザイン、部品。作業の目的に合うボタンを押します。

STEP 03 / USE

保存ファイルをAIへ渡す

Downloads内の用途別ファイルを、Codex、Claude、その他の制作環境で使えます。

Capture & preserve

見た目を残す機能も、
妥協しない。

表示範囲、ページ全体、A4縦PDFを用途別に保存。長大ページは文字が読める複数ページPDFへ自動切替できます。

VISIBLE.PNG FULL-PAGE.PNG / PDF A4-PORTRAIT.PDF
URL・保存日時を任意で付与

PNGの下部またはPDF各ページへ、参照元URLと端末の保存日時を追加できます。

証拠保全・裁判提出準備

Early Accessとして、号証表示付きPDF、証拠説明書ドラフト、取得報告書、MHTML、ログ、SHA-256を整理します。提出・時刻認証は自動実行しません。

Local first

あなたの参照資料は、
あなたの端末へ。

PageGrabは、取得した本文・分析・画像・PDFを開発者へ送りません。利用者が選んだ操作だけを実行し、ChromeのDownloadsへ保存します。

運営サーバーなし

PageGrab固有のバックエンド、アカウント、クラウド保存はありません。

分析・広告なし

アクセス解析、テレメトリー、広告SDK、閲覧プロファイル作成を行いません。

通信範囲を明示

画像入り出力では、元ページが参照する画像URLへ直接取得リクエストを行います。

参考から再構成へ

元サイトの文章・ロゴ・画像を転用せず、観察した構造や規則を自分のブランドと素材へ作り直して使います。

次に見つけた良いページを、次の制作へ。

PageGrabは現在無料で公開中です。まずはChromeへ追加し、気になるページを1つ、使えるファイルとして残してみてください。

Chromeに追加 ↗