Difframe 作成者: Kite

実装中のページの上に、参考サイトや Figma プロトタイプを「スクリーンショットではなく実際に動く iframe」として重ねて表示する、ピクセルパーフェクト比較用ツールです。

実際のページをオーバーレイとして表示するので、常に最新の状態を参照でき、スクロールも実際の挙動のまま比較できます。

主な機能:

• ブレンドモード「差分」: 一致部分が黒に沈み、ズレだけが浮かび上がる
• 実装ページとオーバーレイのスクロール連動
• クリック・スクロールの操作対象 (ページ / オーバーレイ) を明示的に切り替え
• プリセットをページ別 / ホスト別に保存(URL・不透明度・拡大率・サイズ・位置・ブレンドモード)
• タブスコープ: タブごとにプリセットを適用することで、PC 用と SP 用を同時に比較
• iframe 埋め込みを拒否するサイトには画像モードを利用可能
• Figma の共有リンクはそのまま貼るだけで埋め込み用 URL に自動変換

Difframe はデータを一切収集しません。参照ページを iframe で表示するために、フレーム表示を拒否するヘッダ (X-Frame-Options / CSP) を、オーバーレイを有効にしたタブに限って除去します。これはタブ単位のセッションルールで行われ、タブを閉じると削除されます。他のタブや通常の閲覧には影響しません。