01
本文・画像を
AIへ渡す
記事、X、LPの文章を読みやすいMarkdownへ整理。本文から参照する画像もページ別に保存します。
- 長文の要約・比較
- 記事構成や表現の研究
- 要件・論点の抽出
OUTPUT / .md + image folder
AI作業ネイティブなWeb参照ツール
Webページを、
使える材料に変える。
良いサイトを見つけたら、本文、構成、デザイン、部品から今欲しいものを1つ選んで保存。スクリーンショットでは拾えない構造と実装情報を、AIへそのまま渡せます。
アカウント不要
運営サーバーなし
ローカル保存
オープンソース
Four focused tools
何に使うかで、
選ぶ。
4つのボタンは、同じ情報を別名で出す機能ではありません。それぞれが違う作業を最短で始められるよう、保存形式まで分けています。
本文・画像を
02
ページ構成・CTAを
調べる
セクション順、見出し、CTAの文言・位置・反復、リンク、色、フォント、画像を構造化します。
- LPの導線・情報設計を比較
- 競合サイトの訴求を整理
- AIへ構成案を依頼
OUTPUT / analysis.zip
Markdown + JSON + images
Markdown + JSON + images
03
デザイン仕様を
取り出す
色、文字、余白、角丸、影、コンテナ、ブレークポイント、レイアウトを実装可能な資料へ変換します。
- AIコーディングの入力
- デザイン規則の研究
- 自社ブランドへの再構成
OUTPUT / CSS + JSON
Tailwind + layout guide
Tailwind + layout guide
04
必要な部品だけ
採集する
ページ上のボタンやカードをクリック。選んだ部品のHTML、計算済みCSS、プレビューだけを保存します。
- コンポーネント単位の研究
- ローカルで見た目を確認
- AIへ部品実装を依頼
OUTPUT / HTML + CSS
preview + JSON + guide
preview + JSON + guide
Simple workflow
3ステップで、
次の作業へ。
URLを貼り直したり、別サービスへアップロードしたりする必要はありません。今Chromeで見えているページを、その場で扱います。
参考にしたいページを開く
LP、サービスサイト、記事、Xなど、今表示しているタブが対象です。
欲しい材料を1つ選ぶ
本文、構成、デザイン、部品。作業の目的に合うボタンを押します。
保存ファイルをAIへ渡す
Downloads内の用途別ファイルを、Codex、Claude、その他の制作環境で使えます。
Capture & preserve
見た目を残す機能も、
妥協しない。
表示範囲、ページ全体、A4縦PDFを用途別に保存。長大ページは文字が読める複数ページPDFへ自動切替できます。
VISIBLE.PNG
FULL-PAGE.PNG / PDF
A4-PORTRAIT.PDF
URL・保存日時を任意で付与
PNGの下部またはPDF各ページへ、参照元URLと端末の保存日時を追加できます。
裁判用の証拠パック
号証表示付き提出準備PDF、証拠説明書ドラフト、取得報告書、MHTML、ログ、SHA-256を整理します。提出・時刻認証は自動実行しません。
Local first
あなたの参照資料は、
あなたの端末へ。
PageGrabは、取得した本文・分析・画像・PDFを開発者へ送りません。利用者が選んだ操作だけを実行し、ChromeのDownloadsへ保存します。
PageGrab固有のバックエンド、アカウント、クラウド保存はありません。
アクセス解析、テレメトリー、広告SDK、閲覧プロファイル作成を行いません。
画像入り出力では、元ページが参照する画像URLへ直接取得リクエストを行います。
良いサイトを見つけた瞬間を、次の制作へつなげる。
PageGrabは無料で使えます。まずはChromeへ追加し、気になるページで4つのボタンを試してください。