スクリーンショットに赤丸を描いて「ここの間隔を少し詰めてください」とコメントしていた時代がありましたよね。Paper Snapshotはそのスクリーンショット自体をなくしました。ライブサイトをまるごとキャプチャして、編集可能なレイヤーとしてキャンバスに貼り付けるんです。
これは何?
Paper SnapshotはPaperチームが作ったChrome拡張機能です。 仕組みはシンプルです。Chromeで任意のウェブサイトを開き、拡張機能を起動するとそのページのセクションをキャプチャして、PaperキャンバスにHTML/CSSの編集可能なレイヤーとして直接貼り付けてくれます。スクリーンショットではありません。実際のHTML構造とCSSスタイルがそのまま乗ってくるんです。
Paperをご存知でない方に簡単に説明すると、Radix UIを作ったStephen Haneyが2024年に創業したデザインツールです。AccelがリードしてシードとしてUS$4.2Mを調達し、現在オープンアルファの状態です。 コアコンセプトはシンプルです — キャンバス自体がHTML/CSSで動いています。Figmaのような独自フォーマットではなくウェブ標準ベースなので、デザインしたものをReactやTailwindとして直接書き出せます。
SnapshotはこのPaperキャンバスの機能を一段階拡張したものです。これまでは空のキャンバスからデザインを新しく始めるか、エージェントに作ってもらうしかありませんでした。でも今は、すでに動いているプロダクションサイトから始めることができます。 「スタート地点をプロダクションから持ってくる」というのが核心です。
Google Stitchとの違いは?
最近GoogleがStitchというAI UIデザインツールを公開しました。Stitchはテキストプロンプトでつくれるツールで、Paper SnapshotはすでにあるサイトをキャプチャしてHTML/CSSで編集できるツールです。方向が正反対です — Stitchは0→1、Snapshotは1→1.1です。
何が変わるのか?
これまでライブサイトをデザインに取り込む方法はスクリーンショットしかありませんでした。スクリーンショットを撮り、Figmaに貼り付け、その上にレイヤーを重ねて修正の方向性を示します。問題は、そのスクリーンショットがただの画像だということです。ボタン一つ移動させるには、また描き直さなければなりません。
| スクリーンショット方式 | Paper Snapshot | |
|---|---|---|
| キャプチャ結果 | フラット画像 (PNG/JPG) | 編集可能なHTML/CSSレイヤー |
| テキスト修正 | 不可 (画像の上に新たに書く) | すぐに修正可能 |
| レイアウト変更 | 不可 (描き直しが必要) | 要素の移動・削除・追加が可能 |
| コード書き出し | 不可 | React / Tailwindで直接書き出し |
| AIエージェント連携 | 不可 | MCPでCursor、Claude Codeなどと連携 |
Paperの公式ロードマップでもSnapshotをこう説明しています — 「No more drawing on screenshots.」 スクリーンショットに絵を描く時代が終わったということです。キャプチャしたサイトのHTML/CSSがそのままPaperキャンバスに乗るので、実際の要素を直接操作できます。
実務でどんな違いが生まれるか考えてみましょう。デザイナーが「このランディングページのヒーローセクションの間隔を調整して、CTAボタンの色を変えてみよう」となったとき、これまではスクリーンショットを撮って → Figmaで似たように描き直して → 修正案を作って → 開発者に渡していました。Snapshotなら? サイトをキャプチャ → Paperで直接修正 → エージェントがコードに反映。中間の翻訳プロセスがなくなります。
プロダクションから始まってプロダクションへ戻るループが完成するわけです。 Paperチームがブログで強調した「双方向ワークフロー」 — ライブアプリのセクションをキャンバスに引き込んで空間的に探索し、決定が終わったらコードに押し戻す — この最後のピースがSnapshotです。
始め方のポイント
- Paper Snapshot Chrome拡張機能のインストール
Chrome Web StoreからPaper Snapshotをインストールしましょう。わずか301KBの軽量拡張機能です。 - Paperアカウントの準備
app.paper.designで無料アカウントを作成します。デスクトップアプリを入れるとMCP連携も可能です。オープンアルファなので無料で使えます。 - キャプチャするサイトを開く
Chromeで修正したいウェブサイトを開きます。自社サイトでも、競合サイトでも、インスピレーションをもらったサイトでも何でも大丈夫です。 - Snapshotでキャプチャ
拡張機能のアイコンをクリックして、キャプチャするエリアを選択します。キャプチャされたHTML/CSSレイヤーがPaperキャンバスにそのまま貼り付けられます。 - キャンバスで編集 → コードを書き出す
テキスト、色、レイアウトを自由に修正して、Copy as ReactやTailwindで書き出しましょう。AIエージェントを接続していれば「この修正をコードに反映して」と依頼するだけで完了です。
覚えておくこと
Paperはまだオープンアルファです。 チームコラボレーション、コンポーネントシステム(スロット、プロップス)、CSS Gridはまだ開発中です。 Figmaレベルの成熟度を期待すると失望するかもしれません。ただ、フロントエンドエンジニアや1〜2人チームが素早くプロトタイプするには、今でも十分使えます。
